25. uniapp 完成推荐商品结构

分手后的思念是犯贱 2023-01-17 10:40 164阅读 0赞

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