mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Card: optimize style (#2417)
This commit is contained in:
neverland
GitHub
parent
51296f0059
commit
4fcf1309b6
@ -52,7 +52,6 @@ Use `slot` to custom content.
|
||||
| num | Number | `String | Number` | - |
|
||||
| price | Price | `String | Number` | - |
|
||||
| origin-price | Origin price | `String | Number` | - |
|
||||
| centered | Whether content vertical centered | `String` | `false` |
|
||||
| currency | Currency symbol | `String` | `¥` |
|
||||
| thumb-link | Thumb link URL | `String` | - |
|
||||
| lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` |
|
||||
|
||||
@ -2,14 +2,12 @@
|
||||
@import '../style/mixins/ellipsis';
|
||||
|
||||
.van-card {
|
||||
color: @text-color;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
color: @text-color;
|
||||
font-size: 12px;
|
||||
padding: 5px 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: @background-color-light;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
@ -21,6 +19,10 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
@ -44,12 +46,12 @@
|
||||
|
||||
&__title,
|
||||
&__desc {
|
||||
line-height: 17px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-height: 34px;
|
||||
line-height: 16px;
|
||||
max-height: 32px;
|
||||
font-weight: bold;
|
||||
|
||||
.multi-ellipsis(2);
|
||||
@ -57,7 +59,8 @@
|
||||
|
||||
&__desc {
|
||||
color: @gray-darker;
|
||||
max-height: 17px;
|
||||
max-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
@ -65,7 +68,7 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
line-height: 17px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&__price {
|
||||
@ -93,7 +96,6 @@
|
||||
}
|
||||
|
||||
&__footer {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
flex: none;
|
||||
|
||||
|
||||
@ -1,67 +1,69 @@
|
||||
<template>
|
||||
<div :class="b({ center: centered })">
|
||||
<a
|
||||
v-if="thumb || $slots.thumb"
|
||||
:href="thumbLink"
|
||||
:class="b('thumb')"
|
||||
>
|
||||
<slot name="thumb">
|
||||
<img
|
||||
v-if="lazyLoad"
|
||||
v-lazy="thumb"
|
||||
:class="b('img')"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
:src="thumb"
|
||||
:class="b('img')"
|
||||
>
|
||||
</slot>
|
||||
<van-tag
|
||||
v-if="tag"
|
||||
mark
|
||||
type="danger"
|
||||
:class="b('tag')"
|
||||
<div :class="b()">
|
||||
<div :class="b('header')">
|
||||
<a
|
||||
v-if="thumb || $slots.thumb"
|
||||
:href="thumbLink"
|
||||
:class="b('thumb')"
|
||||
>
|
||||
{{ tag }}
|
||||
</van-tag>
|
||||
</a>
|
||||
<slot name="thumb">
|
||||
<img
|
||||
v-if="lazyLoad"
|
||||
v-lazy="thumb"
|
||||
:class="b('img')"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
:src="thumb"
|
||||
:class="b('img')"
|
||||
>
|
||||
</slot>
|
||||
<van-tag
|
||||
v-if="tag"
|
||||
mark
|
||||
type="danger"
|
||||
:class="b('tag')"
|
||||
>
|
||||
{{ tag }}
|
||||
</van-tag>
|
||||
</a>
|
||||
|
||||
<div :class="b('content')">
|
||||
<slot name="title">
|
||||
<div
|
||||
v-if="title"
|
||||
v-text="title"
|
||||
:class="b('title')"
|
||||
/>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<div
|
||||
v-if="desc"
|
||||
v-text="desc"
|
||||
:class="[b('desc'), 'van-ellipsis']"
|
||||
/>
|
||||
</slot>
|
||||
<slot name="tags" />
|
||||
<div :class="b('content')">
|
||||
<slot name="title">
|
||||
<div
|
||||
v-if="title"
|
||||
v-text="title"
|
||||
:class="b('title')"
|
||||
/>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<div
|
||||
v-if="desc"
|
||||
v-text="desc"
|
||||
:class="[b('desc'), 'van-ellipsis']"
|
||||
/>
|
||||
</slot>
|
||||
<slot name="tags" />
|
||||
|
||||
<div class="van-card__bottom">
|
||||
<div
|
||||
v-if="isDef(price)"
|
||||
:class="b('price')"
|
||||
>
|
||||
<slot name="price">{{ currency }} {{ price }}</slot>
|
||||
</div>
|
||||
<div
|
||||
v-if="isDef(originPrice)"
|
||||
:class="b('origin-price')"
|
||||
>
|
||||
{{ currency }} {{ originPrice }}
|
||||
</div>
|
||||
<div
|
||||
v-if="isDef(num) || $slots.num"
|
||||
:class="b('num')"
|
||||
>
|
||||
<slot name="num">x {{ num }}</slot>
|
||||
<div class="van-card__bottom">
|
||||
<div
|
||||
v-if="isDef(price)"
|
||||
:class="b('price')"
|
||||
>
|
||||
<slot name="price">{{ currency }} {{ price }}</slot>
|
||||
</div>
|
||||
<div
|
||||
v-if="isDef(originPrice)"
|
||||
:class="b('origin-price')"
|
||||
>
|
||||
{{ currency }} {{ originPrice }}
|
||||
</div>
|
||||
<div
|
||||
v-if="isDef(num) || $slots.num"
|
||||
:class="b('num')"
|
||||
>
|
||||
<slot name="num">x {{ num }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,38 +3,42 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-card"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
|
||||
<!----></a>
|
||||
<div class="van-card__content">
|
||||
<div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
|
||||
<div class="van-card__desc van-ellipsis">描述信息</div>
|
||||
<div class="van-card__bottom">
|
||||
<div class="van-card__price">¥ 2.00</div>
|
||||
<!---->
|
||||
<div class="van-card__num">x 2</div>
|
||||
<div class="van-card">
|
||||
<div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
|
||||
<!----></a>
|
||||
<div class="van-card__content">
|
||||
<div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
|
||||
<div class="van-card__desc van-ellipsis">描述信息</div>
|
||||
<div class="van-card__bottom">
|
||||
<div class="van-card__price">¥ 2.00</div>
|
||||
<!---->
|
||||
<div class="van-card__num">x 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-card"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-card__tag" style="background-color:#f44;">
|
||||
标签
|
||||
</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;">
|
||||
<div class="van-card">
|
||||
<div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-card__tag" style="background-color:#f44;">
|
||||
标签
|
||||
</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</div>
|
||||
<div class="van-card__origin-price">
|
||||
¥ 10.00
|
||||
<div class="van-card__bottom">
|
||||
<div class="van-card__price">¥ 2.00</div>
|
||||
<div class="van-card__origin-price">
|
||||
¥ 10.00
|
||||
</div>
|
||||
<div class="van-card__num">x 2</div>
|
||||
</div>
|
||||
<div class="van-card__num">x 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-card__footer">
|
||||
|
||||
@ -52,7 +52,6 @@ Vue.use(Card);
|
||||
| num | 商品数量 | `String | Number` | - | - |
|
||||
| price | 商品价格 | `String | Number` | - | - |
|
||||
| origin-price | 商品划线原价 | `String | Number` | - | 1.3.6 |
|
||||
| centered | 内容是否垂直居中 | `String` | `false` | - |
|
||||
| currency | 货币符号 | `String` | `¥` | - |
|
||||
| thumb-link | 点击左侧图片后的跳转链接 | `String` | - | 1.3.4 |
|
||||
| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.0 |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user