jiayouhouyuan/pages/trace/detail.vue

<template>
		<view class="page">
		<view class="pageDecor">
			<view class="pageGlow glowA" />
			<view class="pageGlow glowB" />
			<view class="pageGlow glowC" />
			<view class="pageGrain" />
		</view>

			<!-- 顶部留白：兼容 iOS 刘海 -->
			<view class="safeTop" />

			<!-- 轻品牌页头：极克制、无导航栏，让独立扫码页有品牌收口 -->
			<view class="brandPageHeader">
				<view class="brandPageHeaderInner">
					<text class="brandPageHeaderName">佳友厚苑</text>
					<view class="brandPageHeaderDot" />
					<text class="brandPageHeaderLabel">官方溯源 品质可验</text>
				</view>
			</view>

			<view class="hero">
			<!-- 完整首屏大卡：品牌信任区 + 商品信息面板 -->
			<view class="heroCard">
				<!-- Hero 视觉区：商品图 + 品牌氛围 -->
				<view class="heroBg">
					<!-- 优先商品图，没有则用农场图 -->
					<image
						class="heroImage"
						:src="traceDetail.product?.image || traceDetail.farm?.image"
						mode="aspectFill"
					/>
					<!-- 底部大字号水印，营造品牌氛围 -->
					<view class="heroBrandAnchor">
						<text class="heroBrandAnchorText">JIAYOU</text>
					</view>
					<!-- 光感层：多层次渐变 + 景深 + 底部暗化 -->
					<view class="heroMask" />
				</view>

				<!-- 商品信息面板：嵌入 Hero 底部，与 Hero 自然过渡 -->
				<view v-if="traceDetail.product?.name" class="heroInfoPanel">
					<view class="infoPanelInner">
						<view class="sectionHeader">
							<view class="sectionHeaderLeft">
								<text class="sectionEn">Product</text>
								<text class="sectionTitle">商品信息</text>
							</view>
							<view v-if="traceDetail.batch?.statusBadge" class="trustBadge" :class="traceDetail.batch.statusBadge.type">
								<!-- 认证徽章 SVG：双圆环 + 对勾，图标主视觉，文字辅助 -->
								<svg class="trustBadgeIcon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
									<circle cx="10" cy="10" r="9" stroke="rgba(27,71,42,0.38)" stroke-width="0.9" />
									<circle cx="10" cy="10" r="5.5" stroke="rgba(27,71,42,0.22)" stroke-width="0.7" />
									<path d="M6.6 10.4L9.1 12.9L13.8 8" stroke="rgba(27,71,42,0.8)" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round" />
								</svg>
								<text class="trustBadgeText">{{ traceDetail.batch.statusBadge.text }}</text>
							</view>
						</view>

						<view class="infoPanelBody">
							<text class="infoPanelName">{{ traceDetail.product.name }}</text>

							<view v-if="traceDetail.product.spec" class="infoPanelSpec">
								<view class="specDot" />
								<text class="specText">{{ traceDetail.product.spec }}</text>
							</view>

							<view v-if="traceDetail.product?.intro" class="infoPanelIntro">
								<text>{{ traceDetail.product.intro }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<scroll-view class="content" scroll-y>
			<!-- 溯源结论卡：先给结论，再给证据 -->
			<view v-if="traceDetail.batch?.exists && traceDetail.traceConclusionCard" class="card cardLevel1 cardConclusion">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Conclusion</text>
						<text class="sectionTitle">溯源结论</text>
					</view>
				</view>
				<view class="conclusionBody">
					<text class="conclusionLead">{{ traceDetail.traceConclusionCard.conclusion }}</text>
					<text class="conclusionDesc">{{ traceDetail.traceConclusionCard.desc }}</text>
				</view>
			</view>

			<!-- 农场信息（合并为单卡：图片+名称+地区+介绍连续表达） -->
			<view v-if="traceDetail.farm?.name" class="card cardLevel2 cardFarm">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Farm</text>
						<text class="sectionTitle">农场信息</text>
					</view>
				</view>

				<!-- 农场主体：左图右文结构，融入主体内容 -->
				<view class="farmBody">
					<view class="farmImageWrap">
						<image class="farmImage" :src="traceDetail.farm.image" mode="aspectFill" />
					</view>
					<view class="farmMeta">
						<text class="farmName">{{ traceDetail.farm.name }}</text>
						<view v-if="traceDetail.farm.location" class="farmLocation">
							<svg class="locationIcon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M10 2C7.24 2 5 4.24 5 7c0 4 5 11 5 11s5-7 5-11c0-2.76-2.24-5-5-5zm0 6.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="rgba(39,113,76,0.6)"/>
							</svg>
							<text class="locationText">{{ traceDetail.farm.location }}</text>
						</view>
					</view>
				</view>
				<view v-if="traceDetail.farm?.intro" class="farmIntro">
					<text>{{ traceDetail.farm.intro }}</text>
				</view>
			</view>

			<!-- 农事时间轴：关键种植过程 -->
			<view v-if="traceDetail.batch?.exists && traceDetail.farmTimeline?.length" class="card cardLevel1 cardTimeline">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Process</text>
						<text class="sectionTitle">种植过程记录</text>
					</view>
				</view>

				<view class="timelineList">
					<view
						v-for="(item, index) in traceDetail.farmTimeline"
						:key="`timeline-${index}`"
						:class="{
							'timelineItem': true,
							'is-key': item.stage === 'test',
							'is-current': item.stage === 'pack'
						}"
					>
						<view class="timelineLeft">
							<view class="timelineDot" />
							<view v-if="index !== traceDetail.farmTimeline.length - 1" class="timelineLine" />
						</view>

						<view class="timelineRight">
							<text v-if="item.time" class="timelineTime">{{ item.time }}</text>
							<text class="timelineTitle">{{ item.title }}</text>
							<text class="timelineDesc">{{ item.desc }}</text>
						</view>
					</view>
				</view>

				<view class="timelineFootnote">
					<text>以上信息真实有效，可追溯验证</text>
				</view>
			</view>

			<!-- 种植现场实时画面 -->
			<view v-if="traceDetail.batch?.exists && traceDetail.camera" class="card cardLevel1 cardLive">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Live Scene</text>
						<text class="sectionTitle">种植现场</text>
					</view>
				</view>

				
					<!-- <image
						v-if="traceDetail.camera.coverImage"
						class="liveCover"
						:src="traceDetail.camera.coverImage"
						mode="aspectFill"
					/>
					<view v-else class="livePlaceholder">
						<view class="livePlayIcon">
							<view class="livePlayDot" />
							<view class="livePlayDot dot2" />
							<view class="livePlayDot dot3" />
						</view>
						<text class="livePlaceholderMain">实时画面接入中</text>
						<text class="livePlaceholderSub">请稍候查看现场情况</text>
					</view> -->
					<!-- 视频预览区域 -->
					<view class="video-section">
											<view class="video-container" :class="{'fullscreen-mode': isFullscreen}">
												<image v-if="!isPlaying" src="/static/images/video-placeholder.jpg" mode="aspectFill"
													class="video-placeholder"></image>
										
										<!-- 使用跨平台视频播放组件 -->
										<!-- #ifdef H5 -->
										<view v-if="isPlaying" class="h5-video-wrapper">
											<Jessibuca ref="jessibucaRef" :videoUrl="getH5StreamUrl" :hasAudio="true" @error="onVideoError" />
										</view>
										<!-- #endif -->
												
												<!-- 微信小程序视频播放 -->
												<!-- #ifdef MP-WEIXIN -->
												<video 
													v-if="isPlaying" 
													id="myVideo" 
													class="video-player"
													:src="getAppStreamUrl" 
													:autoplay="true" 
													:controls="true"
													:show-center-play-btn="true"
													:enable-progress-gesture="false"
													:object-fit="'contain'"
													@error="onVideoError"
													@play="onVideoPlay"
													@pause="onVideoPause"
													@ended="onVideoEnded"
													@timeupdate="onTimeUpdate"
													@fullscreenchange="onFullscreenChange"
												></video>
												<!-- #endif -->
												<!-- App端视频播放 -->
												<!-- #ifdef APP-PLUS || APP-HARMONY -->
												<video 
													v-if="isPlaying" 
													id="appVideo" 
													class="video-player"
													:src="getAppStreamUrl" 
													:autoplay="true" 
													:controls="true"
													:show-center-play-btn="true"
													@error="onVideoError"
												></video>
												<!-- #endif -->
										
												<!-- 视频控制层 -->
												<view class="video-controls">
													<view class="control-row top-controls">
														<view class="signal-indicator">
															<image src="/static/icons/signal_icon.png" mode="aspectFit"
																style="width: 16px; height: 16px;"></image>
															<text class="signal-text">信号良好</text>
														</view>
										
														<view class="fullscreen-button" @click="toggleFullscreen">
															<image src="/static/icons/resize_icon.png" mode="aspectFit"
																style="width: 20px; height: 20px;"></image>
														</view>
													</view>
										
													<view class="control-row center-controls">
														<view v-if="!isPlaying" class="play-button" @click="togglePlayState">
															<image src="/static/icons/play_icon.png" mode="aspectFit"
																style="width: 32px; height: 32px;"></image>
														</view>
														<view v-else class="center-button-container" @click="togglePlayState">
															<view class="pause-icon">
																<image src="/static/icons/pause_icon.png" mode="aspectFit"
																	style="width: 24px; height: 24px;"></image>
															</view>
														</view>
													</view>
										
													<view class="control-row bottom-controls">
														<view class="video-time">{{ currentTime }}</view>
													</view>
												</view>
											</view>
										</view>
					<view class="liveStatusPill" :class="cameraStatus.value">
						<view class="liveStatusDot" />
						<text>{{ cameraStatusText }}</text>
					</view>
				

				<view class="liveDesc">
					<text>{{ traceDetail.camera.desc }}</text>
				</view>
			</view>

			<!-- 批次信息（可选：batch 可能不存在） -->
			<view v-if="traceDetail.batch?.exists" class="card cardLevel1 cardBatch">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Batch</text>
						<text class="sectionTitle">批次信息</text>
					</view>
				</view>

				<!-- 批次信息主体：左右两列布局，左列标签固定宽度，右列内容左对齐 -->
				<view class="batchBody">
					<view v-if="traceDetail.batch?.no" class="batchRow">
						<text class="batchRowLabel">批次号</text>
						<text class="batchRowValue">{{ traceDetail.batch.no }}</text>
					</view>
					<view v-if="traceDetail.batch?.harvestTime" class="batchRow">
						<text class="batchRowLabel">生产/采收时间</text>
						<text class="batchRowValue">{{ traceDetail.batch.harvestTime }}</text>
					</view>
					<view v-if="traceDetail.batch?.packTime" class="batchRow">
						<text class="batchRowLabel">包装时间</text>
						<text class="batchRowValue">{{ traceDetail.batch.packTime }}</text>
					</view>
				</view>
			</view>

			<!-- 批次不存在/已下线的说明 -->
			<view v-else-if="traceDetail.batch?.statusBadge" class="card soft cardLevel1 cardBatchState">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Batch</text>
						<text class="sectionTitle">当前批次状态</text>
					</view>
					<view class="statusBadge" :class="traceDetail.batch.statusBadge.type">
						{{ traceDetail.batch.statusBadge.text }}
					</view>
				</view>
				<view class="emptyText">{{ traceDetail.batch?.emptyMessage || '该批次暂不可查询' }}</view>
				<view class="btnRow">
					<button class="primaryBtn" @click="goBackToPurchase">返回购买渠道</button>
				</view>
			</view>

			<!-- 检测报告：横向卡片列表 -->
			<view v-if="traceDetail.batch?.exists" class="card cardLevel2 cardCredential">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Report</text>
						<text class="sectionTitle">检测报告</text>
					</view>
				</view>

				<!-- 横向滑动卡片列表 -->
				<scroll-view
					v-if="reportItems.length"
					class="reportCardList"
					scroll-x
					:show-scrollbar="false"
					enhanced
				>
					<view class="reportCardTrack">
						<view
							v-for="(item, itemIdx) in reportItems"
							:key="`report-card-${itemIdx}`"
							class="reportCard"
							@click="previewDoc('report', getReportGlobalIndex(itemIdx, 0))"
						>
							<!-- 报告缩略图（带页数角标） -->
							<view class="reportCardThumb">
								<image
									v-if="item.images && item.images.length"
									class="reportCardThumbImg"
									:src="item.images[0]"
									mode="aspectFit"
								/>
								<view v-else class="reportCardThumbEmpty">
									<text class="reportCardThumbEmptyText">暂无图片</text>
								</view>
								<view v-if="item.images && item.images.length > 1" class="reportCardPages">
									共{{ item.images.length }}页
								</view>
							</view>

							<!-- 报告信息 -->
							<view class="reportCardMeta">
								<view v-if="item.detectDate" class="reportCardRow">
									<text class="reportCardLabel">检测日期</text>
									<text class="reportCardValue">{{ item.detectDate }}</text>
								</view>
								<view v-if="item.no" class="reportCardRow">
									<text class="reportCardLabel">报告编号</text>
									<text class="reportCardValue reportCardValueNo">{{ item.no }}</text>
								</view>
							</view>

							<!-- 点击提示 -->
							<text class="reportCardHint">点击查看大图</text>
						</view>
					</view>
				</scroll-view>

				<!-- 待补充状态 -->
				<view v-else class="docPlaceholder">
					<text class="docPlaceholderTitle">检测报告待补充</text>
					<text class="docPlaceholderText">
						{{ traceDetail.report?.emptyMessage || '检测报告待补充，请耐心等待。' }}
					</text>
				</view>
			</view>

			<!-- 合格证：信息摘要 + 缩略图一体化布局 -->
			<view v-if="traceDetail.batch?.exists" class="card cardLevel1 cardCredential">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Certificate</text>
						<text class="sectionTitle">合格证</text>
					</view>
				</view>

				<!-- 信息与缩略图一体化区域 -->
				<view class="certSummary">
					<!-- 左侧：信息摘要 -->
					<view class="certSummaryInfo">
						<view v-if="traceDetail.certificate?.issueDate" class="certSummaryRow">
							<text class="certSummaryLabel">开具日期</text>
							<text class="certSummaryValue">{{ traceDetail.certificate.issueDate }}</text>
						</view>
						<view v-if="traceDetail.certificate?.no" class="certSummaryRow">
							<text class="certSummaryLabel">合格证编号</text>
							<text class="certSummaryValue">{{ traceDetail.certificate.no }}</text>
						</view>
					</view>

					<!-- 右侧：缩略图 -->
					<view
						v-if="traceDetail.certificate?.status === 'uploaded' && certificateImages.length"
						class="certThumbContainer"
						@click="previewDoc('certificate', 0)"
					>
						<view class="certThumbWrap">
							<image class="certThumbImage" :src="certificateImages[0]" mode="aspectFit" />
						</view>
						<text class="certPreviewHint">点击查看</text>
					</view>

					<!-- 待补充状态：仅显示提示 -->
					<view v-else class="certPendingHint">
						<text class="certPendingText">
							{{ traceDetail.certificate?.emptyMessage || '合格证待补充，请耐心等待。' }}
						</text>
					</view>
				</view>
			</view>

			<!-- 底部柔和收口渐变 -->
			<view class="footerFade" />
			<!-- 轻量页脚 -->
			<view class="traceFooter">
				<view class="traceFooterHint">如需帮助，联系客服</view>
				<view class="traceFooterPhone" @click="contactCustomer">
					<image class="traceFooterPhoneIcon" src="/static/icons/phone.svg" mode="aspectFit" />
					<text class="traceFooterPhoneNum">13379508760</text>
				</view>
				<view class="traceFooterBrand">佳友厚苑 · 安心之选</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getTraceDetail } from '@/api/base/index.js'
