效果：
<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: '',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',icon: 'el-iconprev',year: '',info: 'chengli'}, {timestamp: '',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',year: '',info: '工作室更名为：西安拓美网络科技有限公司'}, {timestamp: '',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',year: '',info: '工作室更名为：西安拓美网络科技有限公司'}, {timestamp: '',color: '#999',fontsize: 18,year: '',size: '28',bgcolor: '#e4e7ed',info: '工作室更名为：西安拓美网络科技有限公司'}, {timestamp: '',color: '#999',fontsize: 18,size: '28',year: '',bgcolor: '#e4e7ed',info: '工作室更名为：西安拓美网络科技有限公司'}, {timestamp: '',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',year: '',info: '工作室更名为：西安拓美网络科技有限公司'}, {timestamp: '',color: '#999',fontsize: 18,size: '28',bgcolor: '#e4e7ed',year: '',info: '工作室更名为：西安拓美网络科技有限公司'}, {timestamp: '',color: '#999',fontsize: 18,year: '',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>
