25. uniapp 完成推荐商品结构

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;
						}
					}
				}
			}
		}