fix(goods-action): add several css variable (#3654)

fix #3652
This commit is contained in:
rex 2020-09-30 11:45:30 +08:00 committed by GitHub
parent 981741a6c4
commit bdf6660fcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 25 deletions

View File

@ -258,7 +258,11 @@
// GoodsAction // GoodsAction
@goods-action-background-color: @white; @goods-action-background-color: @white;
@goods-action-icon-height: 50px; @goods-action-height: 50px;
@goods-action-icon-width: 48px;
@goods-action-icon-height: @goods-action-height;
@goods-action-icon-color: @text-color;
@goods-action-icon-size: 18px;
@goods-action-icon-font-size: @font-size-xs; @goods-action-icon-font-size: @font-size-xs;
@goods-action-icon-text-color: @gray-7; @goods-action-icon-text-color: @gray-7;
@goods-action-button-height: 40px; @goods-action-button-height: 40px;

View File

@ -2,20 +2,21 @@
@import '../common/style/theme.less'; @import '../common/style/theme.less';
.van-goods-action-icon { .van-goods-action-icon {
display: flex !important;
flex-direction: column;
justify-content: center !important;
line-height: 1 !important;
border: none !important; border: none !important;
.theme(width, '@goods-action-icon-height') !important;
&__content { .theme(font-size, '@goods-action-icon-font-size') !important;
display: flex; .theme(color, '@goods-action-icon-text-color') !important;
flex-direction: column; .theme(min-width, '@goods-action-icon-width');
justify-content: center; .theme(height, '@goods-action-icon-height') !important;
height: 100%;
line-height: 1;
.theme(font-size, '@goods-action-icon-font-size');
.theme(color, '@goods-action-icon-text-color');
}
&__icon { &__icon {
margin-bottom: 4px; display: flex;
margin: 0 auto 5px;
.theme(color, '@goods-action-icon-color');
.theme(font-size, '@goods-action-icon-size');
} }
} }

View File

@ -22,17 +22,14 @@
bindgetphonenumber="bindGetPhoneNumber" bindgetphonenumber="bindGetPhoneNumber"
bindlaunchapp="bindLaunchApp" bindlaunchapp="bindLaunchApp"
> >
<view class="van-goods-action-icon__content"> <van-icon
<van-icon wx:if="{{ icon }}"
wx:if="{{ icon }}" name="{{ icon }}"
size="20px" dot="{{ dot }}"
name="{{ icon }}" info="{{ info }}"
dot="{{ dot }}" class="van-goods-action-icon__icon"
info="{{ info }}" custom-class="icon-class"
class="van-goods-action-icon__icon" />
custom-class="icon-class" <slot wx:else name="icon" />
/> <text class="text-class">{{ text }}</text>
<slot name="icon" />
<text class="text-class">{{ text }}</text>
</view>
</van-button> </van-button>

View File

@ -8,6 +8,7 @@
left: 0; left: 0;
display: flex; display: flex;
align-items: center; align-items: center;
.theme(height, '@goods-action-height');
.theme(background-color, '@goods-action-background-color'); .theme(background-color, '@goods-action-background-color');
&--safe { &--safe {