mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
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:
parent
855cfa5d94
commit
4b58899594
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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]}` : ''
|
||||
});
|
||||
},
|
||||
|
||||
|
@ -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 }}
|
||||
|
Loading…
x
Reference in New Issue
Block a user