import {
	getDeviceCollectorDetail,
	getChannels,
	playStart,
	pause ,
} from '@/api/device.js'
import Jessibuca from '@/components/common/jessibuca.vue'
// 页面状态选择（H5 演示用）：通过路由参数传入 state 即可切换 mock 场景
// 例如：/pages/trace/detail?state=reportPending
// 加载状态
const loading = ref(false)
// 数据存储
const traceInfo = ref(null)
const routeOptions = ref({})
const mockStateKey = ref('normal')
const isFullscreen = ref(false)
const isPlaying = ref(false)
const livePlayerContext = ref(null) // 小程序视频上下文
const appLivePlayerContext = ref(null) // App端视频上下文
const jessibucaRef = ref(null)

const isMuted = ref(false)
const isRecording = ref(false)
const isVoiceActive = ref(false)
const isGridView = ref(false)
const isZoomMode = ref(false)
const currentTime = ref('14:30:25')
// 响应式数据
const deviceInfo = reactive({
	deviceId: '34020000001110000001',
	name: '设备加载中...',
	status: 'off',
	location: '正在获取位置...',
	lastUpdate: '',
	deviceType: 'weather', // 默认类型，会根据API返回更新
	deviceTypeId: null,
	streamUrl: '',
	channelId: null, // 当前通道ID
	originalStreamUrl: '',
})
const MOCK_TRACE_DETAILS = {
	normal: {
		product: {
			name: '',
			spec: '',			
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: '',
			intro: ''
		},
			batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			harvestTime: '',
			packTime: ''
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			// 每份报告独立 detectDate / no / images
			items: [
				{
					detectDate: '',
					no: '',
					images: ['']
				},
				{
					detectDate: '',
					no: '',
					images: ['']
				},
				{
					detectDate: '',
					no: '',
					images: ['']
				}
			]
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			issueDate: '',
			no: '',
			fileUrl: '',
			images: ['']
		},
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: [
			{
				time: '2026-03-01',
				stage: 'planting',
				title: '开始种植',
				desc: '本批次产品进入种植管理阶段'
			},
			{
				time: '2026-03-12',
				stage: 'care',
				title: '生长期养护',
				desc: '已完成灌溉、营养管理等日常养护'
			},
			{
				time: '2026-03-20',
				stage: 'inspection',
				title: '田间巡检',
				desc: '已完成长势检查与种植环境巡检'
			},
			{
				time: '2026-03-30',
				stage: 'harvest',
				title: '成熟采收',
				desc: '本批次产品进入成熟采收阶段'
			},
			{
				time: '2026-03-31',
				stage: 'test',
				title: '安全检测',
				desc: '已完成安全检测，相关结果可查'
			},
			{
				time: '2026-04-01',
				stage: 'pack',
				title: '包装出库',
				desc: '已完成包装整理，进入销售流通环节'
			}
		],
		camera: {
			liveUrl: '',
			coverImage: '',
			status: 'online',
			desc: '来自农场实景画面，种植环境真实呈现'
		}
	},
	reportPending: {
		product: {
			name: '',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			harvestTime: '',
			packTime: ''
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			emptyMessage: '',
			items: []
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			issueDate: '',
			no: '',
			fileUrl: '',
			images: []
		},
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: []
	},
	certificatePending: {
		product: {
			name: '',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			harvestTime: '',
			packTime: ''
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			items: [
				{
					detectDate: '',
					no: '',
					images: []
				}
			]
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			emptyMessage: ''
		},
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: []
	},
	batchNotFound: {
		product: {
			name:'',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			emptyMessage: ''
		},
		report: null,
		certificate: null,
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: []
	},
	batchOfflined: {
		product: {
			name: '',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			emptyMessage: ''
		},
		report: null,
		certificate: null,
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: []
	}
}
// 加载Jessibuca脚本
	const loadJessibucaScript = () => {
		// #ifdef H5
		const script = document.createElement('script')
		script.src = '/static/js/jessibuca/jessibuca.js'
		script.onload = () => {
			console.log('Jessibuca 脚本加载成功')
		}
		script.onerror = (error) => {
			console.error('Jessibuca 脚本加载失败:', error)
		}
		document.head.appendChild(script)
		// #endif
	}
