vue3+flex动态的绘制蛇形时间轴

实现思路

蛇形排列，奇数列设定左边框，偶数列设定右边框且内容反转显示
激活的色调为蓝，否则为灰
行-列-当前激活可以动态设定

视图代码

<template><div class="timelinebox"><!-- 行设置，奇数行设置左边框，偶数行设置右边框，为了实现蛇形排列，偶数行需反转显示 --><!-- 经过的时间轴变蓝，未过为灰 根据激活的值为行动态的添加.on的class样式， --><div class="timeline" v-for="row in rows" :key="row":class="{ 'reverse': row % 2 === 0, 'on': row - 1 < activeIndex / cols }"><!-- 列设置，动态的计算列宽 改变激活的颜色，动态的添加.active --><div class="timelineItem" v-for="item in cols" :key="item":class="{ 'active': (row - 1) * cols + item <= activeIndex }" :style="{ width: (100 / cols) + '%' }"><!-- 文本的标题一行，显示不下的... 注意子元素必须绝对定位，父相对定位，否则...不起作用，且错位乱版 --><div class="itemTitle"><div class="ellipsis">第{{ (row - 1) * cols + item }}项的标题<span v-if="row > 1 && row < 4">内容细节与详情</span></div></div><div class="itemDot"></div></div></div></div>
</template>

逻辑代码

<script setup>
// 行数
let rows = 13
// 列数
let cols = 6
// 当前激活的数 等于当前行数-1*列数+当前列数
let activeIndex = 10
</script>

样式代码

<style scoped lang="scss">
.timelinebox {width: 100%;height: 100%;padding: 20px;box-sizing: border-box;display: block;position: relative;overflow-y: auto;.timeline {width: 100%;height: 80px;display: flex;justify-content: start;border-left: 5px solid gray;.timelineItem {height: 100%;border-bottom: 5px solid gray;display: flex;flex-direction: column;justify-content: end;align-items: center;cursor: default;position: relative;.itemTitle {position: absolute;bottom: 10px;left: 0px;width: 100%;box-sizing: border-box;padding: 10px;text-align: center;font-size: 18px;overflow: hidden;}.itemDot {width: 20px;height: 20px;background-color: gray;border-radius: 10px;margin-bottom: -12px;display: block;}}.timelineItem.active {border-color: blue;.itemTitle {color: blue;}.itemDot {background-color: blue;}}}.timeline.reverse {flex-direction: row-reverse;justify-content: end;border-right: 5px solid gray;border-left: 0px;}.timeline.on {border-color: blue;}.timeline:first-child {border: 0}
}
</style>