时间轴的实现

35.时间轴的实现

目标：左侧的时间轴高度随着右侧内容的高度自适应

实现：时间轴的高度设置为100%，这样就可以实现自适应
实现图片：

代码例子：

<template>
  <div class="feedback">
    <div class="title">办理记录</div>
    <ul v-if="handleFlow.length!==0">
      <li
        v-for="(item,index) in handleFlow"
        :key="item.id"
      >
        <div class="left">
          <div class="circle"></div>
          <div :class="index!==handleFlow.length-1?'line':'last'"></div>
        </div>
        <div class="right">
          <div class="title_">{{item.flowTitle}}</div>
          <div v-if="item.flowContent" class="content"><span>{{item.flowContent.split('：')[0]}}：</span>{{item.flowContent.split('：')[1]}}</div>
          <div class="time"><span>{{item.operateTime }}</span></div>
        </div>
      </li>
    </ul>
    <van-empty
      v-else
      description="暂无"
    />
  </div>
</template>
<script>
export default {
  props: {
    handleFlow: [String, Array]
  },
  data () {
    return {
      task: [
        {
          id: '1',
          title: '夏老师完成了任务',
          content: '这里是办结说明这里是办结说明',
          time: '2021-12-20 16:23'
        },
        {
          id: '2',
          title: '夏老师完成了任务',
          content: '这里是办结说明这里是办结说明',
          time: '2021-12-20 16:23'
        },
        {
          title: '夏老师完成了任务',
          content: '这里是办结说明这里是这里是办结说明这里是办结说明这里是办结说',
          time: '2021-12-20 16:23'
        },
        {
          id: '3',
          title: '夏老师完成了任务',
          content: '这里是办结说明这里是办结说明',
          time: '2021-12-20 16:23'
        },
        {
          id: '4',
          title: '夏老师完成了任务',
          content: '这里是办结说明这里是办结说明',
          time: '2021-12-20 16:23'
        },
        {
          id: '5',
          title: '夏老师完成了任务',
          content: '这里是办结说明这里是办结说明',
          time: '2021-12-20 16:23'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.feedback {
  background-color: #fff;
  margin-top: 0.1rem;
  padding: 0.16rem;
  .title {
    // height: 0.3rem;
    // line-height: 0.3rem;
    font-size: 0.18rem;
    font-weight: bold;
    color: #333333;
    border-left: solid 0.04rem #4997f9;
    margin: 0.15rem 0;
    padding-left: 0.08rem;
  }
  .left {
    display: flex;
    flex-direction: column;
  }
  .circle {
    width: 0.16rem;
    height: 0.16rem;
    background-image: url(./../assets/circle.png);
    background-size: 100% 100%;
  }
  .line {
    width: 0.02rem;
    height: 92%;
    align-self: stretch;
    margin-left: 0.07rem;
    border-left: dashed 0.02rem #d2e6ff;
  }
  .last {
    width: 0.02rem;
    height: 0.8rem;
    border: none;
  }
  ul {
    // display: flex;
    li {
      display: flex;
      .right {
        .title_ {
          margin-bottom: 0.08rem;
        }
        div {
          font-size: 0.14rem;
          margin-bottom: 0.05rem;
          span {
            color: #999999;
            font-size: 0.12rem;
          }
        }
        .content {
          font-size: 0.12rem;
          line-height: 0.2rem;
          // letter-spacing: 1.3px;
          white-space: pre-wrap;
    word-break: break-all;
        }
      }
    }
    li:last-child {
      border: none;
    }
    li > div:first-child {
      display: flex;
    }
  }
}
.time {
  padding-bottom: 0.13rem;
}
ul li > div:not(:first-child) {
  margin-left: 0.12rem;
  margin-top: 0.03rem;
}
</style>