From a0f1c45d40b5d1d8bd578ebf2b3b8c91a8c6ad73 Mon Sep 17 00:00:00 2001
From: "1173117610@qq.com" <a15133400227>
Date: Mon, 11 May 2026 09:46:35 +0800
Subject: [PATCH] 1

---
 pages/detail/detail.vue | 1065 ++++++++++++++++++++++++++++++++++-----
 static/img/fuli.png     |  Bin 0 -> 1084 bytes
 2 files changed, 948 insertions(+), 117 deletions(-)
 create mode 100644 static/img/fuli.png

diff --git a/pages/detail/detail.vue b/pages/detail/detail.vue
index 043934b..3702570 100644
--- a/pages/detail/detail.vue
+++ b/pages/detail/detail.vue
@@ -1,11 +1,18 @@
 <template>
 	<view class="detail-container">
-		<!-- 悬浮返回按钮 -->
-		<view class="back-btn" :style="{ top: statusBarHeight + 'px' }" @click="goBack">
-			<text class="back-icon">〈</text>
+		<!-- 顶部渐变导航栏 -->
+		<view class="fixed-header" :style="{ opacity: navOpacity, paddingTop: statusBarHeight + 'px' }">
+			<view class="header-content">
+				<text class="header-title">商品详情</text>
+			</view>
 		</view>
 
-		<scroll-view scroll-y class="scroll-content" :show-scrollbar="false">
+		<!-- 悬浮返回按钮 -->
+		<view class="back-btn" :style="{ top: statusBarHeight + 'px', backgroundColor: 'rgba(0,0,0,' + bgOpacity + ')' }" @click="goBack">
+			<view class="back-icon-box" :style="{ borderColor: iconColor }"></view>
+		</view>
+
+		<scroll-view scroll-y class="scroll-content" :show-scrollbar="false" @scroll="handleScroll">
 			<!-- 主图轮播 -->
 			<view class="swiper-box">
 				<swiper class="main-swiper" circular @change="swiperChange">
@@ -16,37 +23,46 @@
 				<view class="swiper-indicator">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
 			</view>
 
+			<!-- 活动横幅 -->
+			<view class="activity-banner" v-if="product.activity && product.activity.app_img">
+				<image :src="product.activity.app_img" mode="widthFix" class="banner-img"></image>
+				<view class="banner-time" v-if="product.activityTime">TIME: {{ product.activityTime }}</view>
+			</view>
+
 			<!-- 热销榜单提示 -->
 			<view class="hot-sale-bar">
 				<view class="hot-left">
 					<text class="trophy-icon">🏆</text>
-					<text class="hot-text">实时热销榜第{{ product.rank }}名</text>
+					<text class="hot-text">{{ product.rankText }}</text>
 				</view>
+				<view class="hot-divider">|</view>
 				<view class="hot-right">
 					<text>今日已有{{ product.todaySale }}人下单</text>
 				</view>
 			</view>
 
-			<!-- 价格与标题区 -->
+			<!-- 价格与标题区 (1:1 还原) -->
 			<view class="info-section">
 				<view class="price-row">
 					<view class="price-left">
-						<text class="price-symbol">券后￥</text>
-						<text class="price-integer">{{ product.price.split('.')[0] }}</text>
-						<text class="price-decimal">.{{ product.price.split('.')[1] || '00' }}</text>
-						<text class="old-price">￥{{ product.oldPrice }}</text>
+						<text class="price-label">券后￥</text>
+						<text class="price-val">{{ product.price }}</text>
+						<text class="price-old">￥{{ product.oldPrice }}</text>
+					</view>
+					<view class="price-right">
+						已售 <text class="sales-red">{{ product.totalSale }}</text> 件
 					</view>
-					<view class="sales-count">已售 {{ product.totalSale }} 件</view>
 				</view>
 
 				<view class="title-row">