// 获取H5环境使用的流地址
	const getH5StreamUrl = computed(() => {
		// 确保使用安全的 WSS 协议
		let url = deviceInfo.originalStreamUrl
		if (url && url.startsWith('ws://')) {
			console.warn('检测到不安全的 ws:// 协议，自动转换为 wss://')
			url = url.replace('ws://', 'wss://')
		}
		return url
	})
function resolveStateKey(opts) {
	const raw = (opts?.state || opts?.batchState || opts?.scene || '').toString().trim()
	if (!raw) return 'normal'
	const allowed = ['normal', 'reportPending', 'certificatePending', 'batchNotFound', 'batchOfflined']
	return allowed.includes(raw) ? raw : 'normal'
}

onLoad((opts) => {
	// 拿到浏览器路径参数
	const fullPath = window.location.pathname
	const batchId = fullPath.split('/').filter(Boolean).pop()
	
	// 优先使用路由参数中的 id，其次使用 URL 路径中的 id
	const finalId = batchId || 4
	loadData(finalId)
	queryChannels()
	routeOptions.value = opts || {}
	mockStateKey.value = resolveStateKey(opts || {})
	startTimeUpdate()
	
	// #ifdef MP-WEIXIN
	setTimeout(() => {
		livePlayerContext.value = uni.createVideoContext('myVideo')
		console.log('微信小程序视频上下文已创建')
	}, 500)
	// #endif
	
	// #ifdef APP-PLUS || APP-HARMONY
	setTimeout(() => {
		appLivePlayerContext.value = uni.createVideoContext('appVideo')
		console.log('App视频上下文已创建')
	}, 500)
	// #endif
	
	// #ifdef H5
	loadJessibucaScript()
	// #endif
})
// 根据设备id获取通道列表
	const queryChannels = () => {
		getChannels(deviceInfo.deviceId)
			.then(response => {
				console.log('获取通道列表:', response)
				const res = response.data
				if (res.code === 0 && res.data.total > 0) {
					const channels = res.data.list
					deviceInfo.channelId = channels[0].deviceId
					deviceInfo.status = channels[0].status
					playStart(deviceInfo.deviceId, deviceInfo.channelId).then(res => {
						if (res.data.code !== 0) {
							console.error('播放开始失败:', res.message)
							uni.showToast({
								title: '播放失败: ' + res.message,
								icon: 'none'
							})
							return
						}
						console.log('播放开始:', res)
						
						// #ifdef H5
						let streamUrl = res.data.data.wss_flv
						
						if (streamUrl) {
							const urlObj = new URL(streamUrl)
							// 替换 hostname
							urlObj.hostname = 'nxy.gbdfarm.com'
							// 替换端口
							urlObj.port = '9000'
							
							deviceInfo.originalStreamUrl = urlObj.toString()
							console.log("queryChannels - deviceInfo.originalStreamUrl", deviceInfo.originalStreamUrl)
						} else {
							console.warn('未获取到 wss_flv 流地址')
						}
						// #endif
						
						// #ifdef MP-WEIXIN
						deviceInfo.originalStreamUrl = res.data.data.hls || deviceInfo.originalStreamUrl
						// #endif
						
						// #ifdef APP-PLUS || APP-HARMONY
						deviceInfo.originalStreamUrl = res.data.data.fmp4 || deviceInfo.originalStreamUrl
						// #endif
					}).catch(err => {
						console.error('播放开始失败:', err)
					})
				} else {
					uni.showToast({
						title: '获取通道列表失败: ' + res.data.message,
						icon: 'none'
					})
					return
				}
			})
			.catch(err => {
				console.error('获取通道列表错误:', err)
			})
	}
const loadData = async (batchId) => {
  loading.value = true
  
  try {
    // 调用接口
    const res = await getTraceDetail(batchId)
    traceInfo.value = res.data.data
    console.log('接口返回数据：', res)
  } catch (error) {
    console.error('加载失败', error)
    // 错误提示已在拦截器中自动处理
  } finally {
    // 无论成功失败都关闭 loading
    loading.value = false
  }
}
// 视频播放错误处理
	const onVideoError = (e) => {
		console.error('视频播放错误:', e)
		
		let errorMsg = '视频加载失败'
		
		// 微信小程序video组件错误码
		if (e && e.detail) {
			const errCode = e.detail.errCode
			switch(errCode) {
				case 10001:
					errorMsg = '网络错误,请检查网络连接'
					break
				case 10002:
					errorMsg = '视频格式不支持'
					break
				case 10003:
					errorMsg = '视频解码失败'
					break
				case 10004:
					errorMsg = '视频地址无效'
					break
				default:
					errorMsg = `播放失败(错误码:${errCode})`
			}
			console.error('视频错误详情:', e.detail)
		}
		
		uni.showToast({
			title: errorMsg,
			icon: 'none',
			duration: 3000
		})

		isPlaying.value = false

		// #ifdef H5
		setTimeout(() => {
			if (isPlaying.value && jessibucaRef.value) {
				console.log('尝试重新加载视频流')
				if (deviceInfo.originalStreamUrl !== config.streamServer.wsFlvServer) {
					deviceInfo.streamUrl = config.streamServer.wsFlvServer
				}
			}
		}, 3000)
		// #endif
	}

	// 更新时间
	const startTimeUpdate = () => {
		setInterval(() => {
			const now = new Date()
			const hours = String(now.getHours()).padStart(2, '0')
			const minutes = String(now.getMinutes()).padStart(2, '0')
			const seconds = String(now.getSeconds()).padStart(2, '0')
			currentTime.value = `${hours}:${minutes}:${seconds}`
		}, 1000)
	}
