vue 实现横向时间轴

1效果：
2
3<template>
4    <!--时间线-->
5    <div class="timeLine" style="overflow: hidden;">
6        <div class="content">
7            <p class="tit">{{timeLineList[timeIndex].year}}</p>
8            <p>{{timeLineList[timeIndex].info}}</p>
9        </div>
10        <div class="my_timeline_prev" @click="moveLeft">
11            <img src="../../../static/images/case_detail_left.png" class="my_timeline_node"/>
12            <div class="my_timeline_item_line" style="margin-top: -18px;"></div>
13            <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">上</div>
14        </div>
15        <div class="ul_box">
16            <ul class="my_timeline" ref="mytimeline" style="margin-left: 10px;">
17                <li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index">
18                    <!--圈圈节点-->
19                    <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>
20                    <!--线-->
21                    <div class="my_timeline_item_line"></div>
22                    <!--标注-->
23                    <div class="my_timeline_item_content" :style="{color: item.color, fontSize: item.fontsize + 'px'}">
24                        {{item.timestamp}}
25                    </div>
26                </li>
27            </ul>
28        </div>
29        <div class="my_timeline_next" @click="moveRight">
30            <img src="../../../static/images/case_detail_right.png" class="my_timeline_node"/>
31            <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">下</div>
32        </div>
33    </div>
34</template>
35
36<script>
37export default {
38    name: 'timeLine',
39    data() {
40        return {
41            timeIndex: 2,
42            timeLineList: [{
43                  timestamp: '2012年',
44                  color: '#999',
45                  fontsize: 18,
46                  size: '28',
47                  bgcolor: '#e4e7ed',
48                  icon: 'el-iconprev',
49                  year: '2012',
50                  info: 'chengli'
51                }, {
52                  timestamp: '2013年',
53                  color: '#999',
54                  fontsize: 18,
55                  size: '28',
56                  bgcolor: '#e4e7ed',
57                  year: '2013',
58                  info: '工作室更名为：西安拓美网络科技有限公司'
59                }, {
60                  timestamp: '2014年',
61                  color: '#999',
62                  fontsize: 18,
63                  size: '28',
64                  bgcolor: '#e4e7ed',
65                  year: '2014',
66                  info: '工作室更名为：西安拓美网络科技有限公司'
67                }, {
68                  timestamp: '2015年',
69                  color: '#999',
70                  fontsize: 18,
71                  year: '2015',
72                  size: '28',
73                  bgcolor: '#e4e7ed',
74                  info: '工作室更名为：西安拓美网络科技有限公司'
75                }, {
76                  timestamp: '2016年',
77                  color: '#999',
78                  fontsize: 18,
79                  size: '28',
80                  year: '2016',
81                  bgcolor: '#e4e7ed',
82                  info: '工作室更名为：西安拓美网络科技有限公司'
83                }, {
84                  timestamp: '2017年',
85                  color: '#999',
86                  fontsize: 18,
87                  size: '28',
88                  bgcolor: '#e4e7ed',
89                  year: '2017',
90                  info: '工作室更名为：西安拓美网络科技有限公司'
91                }, {
92                  timestamp: '2018年',
93                  color: '#999',
94                  fontsize: 18,
95                  size: '28',
96                  bgcolor: '#e4e7ed',
97                  year: '2018',
98                  info: '工作室更名为：西安拓美网络科技有限公司'
99                }, {
100                  timestamp: '2019年',
101                  color: '#999',
102                  fontsize: 18,
103                  year: '2019',
104                  bgcolor: '#e4e7ed',
105                  size: '28',
106                  info: '工作室更名为：西安拓美网络科技有限公司'
107                }]
108        }
109    },
110    methods: {
111        changeActive(index) {
112            this.timeIndex = index;
113        },
114        moveLeft()  {
115            let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
116            let listNum = 0;
117            if(marginLeft <= 10 && (marginLeft >= -650)){
118                this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px';
119            }
120        },
121        moveRight() {
122            let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
123            if(marginLeft < (-200)){
124                this.$refs.mytimeline.style.marginLeft = marginLeft + 220 + 'px';
125            }
126        }
127    }
128}
129</script>
130
131<style scoped>
132.my_timeline_prev, .my_timeline_next {
133    float: left;
134    display: inline-block;
135    background-color: #fff;
136    cursor: pointer;
137}
138.my_timeline_prev {
139    width: 200px;
140    float: left;
141}
142.my_timeline_next {
143    width: 34px;
144    margin-left: -22px;
145}
146.ul_box {
147    width: 900px;
148    height: 60px;
149    display: inline-block;
150    float: left;
151    margin-top: 2px;
152    overflow: hidden;
153}
154.my_timeline_item {
155    display: inline-block;
156    width: 220px;
157}
158.my_timeline_node {
159    box-sizing: border-box;
160    border-radius: 50%;
161    cursor: pointer;
162}
163.my_timeline_node.active {
164    background-color: #fff !important;
165    border: 6px solid #f68720;
166}
167.my_timeline_item_line {
168    width: 100%;
169    height: 10px;
170    margin: -14px 0 0 28px;
171    border-top: 2px solid #E4E7ED;
172    border-left: none;
173}
174.my_timeline_item_content {
175    margin: 10px 0 0 -10px;
176}
177</style>