<template>
	<view class="home-container" @scroll="onPageScroll">
		<!-- 可拖拽悬浮图片 -->
		<view class="floating-image-container" v-if="floatIcon.imageUrl && !isAnyPopupVisible"
			:style="{ left: floatIconPosition.left + 'px', top: floatIconPosition.top + 'px' }"
			@touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @tap="onfloatIconClick">
			<image class="floating-image"
				:src="floatIcon.imageUrl.indexOf('http') === 0 ? floatIcon.imageUrl : $baseUrl + floatIcon.imageUrl">
			</image>
		</view>
		<view class="content">
			<swiper id="firstScreen" class="swiper banner" circular :autoplay="autoplay" :interval="interval"
				:duration="duration" :indicator-dots="false" @change="onBannerSwiperChange">
				<swiper-item v-for="(item, index) in swiperList" :key="item.url">
					<view class="swiper-item banneritem">
						<image @tap="jumpBannerHandler(item, index)" class="b-img"
							:src="item.url.indexOf('http') === 0 ? item.url : $baseUrl + item.url"></image>
					</view>
				</swiper-item>
			</swiper>

			<!-- 溯源测试按钮 -->
			<!-- <button style="width: 100%;height: 100rpx;background-color: #fff;color: #000;" @tap="testSource">溯源测试</button> -->

			<view class="swiper-mask">
				<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
			</view>
			<!-- 自定义指示点，仿照示意图 -->
			<view class="custom-banner-indicator">
				<view v-for="(item, idx) in swiperList" :key="item.url + idx"
					:class="['banner-dot', { 'active': idx === bannerCurrentIndex }]"></view>
			</view>
			<view class="barbox" :style="`top:${statusBarHeight}px;`">
				<image class="btnlogo" :src="$baseUrl + 'homepage/btnlogo.png'"></image>
				<image :data-log="{
					xcxClick: '首页-首屏页面点击',
					pageName: '首页-首屏',
					buttonName: '搜索框'
				}" class="btnsearch" @tap="goSearchHandler" :src="$baseUrl + 'homepage/btnsearch.png'">
				</image>
				<view class="customer-btn-wrap">
					<image :data-log="{
						xcxClick: '首页-首屏页面点击',
						pageName: '首页-首屏',
						buttonName: '客服入口'
					}" @tap="goCustomerHandler" class="btncustomer" :src="$baseUrl + 'homepage/btncustomer.png'">
					</image>
					<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
				</view>
			</view>
			<!-- <view :data-log="{
				xcxClick: '首页-首屏页面点击',
				pageName: '首页-首屏',
				buttonName: '文字资源位入口'
			}" @tap="showPopup(1, $event)" class="txtbox">
				<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
				<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
			</view> -->

			<!--推荐工具-->
			<view v-if="toolList?.tools?.length > 0" class="tools_box">
				<view class="tools_maintitle">{{ toolList.maintitle }}</view>
				<view class="tools_subtitle">{{ toolList.subtitle }}</view>
				<swiper :vertical="false" :circular="true" class="tool_swiper" :display-multiple-items="1.65"
					:next-margin="'0rpx'" :previous-margin="'0'" @change="onSwiperChange">
					<swiper-item v-for="(item, index) in toolList.tools" :key="index"
						:class="['swiperItem', { 'active': currentIndex === index }]">
						<view class="tool">
							<!-- <button
								v-if="homeStore && !homeStore.isLogin && item.title!='星妈会Lab' && item.title!='星妈起名' && item.title!='喂养工具' && item.title!='产检提醒' && item.title!='宝宝生长测评' && item.title!='体质测试'"
								open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="sq_btn"></button> -->
							<image class="tool_bg" :src="$baseUrl + 'homepage/Q3Res/toolBg.png'"
								@tap="handleToolClick(item)">
							</image>
							<image class="tool_icon"
								:src="item.icon?.indexOf('http') === 0 ? item.icon : $baseUrl + item.icon"></image>
							<!-- <image class="tool_jt" :src="$baseUrl + toolList.jtIcon"></image> -->
							<view class="tool_title">{{ item.title }}</view>
							<view class="tool_context">{{ item.context }}</view>
						</view>
					</swiper-item>
				</swiper>

				<!-- 自定义指示点 -->
				<view class="custom-indicator">
					<view v-for="(item, index) in toolList.tools" :key="index" class="indicator-dot"
						:class="{ 'active': currentIndex === index }">
					</view>
				</view>
			</view>
			<!-- 能不能吃模块 -->
			<view v-if="canEatData && canEatData.id" class="can-eat-module">
				<view class="can-eat-title">{{ '能不能吃' }}</view>
				<view class="can-eat-question">{{ canEatData.title || '' }}</view>

				<!-- 答题区域 -->
				<view v-if="!canEatData.isAnswered && !canEatData.myAnswer" class="can-eat-buttons">
					<view class="can-eat-btn" @tap="handleCanEatAnswer(0)">能吃</view>
					<view class="can-eat-btn" @tap="handleCanEatAnswer(1)">少吃</view>
					<view class="can-eat-btn" @tap="handleCanEatAnswer(2)">慎吃</view>
					<view class="can-eat-btn" @tap="handleCanEatAnswer(3)">禁吃</view>
				</view>

				<!-- 已答题状态显示区域 -->
				<view v-else-if="canEatData.isAnswered || canEatData.myAnswer" class="can-eat-answer-section">
					<view class="answer-status">
						<view class="correct-answer">正确答案：{{ ['能吃', '少吃', '慎吃', '禁吃'][canEatData.correct] }}</view>
					</view>
					<view class="analysis-link" @tap="viewAnalysis">{{ '查看问题解析 >' }}</view>
				</view>
			</view>
			<!--专家团-->
			<view class="et_box" id="expertTeam">
				<view class="et_maintitle">{{ expertTeam.maintitle }}</view>
				<view :data-log="{
					xcxClick: '首页-二屏页面点击',
					pageName: '首页-二屏',
					buttonName: '专家团副标题点击'
				}" class="et_subtitle">
					<view class="txtlink" @tap="showPopup1(1, 1)">星妈会医生在线答疑群，为孩子成长保驾护航</view>
					<image id="et_joingroup" class="icon_more" @tap="showPopup1(1, 2)"
						:src="$baseUrl + 'homepage/et_more.png'"></image>
				</view>
				<view class="et_main_box">
					<view class="et_con_bg">
						<view class="et_tab_box">
							<view class="tab_box" @tap="onSelEtTap(0)">
								<image class="et_tab" v-show="etTabSelIndex == 0"
									:src="$baseUrl + 'homepage/et_sel_tab11.png'">
								</image>
								<image class="et_tab" v-show="etTabSelIndex != 0"
									:src="$baseUrl + 'homepage/et_tab11.png'">
								</image>
							</view>
							<view class="tab_box" @tap="onSelEtTap(1)">
								<image class="et_tab" v-show="etTabSelIndex == 1"
									:src="$baseUrl + 'homepage/et_sel_tab2.png'">
								</image>
								<image class="et_tab" v-show="etTabSelIndex != 1"
									:src="$baseUrl + 'homepage/et_tab2.png'">
								</image>
							</view>
							<view class="tab_box" @tap="onSelEtTap(2)">
								<image class="et_tab" v-show="etTabSelIndex == 2"
									:src="$baseUrl + 'homepage/et_sel_tab3.png'">
								</image>
								<image class="et_tab" v-show="etTabSelIndex != 2"
									:src="$baseUrl + 'homepage/et_tab3.png'">
								</image>
							</view>
						</view>
						<view class="et_con_box" @tap="onETMore(1, etTabSelIndex)">
							<image class="et_con1" v-if="etTabSelIndex == 0" :src="$baseUrl + expertTeam.etConUrl1">
							</image>
							<image class="et_con2" v-if="etTabSelIndex == 1" :src="$baseUrl + expertTeam.etConUrl2">
							</image>
							<image class="et_con3" v-if="etTabSelIndex == 2" :src="$baseUrl + expertTeam.etConUrl3">
							</image>
						</view>
						<view id="et_more" class="et_more_txt" @tap="onETMore(2, etTabSelIndex)">
							<text class="txtlink">点击查看更多</text>
							<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
						</view>
					</view>
				</view>
			</view>
			<!--专家团-->

			<!-- <view class="cardScroller">
				<view class="cardbox">
					<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
						<image :data-log="{
							xcxClick: '首页-首屏页面点击',
							pageName: '首页-首屏',
							buttonName: `腰部banner-${cardData.level}`
						}" @tap="jumpLinkCard(cardData, $event)" class="bg" :src="$baseUrl + cardData.bgUrl"></image>
						<text class="level">{{ cardData.level }}</text>
						<text class="subTitle">{{ cardData.subTitle }}</text>
						<view class="showCornerTxt" v-if="cardData.showCornerTxt && cardData.showCornerTxt.length > 0">
							{{ cardData.showCornerTxt }}
						</view>
						<view v-if="cardData.btnTitle && cardData.btnTitle.length > 0" :data-log="{
							xcxClick: '首页-首屏页面点击',
							pageName: '首页-首屏',
							buttonName: `腰部banner-${cardData.level}`
						}" class="cardbtn" @tap="jumpLinkWithLogin(cardData.link, $event)">
							<image class="cardbtnbg" :src="$baseUrl + 'homepage/btn_receive.png'"></image>
							<text class="btnTitle" :style="cardData.btnTitle.length > 7 ? 'font-size:22rpx;' : ''">{{
								cardData.btnTitle }}</text>
							<text class="btnSubTitle">{{ cardData.btnSubTitle }}</text>
							<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
								@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>

						</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="contentbox" id="secondScreen">
				<image class="contentbg" :src="$baseUrl + 'homepage/contentbg.png'" alt="" />
				<image class="contentitem" :key="index" :style="contentItem._style"
					v-for="(contentItem, index) in contentImgList" :src="$baseUrl + contentItem.bgUrl" :data-log="{
						xcxClick: '首页-二屏页面点击',
						pageName: '首页-二屏',
						buttonName: `品牌介绍${index + 1}`
					}" @tap="jumpLink(contentItem.link, contentItem.videoUrl, index, $event)"></image>
			</view> -->


			<view v-if="childrenInfoList.length > 0" id="childrenInfoList" class="channelbox">
				<text class="maintitle">{{ childrenInfoListMianTitle }}</text>
				<view class="subtitle_box">
					<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
					<image id="childrenInfoListMore" class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'"
						:data-log="{
							xcxClick: '首页-三屏页面点击',
							pageName: '首页-三屏',
							buttonName: `次位内容资源位-查看更多文字`
						}" :data-comlog="{
							xcxComponentClick: 'true',
							pageName: '首页',
							componentName: '育儿智库',
							componentContent: '育儿智库-more'
						}" @tap="jumpLink(suggest.link, false, false, $event)"></image>
				</view>
				<view class="channelscroll">
					<view class="box">
						<view class="infobox" :key="index" :id="'childrenInfoList' + index"
							v-for="(infoItem, index) in childrenInfoList" :data-log="{
								xcxClick: '首页-三屏页面点击',
								pageName: '首页-三屏',
								buttonName: `次位内容资源位-轮播-${index + 1}`
							}" :data-comlog="{
								xcxComponentClick: 'true',
								pageName: '首页',
								componentName: '育儿智库',
								componentContent: infoItem.desc
							}" @tap="jumpLink(infoItem.link, false, false, $event)">
							<image class="infoimg"
								:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl">
							</image>
							<view class="infotitlebox">
								<view class="infotitlecon">
									<view class="infotitle">{{ infoItem.desc }}</view>
									<image v-if="infoItem.isNew" class="infotitletag"
										:src="$baseUrl + 'homepage/home_new_tag_v3.png'">New</image>
								</view>
								<view class="infodesc">{{ infoItem.desc2 }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view :data-log="{
					xcxClick: '首页-三屏页面点击',
					pageName: '首页-三屏',
					buttonName: `次位内容资源位-查看更多文字`
				}" @tap="jumpLink(suggest.link, false, false, $event)" class="desc desc2">
					更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
				</view> -->
			</view>
			<view class="channelbox" id="thirdScreen" v-if="false">
				<text class="maintitle">{{ channelTabListMianTitle }}</text>
				<view class="subtitle_box">
					<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
					<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
						xcxClick: '首页-三屏页面点击',
						pageName: '首页-三屏',
						buttonName: `首位内容资源位-查看更多文字`
					}" @tap="jumpLink(voiceStory.link, false, false, $event)"></image>
				</view>
				<view class="listbox">
					<view @tap="channelTabHandler(index, $event)" :data-log="{
						xcxClick: '首页-三屏页面点击',
						pageName: '首页-三屏',
						buttonName: `首页内容资源位分类${index + 1}-${item}`
					}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in channelTabList"
						:key="index">
						{{ item }}
					</view>
				</view>
				<view class="channelscroll2">
					<view class="box2">
						<view class="infobox2" :key="index"
							v-for="(infoItem, index) in changelInfoList[channelTabIndex]" :data-log="{
								xcxClick: '首页-三屏页面点击',
								pageName: '首页-三屏',
								buttonName: `首页内容资源位分类${channelTabIndex + 1}-${channelTabList[channelTabIndex]}-${index + 1}`
							}" @tap="jumpLink(infoItem.link, false, false, $event)">
							<image class="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
							<view class="infotitle2box">
								<view class="infotitle2">
									{{ infoItem.desc }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view :data-log="{
					xcxClick: '首页-三屏页面点击',
					pageName: '首页-三屏',
					buttonName: `首位内容资源位-查看更多文字`
				}" @tap="jumpLink(voiceStory.link, false, false, $event)" class="desc">
					滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
				</view> -->
			</view>

			<view id="fourthScreen" class="bottomlink">
				<image class="bottombg" :src="$baseUrl + 'homepage/bottombg.png'"></image>
				<view class="box">
					<image class="icon" :id="'bottomLink' + index" v-for="(icon, index) in bottomLinkList" :key="index"
						:data-log="{
							xcxClick: '首页-四屏页面点击',
							pageName: '首页-四屏',
							buttonName: `${qrNameList[index]}`
						}" :data-comlog="{
							xcxComponentClick: 'true',
							xcxComponentExposure: 'true',
							pageName: '首页',
							componentName: '跳转工具',
							componentContent: `${qrNameList[index]}`
						}" :src="$baseUrl + icon.bgUrl" :style="icon._style" @tap="showPopup(index, $event)"></image>
				</view>
			</view>
		</view>
		<!-- 测试按钮 -->
		<!-- <view class="test-buttons" style="position: fixed; bottom: 200rpx; left: 0; right: 0; display: flex; justify-content: space-around; z-index: 999;">
			<button @tap="showTestPopup(true)" style="background-color: #B27C1E; color: white; padding: 20rpx 40rpx; border-radius: 30rpx;">显示正确答案弹窗</button>
			<button @tap="showTestPopup(false)" style="background-color: #D3A358; color: white; padding: 20rpx 40rpx; border-radius: 30rpx;">显示错误答案弹窗</button>
		</view> -->
		<view>
			<!-- 普通弹窗 企微等二维码-->
			<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
				border-radius="48rpx">
				<view v-if="qrObj !== null" class="popup-content">
					<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
					<view class="title">
						{{ qrObj.title || '' }}
					</view>
					<rich-text class="desc" :nodes="qrObj.desc || ''"></rich-text>
					<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + (qrObj.qrUrl || '')"></image>
					<image @tap="downloadHandler($baseUrl + (qrObj.qrUrl || ''))" class="btndownload"
						:src="$baseUrl + 'homepage/btn_download.png'"></image>
				</view>
				<view v-else class="popup-content" style="height: 977rpx;">
					<image class="xingmahui" :src="$baseUrl + 'homepage/xingmahui.png'"></image>
					<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
				</view>
			</uni-popup>
		</view>

		<!-- 新增图片弹窗 -->
		<uni-popup :is-mask-click="false" :safe-area="false" ref="imagePopup" background-color="transparent">
			<view class="image-popup-content">
				<image class="popup-image" :src="popupImageUrl" mode="aspectFit" @tap="imagePopupJump"></image>
				<image class="popup-close-btn" @tap="closeImagePopup" :src="$baseUrl + 'homepage/btnclose.png'"></image>
			</view>
		</uni-popup>

		<view v-if="showVideo" class="video-popup">
			<video :src="currentVideoUrl" controls autoplay :style="{ width: '100vw', height: videoHeight }"></video>
			<view class="close-btn-bottom" @tap="closeVideo">×</view>
		</view>
		<RegisterLayer v-model="showRegisterLayer" />
		<!-- 答案解析弹窗 -->
		<CanEatAnswerPopup :visible="showAnswerPopup" :isCorrect="isAnswerCorrect" :rewardInfo="rewardInfo"
			:question="currentQuestion" :correctAnswer="correctAnswer" :analysis="answerAnalysis"
			:optionDistribution="optionDistribution" :allResult="canEatData?.analysis?.allResult"
			@close="showAnswerPopup = false" />

		<!-- 金币动画模块 -->
		<view class="gold-coin-animation" v-if="showGoldCoinAnimation" @tap="hideGoldCoinAnimation">
			<view class="gold-coin-content" @tap.stop>
				<view class="gold-coin-title">{{ goldCoinConfig.title }}</view>
				<view class="gold-coin-description">{{ goldCoinConfig.description }}</view>
				<view class="gold-coin-container">
					<image class="gold-coin gold-coin-1"
						:src="goldCoinConfig.imageUrl || $baseUrl + 'homepage/Q3Res/goldCoin.png'"></image>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
