blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 15:39:15 +08:00
Code Issues Projects Releases Wiki Activity

refactor(CouponList): update style (#5501)

Browse Source
This commit is contained in:
rex 2020-01-09 10:09:55 +08:00 committed by neverland
parent 753165fdf7
commit ccdedecee7
4 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/coupon-list/index.js
View File

@ -165,17 +165,17 @@ export default createComponent({
const disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount; const disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
const ExchangeBar = this.showExchangeBar && ( const ExchangeBar = this.showExchangeBar && (
<Field <div class={bem('exchange-bar')}>
vModel={this.currentCode} <Field
clearable vModel={this.currentCode}
border={false} clearable
class={bem('field')} border={false}
placeholder={this.inputPlaceholder || t('placeholder')} class={bem('field')}
maxlength="20" placeholder={this.inputPlaceholder || t('placeholder')}
scopedSlots={{ maxlength="20"
button: this.genExchangeButton />
}} {this.genExchangeButton()}
/> </div>
); );
const onChange = index => () => this.$emit('change', index); const onChange = index => () => this.$emit('change', index);

19
src/coupon-list/index.less
View File

@ -8,7 +8,7 @@
&__field { &__field {
padding: @coupon-list-field-padding; padding: @coupon-list-field-padding;
.van-field__control { .van-field__body {
height: 34px; height: 34px;
padding-left: @padding-sm; padding-left: @padding-sm;
line-height: 34px; line-height: 34px;
@ -19,18 +19,33 @@
color: @gray-5; color: @gray-5;
} }
} }
.van-field__clear {
margin-right: 0;
}
}
&__exchange-bar {
display: flex;
align-items: center;
background-color: @white;
} }
&__exchange { &__exchange {
flex: none;
height: @coupon-list-exchange-button-height; height: @coupon-list-exchange-button-height;
font-size: @font-size-lg; font-size: @font-size-lg;
line-height: @coupon-list-exchange-button-height - 2px; line-height: @coupon-list-exchange-button-height - 2px;
border: 0; border: 0;
} }
.van-tabs__wrap {
box-shadow: 0 6px 12px -12px @gray-6;
}
&__list { &__list {
box-sizing: border-box; box-sizing: border-box;
padding: @padding-md 0; padding: @padding-md 0 @padding-lg;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

30
src/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -2,12 +2,12 @@
exports[`empty-image prop 1`] = ` exports[`empty-image prop 1`] = `
<div class="van-coupon-list"> <div class="van-coupon-list">
<div class="van-cell van-cell--borderless van-field van-coupon-list__field"> <div class="van-coupon-list__exchange-bar">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"> <div class="van-cell__value van-cell__value--alone">
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div> <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
</div> </div>
</div> </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
</div> </div>
<div class="van-tabs van-tabs--line van-coupon-list__tab"> <div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap"> <div class="van-tabs__wrap">
@ -52,12 +52,12 @@ exports[`render coupon cell with coupon 1`] = `
exports[`render coupon list 1`] = ` exports[`render coupon list 1`] = `
<div class="van-coupon-list"> <div class="van-coupon-list">
<div class="van-cell van-cell--borderless van-field van-coupon-list__field"> <div class="van-coupon-list__exchange-bar">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"> <div class="van-cell__value van-cell__value--alone">
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div> <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
</div> </div>
</div> </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
</div> </div>
<div class="van-tabs van-tabs--line van-coupon-list__tab"> <div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap"> <div class="van-tabs__wrap">
@ -198,12 +198,12 @@ exports[`render disabled coupon 1`] = `
exports[`render empty coupon list 1`] = ` exports[`render empty coupon list 1`] = `
<div class="van-coupon-list"> <div class="van-coupon-list">
<div class="van-cell van-cell--borderless van-field van-coupon-list__field"> <div class="van-coupon-list__exchange-bar">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"> <div class="van-cell__value van-cell__value--alone">
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div> <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
</div> </div>
</div> </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
</div> </div>
<div class="van-tabs van-tabs--line van-coupon-list__tab"> <div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap"> <div class="van-tabs__wrap">

4
src/style/var.less
View File

@ -258,12 +258,12 @@
@count-down-line-height: 20px; @count-down-line-height: 20px;
// Coupon // Coupon
@coupon-margin: 0 @padding-md @padding-md; @coupon-margin: 0 @padding-sm @padding-sm;
@coupon-content-height: 84px; @coupon-content-height: 84px;
@coupon-content-padding: 14px 0; @coupon-content-padding: 14px 0;
@coupon-background-color: @white; @coupon-background-color: @white;
@coupon-active-background-color: @active-color; @coupon-active-background-color: @active-color;
@coupon-border-radius: @border-radius-md; @coupon-border-radius: @border-radius-lg;
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); @coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
@coupon-head-width: 96px; @coupon-head-width: 96px;
@coupon-amount-color: @red; @coupon-amount-color: @red;