-					<text class="platform-tag">{{ product.platform }}</text>
-					<text class="product-title">{{ product.title }}</text>
+					<view class="title-content">
+						<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQklEQVRYR+2XX4hUdRTHP+euGAsbLKiU9KDRRvhnvL+7E4v5YvYSZLIu6T5JBIJilH+eDERckUh90P5BFEFg9FAmlhj6pFugwj7s/d2ZnUgsWQUFldqFWBuEuUd+s3f0zrg7M46JL3sfZmB+v+85n985vznnXCF5lMxHIH3AS5XfHtN3AeScEG129sV9KMv0MTmra1bIiSj+l6CbngQA6H5Rlo0AS54MABcdQDPhvw589ZCQW4BnGmmaBNA+If9TI2PpdSXzDsg3jTRNAjAA8a9pY8LIYLXDpa9WO/NWgtPVf5oFqLGig0J+Vc2Jz4LUQDRyDzMAMxGYicBMBFqMgOvjuXIrvz9PNNVTHqhMLQO4Mivk9ibzxJ5myu5UdVGUzFnQsiHw3gC2AbMbF9GWdtwGjkD8/aRa9lSFcfI0S1eA9x2wsCUX04tCiNcLI39VNzUgm83Ob2truzM0NPT3/ZxmLIj/P0FcEXL3DtTT0zNnYmJCC4XCP2KMSefvgoj0hmF4S1n8LMzKA3MfEeJf8LKCvRQEwTxV/Rl4pZwAkV4HUDWSqeqxKIrWTaYjsxbk+CMCrBNyx5wN3/d/FJG3UvbOOYAHRjIRORCG4QfJDd8KfNIixLtC7gunDYJgv6rurLUzJUCyqc9aWx7DlMwmkLeTd4ZGKbkFXAT9VsiX50hjzFpgykjWAyiISH8Yhr+3ePqyLAiCxar6w3STdz0Apy+o6u4oilq6B77v94nIvnpj/3QAAyKyXFX/U9VZIuLG6yvANWC8QUQ6geeABSJyI9mrqjo8VbV0AOcrfwt3YuA9oBfYnog3xHF81fO83x4mFZ7nvRzHcQaojOYHgVPA56mIXHAAh4AdzrnL+djY2OXOzs6bwNOJw0Fr7SpjzHrA5bKZp99aezQIghOquiYRTHS3t88rFovPp+7E4XIpNsY4w5estbt8339dRE6nvYyPj7ePjo4WjTEngdXJ2oC1ttxDaorZL9baN7u6up7q6Ogopu04mCiKThpjPgRetNb23+sF3d3drw0PD58JgmCjqn6dFpZKpUX5fP4P3/c/FZH33Zq1tqqPVOqJqn4WRdHWbDb7QqlU+rMmXDustR9XfLm1uwCwZa9OY0IsAAAAAElFTkSuQmCC" class="title-platform-icon"></image>
+						<text class="title-text">{{ product.title }}</text>
+					</view>
 				</view>
 
-				<view class="label-row">
-					<text class="label-item">{{ product.timeTag }}</text>
-					<text class="label-item">{{ product.couponVal }}元</text>
+				<view class="tags-row">
+					<text class="tag-capsule" v-for="(tag, index) in product.labels" :key="index">{{ tag }}</text>
 				</view>
 			</view>
 
@@ -68,26 +84,111 @@
 				</view>
 			</view>
 
-			<!-- 店铺评分 -->
-			<view class="shop-section">
-				<view class="shop-header">
-					<view class="shop-info">
-						<image :src="product.shopLogo" class="shop-logo"></image>
-						<text class="shop-name">{{ product.shopName }}</text>
+			<!-- 品牌与店铺 (1:1 还原) -->
+			<view class="brand-shop-card">
+				<view class="brand-row">
+					<text class="row-label">品牌</text>
+					<view class="brand-content">
+						<image :src="product.brandLogo" mode="aspectFit" class="brand-logo-img"></image>
+						<text class="brand-name-text">{{ product.brandName }}</text>
 					</view>
-					<text class="shop-entry">进店逛逛 ></text>
 				</view>
-				<view class="score-row">
-					<view class="score-item">宝贝描述 <text class="score-val">{{ product.scores.desc }}</text> <text class="score-up">↑</text></view>
-					<view class="score-item">卖家服务 <text class="score-val">{{ product.scores.service }}</text> <text class="score-up">↑</text></view>
-					<view class="score-item">物流服务 <text class="score-val">{{ product.scores.post }}</text> <text class="score-up">↑</text></view>
+				
+				<view class="shop-row">
+					<text class="row-label">店铺</text>
+					<view class="shop-main-content">
+						<view class="shop-name-row">
+							<view class="shop-title-box">
+								<text :class="product.platform === '天猫' ? 'tag-tmall-mini' : 'tag-taobao-mini'">{{ product.platform === '天猫' ? 'T' : '淘' }}</text>
+								<text class="shop-name-text">{{ product.shopName }}</text>
+							</view>
+							<text class="row-arrow">></text>
+						</view>
+						<view class="score-detail-row">
+							<view class="score-item">
+								描述 <text class="val-red">{{ product.scores.desc }}</text> <text class="up-red">↑</text>
+							</view>
+							<view class="score-item">
+								服务 <text class="val-red">{{ product.scores.service }}</text> <text class="up-red">↑</text>
+							</view>
+							<view class="score-item">
+								物流 <text class="val-red">{{ product.scores.post }}</text> <text class="up-red">↑</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 粉丝福利购 (1:1 还原) -->
+			<view class="benefit-card" v-if="product.desc">
+				<view class="benefit-header">
+					<view class="benefit-title-box">
+						<image src="/static/img/fuli.png" class="benefit-icon"></image>
+						<text class="benefit-title">粉丝福利购</text>
+					</view>
+				</view>
+				<view class="benefit-content">
+					<text class="benefit-text">{{ product.desc }}</text>
+				</view>
+			</view>
+
+			<!-- 详情控制条 (展开和收益) -->
+			<view class="detail-control-bar">
+				<view class="control-left">
+					<text class="red-line"></text>
+					<text class="control-title">详情</text>
+				</view>
+				<view class="control-right" @click="isExpanded = !isExpanded">
+					<text class="expand-text">{{ isExpanded ? '收起' : '展开' }}</text>
+					<view :class="['expand-arrow', isExpanded ? 'up' : 'down']"></view>
 				</view>
 			</view>
 
 			<!-- 图文详情 -->
-			<view class="detail-images">
-				<view class="detail-title">商品详情</view>
+			<view class="detail-images" :class="{ 'collapsed': !isExpanded }">
 				<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