import {
	jump,
	JumpType
} from '../utils';
import {
	useHomeStore
} from '../stores/home';
import {
	fetchHomeJSON,
	fetchCanEatIndex,
	fetchCanEatJoin
} from '../api/home';
import {
	useUserStore
} from '../stores/user';
import RegisterLayer from "../components/RegisterLayer.vue";
import CanEatAnswerPopup from '../components/CanEatAnswerPopup.vue';
import md from '../md';
import ExposureTracker from '../utils/exposure';
import {
	getHealthField
} from "@/api/common";

// const homeStore = useHomeStore();
const userStore = useUserStore();

// 定义需要曝光检测的元素配置
const EXPOSURE_CONFIGS = [{
	id: 'firstScreen',
	logParams: {
		xcxPage: '首页-首屏页面浏览',
		pageName: '首页-首屏'
	}
},
// 可以添加更多需要曝光检测的元素配置
{
	id: 'secondScreen',
	logParams: {
		xcxPage: '首页-二屏页面浏览',
		pageName: '首页-二屏'
	}
},
{
	id: 'thirdScreen',
	logParams: {
		xcxPage: '首页-三屏页面浏览',
		pageName: '首页-三屏'
	}
},
{
	id: 'fourthScreen',
	logParams: {
		xcxPage: '首页-四屏页面浏览',
		pageName: '首页-四屏'
	}
}
];

