移动端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}"
        >
          
          {{ ['门诊', '住院', '急诊'][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 如下，

/*
 * @Author: chengsl
 * @Date: 2022-07-22 13:11:54
 * @LastEditors: chengsl
 * @LastEditTime: 2022-07-22 14:25:40
 * @Description: file content
 */
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: 'tyinsjk',
    type: 3, // 1 门诊; 2 住院; 3 急诊
    date: '2022-02-07 10:28',
    doctor: '希特勒',
    department: '人性改造科',
    diagnose: '阿巴阿巴阿巴'
  },
  {
    id: 'fcyvghsubinjl',
    type: 2, // 1 门诊; 2 住院; 3 急诊
    date: '2022-01-20 12:30',
    doctor: '斯大林',
    department: '人性重塑科',
    diagnose: '缺乏钢铁精神'
  },
  {
    id: 'trcysuvbino',
    type: 3, // 1 门诊; 2 住院; 3 急诊
    date: '2021-12-29 14:30',
    doctor: '丘吉尔',
    department: '苦难修行科',
    diagnose: '多处轰炸烧伤'
  },
  {
    id: 'zsrdxstfcyguhijkl',
    type: 1, // 1 门诊; 2 住院; 3 急诊
    date: '2021-12-19 15:40',
    doctor: '白求恩',
    department: '日行一善科',
    diagnose: '普度众生'
  }
]

手撸也就一个小时，得闲了再封装成公用组件的形式留着以后直接用， 溜了溜了；