+				<view class="expand-mask" v-if="!isExpanded" @click="isExpanded = true">
+					<text class="mask-text">点击展开查看图文详情</text>
+					<view class="mask-arrow"></view>
+				</view>
+			</view>
+			
+			<!-- 同类型产品推荐 (1:1 还原) -->
+			<view class="more-like com" v-if="similarProducts.length > 0">
+				<view class="top g-df-c">
+					<image src="https://web.cms.hykefu.cn/static/img/tongleituij.png" mode="widthFix" class="recommend-title-img"></image>
+				</view>
+				<view class="list">
+					<view class="list-container">
+						<view class="g-shop-list" v-for="(item, idx) in similarProducts" :key="idx" @click="goToDetail(item.itemid)">
+							<view class="shop-img">
+								<image :src="item.itempic + '_310x310.jpg'" mode="aspectFill" lazy-load></image>
+							</view>
+							<view class="shop-box">
+								<view class="shop-title van-multi-ellipsis--l2">
+									<image :src="item.shoptype === 'B' ? 'https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4' : 'https://img-haodanku-com.cdn.fudaiapp.com/Fpx7_72-zY-n-zX_5_f2_f-f'" class="platform-icon"></image>
+									<text>{{ item.itemtitle }}</text>
+								</view>
+								<view class="shop-tag">
+									<text v-if="item.is_low_price === '1'">{{ item.low_price_day }}天最低价</text>
+									<text v-if="item.couponmoney">满{{ item.itemprice }}减{{ item.couponmoney }}</text>
+								</view>
+								<view class="flex-left flex-left-o">
+									<view class="discount-price"> 券后¥ <text class="price-num">{{ item.itemendprice }}</text></view>
+									<view class="g-coupon-label g-df-vc" v-if="item.couponmoney">
+										<span class="g-df-c">券</span>
+										<text>{{ item.couponmoney }}元</text>
+									</view>
+								</view>
+								<view class="flex-left flex-left-t">
+									<view class="sales-volume">已售{{ formatSales(item.itemsale) }}件</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="end-tips">已为您加载完毕</view>
+				<view class="custom-copyright">©️粉丝福利购专属优惠商城</view>
 			</view>
 			
 			<!-- 底部留白 -->
@@ -133,22 +234,30 @@
 					oldPrice: '119.8',
 					totalSale: '1.0万',
 					platform: '天猫',
-					title: '【活动专享】润本植物精油贴儿童宝宝学生成人户外专用随身贴纸',
-					timeTag: '9天最低价',
+					title: '薇诺娜宝贝宝宝舒润霜50g宝宝特护面霜',
+					labels: ['109天最低价', '淘金币频道抵扣2.1元起'],
 					couponVal: 100,
 					couponTime: '2026.05.09-2026.05.11',
 					shopName: '润本旗舰店',
-					shopLogo: 'https://cdn-icons-png.flaticon.com/512/732/732229.png',
+					brandName: '润本',
+					brandLogo: '',
 					scores: {
 						desc: '4.7',
 						service: '4.8',
 						post: '4.8'
 					},
+					activity: null,
+					activityTime: '',
 					detailImages: [
 						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
 						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
 					]
-				}
+				},
+				navOpacity: 0,
+				bgOpacity: 0.4,
+				iconColor: '#ffffff',
+				isExpanded: false,
+				similarProducts: []
 			}
 		},
 		onLoad(options) {
@@ -166,6 +275,16 @@
 							const d = res.data.data;
 							console.log('详情数据获取成功:', d);
 							
+							// 格式化活动时间
+							const formatActDate = (ts) => {
+								const date = new Date(ts * 1000);
+								const m = date.getMonth() + 1;
+								const day = date.getDate();
+								const h = date.getHours().toString().padStart(2, '0');
+								const min = date.getMinutes().toString().padStart(2, '0');
+								return `${m}/${day} ${h}:${min}`;
+							};
+							
 							// 格式化销量
 							let salesStr = d.itemsale;
 							if (d.itemsale >= 10000) {
@@ -183,9 +302,26 @@
 								}
 							} catch (e) {}
 
