<template>
	<view class="detail-container">
		<!-- 顶部渐变导航栏 -->

		<view class="fixed-header" :style="{ opacity: navOpacity }">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="header-content">
				<text class="header-title">商品详情</text>
			</view>
		</view>

		<!-- 悬浮返回按钮 -->

		<view class="back-btn" :style="{ top: backButtonTop + '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 v-if="isLoaded" class="animate-fade-in">
				<!-- 主图轮播 -->
				<view class="swiper-box">
					<swiper class="main-swiper" circular @change="swiperChange">
						<swiper-item v-for="(img, index) in product.images" :key="index">
							<image :src="img" mode="aspectFill" class="swiper-img"></image>
						</swiper-item>
					</swiper>
					<view class="swiper-indicator" v-if="product.images.length > 0">{{ 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" v-if="product.rankText">
					<view class="hot-left">
						<text class="trophy-icon"></text>
						<text class="hot-text">{{ product.rankText }}</text>
					</view>
					<view class="hot-divider">|</view>
					<view class="hot-right">
						<text>今日已有{{ product.todaySale }}人下单</text>
					</view>
				</view>

				<!-- 价格与标题区 -->
				<view class="info-section">
					<view class="price-row">
						<view class="price-left">
							<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>

					<view class="title-row">
						<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="tags-row">
						<text class="tag-capsule" v-for="(tag, index) in product.labels" :key="index">{{ tag }}</text>
					</view>
					<view class="estimate-tip" v-if="!$store.state.isThirdParty">
						<text>消费券：{{ $estimateCoupon(product.commission) }}为预估值，实际以系统发放为准</text>
					</view>
				</view>

				<!-- 优惠券模块 -->
				<view class="coupon-section" v-if="product.couponVal">
					<view class="coupon-card">
						<view class="coupon-left">
							<view class="coupon-amount">
								<text class="amount-val">{{ product.couponVal }}</text>
								<text class="amount-unit">元优惠券</text>
							</view>
							<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
						</view>
						<!-- <view class="coupon-right">
							<view class="get-btn" @click="goBuy">立即领券</view>
						</view> -->
						<!-- <view class="coupon-circle top"></view> -->
						<!-- <view class="coupon-circle bottom"></view> -->
					</view>
				</view>

				<!-- 品牌与店铺 -->
				<view class="brand-shop-card" v-if="product.shopName">
					<view class="brand-row" v-if="product.brandName">
						<text class="row-label">品牌</text>
						<view class="brand-content">
							<image :src="product.brandLogo" mode="aspectFit" class="brand-logo-img" v-if="product.brandLogo"></image>
							<text class="brand-name-text">{{ product.brandName }}</text>
						</view>
					</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'" v-if="product.platform">{{ 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>

				<!-- 粉丝福利购 -->
				<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" :class="{ 'collapsed': !isExpanded }">
					<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
				</view>
				
				<!-- 同类型产品推荐 -->
				<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.id)">
								<view class="shop-img">
									<image :src="item.itempic" 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 coupon-row" v-if="!$store.state.isThirdParty">
										<view class="d-coupon-left">
											<text class="coupon-tip"></text>
											<text class="coupon-val">{{ $estimateCoupon(item.tkmoney) }}</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>
				
				<!-- 底部留白 -->
				<view class="footer-placeholder"></view>
			</view>

			<!-- 骨架屏占位 -->
			<view class="skeleton-wrap" v-else>
				<view class="sk-swiper sk-animate"></view>
				<view class="sk-info">
					<view class="sk-price sk-animate"></view>
					<view class="sk-title sk-animate"></view>
					<view class="sk-title sk-short sk-animate"></view>
					<view class="sk-tags">
						<view class="sk-tag sk-animate"></view>
						<view class="sk-tag sk-animate"></view>
					</view>
				</view>
				<view class="sk-coupon sk-animate"></view>
				<view class="sk-shop sk-animate"></view>
				<view class="sk-detail sk-animate"></view>
			</view>
		</scroll-view>

		<!-- 底部固定操作栏 -->
		<view class="bottom-bar">
			<view class="bar-left">
				<view class="bar-btn" @click="goHome">
					<text class="bar-icon"></text>
					<text class="bar-text">首页</text>
				</view>
				<view class="bar-btn">
					<text class="bar-icon"></text>
					<text class="bar-text">分享</text>
				</view>
			</view>
			<view class="bar-right">
				<view class="copy-btn" @click="copyTaoWord">购买</view>
				<!-- <view class="buy-btn" @click="goBuy">领券购买</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 44,
				currentSwiper: 0,
				product: {
					id: '',
					images: [],
					rank: 0,
					todaySale: 0,
					price: '',
					oldPrice: '',
					totalSale: '',
					platform: '',
					title: '',
					labels: [],
					couponVal: 0,
					couponTime: '',
					shopName: '',
					brandName: '',
					brandLogo: '',
					scores: {
						desc: '-',
						service: '-',
						post: '-'
					},
					activity: null,
					activityTime: '',
					detailImages: []
				},
				isLoaded: false,
				navOpacity: 0,
				bgOpacity: 0.4,
				iconColor: '#ffffff',
				isExpanded: true,
				similarProducts: []
			}
		},
		computed: {
			backButtonTop() {
				return this.statusBarHeight + 10;
			}
		},
		onLoad(options) {
			this.product.id = options.id || '55493973';
			this.keywordid = options.keywordid || '';
			const sysInfo = uni.getSystemInfoSync();
			this.statusBarHeight = sysInfo.statusBarHeight || 44;
			this.getDetailData();
		},
		methods: {
			getDetailData() {
				const useSuperSearch = this.keywordid;
				uni.request({
					url: useSuperSearch
						? `https://api.cmspro.haodanku.com/superSearch/getList?keyword=${this.keywordid}&cid=YsWZ21tx`
						: `https://api.cmspro.haodanku.com/detail/itemInfo?id=${this.product.id}&cid=YsWZ21tx`,
					success: (res) => {
						if (res.data && res.data.code === 200) {
							const d = useSuperSearch
								? (Array.isArray(res.data.data) && res.data.data.length > 0 ? res.data.data[0] : null)
								: res.data.data;
							if (!d) return;
							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) {
								salesStr = (d.itemsale / 10000).toFixed(1) + '万';
							}

							// 解析排行榜标签
							let rank = 10; // 默认
							let rankText = '近期热销榜';
							try {
								const labels = JSON.parse(d.rank_label);
								if (labels && labels.length > 0) {
									rankText = labels[0].title;
									rank = labels[0].sort || 10;
								}
							} catch (e) {}

							// 处理图片逻辑 (512345 模式: 将最后一张图追加到首位)
							// 兼容：taobao_image_qiniu 可能为空数组 [] 或不存在，回退到 itempic
							let swiperImages = (Array.isArray(d.taobao_image_qiniu) && d.taobao_image_qiniu.length > 0)
								? [...d.taobao_image_qiniu]
								: (d.itempic ? [d.itempic] : []);
							if (swiperImages.length > 0) {
								swiperImages.unshift(swiperImages[swiperImages.length - 1]);
							}

							// 详情图兼容逻辑：优先 material_info -> 其次 taobao_image -> 再次 taobao_image_qiniu -> 最后主图
							let detailImages = [];
							if (d.material_info && d.material_info[0] && Array.isArray(d.material_info[0].image) && d.material_info[0].image.length > 0) {
								detailImages = d.material_info[0].image.map(img => img.startsWith('http') ? img : `https://img-haodanku-com.cdn.fudaiapp.com/${img}`);
							} else if (d.taobao_image && typeof d.taobao_image === 'string') {
								detailImages = d.taobao_image.split(',');
							} else if (Array.isArray(d.taobao_image_qiniu) && d.taobao_image_qiniu.length > 0) {
								detailImages = d.taobao_image_qiniu;
							} else if (typeof d.taobao_image_qiniu === 'string' && d.taobao_image_qiniu) {
								detailImages = d.taobao_image_qiniu.split(',');
							} else if (d.itempic) {
								detailImages = [d.itempic];
							}

							const activityTime = d.activity_info ? 
								`${formatActDate(d.activity_info.start_time)}-${formatActDate(d.activity_info.end_time)}` : '';

							this.product = {
								id: d.id,
								images: swiperImages,
								rank: rank,
								rankText: rankText,
								todaySale: d.todaysale,
								price: d.itemendprice,
								oldPrice: d.itemprice,
								totalSale: salesStr,
								platform: d.shoptype === 'B' ? '天猫' : '淘宝',
								title: d.itemtitle,
								labels: d.label || [],
								couponVal: d.couponmoney,
								couponTime: (() => {
									if (!d.couponlife) return '';
									const year = new Date().getFullYear();
									const life = d.couponlife.replace('有效期至：', '');
									return life.split('-').map(t => `${year}.${t}`).join('-');
								})(),
								shopName: d.shopname,
								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 && d.shop_score.desc_score) || '-',
									service: (d.shop_score && d.shop_score.serv_score) || '-',
									post: (d.shop_score && d.shop_score.post_score) || '-'
								},
								desc: d.itemdesc,
								detailImages: detailImages,
								activity: d.activity_info,
								activityTime: activityTime,
								activityId: (d.activity_info && d.activity_info.activityid) || d.activityid || '',
								commission: d.tkmoney,
								taobaoId: d.itemid,
								sonCategory: d.son_category
							};
							
							// 获取同类推荐 (使用 itemid 和 son_category)
							this.getSimilarProducts(d.itemid, d.son_category);
							
							this.isLoaded = true;
							// 预加载淘口令和领券链接，避免 iOS 异步剪贴板限制
							this.fetchTaoWord();
						}
					}
				});
			},
			fetchTaoWord(callback) {
				if (!this.product.taobaoId) return;
				// 已获取过则直接回调，避免重复请求，同时保证 iOS 剪贴板在同步路径中
				if (this.product.taoCode || this.product.couponUrl) {
					if (callback) callback();
					return;
				}
				uni.showLoading({ title: '加载中...', mask: true });
				uni.request({
					url: 'https://v2.api.haodanku.com/ratesurl',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						itemid: this.product.taobaoId,
						title: this.product.title || '',
						get_taoword: 1,
						pid: 'mm_284380119_1881450385_111415850448',
						tb_name: 'michuan2018',
						relation_id: this.$store.getters.relationId || '',
						apikey: '5417B681C5EA'
					},
					success: (res) => {
						uni.hideLoading();
						const body = res.data || {};
						if (body.code === 1 && body.data) {
							this.product.taoCode = body.data.taoword || '';
							this.product.couponUrl = body.data.coupon_click_url || '';
							if (callback) callback();
						} else {
							uni.showToast({ title: body.msg || '获取失败', icon: 'none' });
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.log(err)
						uni.showToast({ title: '网络错误', icon: 'none' });
					}
				});
			},
			getSimilarProducts(itemId, sonCategory) {
				uni.request({
					url: `https://api.cmspro.haodanku.com/detail/getRecommendItems?itemid=${itemId}&son_category=${sonCategory}&cid=YsWZ21tx`,
					success: (res) => {
						if (res.data && res.data.code === 200) {
							this.similarProducts = res.data.data.slice(0, 10).map(item => ({
							...item,
							tkmoney: item.tkmoney || 0
						}));
						}
					}
				});
			},
			formatSales(sale) {
				if (sale >= 10000) {
					return (sale / 10000).toFixed(1) + '万';
				}
				return sale;
			},
			goToDetail(id) {
				// console.log(id)
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				});
			},
			goBack() {
				uni.navigateBack();
			},
			copyTaoWord() {
				this.fetchTaoWord(() => {
					if (!this.product.taoCode) {
						uni.showToast({ title: '暂无口令', icon: 'none' });
						return;
					}
					uni.setClipboardData({
						data: this.product.taoCode,
						success: () => {
							uni.showToast({ title: '复制成功', icon: 'success' });
						},
						fail: () => {
							uni.showToast({ title: '复制失败', icon: 'none' });
						}
					});
				});
			},
			goBuy() {
				this.fetchTaoWord(() => {
					const url = this.product.couponUrl;
					if (!url) {
						uni.showToast({ title: '暂无领券链接', icon: 'none' });
						return;
					}
					uni.setClipboardData({
						data: url,
						success: () => {
							uni.showToast({ title: '链接已复制，请到浏览器打开', icon: 'none' });
						}
					});
					// // #ifdef H5
					// window.location.href = url;
					// // #endif
					// // #ifndef H5
					// uni.setClipboardData({
					// 	data: url,
					// 	success: () => {
					// 		uni.showToast({ title: '链接已复制，请到浏览器打开', icon: 'none' });
					// 	}
					// });
					// // #endif
				});
			},
			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.redirectTo({
					url: '/pages/index/index'
				});
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			}
		}
	}
