parent
32842fa73a
commit
71cc2fd4af
@ -1,54 +1,37 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="custom-class {{ utils.bem('steps', [direction]) }}">
|
||||
<view class="van-step__wrapper">
|
||||
<view
|
||||
wx:for="{{ steps }}"
|
||||
wx:key="index"
|
||||
bindtap="onClick"
|
||||
data-index="{{ index }}"
|
||||
class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
|
||||
style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}"
|
||||
>
|
||||
<view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
|
||||
<view>{{ item.text }}</view>
|
||||
<view class="desc-class">{{ item.desc }}</view>
|
||||
</view>
|
||||
<view class="van-step__circle-container">
|
||||
<block wx:if="{{ index !== active }}">
|
||||
<van-icon
|
||||
wx:if="{{ item.inactiveIcon || inactiveIcon }}"
|
||||
color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
|
||||
name="{{ item.inactiveIcon || inactiveIcon }}"
|
||||
custom-class="van-step__icon"
|
||||
/>
|
||||
<view
|
||||
wx:else
|
||||
class="van-step__circle"
|
||||
style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
|
||||
/>
|
||||
</block>
|
||||
<view class="van-step__wrapper">
|
||||
<view wx:for="{{ steps }}" wx:key="index" bindtap="onClick" data-index="{{ index }}" class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline" style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}">
|
||||
<view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
|
||||
<view>{{ item.text }}</view>
|
||||
<view class="desc-class">
|
||||
<rich-text nodes="{{ item.desc }}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="van-step__circle-container">
|
||||
<block wx:if="{{ index !== active }}">
|
||||
<van-icon wx:if="{{ item.inactiveIcon || inactiveIcon }}" color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}" name="{{ item.inactiveIcon || inactiveIcon }}" custom-class="van-step__icon" />
|
||||
<view wx:else class="van-step__circle" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}" />
|
||||
</block>
|
||||
|
||||
<van-icon wx:else name="{{ item.activeIcon || activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
|
||||
</view>
|
||||
<view
|
||||
wx:if="{{ index !== steps.length - 1 }}"
|
||||
class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
|
||||
/>
|
||||
<van-icon wx:else name="{{ item.activeIcon || activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
|
||||
</view>
|
||||
<view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<wxs module="status">
|
||||
function get(index, active) {
|
||||
if (index < active) {
|
||||
return 'finish';
|
||||
} else if (index === active) {
|
||||
return 'process';
|
||||
}
|
||||
function get(index, active) {
|
||||
if (index < active) {
|
||||
return 'finish';
|
||||
} else if (index === active) {
|
||||
return 'process';
|
||||
}
|
||||
|
||||
return 'inactive';
|
||||
}
|
||||
return 'inactive';
|
||||
}
|
||||
|
||||
module.exports = get;
|
||||
</wxs>
|
||||
module.exports = get;
|
||||
</wxs>
|
@ -1 +1,160 @@
|
||||
@import '../common/index.wxss';.van-steps{background-color:var(--steps-background-color,#fff);overflow:hidden}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{display:flex;overflow:hidden;position:relative}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{color:var(--step-text-color,#969799);flex:1;font-size:var(--step-font-size,14px);position:relative}.van-step--finish{color:var(--step-finish-text-color,#323233)}.van-step__circle{background-color:var(--step-circle-color,#969799);border-radius:50%;height:var(--step-circle-size,5px);width:var(--step-circle-size,5px)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;transform:none}.van-step--horizontal:last-child .van-step__circle-container{padding:0 0 0 8px;right:0;transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{background-color:#fff;bottom:6px;padding:0 var(--padding-xs,8px);position:absolute;transform:translate3d(-50%,50%,0);z-index:1}.van-step--horizontal .van-step__title{display:inline-block;font-size:var(--step-horizontal-title-font-size,12px);transform:translate3d(-50%,0,0)}.van-step--horizontal .van-step__line{background-color:var(--step-line-color,#ebedf0);bottom:6px;height:1px;left:0;position:absolute;right:0;transform:translate3d(0,50%,0)}.van-step--horizontal.van-step--process{color:var(--step-process-text-color,#323233)}.van-step--horizontal.van-step--process .van-step__icon{display:block;font-size:var(--step-icon-size,12px);line-height:1}.van-step--vertical{line-height:18px;padding:10px 10px 10px 0}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{background-color:#fff;content:"";height:20px;left:-15px;position:absolute;top:0;width:1px;z-index:1}.van-step--vertical .van-step__circle,.van-step--vertical .van-step__icon,.van-step--vertical .van-step__line{left:-14px;position:absolute;top:19px;transform:translate3d(-50%,-50%,0);z-index:2}.van-step--vertical .van-step__icon{font-size:var(--step-icon-size,12px);line-height:1}.van-step--vertical .van-step__line{background-color:var(--step-line-color,#ebedf0);height:100%;transform:translate3d(-50%,0,0);width:1px;z-index:1}
|
||||
@import '../common/index.wxss';
|
||||
|
||||
.van-steps {
|
||||
background-color: var(--steps-background-color, #fff);
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.van-steps--horizontal {
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.van-steps--horizontal .van-step__wrapper {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.van-steps--vertical {
|
||||
padding-left: 10px
|
||||
}
|
||||
|
||||
.van-steps--vertical .van-step__wrapper {
|
||||
padding: 0 0 0 20px
|
||||
}
|
||||
|
||||
.van-step {
|
||||
color: var(--step-text-color, #969799);
|
||||
flex: 1;
|
||||
font-size: var(--step-font-size, 14px);
|
||||
position: relative
|
||||
}
|
||||
|
||||
.van-step--finish {
|
||||
color: var(--step-finish-text-color, #323233)
|
||||
}
|
||||
|
||||
.van-step__circle {
|
||||
background-color: var(--step-circle-color, #969799);
|
||||
border-radius: 50%;
|
||||
height: var(--step-circle-size, 5px);
|
||||
width: var(--step-circle-size, 5px)
|
||||
}
|
||||
|
||||
.van-step--horizontal {
|
||||
padding-bottom: 14px
|
||||
}
|
||||
|
||||
.van-step--horizontal:first-child .van-step__title {
|
||||
transform: none
|
||||
}
|
||||
|
||||
.van-step--horizontal:first-child .van-step__circle-container {
|
||||
padding: 0 8px 0 0;
|
||||
transform: translate3d(0, 50%, 0)
|
||||
}
|
||||
|
||||
.van-step--horizontal:last-child {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: auto
|
||||
}
|
||||
|
||||
.van-step--horizontal:last-child .van-step__title {
|
||||
text-align: right;
|
||||
transform: none
|
||||
}
|
||||
|
||||
.van-step--horizontal:last-child .van-step__circle-container {
|
||||
padding: 0 0 0 8px;
|
||||
right: 0;
|
||||
transform: translate3d(0, 50%, 0)
|
||||
}
|
||||
|
||||
.van-step--horizontal .van-step__circle-container {
|
||||
background-color: #fff;
|
||||
bottom: 6px;
|
||||
padding: 0 var(--padding-xs, 8px);
|
||||
position: absolute;
|
||||
transform: translate3d(-50%, 50%, 0);
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.van-step--horizontal .van-step__title {
|
||||
display: inline-block;
|
||||
font-size: var(--step-horizontal-title-font-size, 12px);
|
||||
transform: translate3d(-50%, 0, 0)
|
||||
}
|
||||
|
||||
.van-step--horizontal .van-step__line {
|
||||
background-color: var(--step-line-color, #ebedf0);
|
||||
bottom: 6px;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translate3d(0, 50%, 0)
|
||||
}
|
||||
|
||||
.van-step--horizontal.van-step--process {
|
||||
color: var(--step-process-text-color, #323233)
|
||||
}
|
||||
|
||||
.van-step--horizontal.van-step--process .van-step__icon {
|
||||
display: block;
|
||||
font-size: var(--step-icon-size, 12px);
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.van-step--vertical {
|
||||
line-height: 18px;
|
||||
padding: 10px 10px 10px 0
|
||||
}
|
||||
|
||||
.van-step--vertical:after {
|
||||
border-bottom-width: 1px
|
||||
}
|
||||
|
||||
.van-step--vertical:last-child:after {
|
||||
border-bottom-width: none
|
||||
}
|
||||
|
||||
.van-step--vertical:first-child:before {
|
||||
background-color: #fff;
|
||||
content: "";
|
||||
height: 20px;
|
||||
left: -15px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.van-step--vertical .van-step__circle,
|
||||
.van-step--vertical .van-step__icon,
|
||||
.van-step--vertical .van-step__line {
|
||||
left: -14px;
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.van-step--vertical .van-step__icon {
|
||||
font-size: var(--step-icon-size, 12px);
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.van-step--vertical .van-step__line {
|
||||
background-color: var(--step-line-color, #ebedf0);
|
||||
height: 100%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
width: 1px;
|
||||
z-index: 1
|
||||
}
|
||||
.desc-class{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0 32rpx 0 32rpx
|
||||
}
|
Loading…
Reference in new issue