+							// 处理图片逻辑 (512345 模式: 将最后一张图追加到首位)
+							let swiperImages = d.taobao_image_qiniu || [d.itempic];
+							if (swiperImages.length > 0) {
+								swiperImages.unshift(swiperImages[swiperImages.length - 1]);
+							}
+
+							let detailImages = (d.material_info && d.material_info[0] && d.material_info[0].image) ? 
+								d.material_info[0].image.map(img => img.startsWith('http') ? img : `https://img-haodanku-com.cdn.fudaiapp.com/${img}`) : 
+								[d.itempic];
+							
+							if (detailImages.length > 0) {
+								detailImages.unshift(detailImages[detailImages.length - 1]);
+							}
+
+							const activityTime = d.activity_info ? 
+								`${formatActDate(d.activity_info.start_time)}-${formatActDate(d.activity_info.end_time)}` : '';
+
 							this.product = {
 								id: d.id,
-								images: d.taobao_image_qiniu || [d.itempic],
+								images: swiperImages,
 								rank: rank,
 								rankText: rankText,
 								todaySale: d.todaysale,
@@ -194,28 +330,70 @@
 								totalSale: salesStr,
 								platform: d.shoptype === 'B' ? '天猫' : '淘宝',
 								title: d.itemtitle,
-								timeTag: d.label && d.label[0] ? d.label[0] : '超值特惠',
+								labels: d.label || [],
 								couponVal: d.couponmoney,
-								couponTime: d.couponlife.replace('有效期至：', ''),
+								couponTime: (() => {
+									const year = new Date().getFullYear();
+									const life = d.couponlife.replace('有效期至：', '');
+									return life.split('-').map(t => `${year}.${t}`).join('-');
+								})(),
 								shopName: d.shopname,
-								shopLogo: (d.brand_info && d.brand_info.brand_logo) || d.shopicon || 'https://cdn-icons-png.flaticon.com/512/732/732229.png',
+								brandName: d.fq_brand_name || (d.brand_info && d.brand_info.fq_brand_name) || '大牌',
+								brandLogo: (d.brand_info && d.brand_info.brand_logo) || d.shopicon || '',
 								scores: {
 									desc: d.shop_score.desc_score,
 									service: d.shop_score.serv_score,
 									post: d.shop_score.post_score
 								},
-								// 详情图处理：如果素材里有图，拼接前缀展示
-								detailImages: (d.material_info && d.material_info[0] && d.material_info[0].image) ? 
-									d.material_info[0].image.map(img => img.startsWith('http') ? img : `https://img-haodanku-com.cdn.fudaiapp.com/${img}`) : 
-									[d.itempic]
+								desc: d.itemdesc,
+								detailImages: detailImages,
+								activity: d.activity_info,
+								activityTime: activityTime,
+								commission: d.tkmoney,
+								taobaoId: d.itemid
 							};
+							
+							// 获取猜你喜欢推荐 (尝试使用 internal id 获取)
+							this.getSimilarProducts(d.id || d.itemid);
 						}
 					}
 				});
 			},
+			getSimilarProducts(itemId) {
+				uni.request({
+					url: `https://api.cmspro.haodanku.com/detail/guessItems?itemid=${itemId}&cid=qOstW90`,
+					success: (res) => {
+						if (res.data && res.data.code === 200) {
+							this.similarProducts = res.data.data.slice(0, 10);
+						}
+					}
+				});
+			},
+			formatSales(sale) {
+				if (sale >= 10000) {
+					return (sale / 10000).toFixed(1) + '万';
+				}
+				return sale;
+			},
+			goToDetail(id) {
+				uni.navigateTo({
+					url: `/pages/detail/detail?id=${id}`
+				});
+			},
 			goBack() {
 				uni.navigateBack();
 			},
