fix(Card): fix price font-family (#5194)

This commit is contained in:
Lindy 2019-12-06 11:34:14 +08:00 committed by neverland
parent 31d645959d
commit 04bfb76d63
4 changed files with 29 additions and 15 deletions

View File

@ -64,11 +64,16 @@
display: inline-block;
color: @card-price-color;
font-weight: @font-weight-bold;
font-size: @card-price-font-size;
}
&--integer {
font-size: @card-price-integer-font-size;
font-family: @card-price-font-family;
}
&__price-integer {
font-size: @card-price-integer-font-size;
font-family: @card-price-font-family;
}
&__price-decimal {
font-family: @card-price-font-family;
}
&__origin-price {

View File

@ -101,7 +101,11 @@ function Card(
}
if (props.title) {
return <div class={[bem('title'), 'van-multi-ellipsis--l2']}>{props.title}</div>;
return (
<div class={[bem('title'), 'van-multi-ellipsis--l2']}>
{props.title}
</div>
);
}
}
@ -118,11 +122,11 @@ function Card(
function PriceContent() {
const priceArr = props.price!.toString().split('.');
return (
<div>
{props.currency}
<span class={bem('price', 'integer')}>{priceArr[0]}</span>.
{priceArr[1]}
</div>
<div>
{props.currency}
<span class={bem('price-integer')}>{priceArr[0]}</span>.
<span class={bem('price-decimal')}>{priceArr[1]}</span>
</div>
);
}
@ -149,7 +153,11 @@ function Card(
function Num() {
if (showNum) {
return <div class={bem('num')}>{slots.num ? slots.num() : `x${props.num}`}</div>;
return (
<div class={bem('num')}>
{slots.num ? slots.num() : `x${props.num}`}
</div>
);
}
}

View File

@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-card__bottom">
<div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
<div>¥<span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
</div>
<div class="van-card__num">x2</div>
</div>
@ -41,7 +41,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-card__bottom">
<div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
<div>¥<span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
</div>
<div class="van-card__origin-price">¥ 10.00</div>
<div class="van-card__num">x2</div>
@ -70,7 +70,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-card__bottom">
<div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
<div>¥<span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
</div>
<div class="van-card__num">x2</div>
</div>

View File

@ -42,7 +42,7 @@
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@price-integer-font-family: Avenir-Heavy PingFang SC, Helvetica Neue, Arial, sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
// Animation
@animation-duration-base: .3s;
@ -148,6 +148,7 @@
@card-origin-price-color: @gray-6;
@card-num-color: @gray-6;
@card-origin-price-font-size: @font-size-xs;
@card-price-font-size: @font-size-sm;
@card-price-integer-font-size: @font-size-lg;
@card-price-font-family: @price-integer-font-family;