Vue實現時間軸功能

<template>
  <div class="container">
    <div class="content">
      <div class="coin" v-for="(item,index1) in Math.ceil((list.length+1)/4)" :key="index1" v-show="isShow==index1">
        <div class="xs_one"></div>
        <div
          class="coinAll"
          v-for="(item, index) in list"
          :key="index"
          :class="{ one: index%4==0 }"
          v-show="index<(index1+1)*4 && index+1>(index1)*4"
        >
          <span
            :class="{
              two: (index + 1) % 2 == 0,
              text_active: index == isIndex,
            }"
          >
            {{ item }}
          </span>
          <div class="xs" :class="{ xs_active: index == isIndex }"></div>
          <img src="../assets/img/coin1.png" alt="" v-show="index == isIndex" />
          <img src="../assets/img/coin2.png" alt="" v-show="index != isIndex" />
        </div>
      </div>
      <div class="paging" :style="{width:Math.ceil((list.length+1)/4)*20+'px'}">
        <div class="pagings" v-for="(item,index1) in Math.ceil((list.length+1)/4)" :key="index1" @click="tabList(index1)" :class="{is_activ:isShow==index1}">{{index}}</div>
      </div>
    </div>
  </div>
</template>
 
 
<script>
export default {
  data() {
    return {
      list: ["實施方案", "任務書", "中期檢查", "專案驗收", "分頁功能1","分頁功能1","分頁功能1","分頁功能1","分頁功能2"], //列表
      isIndex: 0, //高亮顯示
      isShow: 1, //顯示
    };
  },
  methods:{
    tabList(idx){
      this.isShow=idx
    }
  }
};
</script>
 
 
<style scoped>
.content {
  width: 400px;
  height: 120px;
  background: rgb(9, 27, 70);
  position: relative;
}
.paging{
  height: 20px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
.paging div{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgb(120, 120, 120);
  float: left;
  margin-left: 5px;
}
.coin {
  width: 100%;
  height: 80px;
  background: rgb(9, 27, 70);
  position: relative;
  overflow-x: hidden;
}
.xs_one {
  width: 100%;
  height: 5px;
  background: rgb(61, 183, 270);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.coin .coinAll {
  width: 100px;
  height: 100%;
  float: left;
  position: relative;
}
 
.coin .one {
  margin-left: -50px;
}
.coin .coinAll img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
.coin .coinAll .xs {
  width: 100%;
  height: 5px;
  background: rgb(61, 183, 270);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
 
.coin .coinAll span {
  width: 100%;
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 5px;
}
.coin .coinAll .two {
  width: 100%;
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 55px;
}
 
/* 文字高亮 */
.coin .coinAll .text_active {
  color: rgb(245, 189, 39);
}
 
/* 線條高亮 */
.coin .coinAll .xs_active {
  background: rgb(245, 189, 39);
}
.paging .is_activ{
  background: rgb(26, 82, 229);
}
</style>