export default {
	beforeDestroy() {
		if (this.exposureTracker) {
			this.exposureTracker.resetAllExposure();
		}
	},
	deactivated() {
		if (this.exposureTracker) {
			this.exposureTracker.resetAllExposure();
		}
	},
	data() {
		return {
			popType: 'bottom',
			// 悬浮图片位置配置
			floatIconPosition: {
				left: 300, // 初始左位置
				top: 500 // 初始上位置
			},
			// 答案弹窗相关数据
			showAnswerPopup: false,
			isAnswerCorrect: false,
			rewardInfo: '10',
			currentQuestion: '',
			correctAnswer: '',
			answerAnalysis: '',
		
			// 悬浮图片相关配置
			floatIcon: {
				// imageUrl: 'homepage/btnclose.png',
				// link: {
				// 	extra: {
				// 		envVersion: 'release',
				// 		appId: 'wx4205ec55b793245e'
				// 	},
				// 	type: 2,
				// 	url: 'subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot'
				// },
				// videoUrl: 'homepage/video3.mp4'
			},
			isDragging: false, // 是否正在拖拽
			touchStartX: 0, // 触摸开始X坐标
			touchStartY: 0, // 触摸开始Y坐标
			statusBarHeight: 38,
			showRegisterLayer: false,
			swiperList: [],
			indicatorDots: true,
			autoplay: true,
			interval: 4000,
			duration: 500,
			indicatoractiveColor: "#a6a0a1",
			indicatorColor: "rgba(255, 255, 255, 1)",
			toolList: {},
			expertTeam: {},
			vipCardList: [],
			contentImgList: [],
			channelTabList: [],
			channelTabIndex: 0,
			changelInfoList: [],
			childrenInfoList: [],
			bottomLinkList: [],
			qrInfoObj: undefined,
			popupIndex: 0,
			qrInfoList: [{
				title: '',
				desc: '',
				qrUrl: ''
			}, {
				title: '',
				desc: '',
				qrUrl: ''
			}, {
				title: '',
				desc: '',
				qrUrl: ''
			}, {
				title: '',
				desc: '',
				qrUrl: ''
			}],
			qrObj: {
				title: '',
				desc: '',
				qrUrl: ''
			},
			showVideo: false,
			currentVideoUrl: '',
			isClickPhoneAuth: false,
			voiceStory: {},
			suggest: {},
			videoHeight: '56vw',
			qrNameList: ['公众号', '企业微信', '视频号', '小红书'],
			windowHeight: 0,
			isFirstScreenExposed: false,
			scrollTimer: null,
			exposureTracker: null,
			currentIndex: 0,
			etTabSelIndex: 0,
			bannerCurrentIndex: 0,
			childrenInfoListMianTitle: '',
			channelTabListMianTitle: '',
			popupImageUrl: '',
			popupImageObj: {},
			// 新增变量用于跟踪弹窗状态
			isNormalPopupVisible: false,
			isImagePopupVisible: false,
			// 能不能吃模块数据
			canEatData: null,
			// 金币动画相关数据
			showGoldCoinAnimation: false,
			goldCoinConfig: {
				title: '',
				description: '',
				imageUrl: '' // 奖品图片URL
			}
		}
	},
	components: {
		RegisterLayer,
		CanEatAnswerPopup
	},
	computed: {
		homeStore() {
			return useHomeStore();
		},
		// 检查是否有任何弹窗可见
		isAnyPopupVisible() {
			// 视频弹窗是否显示
			if (this.showVideo) return true;
			// 注册弹窗是否显示
			if (this.showRegisterLayer) return true;
			// 普通弹窗是否显示
			if (this.isNormalPopupVisible) return true;
			// 图片弹窗是否显示
			if (this.isImagePopupVisible) return true;
			// 答案弹窗是否显示
			if (this.showAnswerPopup) return true;
			// 金币动画是否显示
			if (this.showGoldCoinAnimation) return true;
			return false;
		}
	},
	props: {
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	watch: {
		homeStore: {
			handler(newVal) {
				this.showRegisterLayer = this.isClickPhoneAuth && newVal.isLogin && !newVal.babyExistence;
				if (newVal.homeInfo !== null) {
					this.initHomeInfo();
					this.checkAndShowPopup();
				}
			},
			deep: true,
			immediate: true
		},
		scrollTop: {
			handler(newVal) {
				this.checkExposure(newVal);
			}
		}
	},
	mounted() {
		const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
		this.statusBarHeight = menuButtonInfo.top;
		this.isClickPhoneAuth = false;

		// 获取窗口高度
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;

		// 初始化曝光检测工具
		this.exposureTracker = new ExposureTracker(this);
		this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);

		// 初始检查曝光
		this.$nextTick(() => {
			this.checkExposure(this.scrollTop);
		});
	},
	unmounted() {
		// 组件销毁时清理弹窗状态（可选，根据业务需求决定是否保留状态）
		// 如果需要重置弹窗状态，可以在这里调用 this.resetPopupState()
	},
	methods: {
		// 显示测试弹窗方法
		showTestPopup(isCorrect) {
			this.isAnswerCorrect = isCorrect;
			this.showAnswerPopup = true;
		},

		testSource() {
			uni.navigateTo({
				url: '/pages/syWebview/syWebview?p=xmh'
			})
		},
		async initHomeInfo() {
			const {
				data
			} = await fetchHomeJSON();
			console.warn("data", data)
			if (data) {
				this.swiperList = data.swiperList || [
					{
						"link": {},
						"title": "默认图",
						"url": this.$baseUrl + "homepage/homeSwiperDefaultBg.png"
					},
				];
				this.vipConfigList = data.vipConfigList;
				// this.vipCardList = data.vipCardList;
				this.contentImgList = data.contentImgList;
				this.channelTabList = data.channelTabList;
				this.changelInfoList = data.changelInfoList;
				this.childrenInfoList = data.childrenInfoList || [];
				this.bottomLinkList = data.bottomLinkList;
				this.qrInfoList = data.qrInfoList || [];
				this.toolList = data.toolList || [];
				this.expertTeam = data.expertTeam;
				this.vipCardList = data.vipCardList;
				this.voiceStory = data.voiceStory;
				this.suggest = data.suggest;
				this.childrenInfoListMianTitle = data.childrenInfoListMianTitle;
				this.channelTabListMianTitle = data.channelTabListMianTitle;
				this.popupImageUrl = data.popupImageObj?.imageUrl?.startsWith('http') ? data.popupImageObj?.imageUrl : this.$baseUrl + data.popupImageObj?.imageUrl || '';
				this.popupImageObj = data.popupImageObj || {};
				this.floatIcon = data.floatIcon || {};

				if (this.homeStore.isLogin) {
					this.vipCardList[0] = data.vipConfigList.find(item => item.grade === this.homeStore.homeInfo
						?.grade);
					this.vipCardList[0].level = this.homeStore.homeInfo?.gradeName;
				} else {
					this.vipCardList[0] = data.vipConfigList[0];
				}

				// 获取能不能吃数据
				await this.fetchCanEatData();

				//拿到数据之后，初始化曝光一些节点
				this.initExposure();
			}
		},
		initExposure() {
			const componentContent = this.toolList.tools?.[this.currentIndex]?.title || '';
			md.sensorComponentLogTake({
				xcxComponentExposure: "true",
				pageName: "首页",
				componentName: "工具推荐",
				componentContent: componentContent
			});
			md.sensorComponentLogTake({
				xcxComponentExposure: "true",
				pageName: "首页",
				componentName: "首页banner",
				componentContent: this.swiperList[0]?.title || ''
			});

			const childrenInfoList = this.childrenInfoList;
			childrenInfoList.forEach((item, index) => {
				this.exposureTracker.addExposureElement({
					id: 'childrenInfoList' + index,
					logParams: {
						xcxComponentExposure: 'true',
						pageName: '首页',
						componentName: '育儿智库',
						componentContent: item.desc
					}
				});
			});
			this.qrNameList.forEach((item, index) => {
				this.exposureTracker.addExposureElement({
					id: 'bottomLink' + index,
					logParams: {
						xcxComponentExposure: 'true',
						pageName: '首页',
						componentName: '跳转工具',
						componentContent: `${item}`
					}
				});
			});

			//动态添加专家团的首屏数据
			this.exposureTracker.addExposureElements([{
				id: 'expertTeam',
				logParams: {
					xcxComponentExposure: 'true',
					pageName: '首页',
					componentName: '专家团',
					componentContent: '专家团tab切换-名医专家'
				}
			},
			{
				id: 'et_joingroup',
				logParams: {
					xcxComponentExposure: 'true',
					pageName: '首页',
					componentName: '专家团',
					componentContent: '专家团-进群咨询'
				}
			}, {
				id: 'et_more',
				logParams: {
					xcxComponentExposure: 'true',
					pageName: '首页',
					componentName: '专家团',
					componentContent: '专家团-查看更多'
				}
			}, {
				id: 'childrenInfoList',
				logParams: {
					xcxComponentExposure: 'true',
					pageName: '首页',
					componentName: '育儿智库',
					componentContent: '育儿智库'
				}
			},
			{
				id: 'childrenInfoListMore',
				logParams: {
					xcxComponentExposure: 'true',
					pageName: '首页',
					componentName: '育儿智库',
					componentContent: '育儿智库-more'
				}
			}

			]);

		},
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay
		},
		intervalChange(e) {
			this.interval = e.target.value
		},
		durationChange(e) {
			this.duration = e.target.value
		},
		jumpBannerHandler(item, index) {
			console.log("item====", item)
			md.sensorLogTake({
				xcxClick: '首页-首屏页面点击',
				pageName: '首页-首屏',
				buttonName: `第${index + 1}张焦点图-入口`,
			});
			md.sensorComponentLogTake({
				xcxComponentClick: "true",
				pageName: "首页",
				componentName: "首页banner",
				componentContent: item.title
			});
			if (item.videoUrl) {
				this.currentVideoUrl = item.videoUrl.indexOf('http') === -1 ? this.$baseUrl + item.videoUrl : item.videoUrl;
				this.showVideo = true;
				return;
			}
			if (item.link) {
				// 有 link，执行跳转
				jump(item.link);
			} else {
				// 没有 link，预览图片
				uni.previewImage({
					urls: [item.url.indexOf('http') === -1 ? this.$baseUrl + item.url : item.url], // 预览当前图片
					current: item.url.indexOf('http') === -1 ? this.$baseUrl + item.url : item.url // 当前显示的图片
				});
			}
		},
		previewImage(url) {
			uni.previewImage({
				urls: [url], // 预览当前图片
				current: url // 当前显示的图片
			});
		},
		jumpLinkWithLogin(link, evt) {
			if (evt) {
				md.sensorLog(evt);
			}
			if (this.homeStore.isLogin) {
				jump(link);
			}
		},
		jumpLinkCard(item, evt) {
			if (evt) {
				md.sensorLog(evt);
			}
			if (item.btnSubTitle.length > 0 && item.btnTitle.length > 0) {
				return; //如果有按钮的话，废弃这个点击事件
			}
			if (item.link) {
				jump(item.link);
			}
		},
		jumpLink(link, videoUrl, index, evt) {
			if (evt) {
				md.sensorLog(evt);
				if (evt.currentTarget.dataset.comlog) {
					md.sensorComponentLog(evt);
				}
			}
			if (videoUrl) {
				if (videoUrl.indexOf('http') === -1) {
					videoUrl = this.$baseUrl + videoUrl;
				}
				// 弹出视频
				this.currentVideoUrl = videoUrl;
				if (index === 1) {
					this.videoHeight = "100vw";
				} else {
					this.videoHeight = "56vw";
				}
				this.showVideo = true;
				return;
				// 视频弹窗出现后，video标签的autoplay会自动播放
			} else if (link) {
				if (!link || link === '') {
					return;
				}
				// 其他跳转逻辑
				jump(link);
			}
		},
		channelTabHandler(_index, evt) {
			if (evt) {
				md.sensorLog(evt);
			}
			this.channelTabIndex = _index;
		},
		showPopup(_index, evt) {
			if (evt) {
				md.sensorLog(evt);
				if (evt.currentTarget.dataset.comlog) {
					md.sensorComponentLog(evt);
				}
			}
			md.sensorLogTake({
				xcxPage: `${this.qrNameList[_index]}拉起半屏二维码入口页面浏览`,
				pageName: `${this.qrNameList[_index]}拉起半屏二维码入口`,
			});

			if (_index === 3) {
				this.qrObj = null;
			} else {
				_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
				this.qrObj = this.qrInfoList[_index];
			}
			this.popupIndex = _index;
			this.$refs.popup.open(this.popType);
			// 设置普通弹窗为可见状态
			this.isNormalPopupVisible = true;
		},
		showPopup1(_index, type) {
			md.sensorLogTake({
				xcxClick: `首页-二屏页面点击`,
				pageName: `首页-二屏`,
				buttonName: type == 1 ? '专家团副标题点击' : '专家团进群咨询按钮点击'
			});
			if (type == 2) {
				md.sensorComponentLogTake({
					xcxComponentClick: "true",
					pageName: "首页",
					componentName: "专家团",
					componentContent: '专家团-进群咨询'
				});
			}
			if (_index === 3) {
				this.qrObj = null;
			} else {
				_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
				this.qrObj = this.qrInfoList[_index];
			}
			this.popupIndex = _index;
			this.$refs.popup.open(this.popType);
			// 设置普通弹窗为可见状态
			this.isNormalPopupVisible = true;
		},
		closePop() {
			this.$refs.popup.close();
			// 设置普通弹窗为不可见状态
			this.isNormalPopupVisible = false;
		},
		goSearchHandler(e) {
			md.sensorLog(e);
			uni.navigateTo({
				url: "/pages/search/search"
			})
		},
		downloadHandler(imgurl) {
			md.sensorLogTake({
				xcxClick: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
				pageName: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
				buttonName: `下载二维码`
			});

			uni.downloadFile({
				url: imgurl,
				success: (downloadRes) => {
					if (downloadRes.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: downloadRes.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: (err) => {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							}
						});
					} else {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			});
		},
		closeVideo() {
			this.showVideo = false;
			this.currentVideoUrl = '';
		},
		onGetPhoneNumber(e) {
			if (e.detail.errMsg !== 'getPhoneNumber:ok') {
				uni.showToast({
					title: '请授权使用手机号',
					icon: 'none',
				});
				return;
			}
			console.log('detail', e.detail);
			this.isClickPhoneAuth = true;
			userStore.phoneCallback(e.detail);
		},
		goCustomerHandler(e) {
			md.sensorLog(e);
			const {
				memberId,
				mobile,
				openId,
				unionId
			} = this.homeStore.homeInfo;
			const customerUrl =
				`https://intelcc-user.icsoc.net/?channelKey=45839e0505554f8c8aea3c7b6259b049&init=1&crmld=${memberId}&mobile=${mobile}&openId=${openId}&unionId=${unionId}`;
			jump({
				type: JumpType.H5,
				url: customerUrl
			});
		},
		checkExposure(scrollTop) {
			if (this.exposureTracker) {
				this.exposureTracker.checkExposure(scrollTop);
			}
		},
		resetExposure() {
			if (this.exposureTracker) {
				this.exposureTracker.resetAllExposure();
			}
		},

		// 获取能不能吃数据
		async fetchCanEatData() {
			try {
				const response = await fetchCanEatIndex();
				if (response.success && response.data) {
					this.canEatData = response.data;
				} else {
					console.warn('获取能不能吃数据失败:', response.message);
					this.canEatData = null;
				}
			} catch (error) {
				console.error('获取能不能吃数据异常:', error);
				this.canEatData = null;
			}
		},

		// 处理能不能吃答题
		async handleCanEatAnswer(answerIndex) {
			if (!this.canEatData || !this.canEatData.id) {
				uni.showToast({
					title: '数据异常，请稍后重试',
					icon: 'none'
				});
				return;
			}

			try {
				const response = await fetchCanEatJoin({
					id: this.canEatData.id,
					answer: answerIndex
				});

				if (response.success && response.data) {
					// 保存用户答案和正确答案
					const userAnswer = { 0: '能吃', 1: '少吃', 2: '慎吃', 3: '禁吃' }[answerIndex];
					// 从原始数据中获取正确答案（correct字段是字符串格式：'0', '1', '2', '3'）
					const correctAnswerIndex = parseInt(this.canEatData.correct);
					const correctAnswer = { 0: '能吃', 1: '少吃', 2: '慎吃', 3: '禁吃' }[correctAnswerIndex];
					const isCorrect = answerIndex === correctAnswerIndex;

					// 更新数据
					this.canEatData = {
						...this.canEatData,
						isAnswered: true,
						myAnswer: userAnswer,
						correctAnswer: correctAnswer,
						correct: correctAnswerIndex, // 保存数字格式的正确答案
						isCorrect: isCorrect
					};

					// 如果答对了并且有奖励，显示奖励弹窗
					if (isCorrect && response.data.reward && (response.data.reward.credits > 0 || response.data.reward.prizeName)) {
						this.showRewardPopup(response.data.reward);
					} else {
						// 其他情况显示解析弹窗
						this.showAnswerResult({
							analysis: this.canEatData.analysis?.content || '暂无解析内容',
							allResult: this.canEatData.analysis?.allResult || '25|25|25|25',
							reward: response.data.reward || null
						}, isCorrect, userAnswer, correctAnswer);
					}

					// 答题后刷新数据
					await this.fetchCanEatData();
				} else {
					uni.showToast({
						title: response.message || '答题失败，请稍后重试',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('提交能不能吃答案异常:', error);
				uni.showToast({
					title: '网络异常，请稍后重试',
					icon: 'none'
				});
			}
		},

		// 显示奖励弹窗
		showRewardPopup(rewardData) {
			// 设置奖励信息
			let rewardText = '';
			if (rewardData.credits) {
				// 处理字符串格式的积分
				const credits = parseInt(rewardData.credits) || 0;
				if (credits > 0) {
					rewardText += `${credits}`;
				}
			}
			if (rewardData.prizeName) {
				if (rewardText) {
					rewardText += `${rewardData.prizeName}`;
				} else {
					rewardText = rewardData.prizeName;
				}
			}

			// 根据奖品类型设置图片
			let imageUrl = '';
			if (rewardData.prizeImage) {
				// 如果有奖品图片，使用奖品图片
				imageUrl = rewardData.prizeImage.indexOf('http') === 0 ? rewardData.prizeImage : this.$baseUrl + rewardData.prizeImage;
			} else if (rewardData.credits && !rewardData.prizeName) {
				// 如果只有积分奖励，使用金币图片
				imageUrl = this.$baseUrl + 'homepage/Q3Res/goldCoin.png';
			} else if (rewardData.prizeName) {
				// 如果有奖品名称，根据奖品类型选择图片
				imageUrl = this.getPrizeImageByType(rewardData.prizeName, rewardData.prizeType);
			} else {
				// 默认使用金币图片
				imageUrl = this.$baseUrl + 'homepage/Q3Res/goldCoin.png';
			}

			// 更新金币动画配置
			this.goldCoinConfig = {
				title: '恭喜你回答正确',
				description: `获得${rewardText}`,
				imageUrl: imageUrl
			};

			// 显示金币动画
			this.showGoldCoinAnimation = true;

			// 保存当前的canEatData状态，防止被fetchCanEatData覆盖
			const currentCanEatData = { ...this.canEatData };

			// 3秒后自动隐藏
			setTimeout(() => {
				this.showGoldCoinAnimation = false;
				// 动效结束展示解析弹窗
				this.showAnswerResult({
					analysis: currentCanEatData.analysis?.content || '暂无解析内容',
					allResult: currentCanEatData.analysis?.allResult || '25|25|25|25',
					reward: rewardData || null
				}, true, currentCanEatData.myAnswer, currentCanEatData.correctAnswer);

			}, 3000);
		},

		// 根据奖品类型获取对应图片
		getPrizeImageByType(prizeName, prizeType) {
			// 根据奖品名称或类型返回对应的图片
			const prizeImages = {
				// 积分类奖品
				'积分': this.$baseUrl + 'homepage/Q3Res/goldCoin.png',
				'碳能量': this.$baseUrl + 'homepage/Q3Res/goldCoin.png',

				// 优惠券类奖品
				'优惠券': this.$baseUrl + 'homepage/Q3Res/coupon.png',
				'代金券': this.$baseUrl + 'homepage/Q3Res/coupon.png',
				'折扣券': this.$baseUrl + 'homepage/Q3Res/coupon.png',

				// 实物奖品
				'奶粉': this.$baseUrl + 'homepage/Q3Res/milkPowder.png',
				'辅食': this.$baseUrl + 'homepage/Q3Res/babyFood.png',
				'玩具': this.$baseUrl + 'homepage/Q3Res/toy.png',
				'用品': this.$baseUrl + 'homepage/Q3Res/babyProduct.png',

				// 虚拟奖品
				'会员': this.$baseUrl + 'homepage/Q3Res/vip.png',
				'体验': this.$baseUrl + 'homepage/Q3Res/experience.png',

				// 默认奖品图片
				'default': this.$baseUrl + 'homepage/Q3Res/gift.png'
			};

			// 根据奖品类型匹配
			if (prizeType) {
				const typeImages = {
					'CREDITS': this.$baseUrl + 'homepage/Q3Res/goldCoin.png',
					'COUPON': this.$baseUrl + 'homepage/Q3Res/coupon.png',
					'PHYSICAL': this.$baseUrl + 'homepage/Q3Res/gift.png',
					'VIRTUAL': this.$baseUrl + 'homepage/Q3Res/vip.png'
				};
				if (typeImages[prizeType]) {
					return typeImages[prizeType];
				}
			}

			// 根据奖品名称匹配
			for (const [key, imageUrl] of Object.entries(prizeImages)) {
				if (prizeName.includes(key)) {
					return imageUrl;
				}
			}

			// 返回默认图片
			return prizeImages['default'];
		},

		// 隐藏金币动画
		hideGoldCoinAnimation() {
			this.showGoldCoinAnimation = false;
		},

		// 显示答题结果弹窗
		showAnswerResult(responseData, isCorrect, userAnswer, correctAnswer) {
			// 设置弹窗数据
			this.isAnswerCorrect = isCorrect;
			this.currentQuestion = this.canEatData.title || '';
			// 确保正确答案是文案而不是索引
			this.correctAnswer = typeof correctAnswer === 'number' ?
				['能吃', '少吃', '慎吃', '禁吃'][correctAnswer] : correctAnswer;

			// 设置奖励信息
			if (responseData.reward) {
				let rewardText = '';
				if (responseData.reward.credits) {
					// 处理字符串格式的积分
					const credits = parseInt(responseData.reward.credits) || 0;
					if (credits > 0) {
						rewardText += `${credits}`;
					}
				}
				if (responseData.reward.prizeName) {
					if (rewardText) {
						rewardText += `${responseData.reward.prizeName}`;
					} else {
						rewardText = responseData.reward.prizeName;
					}
				}
				this.rewardInfo = rewardText || '';
			} else {
				this.rewardInfo = '';
			}

			// 设置解析内容
			this.answerAnalysis = responseData.analysis || '暂无解析内容';

			// 显示弹窗
			this.showAnswerPopup = true;
		},

		// 查看问题解析
		viewAnalysis() {
			console.warn('查看解析数据:', this.canEatData);
			if (this.canEatData && this.canEatData.myAnswer && this.canEatData.correct !== undefined) {
				// 将正确答案从数字格式转换为文案格式
				const correctAnswerText = { 0: '能吃', 1: '少吃', 2: '慎吃', 3: '禁吃' }[this.canEatData.correct] || '能吃';

				// 通过比较用户答案和正确答案判断答题正确性
				const isCorrect = this.canEatData.correct == this.canEatData.myAnswer;

				// 显示解析弹窗
				this.showAnswerResult({
					analysis: this.canEatData.analysis?.content || '暂无解析内容',
					allResult: this.canEatData.analysis?.allResult || '',
					reward: this.canEatData.reward || null
				}, isCorrect, this.canEatData.myAnswer, correctAnswerText);
			} else {
				uni.showToast({
					title: '暂无解析内容',
					icon: 'none'
				});
			}
		},

		onSwiperChange(e) {
			this.currentIndex = e.detail.current;
			const componentContent = this.toolList.tools?.[this.currentIndex]?.title || '';
			md.sensorComponentLogTake({
				xcxComponentExposure: "true",
				pageName: "首页",
				componentName: "工具推荐",
				componentContent: componentContent
			});
		},

		onBannerSwiperChange(e) {
			this.bannerCurrentIndex = e.detail.current;
			md.sensorComponentLogTake({
				xcxComponentExposure: "true",
				pageName: "首页",
				componentName: "首页banner",
				componentContent: this.swiperList[e.detail.current].title
			});
		},

		async handleToolClick(item) {
			md.sensorLogTake({
				xcxClick: "首页-二屏页面点击",
				pageName: "首页-二屏",
				buttonName: item.title + "工具点击",
			});
			md.sensorComponentLogTake({
				xcxComponentClick: "true",
				pageName: "首页",
				componentName: "工具推荐",
				componentContent: item.title
			});

			if (item.title === "医生问诊") {
				// if (!cfgStatus.value.isRegister) return;
				const res = await getHealthField();

				if (!res.success) {
					uni.showToast({
						title: "获取健康字段失败",
						icon: "none",
					});
					return;
				}

				const {
					sign,
					timestamp,
					appId,
					partnerUserId,
					env
				} = res.data;

				jump({
					type: JumpType.MINI,
					url: "/pages/partner/redirect",
					extra: {
						appId: "wx81ecfb5aa3fb512f",
						envVersion: env,
						extraData: {
							sign, // 参考 4.请求参数
							timestamp, // 参考 4.请求参数
							appId, // 参考 4.请求参数
							partnerUserId, // 参考 4.请求参数
							targetApp: "/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF",
						},
					},
				});
			} else {
				jump({
					type: item.link.type,
					url: item.link.url,
					extra: item.link.extra,
				});
			}
		},

		onSelEtTap(index) {
			let str = index === 0 ? '名医专家' : (index === 1 ? '科研专家' : '权威机构')
			md.sensorLogTake({
				xcxClick: "首页-二屏页面点击",
				pageName: "首页-二屏",
				buttonName: str + "tab按钮点击",
			});
			md.sensorComponentLogTake({
				xcxComponentClick: "true",
				xcxComponentExposure: "true",
				pageName: "首页",
				componentName: "专家团",
				componentContent: '专家团tab切换-' + str
			});

			this.etTabSelIndex = index;
		},
		onETMore(index, type) {
			let str = '';
			if (type === 0) {
				str = '名医专家';
			} else if (type === 1) {
				str = '科研专家';
			} else {
				str = '权威机构';
			}
			if (index === 1) {
				str += '内容'
			} else {
				str += '点击查看更多';
			}
			md.sensorLogTake({
				xcxClick: "首页-二屏页面点击",
				pageName: "首页-二屏",
				buttonName: str + "-点击",
			});
			md.sensorComponentLogTake({
				xcxComponentClick: "true",
				pageName: "首页",
				componentName: "专家团",
				componentContent: str
			});
			jump({
				type: 1,
				url: '/pages/expertTeamPage/expertTeamPage?tab=' + (this.etTabSelIndex + 1)
			});
		},
		closeImagePopup() {
			this.$refs.imagePopup.close();
			// 设置图片弹窗为不可见状态
			this.isImagePopupVisible = false;
		},

		imagePopupJump() {
			md.sensorPopLogTake({
				xcxPopClick: "true",
				toolName: "首页",
				popName: this.popupImageObj.title || "北纬47°鲜活溯源之旅",
				buttonName: this.popupImageObj.btnName || "立即寻宝"
			});
			jump({
				type: this.popupImageObj.jumpType || this.popupImageObj.jumpExtra?.type,
				url: this.popupImageObj.jumpUrl,
				extra: this.popupImageObj.jumpExtra
			});
		},
		showImagePopup() {
			md.sensorPopLogTake({
				xcxPopExposure: "true",
				toolName: "首页",
				popName: this.popupImageObj.title || "北纬47°鲜活溯源之旅"
			});
			this.$refs.imagePopup.open('center');
			// 设置图片弹窗为可见状态
			this.isImagePopupVisible = true;
		},
		closePop1() {
			this.$refs.imagePopup.close();
			// 设置图片弹窗为不可见状态
			this.isImagePopupVisible = false;
		},

		// 重置弹窗状态（可在需要时调用）
		resetPopupState() {
			this.homeStore.resetPopupState(); // 重置 store 中的弹窗状态
		},

		// 检查并显示弹窗（使用 store 全局状态管理）
		checkAndShowPopup() {
			// 使用 store 中的 hasShownPopup 来记录是否已经显示过弹窗
			if (!this.homeStore.hasShownPopup && this.homeStore.homeInfo?.showPop1) {
				this.homeStore.markPopupAsShown(); // 标记已显示过弹窗（全局状态）
				this.$nextTick(() => {
					setTimeout(() => {
						this.showImagePopup();
					}, 500);
				});
			}
		},

		// 悬浮图片拖拽相关方法
		onTouchStart(e) {
			this.isDragging = false;
			this.touchStartX = e.touches[0].clientX;
			this.touchStartY = e.touches[0].clientY;
		},

		onTouchMove(e) {
			// 防止触发页面滚动
			e.stopPropagation();

			// 判断是否为拖拽操作
			const deltaX = Math.abs(e.touches[0].clientX - this.touchStartX);
			const deltaY = Math.abs(e.touches[0].clientY - this.touchStartY);

			// 如果移动距离超过10px，则认为是拖拽
			if (deltaX > 10 || deltaY > 10) {
				this.isDragging = true;

				// 获取窗口尺寸
				const windowWidth = wx.getSystemInfoSync().windowWidth;
				const windowHeight = wx.getSystemInfoSync().windowHeight;

				// 计算新位置（限制在窗口范围内）
				let newLeft = e.touches[0].clientX - 37.5; // 37.5是75的一半
				let newTop = e.touches[0].clientY - 37.5;

				// 限制在窗口范围内
				newLeft = Math.max(0, Math.min(newLeft, windowWidth - 75));
				newTop = Math.max(0, Math.min(newTop, windowHeight - 75));

				// 更新位置
				this.floatIconPosition.left = newLeft;
				this.floatIconPosition.top = newTop;
			}
		},

		onTouchEnd() {
			// 拖拽结束后的处理
		},

		// 悬浮图片点击事件
		onfloatIconClick() {
			// 如果正在拖拽，则不触发点击事件
			if (!this.isDragging) {
				// 记录点击日志
				md.sensorComponentLogTake({
					xcxComponentClick: "true",
					pageName: "首页",
					componentName: "悬浮图片",
					componentContent: "点击悬浮图片"
				});

				if (this.floatIcon.videoUrl) {
					// 播放视频
					this.currentVideoUrl = this.floatIcon.videoUrl.indexOf('http') === -1 ? this.$baseUrl + this.floatIcon.videoUrl : this.floatIcon.videoUrl;
					this.showVideo = true;
					return;
				} else if (this.floatIcon.link) {
					// 执行跳转
					jump(this.floatIcon.link);
				}
			}
		}
	}
}
</script>

<style lang="less" scoped>
@import '@/common.less';

.home-container {
	width: 100vw;
	overflow-x: hidden;
	background-color: white;
	position: relative;

	// 可拖拽悬浮图片样式
	.floating-image-container {
		position: fixed;
		width: 75px;
		height: 75px;
		z-index: -1;
		z-index: 999;
		touch-action: none; // 禁止默认触摸行为
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.9);
		// box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 5px;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}
	}

	.floating-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.content {
		background-color: white;
		padding-bottom: 200rpx;

		.banner {
			height: 1116rpx;

			.banneritem {
				width: 750rpx;
				height: 1116rpx;

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

		.swiper-mask {
			position: absolute;
			left: 0;
			width: 750rpx;
			height: 192rpx;
			z-index: 1;
			top: 927rpx;

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

		// 自定义banner指示器样式
		.custom-banner-indicator {
			position: absolute;
			top: 1083rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
			z-index: 1;

			.banner-dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #feebc4;
				transition: all 0.3s ease;
				flex-shrink: 0;

				&.active {
					width: 40rpx;
					height: 16rpx;
					border-radius: 8rpx;
					background-color: #D3A358;
				}
			}
		}

		.barbox {
			position: absolute;
			top: 97rpx;
			left: 32rpx;
			display: flex;
			align-items: center;

			.btnlogo {
				width: 184rpx;
				height: 66rpx;
			}

			.btnsearch {
				width: 150rpx;
				height: 68rpx;
				margin-left: 20rpx;
			}

			.customer-btn-wrap {
				position: relative;
				display: inline-block;
			}

			.btncustomer {
				width: 70rpx;
				height: 68rpx;
				margin-left: 110rpx;
			}

			.phone-auth-btn-cover {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background: transparent;
				opacity: 0;
				border: none;
				padding: 0;
				margin: 0;
				z-index: 10;
				pointer-events: auto;
			}
		}

		// .txtbox {
		// 	width: 100%;
		// 	height: 76rpx;
		// 	background-color: @color-white-soft;
		// 	text-align: center;

		// 	.txtlink {
		// 		color: @color-gold-cover;
		// 		font-size: 24rpx;
		// 		text-underline-offset: 10rpx;
		// 		text-decoration: underline;
		// 	}

		// 	.icon_arrow_yellow {
		// 		width: 12rpx;
		// 		height: 20rpx;
		// 		margin-left: 10rpx;
		// 	}
		// }

		.tools_box {
			width: 750rpx;
			height: 840rpx;
			margin-top: 40rpx;
			overflow-x: scroll;
			padding-left: 38rpx;

			.tools_maintitle {
				// font-size: 42rpx;
				// color: #000;
				color: @color-black-deep;
				font-size: 38rpx;
				font-weight: bold;
			}

			.tools_subtitle {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}

			.tool_swiper {
				margin-top: 35rpx;
				width: 720rpx;
				height: 700rpx;
				overflow: visible;
				/* 关键：允许内容溢出 */

				.swiperItem {
					width: 400rpx;
					height: 700rpx;
					top: 40rpx;
				}

				/* 当前激活项放大 */
				.swiperItem.active {
					top: 0rpx !important;
					z-index: 10;
					transition: top 0.4s ease;
				}

				.tool {
					position: absolute;
					width: 400rpx;
					height: 700rpx;

					.sq_btn {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 400rpx;
						height: 650rpx;
						// background-color: red;
						opacity: 0;
						z-index: 2;
					}

					.tool_bg {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 400rpx;
						height: 650rpx;
						border-radius: 40rpx;
						z-index: 1;
					}

					.tool_icon {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 400rpx;
						pointer-events: none;
						height: 470rpx;
						z-index: 1;
						border-radius: 40rpx;
					}

					.tool_jt {
						position: absolute;
						left: 300rpx;
						top: 510rpx;
						width: 74rpx;
						pointer-events: none;
						height: 44rpx;
					}

					.tool_title {
						position: absolute;
						left: 30rpx;
						top: 510rpx;
						pointer-events: none;
						color: #000;
						font-size: 36rpx;
						width: 300rpx;
						font-weight: bolder;
						z-index: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						word-break: break-all;
						max-width: 7em;

					}

					.tool_context {
						position: absolute;
						left: 30rpx;
						top: 575rpx;
						font-size: 24rpx;
						color: #999;
						width: 300rpx;
						pointer-events: none;
						z-index: 2;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 1.5;
						max-height: 3em;

					}
				}
			}


			/* 自定义指示点样式 */
			.custom-indicator {
				width: 200rpx;
				height: 10rpx;
				margin-top: -15rpx;
				margin-left: -20rpx;
				display: flex;
				justify-content: center;
				gap: 10rpx;
			}

			.indicator-dot {
				width: 10rpx;
				height: 10rpx;
				border-radius: 10rpx;
				background-color: #feefcc;
				transition: all 0.3s;
			}

			.indicator-dot.active {
				width: 70rpx;
				border-radius: 10rpx;
				background-color: #d3a358;
			}
		}

		.et_box {
			width: 750rpx;
			// height: 840rpx;
			margin-top: 30rpx;
			padding-left: 38rpx;

			.et_maintitle {
				// font-size: 42rpx;
				// color: #000;
				color: @color-black-deep;
				font-size: 38rpx;
				font-weight: bold;
			}

			.et_subtitle {
				width: 700rpx;
				margin-top: 10rpx;
				display: flex;

				.txtlink {
					width: 500rpx;
					color: @color-gold-cover;
					font-size: 24rpx;
					text-underline-offset: 5rpx;
					text-decoration: underline;
				}

				.icon_more {
					width: 140rpx;
					height: 36rpx;
					margin-left: 45rpx;
					margin-top: 2rpx;
				}
			}

			.et_main_box {
				padding-top: 30rpx;
				margin-top: 35rpx;
				width: 670rpx;
				height: 602rpx;
				background-color: #fde8bb;
				border-radius: 38rpx;

				.et_con_bg {
					margin-left: 3rpx;
					width: 651rpx;
					height: 562rpx;
					background-color: #ffffff;
					border-radius: 38rpx;
					padding-left: 15rpx;
					padding-top: 25rpx;

					.et_tab_box {
						height: 70rpx;
						display: flex;
						gap: 15rpx;

						.tab_box {
							width: 204rpx;
							height: 70rpx;

							.et_tab {
								width: 204rpx;
								height: 70rpx;
							}
						}
					}

					.et_con_box {
						width: 631rpx;
						height: 365rpx;
						margin-top: 40rpx;

						.et_con1 {
							width: 631rpx;
							height: 365rpx;
						}

						.et_con2 {
							width: 631rpx;
							height: 365rpx;
						}

						.et_con3 {
							width: 598rpx;
							height: 303rpx;
							margin-top: 20rpx;
							margin-left: 16rpx;
						}
					}

					.et_more_txt {
						width: 100%;
						font-size: 24rpx;
						color: @color-gold-cover;
						text-align: center;
						margin-top: 30rpx;

						.icon_arrow_yellow {
							width: 12rpx;
							height: 20rpx;
							margin-left: 5rpx;
						}
					}
				}
			}
		}

		.cardScroller {
			width: 750rpx;
			overflow-x: scroll;
		}

		.cardbox {
			// 
			position: relative;
			display: inline-flex;
			flex-wrap: nowrap;
			margin-top: 32rpx;

			.cardboxitem {
				width: 380rpx;
				height: 232rpx;
				position: relative;
				margin-left: 32rpx;

				.bg {
					width: 380rpx;
					height: 232rpx;
					position: absolute;
					z-index: 0;

				}

				.level {
					position: absolute;
					left: 24rpx;
					top: 30rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: @color-gold-cover;
					pointer-events: none;
				}

				.subTitle {
					position: absolute;
					left: 24rpx;
					top: 80rpx;
					font-size: 24rpx;
					color: @color-black-deep;
					pointer-events: none;
				}

				.showCornerTxt {
					position: absolute;
					right: 0;
					top: 0;
					color: white;
					font-size: 24rpx;
					padding: 10rpx;
					border-radius: 0 10rpx 0 10rpx;
					background-color: @color-gold-main;
				}

				.cardbtn {
					position: relative;
					left: 6rpx;
					top: 130rpx;

					.phone-auth-btn-cover {
						position: absolute;
						width: 368rpx;
						height: 88rpx;
						z-index: 0;
						left: 0;
						top: 0;
						opacity: 0;
						pointer-events: auto;

					}

					.cardbtnbg {
						position: absolute;
						width: 368rpx;
						height: 88rpx;
						z-index: 0;
						left: 0;
						top: 0;
					}

					.btnTitle {
						position: absolute;
						// z-index: 1;
						width: 180rpx;
						text-align: center;
						font-size: 24rpx;
						color: white;
						// border: 1px solid red;
						top: 23rpx;
						left: 20rpx;
					}

					.btnSubTitle {
						position: absolute;
						top: 23rpx;
						// z-index: 1;
						font-size: 24rpx;
						font-weight: bold;
						color: @color-gold-light;
						left: 210rpx;
					}
				}
			}
		}

		.contentbox {
			width: 750rpx;
			height: 1429rpx;
			position: relative;
			margin-top: 32px;

			.contentbg {
				width: 100%;
				height: 100%;
				position: absolute;
			}

			.contentitem {
				position: absolute;
			}

		}

		.channelbox {
			margin-top: 32rpx;
			margin-left: 32rpx;

			.maintitle {
				color: @color-black-deep;
				font-size: 38rpx;
				font-weight: bold;
				display: block;
				margin-left: 5rpx;
			}

			.subtitle_box {
				display: flex;
				margin-top: 10rpx;
				margin-left: 5rpx;
				width: 700rpx;

				.subtitle {
					width: 500rpx;
					color: @color-black-deep;
					font-size: 24rpx;
				}

				.icon_more {
					width: 127rpx;
					height: 34rpx;
					margin-left: 45rpx;
					margin-top: 2rpx;
				}
			}



			.listbox {
				display: flex;
				margin-top: 20rpx;
				width: 686rpx;
				align-content: center;
				justify-content: space-between;

				.tabitem {
					color: @color-black-deep;
					background-color: #e9edf1;
					padding: 15rpx 20rpx;
					font-size: 22rpx;
					// margin-right: 15rpx;
					border-radius: 30rpx;
				}

				.tabActive {
					color: white;
					background-color: @color-gold-main;
				}
			}

			.channelscroll {
				width: 718rpx;
				// overflow-y: scroll;
				margin-top: 32rpx;
				// height: 620rpx;

				.box {
					display: flex;
					flex-direction: column;

					.infobox {
						width: 670rpx;
						height: 180rpx;
						display: flex;
						align-items: center;
						background-color: #fff;
						border-radius: 16rpx;
						border: 2rpx solid #feeecb;
						margin-bottom: 20rpx;

						.infoimg {
							border-radius: 12rpx 0rpx 0rpx 12rpx;
							-webkit-flex-shrink: 0;
							flex-shrink: 0;
							height: 180rpx;
							/* margin-top: -1rpx ; */
							width: 180rpx;
						}

						.infotitlebox {
							flex: 1;
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;

							.infotitlecon {
								display: flex;
								flex-direction: row;

								.infotitle {
									color: @color-black-deep;
									width: 400rpx;
									font-size: 24rpx;
									font-weight: bold;
									margin-bottom: 8rpx;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									-webkit-box-orient: vertical;
									overflow: hidden;
									line-height: 1.3;
								}

								.infotitletag {
									width: 46rpx;
									height: 22rpx;
									color: #fff;

								}
							}



							.infodesc {
								color: #999999;
								font-size: 22rpx;
								width: 450rpx;
								line-height: 1.3;
								display: -webkit-box;
								-webkit-line-clamp: 3;
								-webkit-box-orient: vertical;
								overflow: hidden;
							}
						}



					}
				}

			}

			.channelscroll2 {
				width: 718rpx;
				margin-top: 32rpx;
				margin-left: -16rpx;

				.box2 {
					width: 718rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.infobox2 {
						width: 330rpx;
						height: 430rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						background-color: #fff;
						border-radius: 16rpx;
						border: 4rpx solid #feeecb;
						margin-bottom: 20rpx;
						position: relative;

						.infoimg2 {
							width: 330rpx;
							height: 306rpx;
							border-radius: 12rpx 12rpx 0rpx 0rpx;
							flex-shrink: 0;
						}

						.infotitle2box {
							margin-top: 10rpx;
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;
							width: 100%;
							padding: 0 10rpx;

							.infotitle2 {
								color: @color-black-deep;
								width: 90%;
								font-size: 24rpx;
								font-weight: bold;
								margin-bottom: 8rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								line-height: 1.3;
								text-align: left;
								margin-left: 5%;
							}
						}
					}
				}
			}


			.desc {

				color: @color-black-deep;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 32rpx;

				.desc1 {
					color: @color-gold-cover;
					margin-left: 5rpx;
				}
			}

			.desc2 {
				padding-bottom: 32rpx;
			}
		}

		.bottomlink {
			width: 750rpx;
			height: 247rpx;

			.bottombg {
				width: 750rpx;
				height: 247rpx;
				position: absolute;
			}

			.box {
				position: relative;
				top: 100rpx;
				width: 74%;
				left: 13%;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.icon {}

			}
		}

	}

	.popup-content {
		width: 750rpx;
		height: 812rpx;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;
		position: relative;

		.btnclose {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 36rpx;
			right: 32rpx;
		}

		.xingmahui {
			width: 750rpx;
			height: 100%;
			position: absolute;
			bottom: 0;
		}

		.title {
			position: absolute;
			top: 47rpx;
			left: 32rpx;
			font-size: 36rpx;
			color: @color-black-deep;
			font-weight: bold;

		}

		.desc {
			position: absolute;
			top: 108rpx;
			left: 32rpx;
			font-size: 28rpx;
			color: @color-black-medium;
			font-weight: bold;

		}

		.qrcode {
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			top: 220rpx;
			left: 205rpx;
		}

		.btndownload {
			width: 286rpx;
			height: 89rpx;
			position: absolute;
			top: 630rpx;
			left: 232rpx;
		}
	}

	.video-popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.close-btn-bottom {
		margin: 32rpx auto 0 auto;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 44rpx;
		line-height: 64rpx;
		text-align: center;
		z-index: 10001;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.phone-auth-mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	.phone-auth-popup {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 32rpx;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.phone-auth-btn {
		background: #ffd700;
		color: #333;
		font-size: 32rpx;
		border-radius: 8rpx;
		padding: 20rpx 60rpx;
		margin-bottom: 20rpx;
	}

	.close-btn {
		font-size: 40rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.image-popup-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		position: relative;

		.popup-image {
			width: 680rpx;
			height: 940rpx;
			border-radius: 16rpx;
			object-fit: cover;
		}

		.popup-close-btn {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			bottom: -120rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 10;
		}
	}
}

/* 能不能吃模块样式 */
.can-eat-module {
	background-color: #fff7e6;
	margin: 30rpx;
	padding: 40rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.can-eat-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #000000;
	margin-bottom: 20rpx;
}

.can-eat-question {
	font-size: 28rpx;
	color: #999999;
	margin-bottom: 30rpx;
	line-height: 44rpx;
}

.can-eat-buttons {
	display: flex;
	justify-content: space-between;
}

.can-eat-btn {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	margin: 0 10rpx;
	background-color: #fff;
	border: 1px solid #B27C1E;
	border-radius: 30rpx;
	color: #B27C1E;
	font-size: 28rpx;
}

.can-eat-btn:active {
	background-color: #ffe6cc;
}

/* 已答题状态显示区域样式 */
.can-eat-answer-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.answer-status {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.user-answer {
	width: 100%;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	border-radius: 30rpx;
	border: 2rpx solid;
}

.user-answer.correct {
	background-color: #E8F5E8;
	color: #4CAF50;
	border-color: #4CAF50;
}

.user-answer.incorrect {
	background-color: #FFEBEE;
	color: #F44336;
	border-color: #F44336;
}

.correct-answer {
	width: 100%;
	text-align: center;
	padding: 20rpx 0;
	background-color: #B27C1E;
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 30rpx;
}

.analysis-link {
	font-size: 28rpx;
	color: #B27C1E;
	margin-top: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: underline;
}

/* 金币动画样式 */
.gold-coin-animation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	animation: fadeIn 0.3s ease-out;
}

.gold-coin-content {
	text-align: center;
	padding: 60rpx 40rpx;
}

.gold-coin-title {
	font-size: 44rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	animation: slideUp 0.5s ease-out;
}

.gold-coin-description {
	font-size: 32rpx;
	color: #ffd700;
	margin-bottom: 40rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	animation: slideUp 0.7s ease-out;
}

.gold-coin-container {
	position: relative;
	width: 300rpx;
	height: 300rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gold-coin {
	position: absolute;
	width: 167rpx;
	height: 162rpx;
	animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.gold-coin-1 {
	animation: goldCoinFly 1.5s ease-out 1;
	z-index: 5;
}

/* 缓动动画关键帧 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(50rpx);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 单个金币从中间飞向底部导航"我的"图标的动画 - 自然延续的曲线波动 */
@keyframes goldCoinFly {
	0% {
		transform: translate(0, 0) scale(1.3) rotate(0deg);
		opacity: 1;
		left: 50%;
		top: 50%;
	}

	20% {
		transform: translate(100rpx, 120rpx) scale(1.25) rotate(10deg);
		opacity: 1;
		left: 50%;
		top: 50%;
	}

	40% {
		transform: translate(160rpx, 280rpx) scale(1.2) rotate(15deg);
		opacity: 1;
		left: 50%;
		top: 50%;
	}

	60% {
		transform: translate(190rpx, 380rpx) scale(1.1) rotate(25deg);
		opacity: 0.95;
		left: 50%;
		top: 50%;
	}

	70% {
		transform: translate(200rpx, 420rpx) scale(0.9) rotate(30deg);
		opacity: 0.8;
		left: 50%;
		top: 50%;
	}

	80% {
		transform: translate(208rpx, 460rpx) scale(0.7) rotate(38deg);
		opacity: 0.6;
		left: 50%;
		top: 50%;
	}

	90% {
		transform: translate(215rpx, 500rpx) scale(0.3) rotate(42deg);
		opacity: 0.3;
		left: 50%;
		top: 50%;
	}

	100% {
		transform: translate(220rpx, 550rpx) scale(0) rotate(45deg);
		opacity: 0;
		left: 50%;
		top: 50%;
	}
}
</style>