+			handleScroll(e) {
+				const scrollTop = e.detail.scrollTop;
+				// 0-150px 完成渐变
+				let ratio = scrollTop / 150;
+				if (ratio > 1) ratio = 1;
+				if (ratio < 0) ratio = 0;
+
+				this.navOpacity = ratio;
+				this.bgOpacity = 0.4 * (1 - ratio);
+				this.iconColor = ratio > 0.5 ? '#333333' : '#ffffff';
+			},
 			goHome() {
 				uni.switchTab({
 					url: '/pages/index/index'
@@ -237,26 +415,309 @@
 	}
 
 	/* 返回按钮 */
+	/* 顶部渐变导航栏 */
+	.fixed-header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background-color: #ffffff;
+		z-index: 150;
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.header-content {
+		height: 88rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.header-title {
+		font-size: 32rpx;
+		color: #333;
+		font-weight: bold;
+	}
+
 	.back-btn {
 		position: fixed;
 		left: 30rpx;
 		width: 64rpx;
 		height: 64rpx;
-		background-color: rgba(0, 0, 0, 0.4);
 		border-radius: 50%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		z-index: 100;
+		z-index: 200;
+		margin-top: 10rpx;
+		transition: all 0.2s;
+	}
+
+	.back-icon-box {
+		width: 20rpx;
+		height: 20rpx;
+		border-left: 4rpx solid;
+		border-bottom: 4rpx solid;
+		transform: rotate(45deg);
+		margin-left: 8rpx;
+		transition: all 0.2s;
+	}
+
+	/* 详情控制条 */
+	.detail-control-bar {
+		margin-top: 20rpx;
+		background-color: #ffffff;
+		padding: 24rpx 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-radius: 20rpx 20rpx 0 0;
+	}
+
+	.control-left {
+		display: flex;
+		align-items: center;
+	}
+
+	.red-line {
+		width: 6rpx;
+		height: 28rpx;
+		background-color: #ff416c;
+		border-radius: 3rpx;
+		margin-right: 16rpx;
+	}
+
+	.control-title {
+		font-size: 30rpx;
+		color: #333;
+		font-weight: bold;
+		margin-right: 20rpx;
+	}
+
+	.profit-tag {
+		font-size: 24rpx;
+		color: #ff416c;
+		background-color: rgba(255, 65, 108, 0.1);
+		padding: 4rpx 12rpx;
+		border-radius: 8rpx;
+	}
+
+	.control-right {
+		display: flex;
+		align-items: center;
+	}
+
+	.expand-text {
+		font-size: 26rpx;
+		color: #999;
+		margin-right: 8rpx;
+	}
+
+	.expand-arrow {
+		width: 12rpx;
+		height: 12rpx;
+		border-right: 2rpx solid #999;
+		border-bottom: 2rpx solid #999;
+		transform: rotate(45deg);
+		transition: transform 0.3s;
+	}
+
+	.expand-arrow.up {
+		transform: rotate(-135deg);
+		margin-top: 6rpx;
+	}
+
+	/* 图文详情 */
+	.detail-images {
+		background-color: #ffffff;
+		position: relative;
+		overflow: hidden;
+		transition: max-height 0.5s ease;
+	}
+
+	.detail-images.collapsed {
+		max-height: 1200rpx;
+	}
+
+	.detail-title {
+		display: none; /* 已被控制条取代 */
+	}
+
+	.detail-img {
+		width: 100%;
+		display: block;
+	}
+
+	.expand-mask {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 300rpx;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-end;
+		padding-bottom: 40rpx;
+		z-index: 10;
+	}
+
+	.mask-text {
+		font-size: 28rpx;
+		color: #ff416c;
+		font-weight: bold;
+	}
+
+	.mask-arrow {
+		width: 16rpx;
+		height: 16rpx;
+		border-right: 4rpx solid #ff416c;
+		border-bottom: 4rpx solid #ff416c;
+		transform: rotate(45deg);
 		margin-top: 10rpx;
 	}
 
-	.back-icon {
-		color: #ffffff;
-		font-size: 32rpx;
+	/* 同类推荐推荐 (g-shop-list 1:1 风格) */
+	.more-like {
+		margin-top: 20rpx;
+		background-color: #ffffff;
+		padding-bottom: 40rpx;
+	}
+
+	.top.g-df-c {
+		display: flex;
+		justify-content: center;
+		padding: 30rpx 0;
+	}
+
+	.recommend-title-img {
+		width: 320rpx;
+	}
+
+	.list-container {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0 20rpx;
+		justify-content: space-between;
+	}
+
+	.g-shop-list {
+		width: 345rpx;
+		background-color: #fff;
+		border-radius: 16rpx;
+		overflow: hidden;
+		margin-bottom: 20rpx;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.shop-img image {
+		width: 345rpx;
+		height: 345rpx;
+	}
+
+	.shop-box {
+		padding: 16rpx;
+	}
+
+	.shop-title {
+		font-size: 26rpx;
+		color: #333;
+		line-height: 1.4;
+		height: 72rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.platform-icon {
+		width: 28rpx;
+		height: 28rpx;
+		vertical-align: middle;
+		margin-right: 8rpx;
+		margin-top: -4rpx;
+	}
+
+	.shop-tag {
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 12rpx;
+		height: 36rpx;
+		overflow: hidden;
+	}
+
+	.shop-tag text {
+		font-size: 20rpx;
+		color: #ff416c;
+		background-color: rgba(255, 65, 108, 0.08);
+		padding: 2rpx 10rpx;
+		border-radius: 4rpx;
+		margin-right: 10rpx;
+	}
+
+	.flex-left {
+		display: flex;
+		align-items: center;
+		margin-top: 16rpx;
+	}
+
+	.discount-price {
+		font-size: 24rpx;
+		color: #ff416c;
 		font-weight: bold;
 	}
 
+	.price-num {
+		font-size: 36rpx;
+	}
+
+	.g-coupon-label {
+		display: flex;
+		align-items: center;
+		margin-left: 12rpx;
+		border: 1rpx solid #ff416c;
+		border-radius: 4rpx;
+		overflow: hidden;
+		height: 30rpx;
+	}
+
+	.g-coupon-label .g-df-c {
+		background-color: #ff416c;
+		color: #fff;
+		font-size: 20rpx;
+		padding: 0 6rpx;
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
+
+	.g-coupon-label text {
+		color: #ff416c;
+		font-size: 20rpx;
+		padding: 0 8rpx;
+	}
+
+	.sales-volume {
+		font-size: 22rpx;
+		color: #999;
+	}
+
+	.end-tips {
+		text-align: center;
+		font-size: 24rpx;
+		color: #999;
+		padding: 40rpx 0;
+	}
+
+	.custom-copyright {
+		text-align: center;
+		font-size: 22rpx;
+		color: #969799;
+		padding-bottom: 20rpx;
+	}
+
 	.scroll-content {
 		height: 100%;
 	}
@@ -289,6 +750,29 @@
 		font-size: 24rpx;
 	}
 
+	/* 活动横幅 (1:1 还原) */
+	.activity-banner {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.banner-img {
+		width: 100%;
+		display: block;
+	}
+
+	.banner-time {
+		position: absolute;
+		right: 30rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 22rpx;
+		color: rgba(255, 255, 255, 0.9);
+		font-weight: bold;
+		letter-spacing: 1rpx;
+	}
+
 	/* 热销榜 */
 	.hot-sale-bar {
 		display: flex;
@@ -310,12 +794,19 @@
 		font-weight: bold;
 	}
 
+	.hot-divider {
+		color: #e0e0e0;
+		font-size: 20rpx;
+		margin: 0 10rpx;
+	}
+
 	.hot-right {
 		font-size: 24rpx;
 		color: #bf360c;
+		opacity: 0.8;
 	}
 
-	/* 信息区 */
+	/* 信息区 (1:1 还原) */
 	.info-section {
 		background-color: #ffffff;
 		padding: 30rpx;
@@ -325,74 +816,81 @@
 	.price-row {
 		display: flex;
 		justify-content: space-between;
-		align-items: flex-end;
-		margin-bottom: 20rpx;
+		align-items: center;
+		margin-bottom: 24rpx;
 	}
 
 	.price-left {
 		display: flex;
 		align-items: baseline;
-		color: #ff416c;
 	}
 
-	.price-symbol {
-		font-size: 28rpx;
-		font-weight: bold;
-	}
-
-	.price-integer {
-		font-size: 56rpx;
-		font-weight: bold;
-	}
-
-	.price-decimal {
-		font-size: 32rpx;
-		font-weight: bold;
-	}
-
-	.old-price {
+	.price-label {
 		font-size: 26rpx;
-		color: #999;
-		text-decoration: line-through;
-		margin-left: 20rpx;
+		color: #ff416c;
+		font-weight: bold;
 	}
 
-	.sales-count {
+	.price-val {
+		font-size: 52rpx;
+		color: #ff416c;
+		font-weight: bold;
+		margin: 0 8rpx;
+	}
+
+	.price-old {
 		font-size: 24rpx;
-		color: #999;
+		color: #bbb;
+		text-decoration: line-through;
+	}
+
+	.price-right {
+		font-size: 26rpx;
+		color: #333;
+	}
+
+	.sales-red {
+		color: #ff416c;
+		font-weight: bold;
 	}
 
 	.title-row {
-		margin-bottom: 20rpx;
+		margin-bottom: 24rpx;
+	}
+
+	.title-content {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.title-platform-icon {
+		width: 32rpx;
+		height: 32rpx;
+		margin-right: 12rpx;
+		margin-top: 6rpx;
+		flex-shrink: 0;
+	}
+
+	.title-text {
+		font-size: 30rpx;
+		color: #333;
+		font-weight: bold;
 		line-height: 44rpx;
 	}
 
-	.platform-tag {
-		background-color: #ff416c;
-		color: #ffffff;
-		font-size: 20rpx;
-		padding: 2rpx 10rpx;
-		border-radius: 4rpx;
-		margin-right: 10rpx;
-	}
-
-	.product-title {
-		font-size: 32rpx;
-		color: #333;
-		font-weight: bold;
-	}
-
-	.label-row {
+	.tags-row {
 		display: flex;
+		flex-wrap: wrap;
 	}
 
-	.label-item {
+	.tag-capsule {
 		font-size: 22rpx;
 		color: #ff416c;
 		background-color: #fff0f3;
-		padding: 4rpx 16rpx;
-		border-radius: 20rpx;
-		margin-right: 20rpx;
+		padding: 6rpx 20rpx;
+		border-radius: 30rpx;
+		margin-right: 16rpx;
+		margin-bottom: 10rpx;
 	}
 
 	/* 优惠券 */
@@ -424,7 +922,7 @@
 	}
 
 	.amount-val {
-		font-size: 48rpx;
+		font-size: 40rpx;
 		font-weight: bold;
 	}
 
@@ -473,73 +971,236 @@
 		bottom: -12rpx;
 	}
 
-	/* 店铺 */
-	.shop-section {
+	/* 品牌与店铺卡片 (1:1 还原) */
+	.brand-shop-card {
 		background-color: #ffffff;
+		margin: 20rpx;
 		padding: 30rpx;
-		margin-bottom: 20rpx;
+		border-radius: 16rpx;
 	}
 
-	.shop-header {
+	.brand-row, .shop-row {
 		display: flex;
-		justify-content: space-between;
-		align-items: center;
+		align-items: flex-start;
+	}
+
+	.brand-row {
 		margin-bottom: 30rpx;
 	}
 
-	.shop-info {
+	.row-label {
+		font-size: 26rpx;
+		color: #999;
+		width: 80rpx;
+		flex-shrink: 0;
+		margin-top: 4rpx;
+	}
+
+	.brand-content {
 		display: flex;
 		align-items: center;
 	}
 
-	.shop-logo {
-		width: 80rpx;
-		height: 80rpx;
-		border-radius: 8rpx;
-		margin-right: 20rpx;
+	.brand-logo-img {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 16rpx;
 	}
 
-	.shop-name {
+	.brand-name-text {
 		font-size: 28rpx;
 		color: #333;
 		font-weight: bold;
 	}
 
-	.shop-entry {
-		font-size: 24rpx;
-		color: #999;
+	.shop-main-content {
+		flex: 1;
 	}
 
-	.score-row {
+	.shop-name-row {
 		display: flex;
 		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 12rpx;
+	}
+
+	.shop-title-box {
+		display: flex;
+		align-items: center;
+	}
+
+	.tag-tmall-mini {
+		background-color: #ff0036;
+		color: #ffffff;
+		font-size: 18rpx;
+		width: 28rpx;
+		height: 28rpx;
+		line-height: 28rpx;
+		text-align: center;
+		border-radius: 4rpx;
+		margin-right: 12rpx;
+	}
+	
+	.tag-taobao-mini {
+		background-color: #ff5000;
+		color: #ffffff;
+		font-size: 18rpx;
+		width: 28rpx;
+		height: 28rpx;
+		line-height: 28rpx;
+		text-align: center;
+		border-radius: 4rpx;
+		margin-right: 12rpx;
+	}
+
+	.shop-name-text {
+		font-size: 28rpx;
+		color: #333;
+		font-weight: bold;
+	}
+
+	.row-arrow {
+		font-size: 24rpx;
+		color: #ccc;
+	}
+
+	.score-detail-row {
+		display: flex;
 	}
 
 	.score-item {
 		font-size: 24rpx;
 		color: #999;
+		margin-right: 30rpx;
 	}
 
-	.score-val {
+	.val-red {
 		color: #ff416c;
 		margin: 0 4rpx;
 	}
 
-	.score-up {
+	.up-red {
 		color: #ff416c;
+		font-size: 20rpx;
 	}
 
-	/* 详情图 */
-	.detail-images {
+	/* 粉丝福利购 (1:1 还原) */
+	.benefit-card {
 		background-color: #ffffff;
-		padding: 30rpx 0;
+		margin: 20rpx;
+		padding: 30rpx;
+		border-radius: 16rpx;
 	}
 
-	.detail-title {
+	.benefit-header {
+		margin-bottom: 24rpx;
+	}
+
+	.benefit-title-box {
+		display: flex;
+		align-items: center;
+	}
+
+	.benefit-icon {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 16rpx;
+		flex-shrink: 0;
+	}
+
+	.benefit-title {
 		font-size: 28rpx;
 		color: #333;
 		font-weight: bold;
-		padding: 0 30rpx 30rpx;
+	}
+
+	.benefit-content {
+		background-color: #f7f7f7;
+		padding: 24rpx;
+		border-radius: 12rpx;
+	}
+
+	.benefit-text {
+		font-size: 26rpx;
+		color: #666;
+		line-height: 40rpx;
+		display: block;
+	}
+
+	/* 详情控制条 */
+	.detail-control-bar {
+		margin-top: 20rpx;
+		background-color: #ffffff;
+		padding: 24rpx 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-radius: 20rpx 20rpx 0 0;
+	}
+
+	.control-left {
+		display: flex;
+		align-items: center;
+	}
+
+	.red-line {
+		width: 6rpx;
+		height: 28rpx;
+		background-color: #ff416c;
+		border-radius: 3rpx;
+		margin-right: 16rpx;
+	}
+
+	.control-title {
+		font-size: 30rpx;
+		color: #333;
+		font-weight: bold;
+		margin-right: 20rpx;
+	}
+
+	.profit-tag {
+		font-size: 24rpx;
+		color: #ff416c;
+		background-color: rgba(255, 65, 108, 0.1);
+		padding: 4rpx 12rpx;
+		border-radius: 8rpx;
+	}
+
+	.control-right {
+		display: flex;
+		align-items: center;
+	}
+
+	.expand-text {
+		font-size: 26rpx;
+		color: #999;
+		margin-right: 8rpx;
+	}
+
+	.expand-arrow {
+		width: 12rpx;
+		height: 12rpx;
+		border-right: 2rpx solid #999;
+		border-bottom: 2rpx solid #999;
+		transform: rotate(45deg);
+		transition: transform 0.3s;
+	}
+
+	.expand-arrow.up {
+		transform: rotate(-135deg);
+		margin-top: 6rpx;
+	}
+
+	/* 图文详情 */
+	.detail-images {
+		background-color: #ffffff;
+		position: relative;
+		overflow: hidden;
+		transition: max-height 0.5s ease;
+	}
+
+	.detail-images.collapsed {
+		max-height: 1200rpx;
 	}
 
 	.detail-img {
@@ -547,6 +1208,176 @@
 		display: block;
 	}
 
+	.expand-mask {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 300rpx;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-end;
+		padding-bottom: 40rpx;
+		z-index: 10;
+	}
+
+	.mask-text {
+		font-size: 28rpx;
+		color: #ff416c;
+		font-weight: bold;
+	}
+
+	.mask-arrow {
+		width: 16rpx;
+		height: 16rpx;
+		border-right: 4rpx solid #ff416c;
+		border-bottom: 4rpx solid #ff416c;
+		transform: rotate(45deg);
+		margin-top: 10rpx;
+	}
+
+	/* 同类推荐推荐 (g-shop-list 1:1 风格) */
+	.more-like {
+		margin-top: 20rpx;
+		background-color: #f8f8f8;
+		padding-bottom: 40rpx;
+	}
+
+	.top.g-df-c {
+		display: flex;
+		justify-content: center;
+		padding: 30rpx 0;
+	}
+
+	.recommend-title-img {
+		width: 320rpx;
+	}
+
+	.list-container {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0 20rpx;
+		justify-content: space-between;
+	}
+
+	.g-shop-list {
+		width: 345rpx;
+		background-color: #fff;
+		border-radius: 16rpx;
+		overflow: hidden;
+		margin-bottom: 20rpx;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.shop-img image {
+		width: 345rpx;
+		height: 345rpx;
+	}
+
+	.shop-box {
+		padding: 16rpx;
+	}
+
+	.shop-title {
+		font-size: 26rpx;
+		color: #333;
+		line-height: 1.4;
+		height: 72rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.platform-icon {
+		width: 28rpx;
+		height: 28rpx;
+		vertical-align: middle;
+		margin-right: 8rpx;
+		margin-top: -4rpx;
+	}
+
+	.shop-tag {
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 12rpx;
+		height: 36rpx;
+		overflow: hidden;
+	}
+
+	.shop-tag text {
+		font-size: 20rpx;
+		color: #ff416c;
+		background-color: rgba(255, 65, 108, 0.08);
+		padding: 2rpx 10rpx;
+		border-radius: 4rpx;
+		margin-right: 10rpx;
+	}
+
+	.flex-left {
+		display: flex;
+		align-items: center;
+		margin-top: 16rpx;
+	}
+
+	.discount-price {
+		font-size: 24rpx;
+		color: #ff416c;
+		font-weight: bold;
+	}
+
+	.price-num {
+		font-size: 36rpx;
+	}
+
+	.g-coupon-label {
+		display: flex;
+		align-items: center;
+		margin-left: 12rpx;
+		border: 1rpx solid #ff416c;
+		border-radius: 4rpx;
+		overflow: hidden;
+		height: 30rpx;
+	}
+
+	.g-coupon-label .g-df-c {
+		background-color: #ff416c;
+		color: #fff;
+		font-size: 20rpx;
+		padding: 0 6rpx;
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
+
+	.g-coupon-label text {
+		color: #ff416c;
+		font-size: 20rpx;
+		padding: 0 8rpx;
+	}
+
+	.sales-volume {
+		font-size: 22rpx;
+		color: #999;
+	}
+
+	.end-tips {
+		text-align: center;
+		font-size: 24rpx;
+		color: #999;
+		padding: 40rpx 0;
+	}
+
+	.custom-copyright {
+		text-align: center;
+		font-size: 22rpx;
+		color: #969799;
+		padding-bottom: 20rpx;
+	}
+
 	.footer-placeholder {
 		height: 120rpx;
 	}
diff --git a/static/img/fuli.png b/static/img/fuli.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6dbcd5b153261c0285c3e4795a66a282c28bb0e
GIT binary patch
literal 1084
zcmV-C1jGA@P)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<000C7Nkl<ZNQtGE
zU2GIp6o9`obBmg4q;8QS27@ga8v`0$`%l|Qi(NxnjU*;+*@}q|>Vq#lm>3nJ!Xxl*
zV&%bD3#hdeD6(KlOQ}VP(t?%;m1s<97R%NkZFkI_nQeBvGgBH)GMUYupYPr|=bm%L
zvMhqcYTPE6)S%=!lvH6#2}%l3AW9OLGKP|Vlzf9JeJCtU!Fh1rJNL~Ilpo8gYcnvV
z4O89*N_@<gyH6Fc9T)?40iOUVF9*XDRufwdoB=)#fO$!Y>!W>F-xAQOjMV{Wf$$<g
z^Cj%Y*boS`%C|NGM}flIfTcyp=mj=q{yA4PR(R_pm<(aaJ#)#<Ony-adA<?C>*4;8
z<9&4k&i@1_zJ=@899sqRiYAF6Px1cVOLIW$$yO6X1~3U@WK>uBiPRvkM`1}G=mjSJ
z0RfiY3nDN*4IQ7u;D8qp3>m_pf_L}MrmHmOo3ltQ@>UFHW}&ki>qs1ulXhS!TnY{K
z(6k9&j$$u%sNXNAZMvW&^+Z$<e!-9udqtT$T)7Ns*Htc9JNCfOqwZ&OKAk9cC+kY#
z%{O#n;G-QdnV7#rT`gl6ves}b$+Prj%d?;qbacayBmU(vG77!Nz*JDb(a%aVHfUhP
zH&DgncFwG?j{C#X5|2CiEqyG=Dx!gvo+@R+@(}zr4wK1+fypFHOu&61FiqbrXy6)8
zm99Q53-sD7u{^t3rr0?w@KjCDz<2^yEQ7oA7l!5ML#Pn0C17^e&#J()m(I!Hc`yuU
zs$CdZRqfc0UI;YPz=WUD>No<a6cTNQM+16z@xu^_*tWz23oK#2w_;s0!YVswhMPOX
zJ&(yLxbYuSwjQZ1cMks_e?n@;wvqh1py3&KB?ftUaOePByx^X@j5s=`*s*`mon`>2
z_FdD#V^~U%ZCjAoi_rQ4+?;lFy4C5=sCRat6HdhgCaf(3dJWxyCRz^l!l^;$w+7sK
zhw~V237j2*lP4Dp102@t`OclxzDbhTUV{1xxSquNq6;qlYPT&ZT?;Lnp}Y)k{0j#=
zgJ7D`XUMtz`k?LhH7i~P%^Mxq_7CCk3Ha>_{C)+F$KiurFf|2r^|126AmDD^*^^2i
z3w;Oq-g9>iRrcHZ>}&XYJlA0SDs;J7DJ%Db4Z93y;>+-UeNtO>gUT^|=mF<_F5rBP
zxQ)H2$V;nZM)fQtbK>J%F`6*sOH7vJOnl{zC9m<6rOO(?H!-D!o%?#yjI2&0XFk=6
z7SEk7UXpICo=nf2)+YV!J??}az73f6)iJVQo<JMg*M1Rr8h91Bya<rC)jrx+$H<L+
z3s-#ulWLS~MoA^66wkZrUv{thU6^tjMauW85Bv{&8ybm+sizSD0000<MNUMnLSTYn
CkoyJz

literal 0
HcmV?d00001