一、效果图（参考链接）

代码实现

<template><div class="only-content"><h1 class="text-center my-3">讲师晋升路线</h1><!--时间轴线显示--><div class="time-line"><div class="every-block" v-for="(item, index) in closeLevelList" :key="index":style="item.type === 0? 'float: left;' + 'width:' + item.width + '%;': item.type === 1? 'float: right;' + 'width:' + item.width: item.type === 2? 'float: right;' + 'width:' + item.width + '%;': 'float: left;' + 'width:' + item.width + '%;'"style="height: 200px"><!-- 右方向的时间轴 --><div class="identical to-right" v-if="item.type === 0"><!-- 序号 --><div class="step" :style="'border: 2px dashed' + item.background"><span v-if="item.levelSort < 10" :style="{ color: item.color }">0{{ item.levelSort }}</span><span v-else :style="{ color: item.color }">{{ item.levelSort}}</span></div><!--时间线--><div class="class-line" :style="'background:' + item.background"></div><!--结束箭头--><div class="end-arrow" v-if="closeLevelList.length === index + 1":style="'border-color: transparent transparent transparent' + item.background"></div><!--方向箭头--><div class="small-arrow-left" v-if="closeLevelList.length !== index + 1"></div><div class="small-arrow-right" v-if="closeLevelList.length !== index + 1"></div></div><!--右回转空心半圆环--><div class="right-box" v-if="item.type === 1"><div class="big-circular" :style="'background:' + item.background"><div class="small-circular"></div></div><!--结束箭头--><div :class="allTeacherLevelList.length % 3 > 0 ? 'end-arrow' : 'end-arrow2'" v-if="closeLevelList.length === index + 1":style="'border-color: transparent' +' ' +item.background +' ' +'transparent transparent'"></div></div><!-- 左方向的时间轴 --><div class="identical to-left" v-if="item.type === 2"><!-- 序号 --><div class="step" :style="'border: 2px dashed' + item.background"><span v-if="item.levelSort < 10" :style="{ color: item.color }">0{{ item.levelSort }}</span><span v-else :style="{ color: item.color }">{{item.levelSort}}</span></div><!--时间线--><div class="class-line" :style="'background:' + item.background"></div><!--结束箭头--><div class="end-arrow" v-if="closeLevelList.length === index + 1":style="'border-color: transparent' +' ' +item.background +' ' +'transparent transparent'"></div><!--反向箭头--><div class="small-arrow-left" v-if="closeLevelList.length !== index + 1"></div><div class="small-arrow-right" v-if="closeLevelList.length !== index + 1"></div></div><!--左回转空心半圆环--><div class="left-box" v-if="item.type === 3"><div class="big-circular" :style="'background:' + item.background"><div class="small-circular"></div></div><!--结束箭头--><div :class="allTeacherLevelList.length % 6 > 0 ? 'end-arrow' : 'end-arrow2'" v-if="closeLevelList.length === index + 1":style="'border-color: transparent transparent transparent' +item.background"></div></div><!-- 更多信息 --><div class="info" v-if="item.type == 0 || item.type == 2"><div class="flex-center"><span class="name" :style="{ color: item.color }">{{item.name}}</span><div class="level" v-if="item.currentFlag"><i class="el-icon-location"></i><span style="margin-left: 3px">我的级别</span></div></div><div class="my" :style="{ color: item.color }">在线课程数 {{ item.ocNum }} 个</div><div class="rule cursor" :style="{ backgroundColor: item.background }" @click="toDetail(item)">规则详情</div></div></div><div class="clear"></div></div></div>
</template><script>
import { parse, stringify } from '@/utils/index.js';
export default {name: 'PromoteRoad',data() {return {allTeacherLevelList: [], // 所有的数据closeLevelList: [], // 深克隆后的数据};},created() {this.getAllTeacherLevelList();},methods: {// 处理数据handleClassData() {let typeIndex = 0; // 类型标记let addLength = 0; // 赋值前叠加的总长度let otherLength = 0; // 赋值后叠加的总长度let moreThanPlan = []; // 每行结尾多于出的集合let currentIndex = this.allTeacherLevelList.findIndex(item => item.currentFlag == 1); // 当前级别的索引this.allTeacherLevelList.forEach((value, index) => {// 根据级别显示不同的颜色条if(value.levelSort === 1) {value.background = '#005a8b';}else if(value.levelSort === 2) {value.background = '#4a9ac4';}else if(value.levelSort === 3) {value.background = '#6aa342';}else if(value.levelSort === 4) {value.background = '#becd10';}else if(value.levelSort === 5) {value.background = '#f0c502';}else if(value.levelSort === 6) {value.background = '#e98a24';}else if(value.levelSort === 7) {value.background = '#ee878e';}else if(value.levelSort === 8) {value.background = '#d92c29';}else if(value.levelSort === 9) {value.background = '#ce1a70';}else if(value.levelSort === 10) {value.background = '#882161';}// 当前级别和之前的级别置灰if(index <= currentIndex) {value.isApplication = 1;value.background = '#efefef';value.color = '#ccc';}else {value.isApplication = 0;}let moreThan = {}; // 每行结尾多于出的数据addLength = addLength + 40; // 叠加每个数据的长度value.width = 100 / 3; // 每段的长度// 根据总的长度来判断是否大于100%if(addLength < 100) {value.type = typeIndex; // 分类的类型（1—从左往右；2—右半圆弧；3—从右往左；4—左半圆弧）otherLength = otherLength + value.width;}else {value.width = 100 - otherLength;value.type = typeIndex;typeIndex++;// 处理每行结尾多于出长度的数据moreThan = parse(stringify(value));moreThan.width = 0;moreThan.type = typeIndex;moreThanPlan.push(moreThan);typeIndex++;if(typeIndex === 4) {typeIndex = 0;}addLength = 0;otherLength = 0;}});// 处理后的数据集合let allTimeListData = this.sorts(this.allTeacherLevelList, moreThanPlan);// 深克隆数据this.closeLevelList = parse(stringify(allTimeListData));},// 循环排序（将每行多于长度的数据插入原数组）sorts(initArr, insertArr) {let arr = initArr.concat(); // 拷贝数组initArr.forEach((value, index) => {insertArr.forEach((val, ind) => {if(value.id == val.id) {// 判断值相同  插入let idx = [];arr.forEach((data, tt) => {if(data.id == val.id) {idx.push(tt); // 获取所有相同值得下标数组}});arr.splice(idx[idx.length - 1] + 1, 0, val); // 取最后相同值插入数据}});});return arr;},// 获取数据getAllTeacherLevelList() {this.$api.teacher.getAllTeacherLevelList().then(res => {this.allTeacherLevelList = res;this.handleClassData();});},// 跳转详情toDetail(data) {this.$router.push({path: '/frontend/promotionRule/detail',query: { id: data.id, isApplication: data.isApplication },});},},
};
</script>
<style scoped lang="scss">
.only-content {width: 100%;height: 100%;font-size: 12px;background-color: #fff;.clear {clear: both;}/*蛇形道样式*/.time-line {padding: 20px 120px;.every-block {position: relative;.identical {position: relative;}// 从左向右的方向直线样式.to-right {position: relative;/*颜色线样式*/.class-line {width: 100%;height: 25px;border-right: 1px solid #ccc;}/*结束箭头样式*/.end-arrow {position: absolute;bottom: -6px;right: -36px;width: 0;height: 0;border: 18px solid;}/*方向箭头样式*/.small-arrow-left {z-index: 20;position: absolute;bottom: 10px;right: 0;float: left;width: 8px;height: 4px;background-color: #fff;}.small-arrow-right {z-index: 20;position: absolute;bottom: 6px;right: -12px;float: left;width: 0;height: 0;border: 6px solid;border-color: transparent transparent transparent #fff;}}// 从右向左的方向直线样式.to-left {position: relative;/*颜色线样式*/.class-line {height: 25px;border-right: 1px solid #ccc;position: relative;}/*结束箭头样式*/.end-arrow {position: absolute;bottom: -6px;left: -36px;width: 0;height: 0;border: 18px solid;}/*方向箭头样式*/.small-arrow-left {z-index: 20;position: absolute;bottom: 10px;left: 0;float: left;width: 8px;height: 4px;background-color: #fff;}.small-arrow-right {z-index: 20;position: absolute;bottom: 6px;left: -12px;float: left;width: 0;height: 0;border: 6px solid;border-color: transparent #fff transparent transparent;}}// 左空心半圆样式.left-box {position: relative;top: 0px;left: -110px;.big-circular {float: left;width: 110px;height: 225px;-webkit-border-radius: 125px 0 0 125px;position: relative;.small-circular {width: 80px;height: 175px;background-color: #fff;-webkit-border-radius: 80px 0 0 80px;position: absolute;right: 0px;top: 25px;}}/*结束箭头样式*/.end-arrow {position: absolute;bottom: -128px;right: -96px;width: 0;height: 0;border: 18px solid;}.end-arrow2 {position: absolute;top: 195px;left: 110px;width: 0;height: 0;border: 18px solid;}}// 右空心半圆样式.right-box {position: relative;top: 0px;right: -110px;.big-circular {float: right;width: 110px;height: 225px;-webkit-border-radius: 0 125px 125px 0;position: relative;.small-circular {width: 80px;height: 175px;background-color: #fff;-webkit-border-radius: 0 80px 80px 0;position: absolute;left: 0;top: 25px;}}/*结束箭头样式*/.end-arrow {position: absolute;bottom: -128px;left: -96px;width: 0;height: 0;border: 18px solid;}.end-arrow2 {position: absolute;top: 195px;right: 110px;width: 0;height: 0;border: 18px solid;}}}}
}
.step {position: absolute;top: 50%;left: 50%;z-index: 999;transform: translate(-50%, -50%);height: 60px;width: 60px;background-color: #fff;text-align: center;line-height: 60px;font-size: 26px;border-radius: 100%;
}
.info {position: absolute;top: 50%;left: 50%;z-index: 999;transform: translate(-50%, -50%);.name {font-size: 16px;font-weight: bold;margin-right: 15px;}.level {font-size: 14px;color: #2a55f6;}.rule {font-size: 14px;text-align: center;padding: 3px;border-radius: 20px;margin-top: 10px;color: #fff;}
}
</style>