需求:
用于升级日志的显示
效果图:
实现原理:
主要区域分为两块,时间区和内容区,时间区是画一个圆点和显示一个时间,内容区左边一个竖线和文字显示
然后做一下循环,将每个日期的数据显示出来
布局采用flex布局,用好flex布局,真的可以一把梭
css样式
画圆点:
.time-dot {
width: 7px;
height: 7px;
border-radius: 100%;
background-color: rgba(0, 0, 0, .5);
}
带竖线的内容区域
.time-item {
border-left: 1px solid rgba(0, 0, 0, .2);
margin-left: 3px;
line-height: 28px;
}
数据格式:
timeData:[
{"date":"2023-1-1", "list":["新增PDF转WORD功能",'修复上传文件太大导致面面卡死的bug','修复了ppt部分页面不显示的问题','修改了其他已知问题']},
{"date":"2023-12-25", "list":["新增线上富文编辑功能",'app端修复了文件上传未限制选择文件类型的bug']},
{"date":"2023-12-22", "list":["修改了部分已知bug"]}
]
组件代码如下:
<template>
<div class="flex flex-col">
<div v-for="(item,index) in timeData" :key="index">
<div class="flex flex-center-cz">
<div class="time-dot"></div>
<div class="margin-left-m ">{
{item.date}}</div>
</div>
<div class="flex flex-col padding-m time-item" >
<div v-for="detail in item.list">{
{detail}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TimeAxis',
props: {
timeData: {},
}
}
</script>
<style>
.time-dot {
width: 7px;
height: 7px;
border-radius: 100%;
background-color: rgba(0, 0, 0, .5);
}
.time-item {
border-left: 1px solid rgba(0, 0, 0, .2);
margin-left: 3px;
line-height: 28px;
}
</style>
class 中 见到如 flex flex-col flex-center-cz padding-m, 定义在 /asset/css/base.css,如图:
将常用样式定义在一个公共样式的好处时,减少重复定义,便于维护。
源码:https://download.csdn.net/download/gdgztt/87585634