vue3+vant 想要实现这样的效果
但是我的是这样
代码如下
<template>
<div class="stepOut stepOutSmall">
<ul>
<li
class="stepItem"
v-for="(stepItem, index) in steps"
:key="index"
:class="[
Math.floor (index / 3) % 2 == 0
? 'stepItemLeftStart'
: 'stepItemBrother'
]"
>
<!-- 节点图标区域 -->
<div class="icon">
<img
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
class="node-image"
alt="node icon"
/>
</div>
<!-- 连接线 -->
<div
v-if="(index + 1) % 3 != 0 || ((index + 1) / 3) % 2 == 0"
class="line"
:class="stepItem.edge === 'waterway' ? 'waterway-line' : ''"
v-show="Math.floor (index / 3) % 2 == 0 ? index + 1 !== steps.length : index !== steps.length"
></div>
<!-- 圆弧线 -->
<div
v-if="index != 0 && (index + 1) % 3 == 0"
class="lineCircle"
:class="[
((index + 1) / 3) % 2 == 0 ? 'lineCircleLeft' : '',
stepItem.edge === 'waterway' ? 'waterway-circle' : ''
]"
v-show="index + 1 !== steps.length"
></div>
<!-- 节点名称 -->
<p class="stepStatus">{{ stepItem.nodeName }}</p>
<!-- 百分比 -->
<p class="statusTime">{{ stepItem.percentage }}%</p>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
steps: {
type: Array,
required: true,
default: () => []
}
}
}
</script>
<style lang="less" scoped>
.stepOut {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
&.stepOutSmall {
height: 100%;
.stepItem {
width: 80vw;
//height: 20vh;
.lineCircle {
left: 63%;
top: 1vh;
width: 6%;
border-radius: 0 20vw 20vw 0;
}
&:nth-child (even) {
float: right !important;
right: 8%;
}
}
}
.stepItem {
width: 80%;
float: left;
font-size: 14px;
text-align: center;
position: relative;
.icon {
width: 24px;
height: 24px;
border-radius: 50%;
margin: 0 auto;
position: relative;
//z-index: 888;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.node-image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.line {
position: absolute;
top: 13px;
left: 70%;
border-bottom: 2px solid #007cdb;
width: 29%;
transform: translateX (-50%);
//z-index: 111;
&.waterway-line {
border-bottom-style: dashed;
}
}
.lineCircle {
left: 50%;
top: 12px;
position: absolute;
width: 50%;
height: 103%;
border: 2px solid #007cdb;
border-left: none;
border-radius: 0 20vw 20vw 0;
transform: translateX (-50%);
&.waterway-circle {
border-style: dashed;
border-left-style: none;
}
&.lineCircleLeft {
left: 34%;
border-right: none;
border-left: 2px solid #007cdb;
border-radius: 20vw 0 0 20vw;
transform: none;
&.waterway-circle {
border-style: dashed;
border-right-style: none;
}
}
}
.stepStatus {
color: #333;
line-height: 18px;
margin-top: 8px;
}
.statusTime {
color: #333;
opacity: 0.8;
}
&:nth-child (even) {
float: right !important;
right: 2%;
}
&.stepItemLeftStart {
float: left !important;
right: 0;
& + .stepItemBrother {
.line {
display: none;
}
}
}
}
}
</style>
数据如下：
[
{
"nodeId": "4",
"nodeName": "节点四",
"image": "1839557978507644929",
"percentage": "20",
"edge": "waterway"
},
{
"nodeId": "5",
"nodeName": "节点五",
"image": "1839558431442145281",
"percentage": "10",
"edge": "default"
},
{
"nodeId": "6",
"nodeName": "节点六",
"image": "1839558659587117058",
"percentage": "5",
"edge": "waterway"
},
{
"nodeId": "1",
"nodeName": "节点一 asd",
"image": "1854456194717921282",
"percentage": "80",
"edge": "waterway"
},
{
"nodeId": "2",
"nodeName": "节点二",
"image": "1839557445243834370",
"percentage": "60",
"edge": "waterway"
},
{
"nodeId": "3",
"nodeName": "节点三",
"image": "1854456194717921282",
"percentage": "40",
"edge": "waterway"
},
{
"nodeId": "4",
"nodeName": "节点四",
"image": "1839557978507644929",
"percentage": "20",
"edge": "waterway"
},
{
"nodeId": "5",
"nodeName": "节点五",
"image": "1839558431442145281",
"percentage": "10",
"edge": "waterway"
},
{
"nodeId": "6",
"nodeName": "节点六",
"image": "1839558659587117058",
"percentage": "5",
"edge": ""
}
]