</script>

<style>
	.detail-container {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
		position: relative;
	}

	/* 渐现动画 */
	.animate-fade-in {
		animation: fadeIn 0.4s ease-out forwards;
	}

	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(10rpx); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* 骨架屏样式 */
	.skeleton-wrap {
		padding-bottom: 200rpx;
	}

	.sk-swiper {
		width: 100%;
		height: 750rpx;
		background-color: #eee;
	}

	.sk-info {
		background-color: #fff;
		padding: 30rpx;
	}

	.sk-price {
		width: 260rpx;
		height: 60rpx;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}

	.sk-title {
		width: 100%;
		height: 40rpx;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
	}

	.sk-title.sk-short {
		width: 60%;
	}

	.sk-tags {
		display: flex;
		margin-top: 30rpx;
	}

	.sk-tag {
		width: 120rpx;
		height: 32rpx;
		margin-right: 20rpx;
		border-radius: 4rpx;
	}

	.sk-coupon {
		margin: 20rpx 30rpx;
		height: 180rpx;
		border-radius: 20rpx;
	}

	.sk-shop {
		margin: 20rpx 30rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}

	.sk-detail {
		margin-top: 20rpx;
		height: 800rpx;
		background-color: #fff;
	}

	.sk-animate {
		background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
		background-size: 400% 100%;
		animation: sk-loading 1.4s ease infinite;
	}

	@keyframes sk-loading {
		0% { background-position: 100% 50%; }
		100% { background-position: 0 50%; }
	}

	/* 返回按钮 */
	/* 顶部渐变导航栏 */
	.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);
	}

	.status-bar {
		width: 100%;
	}

	.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;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 200;
		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;
	}

	/* 同类推荐推荐 (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;
	}

	.coupon-row {
		align-items: baseline;
		margin-top: 4rpx;
	}

	.coupon-row .coupon-tip {
		font-size: 22rpx;
		color: #ff8a00;
	}

	.coupon-row .coupon-val {
		font-size: 26rpx;
		color: #ff8a00;
		font-weight: bold;
	}

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

	/* 轮播图 */
	.swiper-box {
		width: 100%;
		height: 750rpx;
		position: relative;
	}

	.main-swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	.swiper-indicator {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #ffffff;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
		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;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(to right, #fff1eb, #fbe9e7);
		padding: 20rpx 30rpx;
	}

	.hot-left {
		display: flex;
		align-items: center;
	}

	.hot-text {
		font-size: 26rpx;
		color: #d84315;
		margin-left: 10rpx;
		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;
		margin-bottom: 20rpx;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.price-left {
		display: flex;
		align-items: baseline;
	}

	.price-label {
		font-size: 26rpx;
		color: #ff416c;
		font-weight: bold;
	}

	.price-val {
		font-size: 52rpx;
		color: #ff416c;
		font-weight: bold;
		margin: 0 8rpx;
	}

	.price-old {
		font-size: 24rpx;
		color: #bbb;
		text-decoration: line-through;
	}

	.price-right {
		font-size: 26rpx;
		color: #333;
	}

	.sales-red {
		color: #ff416c;
		font-weight: bold;
	}

	.title-row {
		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;
	}

	.tags-row {
		display: flex;
		flex-wrap: wrap;
	}

	.tag-capsule {
		font-size: 22rpx;
		color: #ff416c;
		background-color: #fff0f3;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 16rpx;
		margin-bottom: 10rpx;
	}

	.estimate-tip {
		font-size: 22rpx;
		color: #ff8a00;
		background-color: #fff8f0;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		margin-top: 16rpx;
	}

	/* 优惠券 */
	.coupon-section {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.coupon-card {
		height: 160rpx;
		background: linear-gradient(to right, #ff715a, #ff416c);
		border-radius: 16rpx;
		display: flex;
		position: relative;
		overflow: hidden;
	}

	.coupon-left {
		flex: 1;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #ffffff;
	}

	.coupon-amount {
		margin-bottom: 10rpx;
	}

	.amount-val {
		font-size: 40rpx;
		font-weight: bold;
	}

	.amount-unit {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.coupon-time {
		font-size: 20rpx;
		opacity: 0.9;
	}

	.coupon-right {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 2rpx dashed rgba(255, 255, 255, 0.4);
	}

	.get-btn {
		background-color: #ffffff;
		color: #ff416c;
		font-size: 26rpx;
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		font-weight: bold;
	}

	.coupon-circle {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		background-color: #f8f8f8;
		border-radius: 50%;
		left: auto;
		right: 188rpx;
	}

	.coupon-circle.top {
		top: -12rpx;
	}

	.coupon-circle.bottom {
		bottom: -12rpx;
	}

	/* 品牌与店铺卡片 (1:1 还原) */
	.brand-shop-card {
		background-color: #ffffff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
	}

	.brand-row, .shop-row {
		display: flex;
		align-items: flex-start;
	}

	.brand-row {
		margin-bottom: 30rpx;
	}

	.row-label {
		font-size: 26rpx;
		color: #999;
		width: 80rpx;
		flex-shrink: 0;
		margin-top: 4rpx;
	}

	.brand-content {
		display: flex;
		align-items: center;
	}

	.brand-logo-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.brand-name-text {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.shop-main-content {
		flex: 1;
	}

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

	.val-red {
		color: #ff416c;
		margin: 0 4rpx;
	}

	.up-red {
		color: #ff416c;
		font-size: 20rpx;
	}

	/* 粉丝福利购 (1:1 还原) */
	.benefit-card {
		background-color: #ffffff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
	}

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

	.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: 0;
	}

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

	/* 同类推荐推荐 (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;
	}

	/* 底部栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		align-items: center;
		border-top: 1rpx solid #eeeeee;
		z-index: 100;
	}

	.bar-left {
		display: flex;
		margin-right: 20rpx;
	}

	.bar-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}

	.bar-icon {
		font-size: 36rpx;
		margin-bottom: 4rpx;
	}

	.bar-text {
		font-size: 20rpx;
		color: #666;
	}

	.bar-right {
		flex: 1;
		display: flex;
		height: 80rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.copy-btn {
		flex: 1;
		/* background-color: #ffbcba; */
		background: linear-gradient(to right, #ff715a, #ff416c);
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-weight: bold;
	}

	.buy-btn {
		flex: 1;
		background: linear-gradient(to right, #ff715a, #ff416c);
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-weight: bold;
	}
</style>
