时间线

tianyawhl

发布于 2022-09-28 07:25:15

35700

代码可运行

文章被收录于专栏：前端之攻略前端之攻略

运行总次数：0

代码可运行

实际工作中有些情况需要用到时间线，element组件中含有时间线，如果需要自定义的样式，可以自己写一个

<template>
  <div>
    myTime line
    <ul class="myTimeLine-item-wrap">
      <li class="myTimeLine-item" v-for="(item,index) in dataArr" :key="index">
        <!-- 左边竖线 -->
        <div class="tail gray">
          <div class="innerTail"></div>
        </div>
       
        <div :class="['node',item.state==0?'nodeGray':item.state==1?'nodeGreen':'']">
           <div class="innerNode"></div>
        </div>        
        <div class="contentWrap">
          <div class="left">
            <div class="title">{{item.title}}</div>
            <div class="time">{{item.time}}</div>
          </div>
          <div class="right">
            <ul class="rightContent">
              <li v-for="(innerItem,innerIndex) in item.content" :key="innerIndex">{{innerItem.data}}</li>
            </ul>
          </div>
        </div>
      </li>
     
    </ul>
  </div>

</template>

数据结构

      dataArr:[{
         state:0,
         title:"标题1",
         time:"2020-12-31",
         content:[{data:"内容1-1"},{data:"内容1-2"}]
      },{
         state:1,
         title:"标题2",
         time:"2020-12-31",
         content:[{data:"内容1-1"},{data:"内容1-2"},{data:"内容1-2"}]
      },{
         state:2,
         title:"标题3",
         time:"2020-12-31",
         content:[{data:"内容1-1"},{data:"内容1-2"}]
      }],

样式

</script>
<style scoped>
ul{padding-left:15px;list-style:none;padding-right:15px;}
.myTimeLine-item{padding-bottom:20px;position: relative;}
.tail{position:absolute;left:0;top:0;height:100%;border-left:2px dashed #ccc;}
.node{position:absolute;width:14px;height:14px;left:-7px;border-radius:50%;background:#fed6dc;display:flex;justify-content: center;align-items: center;}
.node .innerNode{width:8px;height: 8px;border-radius:50%;background:#fe2f54;}
.nodeGray{background:#ebebeb;}
.nodeGray .innerNode{background:#999999;}
.nodeGreen{background:#dcf4e3;}
.nodeGreen .innerNode{background:#4cca72;}

.contentWrap{display:flex;padding-left:15px;}
.left{width:150px;}
.contentWrap .left .title{font-weight:bold;}
.right{flex:1;padding:10px;border:1px solid #ccc;box-shadow: 1px 1px 8px rgba(0,0,0,0.1),-1px -1px 8px rgba(0,0,0,0.1);}

ul li:last-child .tail{display:none;}

</style>