feat(SubmitBar): style update (#2755)

* feat(SubmitBar): style update

* feat(SubmitBar): code optimize

* feat(SubmitBar): code adjustment

* feat(SubmitBar): code adjustment
This commit is contained in:
Lindy 2020-02-21 16:39:33 +08:00 committed by GitHub
parent 855cfa5d94
commit 4b58899594
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 7 deletions

View File

@ -415,8 +415,8 @@
@submit-bar-background-color: @white;
@submit-bar-button-width: 110px;
@submit-bar-price-color: @red;
@submit-bar-price-font-size: 18px;
@submit-bar-currency-font-size: 14px;
@submit-bar-price-font-size: @font-size-sm;
@submit-bar-currency-font-size: @font-size-sm;
@submit-bar-text-color: @text-color;
@submit-bar-text-font-size: 14px;
@submit-bar-tip-padding: 10px;
@ -425,6 +425,10 @@
@submit-bar-tip-color: #f56723;
@submit-bar-tip-background-color: #fff7cc;
@submit-bar-tip-icon-size: 12px;
@submit-bar-button-height: 40px;
@submit-bar-padding: 0 @padding-md;
@submit-bar-price-integer-font-size: 20px;
@submit-bar-price-font-family: @price-integer-font-family;
// Tabbar
@tabbar-height: 50px;

View File

@ -40,6 +40,7 @@
display: flex;
align-items: center;
justify-content: flex-end;
.theme(padding, '@submit-bar-padding');
.theme(height, '@submit-bar-height');
.theme(font-size, '@submit-bar-text-font-size');
.theme(background-color, '@submit-bar-background-color');
@ -60,7 +61,13 @@
&__price {
.theme(color, '@submit-bar-price-color');
.theme(font-weight, '@font-weight-bold');
.theme(font-size, '@submit-bar-price-font-size');
&-integer {
font-size: @submit-bar-price-integer-font-size;
font-family: @submit-bar-price-font-family;
}
}
&__currency {
@ -72,6 +79,9 @@
}
&__button {
.theme(width, '@submit-bar-button-width');
.theme(width,'@submit-bar-button-width');
.theme(font-weight, '@font-weight-bold');
.theme(--button-default-height, '@submit-bar-button-height') !important;
.theme(--button-line-height, '@submit-bar-button-height') !important;
}
}

View File

@ -46,9 +46,11 @@ VantComponent({
methods: {
updatePrice() {
const { price, decimalLength } = this.data;
const priceStrArr = typeof price === 'number' && (price / 100).toFixed(decimalLength).split('.');
this.setData({
hasPrice: typeof price === 'number',
priceStr: (price / 100).toFixed(decimalLength)
integerStr: priceStrArr && priceStrArr[0],
decimalStr: decimalLength && priceStrArr ? `.${priceStrArr[1]}` : ''
});
},

View File

@ -22,18 +22,18 @@
<text>{{ label || '合计:' }}</text>
<text class="van-submit-bar__price price-class">
<text class="van-submit-bar__currency">{{ currency }} </text>
<text>{{ priceStr }}</text>
<text class="van-submit-bar__price-integer">{{ integerStr }}</text><text>{{decimalStr}}</text>
</text>
<text class="van-submit-bar__suffix-label">{{ suffixLabel }}</text>
</view>
<van-button
square
size="large"
round
type="{{ buttonType }}"
loading="{{ loading }}"
disabled="{{ disabled }}"
class="van-submit-bar__button"
custom-class="button-class"
custom-style="width: 100%;"
bind:click="onSubmit"
>
{{ loading ? '' : buttonText }}