// 播放/暂停切换
	const togglePlayState = () => {
		if (!isPlaying.value) {
			isPlaying.value = true
			
			// #ifdef MP-WEIXIN
			setTimeout(() => {
				if (livePlayerContext.value) {
					livePlayerContext.value.play()
					console.log('微信小程序开始播放')
				}
			}, 300)
			// #endif
		
			// #ifdef APP-PLUS || APP-HARMONY
			setTimeout(() => {
				if (appLivePlayerContext.value) {
					appLivePlayerContext.value.play()
					console.log('App开始播放')
				}
			}, 300)
			// #endif

			// #ifdef H5
			setTimeout(() => {
				playStart(deviceInfo.deviceId, deviceInfo.channelId).then(res => {
					if (res.data.code !== 0) {
						console.error('播放开始失败:', res.message)
						uni.showToast({
							title: '播放失败: ' + res.message,
							icon: 'none'
						})
						return
					}
					console.log('播放开始:', res)
					
					// 使用 wss_flv 并替换域名和端口
					let streamUrl = res.data.data.wss_flv
					if (streamUrl) {
						const urlObj = new URL(streamUrl)
						urlObj.hostname = 'nxy.gbdfarm.com'
						urlObj.port = '9000'
						deviceInfo.originalStreamUrl = urlObj.toString()
						console.log("togglePlayState - deviceInfo.originalStreamUrl", deviceInfo.originalStreamUrl)
					}
				}).catch(err => {
					console.error('播放开始失败:', err)
				})
				uni.vibrateShort()
			}, 300)
			// #endif
		} else {
			// #ifdef H5
			if (jessibucaRef.value) {
				jessibucaRef.value.pause()
			}
			// #endif

			// #ifdef MP-WEIXIN
			if (livePlayerContext.value) {
				livePlayerContext.value.pause()
			}
			// #endif

			// #ifdef APP-PLUS || APP-HARMONY
			if (appLivePlayerContext.value) {
				appLivePlayerContext.value.pause()
			}
			// #endif

			isPlaying.value = false

			uni.showToast({
				title: '视频已暂停',
				icon: 'none',
				duration: 1500
			})
		}
	}

	// 静音切换
	const toggleMute = () => {
		isMuted.value = !isMuted.value

		// #ifdef H5
		if (jessibucaRef.value) {
			if (isMuted.value) {
				jessibucaRef.value.mute()
			} else {
				jessibucaRef.value.cancelMute()
			}
		}
		// #endif

		// #ifndef H5
		// App端的静音通过 live-player 的 muted 属性控制，会自动响应
		uni.showToast({
			title: isMuted.value ? '已静音' : '已取消静音',
			icon: 'none'
		})
		// #endif
	}

	// 全屏切换
	const toggleFullscreen = () => {
		if (!isPlaying.value) {
			togglePlayState()
			setTimeout(() => {
				setFullscreen(true)
			}, 500)
		} else {
			setFullscreen(!isFullscreen.value)
		}
	}

	// 设置全屏状态
	const setFullscreen = (fullscreen) => {
		isFullscreen.value = fullscreen

		// #ifdef H5
		if (isFullscreen.value) {
			const ua = navigator.userAgent.toLowerCase()
			const isMobile = /mobile|android|iphone|ipad/.test(ua)

			if (isMobile && jessibucaRef.value) {
				jessibucaRef.value.fullscreenSwich()
			} else {
				setTimeout(() => {
					if (jessibucaRef.value) {
						jessibucaRef.value.resize()
					}
				}, 300)
			}

			if (window.screen && window.screen.orientation && window.screen.orientation.lock) {
				window.screen.orientation.lock('landscape').catch(err => {
					console.error('无法锁定屏幕方向:', err)
				})
			}
		} else {
			if (jessibucaRef.value) {
				if (jessibucaRef.value.isFullscreen()) {
					jessibucaRef.value.fullscreenSwich()
				}

				setTimeout(() => {
					if (jessibucaRef.value) {
						jessibucaRef.value.resize()
					}
				}, 300)
			}

			if (window.screen && window.screen.orientation && window.screen.orientation.unlock) {
				window.screen.orientation.unlock()
			}
		}
		// #endif

		// #ifdef MP-WEIXIN
		if (livePlayerContext.value) {
			if (isFullscreen.value) {
				livePlayerContext.value.requestFullScreen({
					direction: 90
				})
			} else {
				livePlayerContext.value.exitFullScreen()
			}
		}
		// #endif

		// #ifdef APP-PLUS || APP-HARMONY
		if (appLivePlayerContext.value) {
			if (isFullscreen.value) {
				appLivePlayerContext.value.requestFullScreen({
					direction: 90
				})
			} else {
				appLivePlayerContext.value.exitFullScreen()
			}
		}
		// #endif
	}

	// 截图
	const takeScreenshot = () => {
		// #ifdef H5
		if (jessibucaRef.value && isPlaying.value) {
			jessibucaRef.value.screenshot()
			uni.showToast({
				title: '截图已保存',
				icon: 'success'
			})
		} else {
			uni.showToast({
				title: '请先播放视频',
				icon: 'none'
			})
		}
		// #endif

		
		// if (livePlayerContext.value && isPlaying.value) {
		// 	livePlayerContext.value.snapshot({
		// 		success: (res) => {
		// 			console.log('截图成功:', res.tempImagePath)
		// 			uni.saveImageToPhotosAlbum({
		// 				filePath: res.tempImagePath,
		// 				success: () => {
		// 					uni.showToast({
		// 						title: '截图已保存到相册',
		// 						icon: 'success'
		// 					})
		// 				},
		// 				fail: (err) => {
		// 					console.error('保存截图失败:', err)
		// 					uni.showToast({
		// 						title: '保存截图失败',
		// 						icon: 'none'
		// 					})
		// 				}
		// 			})
		// 		},
		// 		fail: (err) => {
		// 			console.error('截图失败:', err)
		// 			uni.showToast({
		// 				title: '截图失败',
		// 				icon: 'none'
		// 			})
		// 		}
		// 	})
		// } else {
		// 	uni.showToast({
		// 		title: '请先播放视频',
		// 		icon: 'none'
		// 	})
		// }
		

		// #ifndef H5
		if (appLivePlayerContext.value && isPlaying.value) {
			appLivePlayerContext.value.snapshot({
				success: (res) => {
					console.log('App截图成功:', res.tempImagePath)
					uni.saveImageToPhotosAlbum({
						filePath: res.tempImagePath,
						success: () => {
							uni.showToast({
								title: '截图已保存到相册',
								icon: 'success'
							})
						},
						fail: (err) => {
							console.error('App保存截图失败:', err)
							uni.showToast({
								title: '保存截图失败',
								icon: 'none'
							})
						}
					})
				},
				fail: (err) => {
					console.error('App截图失败:', err)
					uni.showToast({
						title: '截图失败',
						icon: 'none'
					})
				}
			})
		} else {
			uni.showToast({
				title: '请先播放视频',
				icon: 'none'
			})
		}
		// #endif
	}

	// 小程序播放器状态变化处理
	const onVideoPlay = () => {
		console.log('视频开始播放')
		isPlaying.value = true
	}

	const onVideoPause = () => {
		console.log('视频暂停')
	}

	const onVideoEnded = () => {
		console.log('视频播放结束')
		isPlaying.value = false
	}

	const onTimeUpdate = (e) => {
		// 更新播放时间
		if (e && e.detail) {
			const currentSeconds = Math.floor(e.detail.currentTime)
			const hours = String(Math.floor(currentSeconds / 3600)).padStart(2, '0')
			const minutes = String(Math.floor((currentSeconds % 3600) / 60)).padStart(2, '0')
			const seconds = String(currentSeconds % 60).padStart(2, '0')
			currentTime.value = `${hours}:${minutes}:${seconds}`
		}
	}

	const onStateChange = (e) => {
		console.log('播放器状态变化:', e.detail)
		const state = e.detail.code
		switch (state) {
			case 2001:
				console.log('已连接服务器')
				break
			case 2002:
				console.log('开始拉流')
				break
			case 2003:
				console.log('网络接收到首个视频帧')
				break
			case 2004:
				console.log('视频播放开始')
				break
			case 2005:
				console.log('视频播放进度')
				break
			case 2006:
				console.log('视频播放结束')
				isPlaying.value = false
				break
			case 2007:
				console.log('视频播放Loading')
				break
			case 2008:
				console.log('解码器启动')
				break
			case 2009:
				console.log('视频分辨率改变')
				break
			case -2301:
				console.error('网络断连，且重新连接亦不能恢复，播放器已停止')
				isPlaying.value = false
				uni.showToast({
					title: '网络断连，请重试',
					icon: 'none'
				})
				break
			case -2302:
				console.error('获取加速拉流地址失败')
				break
			case 2101:
				console.error('当前视频帧解码失败')
				break
			case 2102:
				console.error('当前音频帧解码失败')
				break
			case 2103:
				console.warn('网络断连, 已启动自动重连')
				break
			case 2104:
				console.warn('网络断连, 重连中...')
				break
			case 2105:
				console.log('网络断连, 重连成功')
				break
			case 2106:
				console.error('网络断连, 重连失败')
				break
			case 2107:
				console.error('播放器连接超时')
				break
			case 2108:
				console.error('获取点播文件信息失败')
				break
			default:
				console.log('其他状态:', state)
		}
	}

	// 小程序全屏状态变化
	const onFullscreenChange = (e) => {
		isFullscreen.value = e.detail.fullScreen
		console.log('全屏状态变化:', isFullscreen.value)
	}
// 获取App（安卓/鸿蒙）环境使用的流地址
	const getAppStreamUrl = computed(() => {
		// 优先使用 fmp4 格式(微信小程序和App都支持)
		if (deviceInfo.originalStreamUrl) {
			console.log("当前视频流地址:", deviceInfo.originalStreamUrl)
			return deviceInfo.originalStreamUrl
		}

		// 如果没有流地址,返回空字符串
		console.warn('未获取到视频流地址')
		return ''
	})
