效果:
<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>
vue 实现横向时间轴
点赞
收藏