企业网站建设运营的灵魂是/爱站网站排名查询工具

最近做移动端开发，用的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: '间歇性失明'}
]