const traceDetail = computed(() => {
	// 如果没有真实数据，返回 mock 数据
	if (!traceInfo.value) {
		return MOCK_TRACE_DETAILS[mockStateKey.value] || MOCK_TRACE_DETAILS.normal
	}

	const data = traceInfo.value
	
	// 解析 certFiles 和 reportFiles（JSON 字符串转数组）
	let certFiles = []
	let reportFiles = []
	
	try {
		if (data.certificate?.certFiles) {
			certFiles = JSON.parse(data.certificate.certFiles)
		}
	} catch (e) {
		console.error('解析 certFiles 失败', e)
	}
	
	// 构建返回数据结构
	return {
		product: {
			name: data.productName || '',
			spec: data.productSpec || '',
			image: data.productImage || '',
			intro: data.productDesc || ''
		},
		farm: {
			name: data.farmName || '',
			location: data.farmRegion || '',
			image: data.farmImage || '',
			intro: data.farmIntro || ''
		},
		batch: {
			exists: data.status === '2', // status 为 '2' 表示批次正常，已上线
			statusBadge: data.status === '2' 
				? { text: '检验合格', type: 'ok' }
				: { text: '批次不存在', type: 'muted' },
			no: data.batchNo || '',
			harvestTime: data.produceDate || '',
			packTime: data.packageDate || '',
			emptyMessage: data.status !== '2' ? '未找到对应溯源批次信息。请确认二维码是否为佳友厚苑正品批次。' : ''
		},
		report: {
			status: data.reports && data.reports.length > 0 ? 'uploaded' : 'pending',
			statusBadge: data.reports && data.reports.length > 0 
				? { text: '已上传', type: 'ok' }
				: { text: '待补充', type: 'wait' },
			emptyMessage: '检测报告待补充，上传完成后可查看大图。',
			items: (data.reports || []).map(report => {
				let images = []
				
				// 处理 reportFiles：可能是字符串 URL、JSON 字符串数组、或已解析的数组
				if (report.reportFiles) {
					if (typeof report.reportFiles === 'string') {
						// 尝试解析 JSON 字符串
						try {
							const parsed = JSON.parse(report.reportFiles)
							// 如果解析成功且是数组，提取 url 字段
							if (Array.isArray(parsed)) {
								images = parsed.map(item => 
									typeof item === 'string' ? item : (item.url || item)
								).filter(Boolean)
							} else {
								// 解析后不是数组，可能是单个对象
								images = [parsed.url || parsed].filter(Boolean)
							}
						} catch (e) {
							// 解析失败，当作普通 URL 字符串处理
							images = [report.reportFiles]
						}
					} else if (Array.isArray(report.reportFiles)) {
						// 已经是数组，提取 url 字段
						images = report.reportFiles.map(item => 
							typeof item === 'string' ? item : (item.url || item)
						).filter(Boolean)
					} else if (typeof report.reportFiles === 'object') {
						// 单个对象
						images = [report.reportFiles.url || report.reportFiles].filter(Boolean)
					}
				}
				
				return {
					detectDate: report.reportDate || '',
					no: report.reportNo || '',
					images: images
				}
			})
		},
		certificate: {
			status: data.certificate && certFiles.length > 0 ? 'uploaded' : 'pending',
			statusBadge: data.certificate && certFiles.length > 0
				? { text: '已上传', type: 'ok' }
				: { text: '待补充', type: 'wait' },
			issueDate: data.certificate?.certIssueDate || '',
			no: data.certificate?.certNo || '',
			fileUrl: certFiles.length > 0 ? certFiles[0].url : '',
			images: certFiles.map(f => f.url),
			emptyMessage: '合格证待补充，上传完成后可查看大图。'
		},
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		// 时间轴逻辑：演示态使用 mock + 真实态使用真实数据
		farmTimeline: (() => {
			// 判断是否有真实时间轴数据
			const hasRealTimeline = Array.isArray(data.farmTimeline) && data.farmTimeline.length > 0

			let timeline = []

			if (!hasRealTimeline) {
				// 演示态：使用完整 mock 时间轴（用于页面展示验证）
				timeline = [
					{ time: '2026-03-01', stage: 'planting', title: '开始种植', desc: '本批次产品进入种植管理阶段' },
					{ time: '2026-03-12', stage: 'care', title: '生长期养护', desc: '已完成灌溉、营养管理等日常养护' },
					{ time: '2026-03-20', stage: 'inspection', title: '田间巡检', desc: '已完成长势检查与种植环境巡检' },
					{ time: data.produceDate || '', stage: 'harvest', title: '成熟采收', desc: '本批次产品进入成熟采收阶段' },
					{ time: (data.reports?.[0]?.reportDate) || '', stage: 'test', title: '安全检测', desc: '已完成安全检测，相关结果可查' },
					{ time: data.packageDate || '', stage: 'pack', title: '包装出库', desc: '已完成包装整理，进入销售流通环节' }
				]
			} else {
				// 真实态：使用真实数据 + 补充系统节点
				timeline = [...data.farmTimeline]
				const stageSet = new Set(timeline.map(n => n.stage))

				// 成熟采收
				if (data.produceDate && !stageSet.has('harvest')) {
					timeline.push({
						time: data.produceDate,
						stage: 'harvest',
						title: '成熟采收',
						desc: '本批次产品进入成熟采收阶段'
					})
				}

				// 安全检测
				if (data.reports && data.reports.length > 0 && !stageSet.has('test')) {
					const validDates = data.reports
						.map(r => r.reportDate)
						.filter(d => d && /^\d{4}-\d{2}-\d{2}/.test(d))
						.sort()
					if (validDates.length > 0) {
						timeline.push({
							time: validDates[0],
							stage: 'test',
							title: '安全检测',
							desc: '已完成安全检测，相关结果可查'
						})
					}
				}

				// 包装出库
				if (data.packageDate && !stageSet.has('pack')) {
					timeline.push({
						time: data.packageDate,
						stage: 'pack',
						title: '包装出库',
						desc: '已完成包装整理，进入销售流通环节'
					})
				}
			}

			// stage 顺序权重
			const stageOrder = {
				planting: 1,
				care: 2,
				inspection: 3,
				harvest: 4,
				test: 5,
				pack: 6
			}

			// 按业务阶段排序，同 stage 内再按时间
			timeline.sort((a, b) => {
				const orderA = stageOrder[a.stage] || 99
				const orderB = stageOrder[b.stage] || 99

				// 先按 stage 排序
				if (orderA !== orderB) {
					return orderA - orderB
				}

				// 同 stage 再按时间
				if (!a.time) return -1
				if (!b.time) return 1

				return a.time > b.time ? 1 : -1
			})

			return timeline.slice(0, 6)
		})(),
		camera: {
			liveUrl: data.camera?.liveUrl || '',
			coverImage: data.camera?.coverImage || '',
			status: data.camera?.status || 'online',
			desc: data.camera?.liveUrl
				? '当前为种植现场实时画面，现场环境与种植状态可见'
				: '来自农场实景画面，种植环境真实呈现'
		}
	}
})

// 种植现场状态：三态逻辑
const cameraStatus = computed(() => {
	const camera = deviceInfo?.status
	if (!camera) return 'off'

	// const hasLiveUrl = !!camera.liveUrl

	// 有 liveUrl 但无封面图 → loading（信号接入中）
	// 有 liveUrl 且有封面图 → online（可播放）
	// 无 liveUrl → offline
	if (camera && camera == 'off') {
		return 'loading'
	}
	if (camera && camera == 'ON') {
		return 'online'
	}
	return 'offline'
})

const cameraStatusText = computed(() => {
	const map = {
		loading: '连接中',
		online: '实时在线',
		offline: '暂未连接'
	}
	return map[cameraStatus.value] || '暂未连接'
})

const reportImages = computed(() => {
	const items = traceDetail.value?.report?.items
	if (Array.isArray(items)) {
		return items.flatMap(item => Array.isArray(item.images) ? item.images : [])
	}
	return []
})

const reportItems = computed(() => {
	return traceDetail.value?.report?.items || []
})

// 计算某份报告内某张图在全局 reportImages 扁平数组中的索引
function getReportGlobalIndex(itemIndex, imgIndex) {
	const items = reportItems.value
	let offset = 0
	for (let i = 0; i < itemIndex; i++) {
		const imgArr = items[i]?.images
		offset += Array.isArray(imgArr) ? imgArr.length : 0
	}
	return offset + imgIndex
}

const certificateImages = computed(() => {
	const c = traceDetail.value?.certificate
	if (!c) return []
	if (Array.isArray(c.images) && c.images.length) return c.images
	return c.fileUrl ? [c.fileUrl] : []
})


function contactCustomer() {
	uni.makePhoneCall({
		phoneNumber: '13379508760'
	})
}

function goBackToPurchase() {
	uni.showModal({
		title: '返回购买渠道',
		content: 'mock 模式：后续可跳转到直播间/小店页面。',
		showCancel: true,
		confirmText: '确认返回'
	})
}


function previewDoc(kind, index) {
	const urls = kind === 'report' ? reportImages.value : certificateImages.value
	if (!urls.length) {
		uni.showToast({ title: '该文件暂未上传', icon: 'none' })
		return
	}
	uni.previewImage({
		urls,
		current: urls[index] || urls[0]
	})
}
</script>

<style scoped>
.page {
	position: relative;
	min-height: 100vh;
	--bg-cream-1: #f8f2e8;
	--bg-cream-2: #f3ebdd;
	--bg-cream-3: #ece1ce;
	--forest-900: #143a2b;
	--forest-800: #1f513b;
	--forest-700: #2d6849;
	--sage-500: #708f7d;
	--gold-320: #ccb086;
	--gold-260: #dcc4a0;
	--text-900: #233126;
	--text-700: #3c4d41;
	--text-500: #6b776d;
	background: linear-gradient(172deg,
		#FAF6EF 0%,
		#F4EEE3 38%,
		#EDF0EC 68%,
		#E8EFE9 100%
	);
	overflow: hidden;
}

/* 背景氛围层：三层光感（前景/中景/背景）+ grain */
.pageDecor {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.pageGlow {
	position: absolute;
	border-radius: 50%;
	filter: blur(14rpx);
}

/* 背景层：左上森林绿微光 */
.glowA {
	width: 780rpx;
	height: 780rpx;
	top: -280rpx;
	left: -300rpx;
	background: radial-gradient(circle, rgba(26, 84, 58, 0.18) 0%, rgba(20, 72, 50, 0) 70%);
	opacity: 0.85;
}

/* 中景层：右下金色暖光 */
.glowB {
	width: 720rpx;
	height: 720rpx;
	right: -280rpx;
	top: 480rpx;
	background: radial-gradient(circle, rgba(200, 170, 120, 0.2) 0%, rgba(200, 170, 120, 0) 72%);
	opacity: 0.9;
}

/* 前景层：顶部柔和高光，塑造空间感 */
.glowC {
	width: 600rpx;
	height: 360rpx;
	top: -60rpx;
	left: 50%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 252, 246, 0.38), transparent 70%);
	filter: blur(20rpx);
	opacity: 0.7;
}

/* 纹理叠加层 */
.pageGrain {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	background:
		radial-gradient(900rpx 380rpx at 48% -4%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
		radial-gradient(640rpx 400rpx at 104% 48%, rgba(68, 112, 86, 0.09), rgba(68, 112, 86, 0)),
		radial-gradient(700rpx 320rpx at -4% 76%, rgba(210, 180, 130, 0.12), rgba(210, 180, 130, 0)),
		linear-gradient(180deg, rgba(248, 244, 236, 0.16) 0%, rgba(228, 242, 232, 0.08) 100%);
}

.safeTop {
	height: calc(env(safe-area-inset-top));
	position: relative;
	z-index: 1;
}

/* 轻品牌页头：透明底，不叠在 Hero 上产生「白雾」；层级低于首屏卡 */
.brandPageHeader {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 72rpx;
	padding: 0 40rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid rgba(39, 75, 57, 0.05);
	background: transparent;
}

.brandPageHeaderInner {
	display: flex;
	align-items: center;
	gap: 10rpx;
	width: 100%;
}

.brandPageHeaderName {
	font-size: 22rpx;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.1em;
	color: rgba(27, 41, 33, 0.65);
}

.brandPageHeaderDot {
	flex-shrink: 0;
	width: 4rpx;
	height: 4rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.4);
}

