ui”

git commit -m ui”

pages_shopping/shopping/productDetails.vue

@@ -185,7 +185,6 @@
 
 		<!-- 评价 -->
 		<view class="evaluate-box">
-
 			<view class="title-box">
 				<text class="title">评价（8000+）</text>
 				<view class="more">
@@ -284,6 +283,52 @@
 				<view v-html="product.description" style="font-size:0"></view>
 			</view>
 		</view>
+		<view class="problem">
+			<image class="w32 h32" src="/static/images/answer_icon2.png" mode=""></image>
+			<text class="mlr8">常见问题</text>
+			<image class="w24 h24" src="/static/images/arrow4.png" mode=""></image>
+		</view>
+		<!-- 你可能还喜欢 -->
+		<view class="like">
+			<view class="title-box">
+				<image class="w32 h32 mr12" src="/static/images/like_icon2.png" mode=""></image>
+				<text>你可能还喜欢</text>
+			</view>
+
+			<view class="goods-list">
+				<view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
+					<view class="img-box">
+						<image :src="item.image" mode="aspectFit"></image>
+					</view>
+					<view class="info-box">
+						<view class="title ellipsis2">{{item.productName}}</view>
+						<view class="intro ellipsis">{{item.productInfo}}</view>
+						<view class="sale">已售 {{item.sales}} {{item.unitName}} | 惊艳度98%</view>
+						<view class="lable-group">
+							<view class="lable-item">9.5折</view>
+							<view class="lable-item">限购1份</view>
+						</view>
+						<view class="prce-num">
+							<view class="price">
+								<text class="unit">¥</text><text
+									class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
+							</view>
+							<view class="cart-img" @click="navgetTo('../shopping/cart')">
+								<image class="w40 h40" src="/static/images/add_car.png"></image>
+							</view>
+						</view>
+						<view class="card">
+							<view class="card-item">
+								<image class="img" src="/static/images/ranking_icon.png"></image>
+								<text class="ranking">健康新品热销榜</text>
+								<text class="bold">TOP.1</text>
+							</view>
+							<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
 		<!-- 底部按钮 -->
 		<view class="btn-foot">
 			<view class="menu-box">
@@ -326,7 +371,7 @@
 						<view class="price">
 							<text class="title">会员价</text>
 							<text class="unit">¥</text><text
-								class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
+								class="bold">{{splitPrice(productValueSelect.price).integer}}</text>.{{splitPrice(productValueSelect.price).decimal}}
 						</view>
 						<view class="desc-box">
 							<text class="text">月售2456件</text>
