<template>
	<view class="home-container" @scroll="onPageScroll">
		<view class="content">
			<swiper id="firstScreen" class="swiper banner" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration" :indicator-color="indicatorColor"
				:indicator-active-color="indicatoractiveColor">
				<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="$baseUrl + item.url">
						</image>
					</view>
				</swiper-item>
			</swiper>
			<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 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 class="channelbox" id="thirdScreen">
				<text class="maintitle">有声频道</text>
				<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
				<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="channelscroll">
					<view class="box">
						<view class="infobox" :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="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
							<view class="infotitle">{{ infoItem.desc }}</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 class="channelbox">
				<text class="maintitle">育儿智库</text>
				<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
				<view class="channelscroll">
					<view class="box">
						<view class="infobox" :key="index" v-for="(infoItem, index) in childrenInfoList" :data-log="{
							xcxClick: '首页-三屏页面点击',
							pageName: '首页-三屏',
							buttonName: `次位内容资源位-轮播-${index + 1}`
						}" @tap="jumpLink(infoItem.link, false, false, $event)">
							<image class="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
							<view class="infotitle2">
								<view class="infotitle">{{ infoItem.desc }}</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 id="fourthScreen" class="bottomlink">
				<image class="bottombg" :src="$baseUrl + 'homepage/bottombg.png'"></image>
				<view class="box">
					<image class="icon" v-for="(icon, index) in bottomLinkList" :key="index" :data-log="{
						xcxClick: '首页-四屏页面点击',
						pageName: '首页-四屏',
						buttonName: `${qrNameList[index]}`
					}" :src="$baseUrl + icon.bgUrl" :style="icon._style" @tap="showPopup(index, $event)"></image>
				</view>
			</view>
		</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>
		<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" />
	</view>
</template>


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

// 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',
			statusBarHeight: 38,
			showRegisterLayer: false,
			swiperList: [],
			indicatorDots: true,
			autoplay: true,
			interval: 4000,
			duration: 500,
			indicatoractiveColor: "#a6a0a1",
			indicatorColor: "rgba(255, 255, 255, 1)",
			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,
		}
	},
	components: {
		RegisterLayer
	},
	computed: {
		homeStore() {
			return useHomeStore();
		}
	},
	props: {
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	watch: {
		homeStore: {
			handler(newVal) {
				this.showRegisterLayer = this.isClickPhoneAuth && newVal.isLogin && !newVal.babyExistence;
				if (newVal.homeInfo !== null) {
					this.initHomeInfo();
				}
			},
			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);
		});
	},
	methods: {
		async initHomeInfo() {
			const { data } = await fetchHomeJSON();
			if (data) {
				this.swiperList = data.swiperList;
				this.vipConfigList = data.vipConfigList;
				// this.vipCardList = data.vipCardList;
				this.contentImgList = data.contentImgList;
				this.channelTabList = data.channelTabList;
				this.changelInfoList = data.changelInfoList;
				this.childrenInfoList = data.childrenInfoList[0] || [];
				this.bottomLinkList = data.bottomLinkList;
				this.qrInfoList = data.qrInfoList || [];
				this.vipCardList = data.vipCardList;
				this.voiceStory = data.voiceStory;
				this.suggest = data.suggest;
				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];
				}
			}
		},
		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) {
			md.sensorLogTake({
				xcxClick: '首页-首屏页面点击',
				pageName: '首页-首屏',
				buttonName: `第${index + 1}张焦点图-入口`,
			});
			if (item.link) {
				// 有 link，执行跳转
				jump(item.link);
			} else {
				// 没有 link，预览图片
				uni.previewImage({
					urls: [this.$baseUrl + item.url], // 预览当前图片
					current: this.$baseUrl + 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 (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);
			}
			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);
		},
		closePop() {
			this.$refs.popup.close();
		},
		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();
			}
		}
	}
}
</script>

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

.home-container {
	background-color: white;

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

		.banner {
			height: 1250rpx;

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

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

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

		.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 {
				color: @color-black-deep;
				font-size: 24rpx;
				margin-top: 10rpx;
				margin-left: 5rpx;
			}

			.listbox {
				display: flex;
				margin-top: 10rpx;
				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-x: scroll;
				margin-top: 32rpx;

				// margin-left: -32rpx;
				.box {
					display: flex;

					.infobox {
						margin-left: 15rpx;

						.infoimg {
							width: 400rpx;
							height: 372rpx;
						}

						.infoimg2 {
							width: 400rpx;
							height: 400rpx;
						}

						.infotitle {
							width: 350rpx;
							color: @color-black-deep;
							font-size: 30rpx;
							text-align: left;
							margin-left: 25rpx;
							font-weight: bold;
						}

						.infotitle2 {
							margin-top: -10rpx;
							width: 400rpx;
							background-color: @color-gray-light;
							border-bottom-left-radius: 20rpx;
							border-bottom-right-radius: 20rpx;

							.infotitle {
								padding-top: 10rpx;
								padding-bottom: 10rpx;
							}
						}
					}
				}

			}

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