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.
129 lines
2.9 KiB
129 lines
2.9 KiB
<template>
|
|
<view class="content">
|
|
<view v-for="(item, index) in list" :key="index"
|
|
class="list"
|
|
:style="index == list.length - 1 ? 'padding-bottom: 60rpx' : ''">
|
|
<view class="left">
|
|
<view class="up-line" :class="{'remove-line': index == 0}"
|
|
:style="{'border-color': themeColor, 'background-color': themeColor}"></view>
|
|
<view class="icon" :style="{
|
|
'background-color': index == list.length - 1 && !item.isFinished ? themeColor : '#fff',
|
|
'border-color': themeColor,
|
|
'color': themeColor}">
|
|
<u-icon name="arrow-down" color="#fff" v-if="index == list.length - 1 && !item.isFinished"></u-icon>
|
|
<u-icon name="checkmark" v-else></u-icon>
|
|
</view>
|
|
<view class="down-line" :class="{
|
|
'dotted-line': index == list.length - 1 && !item.isFinished,
|
|
'remove-line': index == list.length - 1 && item.isFinished
|
|
}" :style="{'border-color': themeColor, 'background-color': themeColor}">
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="desc">
|
|
<text class="lf-line-2">{{ item.action }}</text>
|
|
<text class="date">{{ item.created_at }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'lf-step-bar',
|
|
props: {
|
|
themeColor: {
|
|
type: String,
|
|
default: '#1833F2'
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default(){
|
|
return [{
|
|
desc: '订单创建',
|
|
date: '2021-07-23 13:23:52',
|
|
isFinished: false
|
|
},{
|
|
desc: '订单发货',
|
|
date: '2021-07-23 13:23:52',
|
|
isFinished: false
|
|
},{
|
|
desc: '订单发货',
|
|
date: '2021-07-23 13:23:52',
|
|
isFinished: false
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.content{
|
|
width: 100%;
|
|
height: max-content;
|
|
padding: 0 32rpx;
|
|
}
|
|
.list{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 110rpx;
|
|
.left{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
margin-right: 15rpx;
|
|
.up-line,.down-line{
|
|
height: 40rpx;
|
|
width: 2rpx;
|
|
border: 1rpx solid #1833F2;
|
|
background-color: #1833F2;
|
|
position: relative;
|
|
}
|
|
.remove-line{
|
|
border: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
.dotted-line::after{
|
|
content: '';
|
|
position: absolute;
|
|
left: -1rpx;
|
|
bottom: -40rpx;
|
|
height: 40rpx;
|
|
width: 0rpx;
|
|
border: 1rpx dashed #999999;
|
|
}
|
|
.icon{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
box-sizing: border-box;
|
|
border: 2rpx solid #1833F2;
|
|
color: #1833F2;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
}
|
|
.right{
|
|
flex: auto;
|
|
.desc{
|
|
position: relative;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
.date{
|
|
position: absolute;
|
|
bottom: -36rpx;
|
|
left: 0;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|