You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
2.1 KiB
112 lines
2.1 KiB
<template>
|
|
<view class="process_more">
|
|
<!-- 步骤条 -->
|
|
<view class="set-2" :key="index" v-for="(item,index) in stepsData">
|
|
<view class="lef_name flex_clumn">
|
|
<text class="text">{{item.key}}</text>
|
|
</view>
|
|
<view class="cen_img">
|
|
<view
|
|
class="left_line_up"
|
|
:class="index==stepsData.length-1?'active':''"
|
|
></view>
|
|
<view v-if='index!=stepsData.length-1' class="left_line_down"></view>
|
|
</view>
|
|
<view class="rig_name flex_clumn">
|
|
<text class="text">{{item.value}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
stepsData:{
|
|
type:Array,
|
|
default:[]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.process_more{
|
|
// border: 1rpx solid red;
|
|
.set-2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
.lef_name{
|
|
width: 100rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
font-size: 27rpx;
|
|
color: #888888;
|
|
// border: 1rpx solid red;
|
|
font-weight: bold;
|
|
.text{
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
font-family: PingFangSC-Ultralight,ans-serif;
|
|
}
|
|
}
|
|
.rig_name{
|
|
height: 40rpx;
|
|
color: #888888;
|
|
line-height: 40rpx;
|
|
margin-left: 50rpx;
|
|
// border: 1rpx solid red;
|
|
font-size: 28rpx;
|
|
.text{
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
.cen_img{
|
|
width: 50rpx;
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.left_line_up{
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border: 2rpx solid #707070;
|
|
// box-shadow: #919191 0px 0px 5px;
|
|
border-radius: 50%;
|
|
}
|
|
.active{
|
|
background-color: #3476FE;
|
|
}
|
|
.left_line_down{
|
|
height: 50rpx;
|
|
margin-top: 10rpx;
|
|
width: 3rpx;
|
|
background-color: #bdbdbd;
|
|
}
|
|
}
|
|
.flex_clumn{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|