[new feature] Card:更新价格样式,更新demo (#2313)

This commit is contained in:
rex 2018-12-17 21:38:15 +08:00 committed by neverland
parent dc747ec5f3
commit b204923274
3 changed files with 26 additions and 7 deletions

View File

@ -20,9 +20,13 @@
:title="$t('title')"
:thumb="imageURL"
>
<div slot="footer">
<van-button size="mini">{{ $t('button') }}</van-button>
<van-button size="mini">{{ $t('button') }}</van-button>
<div slot="tags" class="card__tags">
<van-tag plain type="danger">标签1</van-tag>
<van-tag plain type="danger">标签2</van-tag>
</div>
<div slot="footer" class="card__footer">
<van-button round size="mini">{{ $t('button') }}</van-button>
<van-button round size="mini">{{ $t('button') }}</van-button>
</div>
</van-card>
</demo-block>
@ -33,7 +37,7 @@
export default {
i18n: {
'zh-CN': {
title: '商品标题'
title: '2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男'
}
},
@ -44,3 +48,15 @@ export default {
}
};
</script>
<style lang="less">
.card__footer {
padding-top: 10px;
}
.card__tags {
.van-tag {
margin-right: 5px;
}
}
</style>

View File

@ -69,6 +69,8 @@
&__price {
display: inline-block;
color: @red;
font-weight: bold;
}
&__origin-price {

View File

@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
<!----></a>
<div class="van-card__content">
<div class="van-card__title">
商品标题
2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男
</div>
<div class="van-card__desc van-ellipsis">
描述信息
@ -31,11 +31,12 @@ exports[`renders demo correctly 1`] = `
</span></a>
<div class="van-card__content">
<div class="van-card__title">
商品标题
2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男
</div>
<div class="van-card__desc van-ellipsis">
描述信息
</div>
<div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color:#f44;">标签1</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#f44;">标签2</span></div>
<div class="van-card__bottom">
<div class="van-card__price">
¥ 2.00
@ -49,7 +50,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-card__footer">
<div><button class="van-button van-button--default van-button--mini"><span class="van-button__text">按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">按钮</span></button></div>
<div class="card__footer"><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">按钮</span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">按钮</span></button></div>
</div>
</div>
</div>