移动端H5 - 手撸一个时间线 timeline

最近做移动端开发，用的vant2组件库，有个页面有个类似时间线组件的形式，但是瞄了一下vant2里面没有类似的组件，算了，自己手撸吧，也懒得找其他的插件，找到了也懒得改，阿西吧……

先看下 ‘结果’

屁话不多说，丢代码：

<template>
  <!-- 就诊记录 模块 -->
  <div class="visit-records">
    <div v-for="(item) in visitRecords" :key="item.id" class="record-item">
      <div :class="{'top-line': true, 'type1': item.type === 1, 'type2': item.type === 2, 'type3': item.type === 3}">
        <div
          :class="{'tag': true}"
        >
          <!-- 1 门诊; 2 住院; 3 急诊 -->
          {{ ['门诊', '住院', '急诊'][item.type - 1] }}
        </div>
        <div class="date">{{ item.date }}</div>
      </div>
      <div class="card" @click="toVisitRecords(item)">
        <div class="one-line">
          <div class="doctor">
            <span>医生：</span>
            <span>{{ item.doctor }}</span>
          </div>
          <div class="dept"> {{ item.department }} </div>
        </div>
        <div class="two-line">
          <span>诊断：</span>
          <span>{{ item.diagnose }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { testVisitRecordsData } from './testData'
export default {
  name: 'VisitRecords',
  components: {},
  props: {},
  data() {
    return {
      visitRecords: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.visitRecords = JSON.parse(JSON.stringify(testVisitRecordsData))
  },
  mounted() {},
  methods: {
    toVisitRecords(item) {
      this.$toast(item.doctor + '：别碰我！')
    }
  }
}
</script>
<style lang='less' scoped>
.visit-records {
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 28px;
  height: calc(100% - 108px);
  margin-bottom: 20px;
  overflow-y: auto;
}
.record-item {
  position: relative;
  &:not(:last-child):after {
    content: '';
    position: absolute;
    left: 10px;
    top: 30px;
    height: calc(100% + 18px);
    border-left: 1px solid #ccc;
  }
  .top-line {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    height: 40px;
    padding-left: 40px;
    font-size: 24px;
    &::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      background: #3FA40E;
    }
    .tag {
      width: 80px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 8px;
      color: #fff;
      background: #3FA40E;
    }
    .date {
      height: 40px;
      line-height: 40px;
      margin-left: 20px;
      color: #424E67;
    }
  }
  .type2 {
    .tag {
      background: #3B8CFF;
    }
    &::after {
      background: #3B8CFF;
    }
  }
  .type3 {
    .tag {
      background: #FF9A02;
    }
    &::after {
      background: #FF9A02;
    }
  }

  .card {
    padding: 24px 40px;
    border-radius: 8px;
    background-color: #fff;
    color: #424E67;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 28px;
    margin-left: 40px;
    margin-top: 20px;
    .one-line {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .doctor, .two-line {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  }
</style>

上面引入的测试数据： testVisitRecordsData 如下，

export const testVisitRecordsData = [
  {
    id: 'tyinjk',
    type: 3, // 1 门诊; 2 住院; 3 急诊
    date: '2022-02-07 10:28',
    doctor: '张三',
    department: '脑科',
    diagnose: '脑内出血'
  },
  {
    id: 'fcyvghubinjl',
    type: 2, // 1 门诊; 2 住院; 3 急诊
    date: '2022-01-20 12:30',
    doctor: '李四',
    department: '内科',
    diagnose: '肠胃炎症'
  },
  {
    id: 'trcyuvbino',
    type: 3, // 1 门诊; 2 住院; 3 急诊
    date: '2021-12-29 14:30',
    doctor: '王五',
    department: '骨科',
    diagnose: '膝关节骨折'
  },
  {
    id: 'zsrdxtfcyguhijkl',
    type: 1, // 1 门诊; 2 住院; 3 急诊
    date: '2021-12-19 15:40',
    doctor: '赵六',
    department: '眼科',
    diagnose: '间歇性失明'
  },
  {
    id: 'tysinjk',
    type: 3, // 1 门诊; 2 住院; 3 急诊
    date: '2022-02-07 10:28',
    doctor: '张三',
    department: '脑科',
    diagnose: '脑内出血'
  },
  {
    id: 'fcyvdghubinjl',
    type: 2, // 1 门诊; 2 住院; 3 急诊
    date: '2022-01-20 12:30',
    doctor: '李四',
    department: '内科',
    diagnose: '肠胃炎症'
  },
  {
    id: 'trcyucvbino',
    type: 3, // 1 门诊; 2 住院; 3 急诊
    date: '2021-12-29 14:30',
    doctor: '王五',
    department: '骨科',
    diagnose: '膝关节骨折'
  },
  {
    id: 'zsrdxtrfcyguhijkl',
    type: 1, // 1 门诊; 2 住院; 3 急诊
    date: '2021-12-19 15:40',
    doctor: '赵六',
    department: '眼科',
    diagnose: '间歇性失明'
  }
]