@@ -391,6 +436,31 @@
 		},
 		data() {
 			return {
+				dataList: [{
+					cateId: 364,
+					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251216/6a3c96bd3fc44b15b760871670302e9a.jpg",
+					otPrice: 268,
+					price: 98.1,
+					productId: 66050,
+					productInfo: "电肌肉刺激(EMS)，又称神经肌肉电刺激，是利用电脉冲诱发多发性肌肉收缩；中枢神经系统使肌肉收缩；EMS被证明是一种积极的肌肉强化工具。↵EMS的用途：肌肉强化，预防废肌萎缩，肌肉松弛，缓解酸痛，放松肌肉，美容肌肉调理。",
+					productName: "佟络宝®健步器",
+					sales: 1026,
+					unitName: "个",
+					warehouseCode: "JST001",
+					warehouseId: 3,
+				}, {
+					cateId: 364,
+					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251204/c53bb29cf794468ba59ee2d60983b92f.jpg",
+					otPrice: 298,
+					price: 138,
+					productId: 65920,
+					productInfo: "1、取本品1包放入脚盆，倒入适量沸水浸泡搅拌，约5-10分钟，再加入适量温水或冷水调至适宜水温即可足浴，泡脚15- 25分钟。↵2、取本品1包放入锅内煮约5分钟，将煮好的水倒入脚盆，再加入适量温水或冷水调至适宜温度即可足浴，泡脚15-25分钟。",
+					productName: "[九仙汤]除痹通络汤 30克x30包",
+					sales: 6042,
+					unitName: "盒",
+					warehouseCode: "JST001",
+					warehouseId: 3,
+				}],
 				rating1: 4,
 				loadding: true,
 				buyText: "立即购买",
@@ -1456,7 +1526,8 @@
 
 	.det-box {
 		margin-top: 10rpx;
-		padding: 40rpx 30rpx 130rpx 30rpx;
+		padding: 40rpx 30rpx 34rpx 30rpx;
+		// padding: 40rpx 30rpx 130rpx 30rpx;
 		background-color: #FFFFFF;
 
 		.title {
@@ -1470,6 +1541,168 @@
 
 	}
 
+	.problem {
+		display: flex;
+		align-items: center;
+		font-size: 26rpx;
+		color: #333333;
+	}
+
+	.like {
+		padding-bottom: 130rpx;
+		.title-box {
+			margin-top: 36rpx 0 24rpx;
+			font-weight: 600;
+			font-size: 28rpx;
+			color: #333333;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.goods-list {
+			padding: 20upx;
+			display: flex;
+			flex-wrap: wrap;
+		
+			.item {
+				margin-right: 18rpx;
+				margin-bottom: 18rpx;
+				width: 342rpx;
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				overflow: hidden;
+		
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+		
+				.img-box {
+					width: 100%;
+					height: 342upx;
+		
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+		
+				.info-box {
+					box-sizing: border-box;
+					padding: 20upx 20upx 30upx;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+		
+					.title {
+						font-size: 26upx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #111111;
+						margin-bottom: 4rpx;
+					}
+		
+					.intro {
+						font-weight: 400;
+						font-size: 22rpx;
+						color: #D46C0D;
+						margin-bottom: 8upx;
+					}
+		
+					.sale {
+						font-size: 21rpx;
+						color: #999999;
+					}
+		
+					.lable-group {
+						display: flex;
+						margin-top: 8rpx;
+		
+						.lable-item {
+							margin-right: 8rpx;
+							height: 30rpx;
+							padding: 0 8rpx;
+							border-radius: 4rpx 4rpx 4rpx 4rpx;
+							border: 1rpx solid #FFA599;
+							font-size: 21rpx;
+							color: #FF4B33;
+						}
+					}
+		
+					.prce-num {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						margin-top: 8upx;
+		
+						.price {
+							font-weight: 600;
+							font-size: 26rpx;
+							color: #FA341E;
+							font-size: 26rpx;
+		
+							.unit {
+								font-size: 20upx;
+							}
+		
+							.bold {
+								font-size: 36upx;
+							}
+						}
+					}
+		
+					.card {
+						margin-top: 20rpx;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						background: #FFF4E8;
+						border-radius: 6rpx 6rpx 6rpx 6rpx;
+						width: 100%;
+						height: 40rpx;
+						padding: 8rpx 10rpx;
+						box-sizing: border-box;
+		
+						.card-item {
+							display: flex;
+							align-items: center;
+		
+							.img {
+								width: 24rpx;
+								height: 24rpx;
+								margin-right: 4rpx;
+							}
+		
+							.ranking {
+								font-size: 20rpx;
+								color: #4D4D4D;
+								margin-right: 4rpx;
+							}
+		
+							.bold {
+								font-family: Roboto Flex, Roboto Flex;
+								font-weight: 600;
+								font-size: 24rpx;
+								color: #F4A007;
+								margin-right: 6rpx;
+								transform: skewX(-8deg);
+								/* 负值向左倾斜，正值向右倾斜 */
+								display: inline-block;
+								/* transform需要inline-block或block */
+							}
+						}
+		
+						.go {
+							width: 16rpx;
+							height: 16rpx;
+						}
+					}
+				}
+			}
+		}
+		
+	}
+
 	.btn-foot {
 		box-sizing: border-box;
 		width: 100%;
@@ -1532,13 +1765,10 @@
 
 			.btn {
 				position: relative;
-				width: 200rpx;
-				height: 88rpx;
-				line-height: 88rpx;
-				text-align: center;
-				border-radius: 44rpx;
+				padding: 22rpx 40rpx;
+				border-radius: 40rpx;
 				margin-left: 20rpx;
-				font-size: 30rpx;
+				font-size: 26rpx;
 				font-family: PingFang SC;
 				font-weight: bold;
 				color: #FFFFFF;
@@ -1548,7 +1778,7 @@
 				}
 
 				&.cart {
-					background: #FF6633;
+					background: linear-gradient( 90deg, #FFC95F 0%, #FEA633 100%);
 
 					.share {
 						display: inline-block;
@@ -1562,7 +1792,7 @@
 				}
 
 				&.buy {
-					background: #2BC7B9;
+					background: linear-gradient( 136deg, #38D97D 0%, #02B176 100%);
 				}
 			}
 		}