.brandPageHeaderLabel {
	font-size: 20rpx;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.06em;
	color: rgba(112, 143, 125, 0.7);
}

.hero,
.content {
	position: relative;
	z-index: 1;
}

.hero {
	padding: 0 24rpx;
}

/* 完整首屏大卡：与品牌页头分离，避免负 margin 上提后被页头遮盖 */
.heroCard {
	border-radius: 42rpx;
	overflow: hidden;
	margin-top: 20rpx;
	position: relative;
	z-index: 4;
	box-shadow:
		0 48rpx 120rpx rgba(10, 36, 24, 0.2),
		0 16rpx 48rpx rgba(10, 36, 24, 0.1),
		0 2rpx 0 rgba(255, 255, 255, 0.6) inset;
	backdrop-filter: blur(4px);
}

/* Hero 视觉区：多层次光感空间，顶部高光 + 景深 + 底部暗化 */
.heroBg {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(20, 74, 52, 0.72), rgba(205, 177, 129, 0.3) 70%, rgba(243, 232, 214, 0.36));
}

/* 前景层光晕：右下淡金色微光（提升质感） */
.heroBg::before {
	content: '';
	position: absolute;
	right: -100rpx;
	bottom: -72rpx;
	width: 520rpx;
	height: 280rpx;
	border-radius: 50%;
	background: radial-gradient(ellipse at 42% 38%, rgba(252, 244, 228, 0.18), transparent 68%);
	pointer-events: none;
	z-index: 2;
}

.heroImage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}

.heroBrandAnchor {
	position: absolute;
	right: -48rpx;
	bottom: -14rpx;
	z-index: 2;
	pointer-events: none;
}

.heroBrandAnchorText {
	font-size: 164rpx;
	font-weight: 760;
	letter-spacing: 0.1em;
	line-height: 1;
	color: rgba(248, 241, 227, 0.045);
	transform: rotate(-8deg);
}

/* Hero 遮罩层：提亮后仍保留轻微底部过渡，避免压住真实商品图 */
.heroMask {
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		radial-gradient(ellipse 180% 60% at 50% 0%, rgba(255, 252, 248, 0.26), transparent 68%),
		radial-gradient(480rpx 240rpx at 90% 8%, rgba(252, 248, 240, 0.2), transparent 62%),
		radial-gradient(700rpx 360rpx at 8% 65%, rgba(6, 24, 16, 0.12), transparent 58%),
		radial-gradient(560rpx 300rpx at 88% 80%, rgba(205, 177, 129, 0.06), transparent 62%),
		linear-gradient(180deg,
			rgba(8, 28, 18, 0) 0%,
			rgba(8, 28, 18, 0) 62%,
			rgba(10, 36, 24, 0.05) 80%,
			rgba(8, 26, 18, 0.1) 92%,
			rgba(248, 244, 238, 0.12) 100%
		);
}

/* 商品信息面板：玻璃浮层效果，负margin上浮 + backdrop-filter */
.heroInfoPanel {
	background: rgba(252, 248, 242, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	position: relative;
}

/* 与 Hero 底部自然过渡 */
.heroInfoPanel::before {
	content: '';
	position: absolute;
	top: -56rpx;
	left: 0;
	right: 0;
	height: 56rpx;
	background: linear-gradient(180deg,
		rgba(252, 248, 242, 0) 0%,
		rgba(252, 248, 242, 0.88) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.infoPanelInner {
	position: relative;
	z-index: 2;
	padding: 32rpx 30rpx 30rpx;
}

/* 与下方农场/批次等卡片共用 .sectionHeader / .sectionHeaderLeft 样式 */

.infoPanelBody {
	padding-top: 0;
}

.infoPanelName {
	display: block;
	font-size: 30rpx;
	font-weight: 680;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(27, 41, 33, 0.92);
}

.infoPanelSpec {
	display: inline-flex;
	align-items: center;
	gap: 10rpx;
	margin-top: 14rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	background: rgba(39, 113, 76, 0.06);
	border: 1rpx solid rgba(39, 113, 76, 0.08);
}

.specDot {
	width: 6rpx;
	height: 6rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.5);
}

.specText {
	font-size: 20rpx;
	font-weight: 500;
	color: rgba(54, 66, 57, 0.85);
}

.infoPanelIntro {
	margin-top: 16rpx;
	padding-top: 16rpx;
	border-top: 1rpx solid rgba(39, 75, 57, 0.06);
	font-size: 23rpx;
	line-height: 1.8;
	color: rgba(54, 66, 57, 0.75);
}

.content {
	padding: 20rpx 0 40rpx;
}

/* 基础卡片：半透明玻璃质感 */
.card {
	margin: 0 24rpx 22rpx;
	padding: 30rpx 28rpx;
	border-radius: 36rpx;
	background: rgba(252, 250, 244, 0.76);
	box-shadow:
		0 16rpx 40rpx rgba(38, 41, 32, 0.07),
		0 1rpx 0 rgba(255, 255, 255, 0.5) inset;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.card.soft {
	background: rgba(252, 248, 244, 0.6);
}

/* Hero 之后第一张卡：适度上浮 */
.cardHeroFirst {
	margin-top: -28rpx;
	position: relative;
	z-index: 3;
}

/* 层级 0：与 Hero 同级，主卡（商品面板） */
.cardLevel0 {
	box-shadow:
		0 48rpx 120rpx rgba(10, 36, 24, 0.16),
		0 16rpx 48rpx rgba(10, 36, 24, 0.08),
		0 1rpx 0 rgba(255, 255, 255, 0.6) inset;
}

/* 层级 1：次要信息卡，阴影中等 */
.cardLevel1 {
	box-shadow:
		0 20rpx 50rpx rgba(30, 34, 24, 0.09),
		0 8rpx 24rpx rgba(30, 34, 24, 0.05),
		0 1rpx 0 rgba(255, 255, 255, 0.55) inset;
}

/* 层级 2：次次要信息卡，阴影更轻 */
.cardLevel2 {
	box-shadow:
		0 14rpx 36rpx rgba(36, 38, 28, 0.065),
		0 1rpx 0 rgba(255, 255, 255, 0.5) inset;
}

/* 层级 3：底部辅助信息卡，最轻 */
.cardLevel3 {
	box-shadow:
		0 8rpx 22rpx rgba(42, 44, 30, 0.04),
		0 1rpx 0 rgba(255, 255, 255, 0.44) inset;
}

.cardFarm {
	background: rgba(250, 248, 242, 0.82);
}

.cardBatch {
	background: rgba(251, 248, 242, 0.8);
}

.cardCredential {
	background: rgba(252, 248, 240, 0.84);
}

.cardBatchState {
	background: rgba(252, 248, 244, 0.74);
}

/* 检测结论卡：结论型卡片，比普通资料卡更有结论感 */
.cardConclusion {
	background: rgba(252, 250, 244, 0.82);
}

.conclusionBody {
	padding-top: 6rpx;
}

.conclusionLead {
	display: block;
	font-size: 32rpx;
	font-weight: 680;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: rgba(24, 38, 30, 0.96);
	margin-bottom: 14rpx;
}

.conclusionDesc {
	display: block;
	font-size: 20rpx;
	font-weight: 400;
	line-height: 1.9;
	color: rgba(84, 106, 93, 0.5);
}

/* 农事时间轴：关键种植过程 */
.cardTimeline {
	background: rgba(252, 250, 244, 0.82);
}

.timelineList {
	padding-top: 4rpx;
}

.timelineItem {
	display: flex;
	padding-bottom: 24rpx;
}

.timelineItem:last-child {
	padding-bottom: 0;
}

.timelineLeft {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 40rpx;
	flex-shrink: 0;
}

.timelineDot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.5);
	flex-shrink: 0;
}

.timelineLine {
	width: 1rpx;
	flex: 1;
	background: rgba(39, 113, 76, 0.2);
	margin-top: 8rpx;
}

.timelineRight {
	flex: 1;
	padding-left: 24rpx;
}

.timelineTime {
	display: block;
	font-size: 19rpx;
	font-weight: 400;
	color: rgba(84, 106, 93, 0.5);
	margin-bottom: 6rpx;
	letter-spacing: 0.02em;
}

.timelineTitle {
	display: block;
	font-size: 27rpx;
	font-weight: 600;
	color: rgba(27, 41, 33, 0.88);
	margin-bottom: 6rpx;
	line-height: 1.3;
}

.timelineDesc {
	display: block;
	font-size: 21rpx;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(84, 106, 93, 0.75);
}

/* 关键节点（安全检测）：轻强调 */
.timelineItem.is-key .timelineDot {
	background: rgba(39, 113, 76, 0.7);
}

.timelineItem.is-key .timelineTitle {
	font-weight: 600;
	color: rgba(27, 41, 33, 0.9);
}

/* 当前节点（包装出库）：主高亮 */
.timelineItem.is-current .timelineDot {
	background: #2f7d55;
	box-shadow: 0 0 0 6rpx rgba(47, 125, 85, 0.12);
}

.timelineItem.is-current .timelineTitle {
	font-weight: 700;
	color: rgba(20, 60, 40, 0.95);
}

/* 底部可信来源说明 */
.timelineFootnote {
	margin-top: 20rpx;
	font-size: 20rpx;
	color: rgba(84, 106, 93, 0.45);
	line-height: 1.6;
}

/* 种植现场实时画面模块 */
.cardLive {
	background: rgba(252, 250, 244, 0.82);
}

.liveMediaWrap {
	position: relative;
	width: 100%;
	height: 380rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background: linear-gradient(
		160deg,
		rgba(39, 113, 76, 0.04) 0%,
		rgba(39, 113, 76, 0.015) 50%,
		rgba(39, 113, 76, 0.05) 100%
	);
	border: 1rpx solid rgba(39, 75, 57, 0.08);
	box-shadow: inset 0 2rpx 12rpx rgba(39, 113, 76, 0.04);
}

.liveCover {
	width: 100%;
	height: 100%;
}

.livePlaceholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: transparent;
}

