ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 18:54:24 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Card 组件支持 thumb slot，加入 flex 布局 (#48)

Browse Source
This commit is contained in:
neverland
2017-07-04 15:46:54 +08:00
committed by 张敏
parent bce1f2dce4
commit 2584fb8b04
3 changed files with 92 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
packages/vant-css/src/card.css
View File

@@ -1,93 +1,93 @@
@import './mixins/ellipsis.css';
@component-namespace van {
@b card {
padding: 5px 15px 5px 115px;
height: 90px;
background: #FAFAFA;
overflow: hidden;
position: relative;
.van-card {
color: #333;
height: 90px;
background: #fafafa;
position: relative;
padding: 5px 15px 5px 115px;
&:not(:first-child) {
margin-top: 10px;
}
&:first-child {
margin-top: 0;
&--center,
&__thumb {
align-items: center;
justify-content: center;
}
&__thumb {
top: 5px;
left: 15px;
width: 90px;
height: 90px;
position: absolute;
img {
border: none;
max-width: 100%;
max-height: 100%;
}
}
@e img {
width: 90px;
height: auto;
border: 0;
position: absolute;
top: 5px;
left: 15px;
&,
&__thumb,
&__row {
display: flex;
}
&__content {
width: 100%;
&--center {
height: 90px;
align-items: center;
}
}
@e content {
display: table;
width: 100%;
&__title,
&__desc {
line-height: 20px;
word-break: break-all;
}
@m center {
display: table;
height: 90px;
&__title {
max-height: 40px;
@mixin multi-ellipsis 2;
}
.van-card__info {
display: table-cell;
vertical-align: middle;
}
}
}
&__desc {
color: #666;
font-size: 12px;
max-height: 20px;
@mixin multi-ellipsis 1;
}
@e row {
overflow: hidden;
padding-right: 80px;
position: relative;
}
&__price,
&__num {
flex: 1;
min-width: 80px;
line-height: 20px;
text-align: right;
}
@e title {
line-height: 20px;
color: #333;
max-height: 40px;
margin-bottom: 5px;
word-break: break-all;
@mixin multi-ellipsis 2;
}
&__price {
font-size: 14px;
}
@e desc {
font-size: 12px;
color: #666;
max-height: 20px;
word-break: break-all;
@mixin multi-ellipsis 1;
}
&__num {
color: #666;
font-size: 12px;
}
@e price {
position: absolute;
top: 0;
right: 0;
width: 80px;
text-align: right;
font-size: 14px;
color: #333;
}
&__footer {
right: 15px;
bottom: 5px;
position: absolute;
@e num {
position: absolute;
top: 0;
right: 0;
width: 80px;
text-align: right;
font-size: 12px;
color: #666;
}
@e footer {
position: absolute;
right: 15px;
bottom: 5px;
.van-button {
margin-left: 5px;
}
.van-button {
margin-left: 5px;
}
}
}