template部分
<!-- 推荐商品 -->
<view class="hot_goods">
<view class="tit">推荐商品</view>
<!-- 一 -->
<view class="goods_list">
<view class="goods_item">
<image src="../../static/logo.png" mode=""></image>
<view class="price">
<text>¥2199</text>
<text>¥2499</text>
</view>
<view class="name">
华为(HUAWEI)荣耀Plus 16G双4G版
</view>
</view>
<!-- 二 -->
<view class="goods_item">
<image src="../../static/logo.png" mode=""></image>
<view class="price">
<text>¥2199</text>
<text>¥2499</text>
</view>
<view class="name">
华为(HUAWEI)荣耀Plus 16G双4G版
</view>
</view>
<!-- 三 -->
<view class="goods_item">
<image src="../../static/logo.png" mode=""></image>
<view class="price">
<text>¥2199</text>
<text>¥2499</text>
</view>
<view class="name">
华为(HUAWEI)荣耀Plus 16G双4G版
</view>
</view>
<!-- 四 -->
<view class="goods_item">
<image src="../../static/logo.png" mode=""></image>
<view class="price">
<text>¥2199</text>
<text>¥2499</text>
</view>
<view class="name">
华为(HUAWEI)荣耀Plus 16G双4G版
</view>
</view>
</view>
</view>
css部分 scss语法写的
.hot_goods{
background-color: #eee;
overflow: hidden;
margin-top: 10rpx;
.tit{
height: 50rpx;
line-height: 50rpx;
color: $shop-color;
text-align: center;
letter-spacing: 20rpx; // 这个属性不错 增加字体间距
background-color: #fff;
margin: 7rpx 0;
}
.goods_list{
padding: 0 15rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.goods_item{
background-color: #fff;
width: 355rpx;
margin: 10rpx 0; // 上下为10rpx 左右为0
padding: 15rpx; // 内边距
box-sizing: border-box; // 防止变形 w3e盒模型
image{
width: 80%;
height: 150rpx;
display: block; // 变成块同时使用
margin: 0 auto;
}
.price{
color: $shop-color;
font-size: 36rpx;
text:nth-child(2){
color: #ccc;
font-size: 28rpx;
margin-left: 27rpx;
text-decoration: line-through; // 字体中间划线
}
}
.name{
font-size: 28rpx;
line-height: 50rpx;
padding:{
bottom: 15rpx;
top: 10rpx;
}
}
}
}
}