思路 — 处理数据 第2行数据需要倒序
mounted() {
const _this = this
window.onresize = () => {
this.$nextTick(_ => {
_this.processWidth = _this.$refs.bussiProcessRef.clientWidth // 获取容器宽度
})
}
},
、、、、监听容器宽度
watch: {
processWidth(val) {
if (!this.timer) {
this.timer = true
const _this = this
setTimeout(() => {
_this.timer = false
}, 500)
}
this.deserveProcessDom()
}
},
- 获取数据
deserveProcessDom() {
if (!(this.bussiStageList && this.bussiStageList.length)) return
// 容器宽度 大于 所有的标签宽度 就一行
if (this.processWidth >= (120 * this.bussiStageList.length)) {
this.lineNum = 1
// 一行几个
this.lineSize = this.bussiStageList.length
// 等分宽度
this.bussiLessWidth = Math.floor(this.processWidth / this.lineSize)
} else {
// 多行 lineNum行数 Math.ceil向上取整
this.lineNum = Math.ceil((120 * this.bussiStageList.length) / this.processWidth)
// 一行个数 宽度/120px
this.lineSize = Math.floor(this.processWidth / 120)
// 定义一个宽度为120px
this.bussiLessWidth = 120
}
// 获取数据
this.showStageList = []
for (let i = 1; i <= this.lineNum; i++) {
let arr = []
// 每一行数据 lineSize一行的个数 bussiStageList总数据
arr = this.bussiStageList.slice((i - 1) * this.lineSize, i * this.lineSize)
if (i % 2 == 0) {
if (arr.length < this.lineSize) {
// 偶数行 填满 倒序
for (let j = 1; j <= this.lineSize; j++) {
if (arr.length < j) {
arr.push({})
}
}
}
arr.reverse() // 数据翻转
}
this.showStageList.push(arr)
}
},
- 样式
半圆样式 是1下的after
.bussi-process-icon {
span {
&::after {
content: "";
position: absolute;
height: 85px;
width: 45px;
border: 6px solid #e9f3ff;
border-left: 0;
border-radius: 0 85px 85px 0 ;
top: 22px;
right: -50px;
}
}
}
- 同理
.bussi-process-icon {
span {
&::after {
content: "";
position: absolute;
height: 85px;
width: 45px;
border: 6px solid #e9f3ff;
border-right: 0;
border-radius: 170px 0 0 170px;
top: 22px;
right: 50px;
}
}
}
- 前面的线条
span {
height: 50px;
width: 50px;
display: inline-block;
border-radius: 50%;
position: relative;
&::before {
content: "";
position: absolute;
height: 6px;
width: var(--lessWidth)!important;
background: #e9f3ff;
top: 22px;
right: 50px;
}
}