效果如图
思路:
1.首先是时间的切片渲染圆圈和线
2.下一行渲染文本,这里为了让文本居中,转做了一层poastion的定位
<template>
<div class="root">
<!-- <textarea v-autosize></textarea> -->
<div class="box">
<div v-for="(item, index) in list" :key="index" class="list">
<el-tooltip class="item" effect="dark" :content="item.start" placement="top">
<div :class="['point', { 'small': index % 4 != 0 }, { 'date': date == item.start }]"> </div>
</el-tooltip>
<div v-show="index != list.length - 1" class="line"></div>
</div>
</div>
<div class="text">
<span v-for="(item, index) in list" :key="index" class="word"
:style="`--width:${index % 4 == 0 ? '22px' : '18px'}`">
<span> {{ index == list.length - 1 ? item.start : (index % 8 == 0 ? item.start : '') }}</span>
</span>
</div>
</div>
</template>
<script>
import autosize from 'v-autosize';
import moment from 'moment';
export default {
directives: {
autosize,
},
data() {
return {
dialogVisible: false,
value: '',
num: 24 * 60 / 15,
form: {
start: '2025-01-06 00:00:00',
end: '2025-01-06 23:59:59'
},
list: [],
date: '08:00'//后端返回值
}
},
mounted() {
this.time();
},
methods: {
time() {
const start = moment(this.form.start);
const end = moment(this.form.end);
const diff = 1440;
console.log('时间差', diff);
const step = Math.floor(diff / this.num);
console.log('步长', step);
const list = [];
for (let index = 0; index < this.num; index++) {
const s = start.clone().add(index *
step, 'minute').format('HH:mm'); const e = start.clone().add((index + 1) *
step, 'minute').format('HH:mm'); list.push({ start: s, end: e, });
}
this.list = list;
console.log('时间段', list)
}
}
} </script>
<style lang="scss">
.el-textarea__inner {
height: auto;
}
.root {
background-color: beige;
padding: 50px;
box-sizing: border-box;
}
.box {
width: 100%;
box-sizing: border-box;
display: flex;
.list {
display: flex;
align-items: center;
height: 12px;
.point {
width: 12px;
height: 12px;
background-color: white;
border: 1px solid blue;
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
&:hover {
background-color: pink;
border-color: pink;
}
}
.small {
width: 8px;
height: 8px;
}
.date {
background-color: red;
border-color: red;
&:hover {
background-color: red;
border-color: red;
}
}
.line {
width: 10px;
height: 2px;
background-color: blue;
}
}
}
.text {
display: flex;
flex-direction: row;
.word {
width: var(--width);
position: relative;
span {
position: absolute;
left: -50%;
top: 0;
}
}
}
</style>