.livePlayIcon {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 20rpx;
}

.livePlayDot {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.35);
	animation: livePulse 1.4s ease-in-out infinite;
}

.livePlayDot.dot2 {
	animation-delay: 0.2s;
}

.livePlayDot.dot3 {
	animation-delay: 0.4s;
}

@keyframes livePulse {
	0%, 100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

.livePlaceholderMain {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(39, 113, 76, 0.5);
	margin-bottom: 10rpx;
}

.livePlaceholderSub {
	font-size: 20rpx;
	color: rgba(84, 106, 93, 0.35);
}

.liveStatusPill {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 18rpx;
	border-radius: 30rpx;
	font-size: 20rpx;
	font-weight: 600;
}

.liveStatusDot {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	flex-shrink: 0;
}

.liveStatusPill.online {
	background: rgba(47, 125, 85, 0.1);
	color: #2f7d55;
}

.liveStatusPill.online .liveStatusDot {
	background: #2f7d55;
	animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(47, 125, 85, 0.4);
	}
	50% {
		opacity: 0.7;
		box-shadow: 0 0 0 4rpx rgba(47, 125, 85, 0);
	}
}

.liveStatusPill.offline {
	background: rgba(84, 106, 93, 0.08);
	color: rgba(84, 106, 93, 0.55);
}

.liveStatusPill.offline .liveStatusDot {
	background: rgba(84, 106, 93, 0.4);
}

.liveDesc {
	margin-top: 16rpx;
	font-size: 20rpx;
	color: rgba(84, 106, 93, 0.5);
	line-height: 1.6;
}

/* ================================================
   微动效：让页面"活起来"
   ================================================ */

