flex:
column-count: 2; 规定多少列
column-gap: 5px; 规定列间隙
效果图:
# 这边这个v-for是运行不了的,但是css样式是ok的,需要看demo先改下这个循环
<div class="flow-goods">
<div class="flow-goods-item"
v-for="(item,index) in goodsList.list"
:key="index">
<div>
<van-image height="180"
:src="item.thumb" />
<div class="goods-info">
<div class="title">{{item.goods_name}}</div>
<div class="info">{{item.goods_desc}}</div>
<div class="price">
<span class="new-price">¥{{item.price_sell}}</span>
<!-- <span class="old-price">¥170</span> -->
<!-- <span class="zhe">3.5折</span> -->
</div>
<div class="detail-btn">
<!-- <span>3.15套米直降30</span> -->
<span>详情>></span>
</div>
</div>
</div>
</div>
</div>
//基于sass
.flow-goods {
column-count: 2;
column-gap: 5px;
padding: 5px;
.flow-goods-item {
height: 100%;
overflow: auto;
/*避免column-count布局错乱*/
background-color: #fff;
// break-inside: avoid;
box-sizing: border-box;
margin-bottom: 5px;
& > div {
display: flex;
flex-direction: column;
}
}
//上面的样式才是核心,下面不用看
.goods-info {
padding: 0.2rem;
.title {
color: #000;
font-size: 0.8rem;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.info {
color: #ccc;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price {
.new-price {
color: $color;
font-size: 20px;
}
.old-price {
margin-left: 0.2rem;
text-decoration: line-through;
}
.zhe {
border: 1px solid $color;
color: $color;
margin-left: 0.8rem;
}
}
.detail-btn {
display: flex;
justify-content: space-between;
align-items: center;
& > span:first-child {
background-color: $color;
color: #fff;
border-radius: 1rem;
padding: 0.1rem 0.5rem;
}
& > span:last-child {
background-color: rgb(255, 102, 0);
color: #fff;
border-radius: 5px;
padding: 0 2px;
}
}
}
}