视图层
.concentBox2
.title 安全护照行为
.process
.bosList
span(v-for="item,index in spanList" :key="index")
.block(v-for="item,index in spanListBlock" :key="index")
js
//安全护照行为-彩色块
let num = parseInt((Number(this.spanListNum) / 2.5).toFixed(0))
if (num > 40) {
num = 40 }
this.boxWidth = num * 10
for (let i = 0;i < num;i++) {
this.spanList.push(i)
}
//安全护照行为-空白块
let num1 = 40 - parseInt((Number(this.spanListNum) / 2.5).toFixed(0))
if (num1 > 40) {
num1 = 40 }
this.boxWidth = num1 * 10
for (let i = 0;i < num1;i++) {
this.spanListBlock.push(i)
}
css
.concentBox2 {
display: flex;
padding: 8px 0px 10px;
.title {
width: 96px;
height: 24px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 24px;
color: #F8E065;
margin: 0 13px 0 26px;
}
.process {
width: 356px;
height: 24px;
border: 1px solid #2F8EFF;
border-radius: 2px;
position: relative;
>div {
position: absolute;
height: 20px;
}
.bosList {
position: absolute;
left: 0;
top: 0;
margin-left: 1px;
span {
display: inline-block;
width: 6.8px;
height: 16px;
border-radius: 1px;
background-color: #F8E065;
margin:3px 1px;
}
.block {
display: inline-block;
width: 6.8px;
height: 16px;
border-radius: 1px;
// background-color: #F8E065;
border: 1px solid #2F8EFF;
margin:3px 1px;
}
}
}
}