/* Hero 进入：上浮 + 淡入 */
@keyframes heroEnter {
	0% {
		opacity: 0;
		transform: translateY(28rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.heroCard {
	animation: heroEnter 0.6s cubic-bezier(0.22, 0.78, 0.35, 1) both;
}

/* 卡片依次入场：延迟递增，制造节奏感 */
@keyframes cardEnter {
	0% {
		opacity: 0;
		transform: translateY(20rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 商品面板：稍晚于 Hero */
.heroInfoPanel {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.15s both;
}

/* 检测结论卡 */
.cardConclusion {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.2s both;
}

/* 农场卡 */
.cardFarm {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.25s both;
}

/* 批次卡 */
.cardBatch {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.35s both;
}

/* 凭证卡 */
.cardCredential {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.45s both;
}

/* ============================
   检测报告横向卡片列表
   ============================ */
.reportCardList {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

.reportCardList::-webkit-scrollbar {
	display: none;
}

.reportCardTrack {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 16rpx;
	padding: 6rpx 4rpx 10rpx;
	/* 关键：让子项不受 flex 压缩，自然撑开形成横向溢出 */
	width: max-content;
}

/* 单张报告卡片 */
.reportCard {
	flex-shrink: 0;
	width: 220rpx;
	background: #FAFBF9;
	border: 1rpx solid rgba(39, 75, 57, 0.09);
	border-radius: 14rpx;
	padding: 12rpx 12rpx 10rpx;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-shadow: 0 2rpx 8rpx rgba(39, 75, 57, 0.04);
}

/* 缩略图（带页数角标覆盖层） */
.reportCardThumb {
	position: relative;
	width: 100%;
	height: 196rpx;
	background: rgba(39, 75, 57, 0.03);
	border-radius: 10rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10rpx;
}

.reportCardThumbImg {
	width: 100%;
	height: 100%;
}

.reportCardThumbEmpty {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reportCardThumbEmptyText {
	font-size: 18rpx;
	color: rgba(39, 75, 57, 0.3);
}

/* 页数角标：绝对定位在缩略图右下角 */
.reportCardPages {
	position: absolute;
	bottom: 8rpx;
	right: 8rpx;
	font-size: 15rpx;
	color: rgba(39, 75, 57, 0.65);
	background: rgba(250, 251, 249, 0.88);
	border: 1rpx solid rgba(39, 75, 57, 0.1);
	border-radius: 6rpx;
	padding: 2rpx 8rpx;
	line-height: 1.4;
}

/* 报告元信息 */
.reportCardMeta {
	flex: 1;
	margin-bottom: 6rpx;
}

.reportCardRow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 4rpx;
	margin-bottom: 4rpx;
}

.reportCardLabel {
	font-size: 16rpx;
	color: rgba(84, 106, 93, 0.6);
	flex-shrink: 0;
}

.reportCardValue {
	font-size: 16rpx;
	color: rgba(68, 82, 72, 0.85);
	font-weight: 460;
	text-align: right;
	word-break: break-all;
}

.reportCardValueNo {
	font-size: 14rpx;
	color: rgba(68, 82, 72, 0.72);
}

/* 点击提示 */
.reportCardHint {
	font-size: 14rpx;
	color: rgba(39, 75, 57, 0.3);
	text-align: center;
	margin-top: auto;
}

/* 底部辅助卡 */
.cardBatchState {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.55s both;
}

/* 卡片触摸反馈：阴影增强（模拟按压感） */
.card:active {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* 触摸时轻微缩小，增加真实感 */
.card:active:not(.heroInfoPanel) {
	transform: scale(0.99);
}

.sectionHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18rpx;
	margin-bottom: 20rpx;
}

.sectionHeaderLeft {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	position: relative;
	padding-bottom: 8rpx;
}

.sectionHeaderLeft::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 78rpx;
	height: 2rpx;
	border-radius: 999rpx;
	background: linear-gradient(90deg, rgba(46, 82, 63, 0.3), rgba(203, 176, 128, 0.26), rgba(46, 82, 63, 0));
	pointer-events: none;
}

.sectionEn {
	font-size: 15rpx;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(84, 106, 93, 0.76);
}

.sectionTitle {
	font-size: 27rpx;
	font-weight: 620;
	color: rgba(60, 72, 64, 0.72);
}

.statusBadge {
	font-size: 18rpx;
	font-weight: 620;
	padding: 9rpx 15rpx;
	border-radius: 999rpx;
	white-space: nowrap;
	border: 1rpx solid transparent;
	box-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.34) inset;
}

.statusBadge.ok {
	color: #1d5d40;
	background: rgba(39, 113, 76, 0.12);
	border-color: rgba(39, 113, 76, 0.2);
}

.statusBadge.wait {
	color: #715726;
	background: rgba(203, 171, 112, 0.2);
	border-color: rgba(203, 171, 112, 0.26);
}

.statusBadge.warning {
	color: #8a5e22;
	background: rgba(214, 174, 95, 0.22);
	border-color: rgba(214, 174, 95, 0.28);
}

.statusBadge.muted {
	color: #677069;
	background: rgba(126, 137, 128, 0.14);
	border-color: rgba(126, 137, 128, 0.2);
}

/* =============================================
   商品信息面板专用信任认证徽章：强化图标主视觉、文字辅助
   ============================================= */
/* 整体：认证章风格，低饱和细边框，无交互感 */
.trustBadge {
	display: inline-flex;
	align-items: center;
	gap: 7rpx;
	padding: 9rpx 18rpx 9rpx 15rpx;
	border-radius: 999rpx;
	border: 1rpx solid rgba(39, 113, 76, 0.22);
	background: rgba(39, 113, 76, 0.06);
	box-shadow:
		0 2rpx 6rpx rgba(39, 113, 76, 0.06),
		0 1rpx 0 rgba(255, 255, 255, 0.55) inset;
	white-space: nowrap;
	cursor: default;
	pointer-events: none;
	user-select: none;
}

/* 双圆环认证图标：20×20 viewBox，图标为第一视觉焦点 */
.trustBadgeIcon {
	width: 30rpx;
	height: 30rpx;
	flex-shrink: 0;
	vertical-align: middle;
	display: inline-block;
}

/* 文案：品牌深绿，字重略降，视觉权重低于图标 */
.trustBadgeText {
	font-size: 18rpx;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: rgba(27, 71, 42, 0.68);
}

.kv {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.kvRow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16rpx;
}

.kvKey {
	font-size: 22rpx;
	font-weight: 480;
	color: rgba(54, 68, 58, 0.62);
}

.kvVal {
	font-size: 24rpx;
	font-weight: 660;
	text-align: right;
	color: rgba(27, 41, 33, 0.92);
}

/* 农场主体：左图右文，右栏与图片垂直居中，名称/地址成组 */
.farmBody {
	display: flex;
	align-items: center;
	gap: 24rpx;
	margin-bottom: 18rpx;
}

.farmImageWrap {
	flex-shrink: 0;
	width: 180rpx;
	height: 136rpx;
	border-radius: 22rpx;
	overflow: hidden;
	position: relative;
	box-shadow:
		0 12rpx 28rpx rgba(24, 41, 30, 0.14),
		0 2rpx 0 rgba(255, 255, 255, 0.3) inset;
}

.farmImage {
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(160deg, rgba(234, 245, 240, 0.9), rgba(220, 238, 228, 0.85));
}

.farmMeta {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	gap: 10rpx;
}

.farmName {
	font-size: 28rpx;
	font-weight: 680;
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: rgba(27, 41, 33, 0.94);
}

/* 农场地址：普通文本样式，弱于标题；多行时图标与首行对齐 */
.farmLocation {
	display: flex;
	align-items: flex-start;
	gap: 8rpx;
}

/* 定位小图标：略弱、与首行文字视觉对齐 */
.locationIcon {
	width: 18rpx;
	height: 18rpx;
	flex-shrink: 0;
	margin-top: 6rpx;
	opacity: 0.42;
}
.locationText {
	flex: 1;
	min-width: 0;
	font-size: 21rpx;
	font-weight: 400;
	color: rgba(84, 106, 93, 0.82);
	line-height: 1.55;
	letter-spacing: 0.02em;
}

/* 农场介绍：融入主体，使用分隔线区分，与商品简介风格统一 */
.farmIntro {
	padding-top: 18rpx;
	border-top: 1rpx solid rgba(39, 75, 57, 0.06);
	font-size: 23rpx;
	line-height: 1.86;
	color: rgba(54, 68, 58, 0.76);
}

.emptyText {
	margin-top: 10rpx;
	font-size: 24rpx;
	line-height: 1.62;
	color: rgba(16, 24, 19, 0.72);
}

.btnRow {
	margin-top: 22rpx;
}

/* 合格证紧凑缩略图 */
/* ============================
   合格证：信息摘要 + 缩略图一体化布局
   ============================ */
.certSummary {
	display: flex;
	align-items: flex-start;
	gap: 24rpx;
}

.certSummaryInfo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14rpx;
	min-width: 0;
}

.certSummaryRow {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.certSummaryLabel {
	font-size: 20rpx;
	font-weight: 500;
	color: rgba(39, 75, 57, 0.55);
	letter-spacing: 0.02em;
}

.certSummaryValue {
	font-size: 25rpx;
	font-weight: 580;
	color: rgba(27, 41, 33, 0.9);
	line-height: 1.4;
}

.certThumbContainer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
}

.certThumbContainer .certThumbWrap {
	/* 与左侧两行摘要区总高约齐平：缩略图 + gap + 提示行 */
	width: 88rpx;
	height: 120rpx;
	border-radius: 8rpx;
	overflow: hidden;
	background: #fff;
	border: 1rpx solid rgba(200, 180, 140, 0.22);
	box-shadow: 0 2rpx 8rpx rgba(30, 36, 26, 0.06);
}

.certThumbContainer .certThumbImage {
	width: 100%;
	height: 100%;
	display: block;
}

.certPreviewHint {
	font-size: 16rpx;
	line-height: 1.15;
	color: rgba(39, 75, 57, 0.4);
	letter-spacing: 0.01em;
}

.certPendingHint {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 12rpx 0;
}

.certPendingText {
	font-size: 21rpx;
	color: rgba(39, 75, 57, 0.5);
	line-height: 1.5;
}

/* 旧样式保留但隐藏（兼容其他模块） */
.certPreviewCompact {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 24rpx;
}

.docPlaceholder {
	margin-top: 16rpx;
	padding: 20rpx;
	border-radius: 26rpx;
	background: linear-gradient(160deg, rgba(244, 237, 224, 0.82), rgba(237, 244, 235, 0.72));
	border: 1rpx solid rgba(201, 171, 120, 0.22);
}

.docPlaceholderTitle {
	display: block;
	margin-bottom: 12rpx;
	font-size: 22rpx;
	font-weight: 650;
	color: rgba(35, 93, 64, 0.92);
}

.docPlaceholderText {
	display: block;
	font-size: 22rpx;
	line-height: 1.75;
	color: rgba(59, 71, 62, 0.82);
}

.docBlock {
	margin-top: 14rpx;
	padding: 18rpx;
	border-radius: 22rpx;
	background: rgba(255, 255, 255, 0.46);
}

.docBlock:first-of-type {
	margin-top: 4rpx;
}

.docTitle {
	display: block;
	margin-bottom: 10rpx;
	font-size: 22rpx;
	font-weight: 620;
	color: rgba(45, 87, 64, 0.84);
}

.docText {
	font-size: 22rpx;
	line-height: 1.8;
	color: rgba(64, 75, 67, 0.8);
}

/* 批次信息主体：连续信息排版，标签-值对应，与商品信息卡风格统一 */
.batchBody {
	display: flex;
	flex-direction: column;
}

/* 批次信息主体：左右两列布局，左列固定，右列自适应，内容左对齐 */
.batchBody {
	display: flex;
	flex-direction: column;
}

.batchRow {
	display: flex;
	align-items: baseline;
	padding: 16rpx 0;
}

.batchRow + .batchRow {
	border-top: 1rpx solid rgba(39, 75, 57, 0.05);
}

.batchRowLabel {
	flex-shrink: 0;
	width: 162rpx;
	font-size: 21rpx;
	font-weight: 460;
	color: rgba(84, 106, 93, 0.68);
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.batchRowValue {
	flex: 1;
	min-width: 0;
	font-size: 25rpx;
	font-weight: 580;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(27, 41, 33, 0.9);
}

.cardCredential .certSummary {
	margin-top: 4rpx;
}

/* 底部柔和收口渐变 */
.footerFade {
	position: relative;
	height: 1rpx;
	margin: 0 80rpx;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(39, 75, 57, 0.15) 30%,
		rgba(39, 75, 57, 0.2) 50%,
		rgba(39, 75, 57, 0.15) 70%,
		transparent 100%
	);
}

.footerFade::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 80rpx;
	background: radial-gradient(ellipse at 50% 100%, rgba(39, 75, 57, 0.06), transparent 70%);
}

/* 轻量页脚 */
.traceFooter {
	padding: 36rpx 32rpx 52rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14rpx;
}

.traceFooterHint {
	font-size: 20rpx;
	font-weight: 400;
	color: rgba(88, 100, 92, 0.45);
	letter-spacing: 0.03em;
}

.traceFooterPhone {
	display: flex;
	align-items: center;
	gap: 6rpx;
	padding: 8rpx 16rpx;
	border-radius: 6rpx;
	transition: opacity 0.2s ease;
}

.traceFooterPhone:active {
	opacity: 0.55;
}

.traceFooterPhoneIcon {
	width: 22rpx;
	height: 22rpx;
	opacity: 0.55;
}

.traceFooterPhoneNum {
	font-size: 22rpx;
	font-weight: 400;
	color: rgba(39, 75, 57, 0.6);
	letter-spacing: 0.04em;
}

.traceFooterBrand {
	font-size: 17rpx;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: rgba(88, 100, 92, 0.3);
	margin-top: 8rpx;
}
/* 视频预览区域 */
	.video-section {
		/* margin: 0 30rpx 20rpx; */
		position: relative;
		z-index: 1;
	}

	.video-container {
		position: relative;
		width: 100%;
		height: 420rpx;
		background-color: #000000;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.video-container.fullscreen-mode {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		margin: 0;
		z-index: 9999;
		border-radius: 0;
	}

	.video-container.fullscreen-mode .video-controls {
		padding: 30rpx;
	}

	.video-container.fullscreen-mode .top-controls,
	.video-container.fullscreen-mode .bottom-controls {
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.video-container.fullscreen-mode:hover .top-controls,
	.video-container.fullscreen-mode:hover .bottom-controls {
		opacity: 1;
	}

	.video-player,
	.video-placeholder {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 微信小程序video组件样式 */
	#myVideo {
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
	

	/* App端video组件样式 */
	/* #ifdef APP-PLUS || APP-HARMONY */
	#appVideo {
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
	/* #endif */

	.h5-video-wrapper {
		width: 100%;
		height: 100%;
	}

	/* App端视频播放器样式优化 */
	/* #ifdef APP-PLUS || APP-HARMONY */
	#appVideoPlayer {
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
	/* #endif */

	.video-controls {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.4) 100%);
	}
	.control-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.top-controls {
		height: 80rpx;
	}
	
	.center-controls {
		height: 120rpx;
		justify-content: center;
		align-items: center;
	}
	
	.bottom-controls {
		height: 80rpx;
	}
	
	.signal-indicator {
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 24rpx;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 8rpx 16rpx;
		border-radius: 30rpx;
	}
	
	.signal-indicator svg {
		margin-right: 8rpx;
	}
	
	.signal-text {
		font-weight: 500;
	}
	
	.fullscreen-button {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		transition: all 0.2s;
	}
	
	.fullscreen-button:active {
		background-color: rgba(76, 175, 80, 0.7);
		transform: scale(0.9);
	}
	
	.video-time {
		color: #FFFFFF;
		font-size: 26rpx;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 6rpx 16rpx;
		border-radius: 30rpx;
		font-weight: 500;
	}
	
	.play-button {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);
		transition: all 0.2s;
		transform: scale(1);
	}
	
	.play-button:active {
		transform: scale(0.92);
		background-color: rgba(255, 255, 255, 1);
	}
	
	.center-button-container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.pause-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s;
	}
	
	.center-button-container:active .pause-icon {
		opacity: 1;
		background-color: rgba(76, 175, 80, 0.7);
	}
</style>