blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

fix: steps ui bug (#627)

Browse Source
This commit is contained in:
Fyerl 2018-09-22 15:20:30 +08:00 committed by neverland
parent f35edf2662
commit 51f7adacfa
2 changed files with 29 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/steps/index.pcss
View File

@ -6,9 +6,9 @@
background-color: $white; background-color: $white;
&--horizontal { &--horizontal {
position: relative;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
position: relative;
padding: 10px 10px 15px; padding: 10px 10px 15px;
} }
@ -18,9 +18,9 @@
} }
.van-step { .van-step {
position: relative;
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
position: relative;
color: $gray-dark; color: $gray-dark;
&--finish { &--finish {
@ -35,13 +35,16 @@
} }
&--horizontal { &--horizontal {
float: left; padding-bottom: 14px;
padding-bottom: 10px;
&:first-child { &:first-child {
.van-step__title { .van-step__title {
transform: none; transform: none;
margin-left: 0; }
.van-step__circle-container {
padding: 0 8px 0 0;
transform: translate3d(0, 50%, 0);
} }
} }
@ -52,56 +55,48 @@
.van-step__title { .van-step__title {
transform: none; transform: none;
margin-left: 0;
text-align: right; text-align: right;
} }
.van-step__circle-container { .van-step__circle-container {
left: auto; right: 0;
right: -9px; padding: 0 0 0 8px;
} transform: translate3d(0, 50%, 0);
.van-step__line {
width: 0;
} }
} }
.van-step__circle-container { .van-step__circle-container {
position: absolute; position: absolute;
bottom: 0; bottom: 6px;
left: -8px; z-index: 1;
padding: 0 8px; padding: 0 8px;
background-color: $white; background-color: $white;
z-index: 1; transform: translate3d(-50%, 50%, 0);
} }
.van-step__title { .van-step__title {
display: inline-block;
font-size: 12px; font-size: 12px;
transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);
display: inline-block;
margin-left: 3px;
} }
.van-step__line { .van-step__line {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 2px; right: 0;
width: 100%; bottom: 6px;
height: 1px; height: 1px;
background-color: $border-color; background-color: $border-color;
transform: translate3d(0, 50%, 0);
} }
&.van-step--process { &.van-step--process {
color: $text-color; color: $text-color;
.van-step__circle-container {
bottom: -4px;
}
.van-step__active { .van-step__active {
display: block;
font-size: 12px; font-size: 12px;
color: $green; color: $green;
display: block;
line-height: 1; line-height: 1;
} }
} }
@ -130,30 +125,26 @@
} }
.van-step__active, .van-step__active,
.van-step__circle { .van-step__circle,
z-index: 2; .van-step__line {
position: absolute; position: absolute;
top: 19px;
left: -14px;
z-index: 2;
transform: translate3d(-50%, -50%, 0);
} }
.van-step__active { .van-step__active {
top: 12px;
left: -20px;
line-height: 1;
font-size: 12px; font-size: 12px;
} line-height: 1;
.van-step__circle {
top: 16px;
left: -17px;
} }
.van-step__line { .van-step__line {
position: absolute; z-index: 1;
top: 0;
left: -15px;
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: $border-color; background-color: $border-color;
transform: translate3d(-50%, 0, 0);
} }
} }
} }

2
packages/steps/index.wxml
View File

@ -13,6 +13,6 @@
<view class="van-step__circle" wx:if="{{ item.status !== 'process' }}" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" /> <view class="van-step__circle" wx:if="{{ item.status !== 'process' }}" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
<van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" /> <van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" />
</view> </view>
<view class="van-step__line" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" /> <view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
</view> </view>
</view> </view>