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