vue 实现横向时间轴

Easter79
• 阅读 799
效果:

<template>
    <!--时间线-->
    <div class="timeLine" style="overflow: hidden;">
        <div class="content">
            <p class="tit">{{timeLineList[timeIndex].year}}</p>
            <p>{{timeLineList[timeIndex].info}}</p>
        </div>
        <div class="my_timeline_prev" @click="moveLeft">
            <img src="../../../static/images/case_detail_left.png" class="my_timeline_node"/>
            <div class="my_timeline_item_line" style="margin-top: -18px;"></div>
            <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">上</div>
        </div>
        <div class="ul_box">
            <ul class="my_timeline" ref="mytimeline" style="margin-left: 10px;">
                <li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index">
                    <!--圈圈节点-->
                    <div class="my_timeline_node" :style = " {backgroundColor: item.bgcolor, width: item.size + 'px', height: item.size + 'px'}" @click="changeActive(index)" :class="{active: index == timeIndex}"></div>
                    <!--线-->
                    <div class="my_timeline_item_line"></div>
                    <!--标注-->
                    <div class="my_timeline_item_content" :style="{color: item.color, fontSize: item.fontsize + 'px'}">
                        {{item.timestamp}}
                    </div>
                </li>
            </ul>
        </div>
        <div class="my_timeline_next" @click="moveRight">
            <img src="../../../static/images/case_detail_right.png" class="my_timeline_node"/>
            <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">下</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'timeLine',
    data() {
        return {
            timeIndex: 2,
            timeLineList: [{
                  timestamp: '2012年',
                  color: '#999',
                  fontsize: 18,
                  size: '28',
                  bgcolor: '#e4e7ed',
                  icon: 'el-iconprev',
                  year: '2012',
                  info: 'chengli'
                }, {
                  timestamp: '2013年',
                  color: '#999',
                  fontsize: 18,
                  size: '28',
                  bgcolor: '#e4e7ed',
                  year: '2013',
                  info: '工作室更名为:西安拓美网络科技有限公司'
                }, {
                  timestamp: '2014年',
                  color: '#999',
                  fontsize: 18,
                  size: '28',
                  bgcolor: '#e4e7ed',
                  year: '2014',
                  info: '工作室更名为:西安拓美网络科技有限公司'
                }, {
                  timestamp: '2015年',
                  color: '#999',
                  fontsize: 18,
                  year: '2015',
                  size: '28',
                  bgcolor: '#e4e7ed',
                  info: '工作室更名为:西安拓美网络科技有限公司'
                }, {
                  timestamp: '2016年',
                  color: '#999',
                  fontsize: 18,
                  size: '28',
                  year: '2016',
                  bgcolor: '#e4e7ed',
                  info: '工作室更名为:西安拓美网络科技有限公司'
                }, {
                  timestamp: '2017年',
                  color: '#999',
                  fontsize: 18,
                  size: '28',
                  bgcolor: '#e4e7ed',
                  year: '2017',
                  info: '工作室更名为:西安拓美网络科技有限公司'
                }, {
                  timestamp: '2018年',
                  color: '#999',
                  fontsize: 18,
                  size: '28',
                  bgcolor: '#e4e7ed',
                  year: '2018',
                  info: '工作室更名为:西安拓美网络科技有限公司'
                }, {
                  timestamp: '2019年',
                  color: '#999',
                  fontsize: 18,
                  year: '2019',
                  bgcolor: '#e4e7ed',
                  size: '28',
                  info: '工作室更名为:西安拓美网络科技有限公司'
                }]
        }
    },
    methods: {
        changeActive(index) {
            this.timeIndex = index;
        },
        moveLeft()  {
            let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
            let listNum = 0;
            if(marginLeft <= 10 && (marginLeft >= -650)){
                this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px';
            }
        },
        moveRight() {
            let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
            if(marginLeft < (-200)){
                this.$refs.mytimeline.style.marginLeft = marginLeft + 220 + 'px';
            }
        }
    }
}
</script>

<style scoped>
.my_timeline_prev, .my_timeline_next {
    float: left;
    display: inline-block;
    background-color: #fff;
    cursor: pointer;
}
.my_timeline_prev {
    width: 200px;
    float: left;
}
.my_timeline_next {
    width: 34px;
    margin-left: -22px;
}
.ul_box {
    width: 900px;
    height: 60px;
    display: inline-block;
    float: left;
    margin-top: 2px;
    overflow: hidden;
}
.my_timeline_item {
    display: inline-block;
    width: 220px;
}
.my_timeline_node {
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
}
.my_timeline_node.active {
    background-color: #fff !important;
    border: 6px solid #f68720;
}
.my_timeline_item_line {
    width: 100%;
    height: 10px;
    margin: -14px 0 0 28px;
    border-top: 2px solid #E4E7ED;
    border-left: none;
}
.my_timeline_item_content {
    margin: 10px 0 0 -10px;
}
</style>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
SpringBoot 使用yml配置 mybatis+pagehelper+druid+freemarker实例
<divid"article\_content"class"article\_contenttrackingad"datamod"popu\_307"datadsm"post"style"overflow:hidden;"<divclass"markdown\_views"<h2id"springboot使用ym
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k