1丶Flex布局自动换行均等布局(三个)
<div class="goods-content">
<div class="goods-list" v-if="!searchStatus">
<div class="goods-item" v-for="(item,index) in goodsList" :key="index">
<div class="content">
<div class="card-top">
<img class="img" src="../../assets/home/banner.jpg" alt="">
</div>
<div class="name">100元卡</div>
<div class="price">
<div class="sale-price">¥96</div>
<div class="old-price">¥196</div>
</div>
<div class="go-buy" @click="goDetails(item.id,1)">马上抢 ></div>
</div>
</div>
</div>
</div>
<style scoped lang='scss'>
.goods-content {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
.goods-list {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 0 0.5%;
.goods-item {
width: 33%;
margin-bottom: 30px;
&:nth-child(3n) {
.content {
float: right;
}
}
&:nth-child(3n-1) {
.content {
margin: 0 auto;
}
}
.content {
width: 90%;
padding-bottom: 1px;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
.card-top {
width: 100%;
height: 180px;
background-color: #FFEDE3;
overflow: hidden;
.img {
width: 80%;
height: 100px;
margin: 46px auto;
}
}
.name {
width: 100%;
box-sizing: border-box;
padding: 0 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 26px;
font-weight: 400;
text-align: left;
color: #1a1a1a;
}
.price {
display: flex;
justify-content: start;
align-items: center;
margin-top: 10px;
.sale-price {
margin-left: 14px;
font-size: 22px;
font-weight: 500;
color: #cb1c37;
}
.old-price {
margin-left: 11px;
font-size: 20px;
font-weight: 400;
text-decoration: line-through;
}
}
.go-buy {
width: 180px;
height: 38px;
margin: 14px auto 16px;
background: #cb1c37;
border-radius: 8px;
font-size: 20px;
font-weight: 400;
text-align: center;
color: #ffffff;
}
}
}
}
}
</style>