<template>
	<page-container :title="title" :showBack="true">
		<view class="content minHeight100">
			<view class="header relative" v-if="pageData && pageData.goods"
				:style="{ background: 'url(' + pageData.goods.imgurl_detail + ') no-repeat 0 0 / 100% 100%' }">
				<view class="header-wuzhe flex" v-if="pageData.goods.is_shou_zhe == 1">
					<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
				</view>
				<view class="header-goodsTitel">{{ pageData.goods.title }}</view>
				<view class="header-suoxiang center"
					v-if="pageData.goods.lock_is == 1 && pageData.lock_info.goods_lock_surplus_time > 0">
					<image :src="pageData.lock_info.goods_lock_user_headimg" mode="aspectFill"></image>
					<view class="hidden ml10">{{ pageData.lock_info.goods_lock_user_nickname }}</view>
					<image class="ml20" :src="$img1('index/suoxinag.png')" mode="aspectFit"></image>
					<view class="ml30">倒计时：{{ secNum }}S</view>
				</view>
				<view class="header-title center">
					<text>
						<template></template>
					</text>
					<text>
						<template>￥</template>
						<template>{{ pageData.goods.price }}</template>
					</text>
					<text>
						<template>/抽</template>
					</text>
				</view>
				<!-- <view class="header-canyu row align-center"> -->
					<!-- <view class="header-canyu-imgs flex">
						<image v-for="(item, i) in pageData.goods.join_user.slice(0, 3)" :key="i"
							:style="{ 'z-index': i }" :src="item" mode="aspectFill"></image>
					</view> -->
					<!-- 隐藏参与次数显示 -->
					<!-- <view class="header-canyu-num">已有{{ pageData.goods.join_count }}次参与</view> -->
				<!-- </view> -->
				<view class="header-shoucang justify-center" style=" flex-direction: column; margin-right: 48rpx;"
					@tap="toggleCollect">
					<image :src="pageData.goods.collection_is ? $img1('index/sc1.png') : $img1('index/sc2.png')">
					</image>
					<text>收藏</text>
				</view>

				<view
					style="width: 100%; height: 232rpx; position: absolute; bottom: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));">
				</view>
			</view>
			<!--选项卡-->
			<detail-toolbar v-if="goods != null" :goods-type="goods.type" :current-tab="tabCur"
				@rule-click="$refs.rulePop.getRule(pageData.danye_id, '购买说明')" @tab-change="tabChange"
				:isWuxian="true"></detail-toolbar>
			<detail-wuxian-lingzhu v-if="goods != null && goods.lingzhu_is == 1" :goods-num="0" :goods="goods">
			</detail-wuxian-lingzhu>
			<detail-wuxian-rage v-if="pageData && pageData.goods.rage_is == 1"
				:page-data="pageData"></detail-wuxian-rage>

			<!-- 商品预览 -->
			<view v-if="tabCur == 1 && pageData" class="list" style="padding: 0rpx 20rpx 0;">
				<view class="list-item common_bg mb30" v-for="(item, i) in pageData.goodslist" :key="i">
					<view class="list-title common_bg align-center">
						<view class="align-center">
							<image style="width: 56rpx; height: 56rpx;" :src="item.shang_imgurl"></image>
							<text class="ml20" style="color: #999999;">{{ item.pro }}</text>
						</view>
					</view>
					<view class="goods-list justify-center">
						<detail-list-item v-for="(a, b) in item.goods_list" :key="b" :item="a"
							@click="previewDetail(item, a)">
							<template #content>
								<view class="item-info">
									<view class="item-title hang1">
										<text>{{ a.title }}</text>
									</view>
									<view class="item-price">
										<text>售价:<text style="font-size: 22rpx;">{{ a.price }}</text></text>
									</view>
									<view style="height: 8rpx;"></view>
								</view>
							</template>
						</detail-list-item>
					</view>
				</view>
				<view style="height: 150rpx;"></view>
			</view>
			<!-- 中赏记录 -->
			<template v-if="tabCur == 2">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog"
					:down="downOption" :up="upOption">
					<scroll-view class="sub-tab" scroll-x>
						<view class="sub-tab-item common_bg" v-for="(item, i) in subTab" :key="i"
							:class="{ act: subTabCur == i }" @click="subTabChange(i)">
							{{ item.shang_title }}
						</view>
					</scroll-view>

					<view class="log-list">
						<view class="log-item br10" v-for="(a, b) in logList" :key="b">
							<!-- 添加角标 -->
							<view class="corner-tag" v-if="a.doubling > 1"></view>
							<view class="lingzhu-tag" v-if="a.is_lingzhu > 0"></view>

							<view class="avatar">
								<image :src="a.user_info && a.user_info.headimg" style="width:80rpx; height: 80rpx;">
								</image>
							</view>

							<view class="info">
								<view class="name hang1">
									{{ a.user_info && a.user_info.nickname }}
								</view>

								<view class="time">{{ a.addtime }}</view>
							</view>

							<view class="prize">

								<view class="pic flex">
									<image class="img100" :src="a.goodslist_imgurl"></image>
								</view>
								<view class="align-end column">
									<view style="display: flex; align-items: center;">

										<view class="center log-tag" :style="{ background: a.shang_color }">{{
											a.shang_title
										}}
										</view>
										<view v-if="a.doubling > 1" class="center multiple-tag" style="">x{{
											a.doubling }}</view>
									</view>
									<view class="align-center mt10">
										<view class="title hang1">
											{{ a.goodslist_title }}
										</view>
										<view class="num">×1</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</mescroll-body>
			</template>

			<!-- 选项按钮 冲一发-->
			<detail-button v-if="pageData" :pageData="pageData" :isWuxian="true"
				@button-click="confirmSubmit"></detail-button>

			<!-- 抽奖结果 -->
			<detail-results ref="resPop" @to-bag="toBag" @continue-draw="confirmSubmit([0, buyNum])">
			</detail-results>

			<uni-popup ref="dPop" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
				<view v-if="previewData" class="d-pop">
					<view class="pic center relative">
						<image :src="previewData.imgurl" lazy-load></image>
						<view class="flex center">{{ previewData.shang_title }}</view>
					</view>
					<view class="title">
						<text class="hang1">
							{{ previewData.title }}
						</text>
					</view>
					<view class="d-list">
						<view class="d-item">
							<!-- {{ previewData.shang_title }} -->
							概率:{{ previewData.pro }}%
						</view>

						<view class="d-item">产品类型:{{ optData.type_text }}</view>
					</view>
					<view class="close icon" @click="close('dPop')">
						<image :src="$img('/static/img/close.png')" lazy-load></image>
					</view>
				</view>
			</uni-popup>
			<!-- 购买确认弹窗 -->
			<order-confirm-popup ref="buyPop" v-if="orderData" :order-data="orderData" :page-data="pageData"
				:use-money="useMoney" :use-money2="useMoney2" :use-integral="useIntegral" :coupon-data="couponData"
				:is-agree="isAgree" :send-rule-data="sendRuleData" :buy-num="buyNum" @close="close('buyPop')"
				@change-pay="changePay" @toggle-agree="isAgree = !isAgree" @to-coupon="toCoupon"
				@confirm="$c.noDouble1(confirmSubmit, [1, buyNum])" :effect-switch="effectSwitch"
				@on-effect-switch="onEffectSwitch"></order-confirm-popup>

			<view v-if="aniShow" class="ani-pop">
				<image :src="aniSrc" lazy-load></image>
			</view>

			<buy-notice ref="buyNotice" @confirm="$c.noDouble(confirmSubmit, [1, buyNum, true])"></buy-notice>

			<rule-pop ref="rulePop"></rule-pop>
			<coupon-pop ref="couponPop"></coupon-pop>
			<!-- 添加直接引用的预览组件 -->
			<detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
		</view>


		<!-- 使用抽取的老虎机组件 -->
		<DetailLucky ref="detailLucky" @end="onLuckyEnd" />

		<PayDialog ref="payDialog" />
	</page-container>
</template>

<script>
	import PageContainer from '@/components/page-container/page-container.vue'
	import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
	import DetailListItem from '@/components/detail-list-item/detail-list-item.vue'
	import DetailButton from '@/components/detail-button/detail-button.vue'
	// 导入预览组件和方法
	import DetailPreviewPopup from '@/components/detail-preview-popup/detail-preview-popup.vue'
	import preview from '@/components/detail-preview-popup/index.js'
	import DetailWuxianLingzhu from '@/components/detail-wuxian-lingzhu/detail-wuxian-lingzhu.vue'
	import DetailWuxianRage from '@/components/detail-wuxian-rage/detail-wuxian-rage.vue'
	// 导入抽取的抽奖组件
	import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
	//超神特效

	import PayDialog from '@/components/pay-dialog/pay-dialog.vue'
	import {
		sleep
	} from '@/common/util'
	import DetailResults from '@/components/detail-results/detail-results.vue'
	import {
		getInfiniteGoodsDetail
	} from '@/common/server/goods'
	import {
		calcInfiniteOrderMoney,
		createInfiniteOrder,
		getInfinitePrizeOrderLog,
		getInfinitePrizeOrderLogByNum,
		useItemCard
	} from '@/common/server/order'
	import {
		toggleCollection
	} from '@/common/server/collection'
	export default {
		components: {
			PageContainer,
			OrderConfirmPopup,
			DetailListItem,
			DetailButton,
			DetailPreviewPopup,
			DetailWuxianLingzhu,
			DetailWuxianRage, // 注册新组件
			DetailLucky,
			PayDialog,
			DetailResults
		},
		data() {
			return {
				userCoupon: null,
				optData: '',
				title: '',
				buyNum: 0,
				useMoney: true,
				useIntegral: true,
				useMoney2: true,
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: false,
					page: {
						size: 15 // 每页数据的数量,默认10
					}
				},
				tabList: {
					1: {
						title: '包含以下赠品'
					},
					2: {
						title: '中赏记录'
					}
				},
				tabCur: 1,
				swCur: 0,
				autoplay: false,
				subTab: [],
				subTabCur: 0,
				pageData: '',
				previewData: '',
				orderData: '',
				prizeData: '',
				sendRuleData: '',
				couponData: '',
				isAgree: true,
				aniShow: false,
				logList: [],
				choujiangloading: false,
				goods: null,
				productList: [],
				isPrizeLoading: false, // 是否显示抽奖loading
				effectSwitch: false, // 特效开关
			}
		},

		computed: {
			reChooseNum() {
				if (!this.prizeData || this.prizeData.data.length <= 0) {
					return 0
				}

				const arr = this.prizeData.data.filter(item => item.isChoose)
				console.log(arr.length)

				return arr.length
			},
			getGoodList() {
				if (this.pageData?.goods_list?.data == null) {
					return [];
				}
				return this.pageData.goods_list.data;
			}
		},

		onShareAppMessage() {

			if (this.$refs["couponPop"] != null) {
				var co = this.$refs["couponPop"].getfengxiaodata();
				if (co != null) {
					console.log(co);
					return co;
				}
			}

			// 使用小写 id，兼容新版 .NET API
			const userinfo = uni.getStorageSync('userinfo') || {};
			const pid = userinfo.id || userinfo.ID || '';
			return {
				title: this.$config.getAppSetting("app_name") + `${this.pageData.goods.title}系列`,
				imageUrl: this.pageData.goods.imgurl_detail,
				path: '/pages/shouye/detail_wuxian' +
					this.$c.qs({
						goods_id: this.pageData.goods.id,
						goods_num: this.pageData.goods.num,
						pid: pid
					})
			}
		},

		onLoad(options) {
			this.optData = options;
			console.log(options);
			uni.$on('chooseCoupon', data => {
				// console.log('data', data)
				this.couponData = data
				this.confirmSubmit([0, this.buyNum])
			})
			this.effectSwitch = uni.getStorageSync('effectSwitch') === 1;
			this.$c.getRule(10).then(res => {
				if (res.status == 1) {
					this.sendRuleData = res.data
				}
			});

		},

		onShow() {
			this.autoplay = true;
			console.log('onShow', this);
			this.$platform.getOrderNo(this).then(order_num => {
				console.log("order_num", order_num);
				if (order_num != null && order_num != "") {
					this.getPrize(order_num);
				}
			});
		},

		onReady() {
			// this.tabChange(this.tabCur)
			this.getData();
		},

		onHide() {
			this.autoplay = false
		},

		onUnload() {
			uni.$off('chooseCoupon')
		},

		methods: {
			onEffectSwitch(value) {
				this.effectSwitch = value;
				uni.setStorageSync('effectSwitch', value ? 1 : 0);
			},
			// 特效结束回调
			onLuckyEnd(isSkip) {
				console.log('onLuckyEnd', isSkip);
				// 获取所有中奖奖品

				console.log("抽奖结束", this.prizeData, this.effectSwitch);
				this.$refs.resPop.open(this.prizeData.data, isSkip);
			},
			previewDetail(item, a) {

				const obj = {
					imgurl: a.imgurl,
					title: a.title,
					// shang_title: item.shang_title,
					pro: '概率:' + this.$c.removeTrailingZeros(a.real_pro) + '%',
					shang_info: {
						title: item.shang_title,
						color: item.shang_color
					},
					goods_type: a.goods_type,
					id: a.id

				}
				let goods = {
					id: item.goods_id,
					num: 0,
				};
				// console.log(a);

				// 使用本地引入的方法调用预览弹窗
				preview({
					productType: this.optData.type_text,
					dataItem: obj,
					goods: goods
				}).then(() => {
					console.log('预览弹窗打开成功');
				});
				// this.previewData = obj

				// this.open('dPop')
			},

			async doReDraw() {
				if (this.orderData.item_card_count <= 0) {
					this.$c.toast({
						title: '重置卡不足'
					})

					return
				}

				const arr = this.prizeData.data.map(item => item.id)

				if (arr.length <= 0) {
					this.$c.toast({
						title: '请选择重置赏品'
					})
					return
				}

				const res = await useItemCard({
					goods_id: this.pageData.goods.id,
					order_list_ids: arr.join(',')
				});
				if (res.status == 1) {
					// this.close('resPop')
					this.$refs.resPop.close();
					this.doRefresh()
					this.getPrize(res.data.order_num)
				}
			},

			swChange(e) {
				this.swCur = e.detail.current
			},

			async toggleCollect() {
				const res = await toggleCollection(this.pageData.goods.id);
				if (res.status == 1) {
					this.getData()
				}
			},

			toBag() {

				// this.close('resPop')
				this.$refs.resPop.close();
				this.$c.to({
					type: 3,
					url: '/pages/hegui/hegui'
				})
			},

			toCoupon() {
				this.$c.to({
					url: '/pages/user/coupon',
					query: {
						type: 2,
						total_price: this.orderData.order_total
					}
				})
			},

			async getPrize(order_num) {
				if (!order_num) {
					return
				}
				if (!this.isPrizeLoading) {
					this.isPrizeLoading = true;
					uni.showLoading({
						title: '加载中...'
					});
				}
				let that = this;
				await sleep(500);
				const res = await getInfinitePrizeOrderLogByNum(order_num);
				if (res.status == 1) {
					res.data.data.map(item => {
						item.isChoose = false
					})
					console.log(res.data);

					this.prizeData = res.data

					if (res.data.data.length <= 0) {
						this.getPrize(order_num)
						return
					}

					if (that.buyNum == 0 || that.buyNum == null) {
						if (res.data.prize_num != null) {
							that.buyNum = res.data.prize_num;
							this.$refs.detailLucky.init(this.getGoodList, this.buyNum);

						}
					}
					this.isPrizeLoading = false;
					uni.hideLoading();
					if (!this.effectSwitch) {
						this.onLuckyEnd(true);
						return;
					}
					await sleep(200);
					let chaoshen = this.prizeData.data.findIndex(it => it.shang_id == 34);
					//获取奖品下标
					let tempData = this.prizeData.data.filter(it => it.parent_goods_list_id == 0);
					let resultIndices = tempData.map(it => {
						const index = this.getGoodList.findIndex(item => item.id == it
							.goodslist_id);
						return index;
					});
					this.$refs.detailLucky.startDrawWithResult(this, resultIndices, chaoshen);
				}
			},

			changePay(type) {
				if (type === 'useMoney') {
					this.useMoney = !this.useMoney;
				} else if (type === 'useIntegral') {
					if (this.couponData != null && this.couponData.id != '') {
						this.couponData = null;
					}
					this.useIntegral = !this.useIntegral;
				} else if (type === 'useMoney2') {
					this.useMoney2 = !this.useMoney2;
				}
				this.confirmSubmit([0, this.buyNum]);
			},

			confirmSubmit([type, num, flag]) {
				if (type === 0) {
					// 计算订单
					this.calculateOrder(num);
				} else if (type === 1) {
					// 提交订单
					this.submitOrder(num, flag).then(res => {
						console.log(res);
					});
				}
			},

			// 计算订单金额
			async calculateOrder(num) {
				uni.showLoading({
					title: '计算中...'
				});

				this.buyNum = num;

				// 处理优惠券与积分互斥
				let coupon_id = (this.couponData && this.couponData.id) ? String(this.couponData.id) : ''
				if (coupon_id != '' && this.useIntegral) {
					this.useIntegral = false;
				} else if (this.useIntegral && coupon_id != '') {
					this.couponData = null;
					coupon_id = '';
				}

				// 构建请求数据
				let postData = {
					goods_id: this.pageData.goods.id,
					prize_num: this.buyNum,
					use_money_is: this.useMoney ? 1 : 2,
					use_integral_is: this.useIntegral ? 1 : 2,
					use_money2_is: this.useMoney2 ? 1 : 2,
					coupon_id: coupon_id,
				};
				this.$refs.detailLucky.init(this.getGoodList, this.buyNum);
				// 发送请求
				const res = await calcInfiniteOrderMoney(postData);
				if (res.status == 1) {
					// 保存服务器返回的优惠券信息
					if (res.data.coupon_id) {
						this.couponData = {
							id: res.data.coupon_id,
							price: res.data.coupon_price
						}
					}
					// 保存订单数据
					this.orderData = res.data
					// 显示订单确认弹窗
					this.$nextTick(() => {
						if (this.$refs.buyPop) {
							this.$refs.buyPop.open()
						} else {
							console.error('buyPop组件未找到')
						}
					})
				}
				uni.hideLoading();
			},

			// 支付订单
			async submitOrder(num, flag) {
				this.choujiangloading = true;
				uni.showLoading({
					title: '提交订单中'
				});

				this.buyNum = num;

				// 处理优惠券与积分互斥
				let coupon_id = (this.couponData && this.couponData.id) ? String(this.couponData.id) : ''
				if (coupon_id != '' && this.useIntegral) {
					this.useIntegral = false;
				} else if (this.useIntegral && coupon_id != '') {
					this.couponData = null;
					coupon_id = '';
				}

				// 检查是否需要显示购买提示
				if (this.$refs.buyNotice.getIsShow() && !flag) {
					this.$refs.buyNotice.getRule(6)
					uni.hideLoading();
					this.choujiangloading = false;
					return
				}

				// 构建基础数据
				let baseData = {
					goods_id: this.pageData.goods.id,
					prize_num: this.buyNum,
					use_money_is: this.useMoney ? 1 : 2,
					use_integral_is: this.useIntegral ? 1 : 2,
					use_money2_is: this.useMoney2 ? 1 : 2,
					coupon_id: coupon_id,
				};

				// 获取支付数据
				let postData = this.$platform.getPayData('infinite_orderbuy', baseData);

				// 关闭确认弹窗
				this.close('buyPop');
				const res = await createInfiniteOrder(postData);
				console.log(res);
				uni.hideLoading();
				if (res.status == 1) {
					if (res.data.status == 1) {
						// 需要支付
						const status = await this.$platform.pay({
							data: res.data.res
						}, this)

						if (status == 'success') {
							// 支付成功
							this.getPrize(res.data.order_num);
							this.getData(false)
							// this.doRefresh();
						}
					} else {
						// 无需支付（如使用积分等）
						this.$c.toast({
							title: res.msg,
							duration: 500,
							success: () => {
								this.getPrize(res.data.order_num);
								this.getData(false)
							}
						})
					}
				}
				this.choujiangloading = false;

			},

			doRefresh() {
				this.getData()

				if (this.tabCur == 2) {
					this.tabChange(this.tabCur)
				}
			},

			subTabChange(i) {
				this.subTabCur = i
				this.logList = []

				this.$nextTick(() => {
					setTimeout(() => {
						this.mescroll.resetUpScroll()
					}, 100)
				})
			},

			tabChange(i) {
				if (i == this.tabCur) {
					return;
				}
				this.tabCur = i

				switch (Number(i)) {
					case 1:
						this.getData()
						break
					case 2:
						this.subTabChange(this.subTabCur)
						break
				}
			},

			async getLog({
				num,
				size
			}) {
				if (num > 1) return this.mescroll.endByPage(this.logList.length, 1)
				const res = await getInfinitePrizeOrderLog({
					page: num,
					goods_id: this.optData.goods_id,
					shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : ''
				});
				if (res.status == 1) {
					this.subTab = res.data.category

					if (num == 1) {
						this.logList = []
					}

					this.logList = this.logList.concat(res.data.data)
					this.mescroll.endByPage(res.data.data.length, res.data.last_page)
				}
			},

			async getData(isLoading = true) {
				const res = await getInfiniteGoodsDetail(this.optData.goods_id);
				if (res.status == 1) {
					this.goods = res.data.goods;
					res.data.goodslist.forEach(item => {
						this.$set(item, 'open', false)
					})
					if (res.data.goods.type_text) {
						this.title = res.data.goods.type_text
					}
					this.pageData = res.data;
					let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
					this.useMoney = goodType.pay_balance == 1 ? true : false;
					this.useIntegral = goodType.pay_currency == 1 ? true : false;
					this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
					console.log(this.pageData);

				}
			},

			close(e) {
				if (e === 'buyPop') {
					if (this.$refs.buyPop) {
						this.$refs.buyPop.close()
					}
				} else if (e === 'resPop') {
					this.$refs.resPop.close()
				} else {
					this.$refs[e].close()
				}
				if (e == "resPop") {

					if (this.prizeData['user_coupon'] != null) {
						this.$refs["couponPop"].open(this.prizeData['user_coupon']);
					}
				}
			},

			open(e) {
				if (this.$refs[e]) {
					this.$refs[e].open();
				} else {
					uni.showToast({
						title: '找不到buyPop组件引用',
						icon: 'none',
					});
					console.error('找不到buyPop组件引用');
				}
			},

			// 设置背景颜色
			getBgColor(text) {
				switch (text) {
					case "普通":
						return "#DAFF27";
						break;
					case "黄金":
						return "#9A8EF6";
						break;
					case "欧皇":
						return "#FFEB8E";
						break;
					case "超神":
						return "#FF8E8E";
						break;
				}
			},

			// 设置文字颜色
			getTextColor(text) {
				switch (text) {
					case "普通":
						return "#86AD46";
						break;
					case "黄金":
						return "#FFFFFF";
						break;
					case "欧皇":
						return "#DA8A50";
						break;
					case "超神":
						return "#FFEFB4";
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.navLeft {
		position: fixed;
		left: 30rpx;
		z-index: 100;
		height: 44px;

		>view {
			font-weight: 600;
			font-size: 50rpx;
			color: #FFFFFF;
		}
	}


	.content {
		padding: 0 0 0rpx;
		background-color: #F3F3F3;

		.boss-card {
			margin: 0 auto -20rpx;
			width: 690rpx;
			height: 260rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			padding: 50rpx 50rpx 0 40rpx;

			.boss-l {
				flex: 1;
				padding-top: 10rpx;

				.user {
					display: flex;
					align-items: center;

					.avatar {
						width: 100rpx;
						height: 100rpx;
						background: #9d9d9d;
						border: 1px solid #cccccc;
						border-radius: 50%;
					}

					.info {
						width: 250rpx;
						margin-left: 20rpx;

						.name {
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #ffffff;
						}

						.hang1 {}

						.btn-text {
							margin-top: 6rpx;
							white-space: nowrap;

							font-size: 36rpx;
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							color: #d0d1ff;
						}
					}
				}

				.btn-list {
					display: flex;
					justify-content: flex-end;
					margin-top: 20rpx;

					.btn {
						width: 110rpx;
						height: 40rpx;
						margin-left: 30rpx;

						&.large {
							width: 150rpx;
						}
					}

					.btn {}

					.large {}
				}
			}

			.boss-r {
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				padding-left: 50rpx;

				.pic {
					width: 130rpx;
					height: 130rpx;
					border: 1px solid;
					border-image: linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb) 1 1;
					box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(176, 128, 255, 0.8);
				}

				.ling {
					width: 142rpx;
					height: 50rpx;
				}
			}
		}

		.header {
			width: 750rpx;
			height: 722rpx;
			margin-top: 0rpx;
			background-color: #D8D8D8;

			&-wuzhe {
				width: 160rpx;
				height: 60rpx;
				position: absolute;
				top: 300rpx;
				left: 0;
			}

			&-goodsTitel {
				position: absolute;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				left: 50%;
				transform: translateX(-50%);
				bottom: 130rpx;
				z-index: 2;
				width: 90%;
				max-width: 650rpx;
				text-align: center;
				word-wrap: break-word;
				word-break: break-all;
				line-height: 1.4;
			}

			&-shoucang {
				width: 65rpx;
				height: 95rpx;
				position: absolute;
				right: 0;
				top: 56rpx;
				box-sizing: border-box;
				// background: url($imgurl+'/common/shoucang.png') no-repeat 0 0 / 100% 100%;

				>image {
					width: 64rpx;
					height: 64rpx;
					// margin-top: 22rpx;
				}

				>text {
					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					margin-top: 4rpx;
					// line-height: 66rpx;
					text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
				}
			}

			&-suoxiang {
				position: absolute;
				width: 584rpx;
				height: 120rpx;
				background: rgba(0, 0, 0, 0.73);
				left: 50%;
				transform: translateX(-50%);
				bottom: 390rpx;
				z-index: 2;

				>image:nth-of-type(1) {
					width: 46rpx;
					height: 46rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 50rpx;
				}

				>image:nth-of-type(2) {
					width: 144rpx;
					height: 68rpx;
				}

				>view:nth-of-type(1) {
					width: 140rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				>view:nth-of-type(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			&-title {
				position: absolute;
				padding: 0 20rpx;
				width: 298.8rpx;
				height: 60.16rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: #FFF33E;
				bottom: 54rpx;
				border-radius: 10rpx;
				z-index: 10;

				>text:nth-child(2n+1) {
					font-weight: 400;
					font-size: 28.07rpx;
					color: #000000;
				}

				>text:nth-child(2) {
					font-weight: 700;
					font-size: 28.07rpx;
					color: #000000;
				}
			}

			&-canyu {
				position: absolute;
				left: 32rpx;
				top: 32rpx;
				z-index: 10;
				padding: 8rpx 6rpx;
				border-radius: 10rpx;
				background-color: #424242;

				&-imgs {
					>image {
						margin-left: -12rpx;
						width: 32rpx;
						height: 32rpx;
						border-radius: 50rpx;
					}
				}

				&-num {
					font-weight: 400;
					font-size: 20rpx;
					margin-left: 8rpx;
					color: #FFFFFF;
					// text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
				}
			}

			&-footer {
				width: 750rpx;
				position: absolute;
				left: 0;
				bottom: 0;

				&-one {
					width: 186rpx;
					height: 106rpx;
					display: flex;
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: 1;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				&-two {
					width: 224rpx;
					height: 119rpx;
					display: flex;
					position: absolute;
					left: 160rpx;
					bottom: 0;
					z-index: 1;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				&-three {
					width: 224rpx;
					height: 119rpx;
					display: flex;
					position: absolute;
					right: 160rpx;
					bottom: 0;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				&-four {
					width: 186rpx;
					height: 106rpx;
					display: flex;
					position: absolute;
					right: 0;
					bottom: 0;

					>image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.user-btns {
			width: 690rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			left: 0;
			top: 60rpx;
			z-index: 1;

			.user-num {
				display: flex;
				align-items: center;

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #dddddd;

				.user-list {
					display: flex;
					padding-left: 26rpx;
					padding-right: 10rpx;

					.avatar {
						width: 50rpx;
						height: 50rpx;
						background: #7f7f7f;
						border: 1px solid #cccccc;
						border-radius: 50%;
						box-sizing: border-box;
						position: relative;
						margin-left: -26rpx;
					}
				}
			}

			.btns {
				display: flex;
				align-items: center;

				.btn {
					display: flex;
					align-items: center;
					margin-left: 40rpx;

					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}

					&.pd {
						padding-left: 60rpx;
					}

					&.dis {
						filter: grayscale(1);
					}
				}

				.btn {
					.icon {}
				}
			}
		}

		.angry {
			margin: 30rpx auto 0;
			width: 690rpx;
			height: 136rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #3B3941;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #FFFFFF;

			.icon {
				width: 100rpx;
				height: 58rpx;
			}

			.ang-info {
				width: 490rpx;

				.ang-num {
					text-align: center;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
				}

				.progress {
					margin-top: 10rpx;

					::v-deep.cmd-progress-inner {
						border-radius: 0;
						background: #444444;
					}
				}

				.tip {
					margin-top: 20rpx;
					display: flex;
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
					line-height: 20rpx;
				}
			}
		}

		.list {


			.list-item {
				box-sizing: border-box;

				.list-title {
					height: 52rpx;

					>view:nth-child(1) {
						>image {
							width: 160rpx;
							height: 72rpx;
						}

						>text {
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
				}

				.goods-list {
					margin-top: 25rpx;
					margin-bottom: 5rpx;
					display: grid;
					grid-template-columns: repeat(3, 31.5%);
					gap: 30rpx 20rpx;

					.goods-item {
						display: inline-flex;
						width: 220rpx;
						background-color: #F8F8F8;
						border-radius: 16rpx;
						// height: 255rpx;

						.pic {
							width: 220rpx;
							height: 220rpx;
							border-radius: 12rpx;
							position: relative;
							margin: 0 auto;
							background-color: #D8D8D8;
							border-radius: 16rpx 16rpx 0rpx 0rpx;

							.yu-tag {
								position: absolute;
								right: 10rpx;
								bottom: 10rpx;
								z-index: 1;
								display: flex;
								justify-content: center;
								align-items: center;
								font-weight: 400;
								font-size: 32rpx;
								color: #894DD3;
								text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
							}
						}

						.title {
							text-align: left;
							width: 200rpx;
							margin: 20rpx auto 0;
							font-size: 20rpx;
							font-weight: 400;
							color: #333333;
						}

						.price {
							width: 200rpx;
							margin: 12rpx auto 24rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #333333;
						}
					}
				}
			}
		}

		.sub-tab {
			white-space: nowrap;
			padding: 10rpx 0 10rpx;

			.sub-tab-item {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-width: 88rpx;
				height: 44rpx;
				margin-left: 30rpx;
				// font-family: YouSheBiaoTiHei;
				font-weight: 500;
				font-size: 20rpx;
				color: #363636;
				background: #F5F5F5;
				border-radius: 8rpx;
				border: 2rpx solid rgba(#FFFFFF, 0.7);

				&.act {
					background: #FFED94;
					// font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
				}

				&:last-child {
					margin-right: 30rpx;
				}
			}

		}

		.log-list {
			padding: 1rpx 30rpx 30rpx;

			.log-item {
				height: 144rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				background: #F8F8F8;
				margin-top: 24rpx;
				position: relative;
				/* 添加相对定位 */

				.avatar {
					width: 80rpx;
					height: 80rpx;
					background: #9d9d9d;
					border: 1px solid #cccccc;
					border-radius: 50%;
					overflow: hidden;
				}

				.info {
					width: 230rpx;
					margin-left: 20rpx;

					.name {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.hang1 {}

					.time {
						margin-top: 10rpx;
						white-space: nowrap;

						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}

				.prize {
					flex: 1;
					padding-left: 50rpx;
					display: flex;
					align-items: center;

					.pic {
						width: 100rpx;
						height: 100rpx;
					}

					// >view:nth-child(2) {
					// 	>view:nth-child(1) {
					// 		padding: 0 20rpx;
					// 		min-width: 68rpx;
					// 		height: 32rpx;
					// 		box-sizing: border-box;
					// 		line-height: 40rpx;
					// 		border-radius: 18rpx;
					// 		font-size: 14rpx;
					// 		color: #FFFFFF;
					// 	}

					// }

					.title {
						width: 120rpx;
						margin-left: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}

					.num {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		/* **************************************** */
		/* **************************************** */
		/* **************************************** */

		.fixed-btns {
			position: fixed;
			z-index: 10;
			right: 20rpx;
			bottom: 300rpx;

			.btn {
				width: 94rpx;
				height: 110rpx;
				margin-top: 40rpx;
			}
		}

		.res-pop {
			width: 100%;
			height: 100vh;
			position: relative;
			background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;

			.res-pop-hd {
				width: 380rpx;
				height: 104rpx;
				background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
			}

			.res-pop-bd {
				width: 636rpx;
				height: 760rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin: 36rpx auto;

				.res-list {
					padding: 20rpx 10rpx;
					display: grid;
					grid-template-columns: repeat(3, 210rpx);
					gap: 24rpx 10rpx;

					.res-item {
						width: 180rpx;
						height: 240rpx;
						background-color: #F8F8F8;
						border-radius: 16rpx;

						.pic {
							width: 180rpx;
							height: 180rpx;
							position: relative;
							background: #D8D8D8;
							border-radius: 16rpx 16rpx 0rpx 0rpx;

							>image {
								width: 180rpx;
								height: 180rpx;
								border-radius: 16rpx 16rpx 0rpx 0rpx;
							}

							.type-tag {
								position: absolute;
								left: 12rpx;
								top: 12rpx;
								z-index: 2;
								width: 68rpx;
								height: 32rpx;
								border-radius: 18rpx;
								// background: url($imgurl+ 'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
								font-weight: 400;
								font-size: 14rpx;
								// color: #F8F8F8;
							}

							.num {
								position: absolute;
								z-index: 2;
								left: 50%;
								transform: translateX(-50%);
								bottom: 10rpx;
								min-width: 42rpx;
								height: 28rpx;
								font-weight: 400;
								font-size: 14rpx;
								color: #ffffff;
								background: rgba(0, 0, 0, 0.5);
								border-radius: 18rpx;
							}
						}

						.title {
							width: 180rpx;
							padding: 22rpx 0;
							font-weight: 400;
							font-size: 16rpx;
							color: #333333;
						}

						.exchange {
							padding: 10rpx 10rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
				}
			}

			.res-pop-ft {
				padding-top: 40rpx;

				.btn-list {
					width: 750rpx;
					display: flex;
					justify-content: space-evenly;

					.ft-btn {
						width: 200rpx;
						height: 68rpx;
						font-weight: 400;
						font-size: 24rpx;
					}

					>view:nth-child(1) {
						color: #333333;
					}

					>view:nth-child(2) {
						color: #333333;
					}
				}

				.r-draw {
					margin: 50rpx auto 0;
					width: 244rpx;
					height: 116rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #0E7792;

					>text {
						margin-top: 36rpx;
					}
				}
			}
		}

		.boss-pop {
			width: 750rpx;
			box-sizing: border-box;
			padding: 0 46rpx 40rpx;
			position: relative;
			background: #F7F7F7;
			border-radius: 16rpx 16rpx 0rpx 0rpx;

			&::after {
				content: '';
				position: absolute;
				top: -62rpx;
				left: 0;
				width: 750rpx;
				height: 62rpx;
				// background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
			}

			.boss-pop-title {
				padding: 40rpx 0;
				text-align: center;
				// font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 44rpx;
				color: #333333;
			}

			.boss-pop-guize {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				color: #FFFFFF;
				font-size: 28rpx;

				>image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.close {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				top: 50rpx;
				right: 36rpx;
			}

			.boss-avatar {
				margin: 20rpx auto 0;
				width: 686rpx;
				height: 264rpx;
				background-color: #FFFFFF;

				>image:nth-child(1) {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 112rpx;
					width: 98rpx;
					height: 98rpx;
					border-radius: 50%;
					z-index: 1;
				}

				>image:nth-child(2) {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					width: 181rpx;
					height: 173rpx;
					bottom: 80rpx;
					z-index: 2;
				}
			}

			.boss-name {
				margin: 30rpx auto 0;
				width: 200rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				left: 50%;
				transform: translateX(-50%);
				position: absolute;
				bottom: 32rpx;
			}

			.hang1 {}

			.boss-box {
				margin: 70rpx auto 0;
				width: 590rpx;
				position: relative;
				background: #3B3941;
				border-radius: 22rpx;
				padding: 30rpx;

				.box-title {
					color: #999999;

					>text:nth-child(1) {
						color: #999999;
						font-size: 20rpx;
						font-weight: bold;
					}

					>text:nth-child(2) {
						font-size: 20rpx;
						font-weight: 400;
					}
				}

				.get-money {
					margin-top: 30rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;

					&-one {
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
					}

					// &-two {
					// 	width: 34rpx;
					// 	height: 34rpx;
					// 	margin: 0 10rpx;
					// }

					&-three {
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
					}
				}
			}

			.common_bg {}

			.boss-tab {
				padding: 30rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.boss-tab-item {
					width: 33%;
					height: 60rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #8A8A8A;
					display: flex;
					justify-content: space-around;
					align-items: center;
					text-align: center;
					background-color: #FFFFFF;
					border-radius: 8rpx;

					&.act {
						font-weight: 500;
						font-size: 20rpx;
						color: #333333;
						background-color: #E6F791;
						border-radius: 8rpx;
					}
				}
			}

			.list-wrap {
				// height: 350rpx;

				.boss-list {
					display: flex;
					flex-flow: row wrap;
					justify-content: space-between;

					.people-item {
						display: flex;
						align-items: center;
						width: 30%;

						.avatar {
							width: 52rpx;
							height: 52rpx;
							background: #9d9d9d;
							border-radius: 50%;
							box-sizing: border-box;
							overflow: hidden;
						}

						.name {
							width: calc(100% - 70rpx);
							box-sizing: border-box;
							padding-left: 10rpx;

							font-size: 20rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}

						.hang1 {}
					}

					.boss-log {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						padding: 10rpx;

						.avatar {
							width: 60rpx;
							height: 60rpx;
							background: #9d9d9d;
							// border: 1px solid #cccccc;
							border-radius: 50%;
							overflow: hidden;
						}

						.name {
							width: 100rpx;
							margin-left: 20rpx;
							font-size: 20rpx;
							// font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}

						.hang1 {}

						.place {
							margin-left: 30rpx;

							font-size: 20rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;

							text {
								padding-left: 4rpx;
								color: #999999;
							}
						}

						.time {
							flex: 1;
							padding-left: 30rpx;

							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
					}

					.boss-money {
						width: 100%;
						padding: 10rpx;
						display: flex;
						align-items: center;

						.avatar {
							width: 60rpx;
							height: 60rpx;
							background: #9d9d9d;
							border: 1px solid #cccccc;
							border-radius: 50%;
						}

						.name {
							width: 200rpx;
							margin-left: 20rpx;

							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #ffffff;
						}

						.hang1 {}

						.money {
							flex: 1;
							text-align: right;

							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #ffffff;

							text {
								padding-left: 10rpx;
								color: #d0d1ff;
							}
						}
					}
				}
			}
		}

		.play-pop {
			width: 680rpx;
			box-sizing: border-box;
			padding: 0 46rpx 40rpx;
			position: relative;
			background: #FFFFFF;
			border-radius: 30rpx;
			// border: 1px solid #7776AD;

			.play-pop-hd {
				position: relative;
				top: -50rpx;
				margin: 0 auto;
				width: 460rpx;
				height: 120rpx;
			}

			.close {
				padding: 30rpx 0;

				.close-title {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.close-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.p-swiper {
				margin-top: 10rpx;
				width: 100%;
				height: 300rpx;

				.p-item {
					.play-pic {
						margin: 0 auto 0;
						width: 200rpx;
						height: 200rpx;
						position: relative;

						.play-type {
							position: absolute;
							left: 50%;
							top: 20rpx;
							z-index: 1;
							width: 120rpx;
							border-radius: 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							transform: translateX(-50%);

							text {
								font-family: YouSheBiaoTiHei;
								font-weight: 400;
								font-size: 28rpx;
								color: #FFFFFF;
								text-stroke: 1rpx #F42FEA;
								-webkit-text-stroke: 1rpx #F42FEA;
							}
						}
					}

					.play-ling {
						width: 180rpx;
						height: 60rpx;
						margin: 10rpx auto 0;
					}

					.play-name {
						width: 310rpx;
						margin: 16rpx auto 0;
						text-align: center;

						font-size: 20rpx;
						// font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.hang1 {}

			.line {
				margin: 0 auto 0;
				width: 560rpx;
				height: 1px;
				background: #444444;
			}

			.rule-title {
				width: 118rpx;
				margin-left: 10rpx;
				// font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.rule-text {
				width: 560rpx;
				height: 200rpx;
				margin: 20rpx auto 0;
				font-size: 24rpx;
				font-weight: 400;
				color: #8A8A8A;
			}
		}

		.d-pop {
			position: relative;
			width: 564rpx;
			box-sizing: border-box;

			.pic {
				width: 564rpx;
				height: 564rpx;
				border-radius: 16rpx;

				>image {
					width: 564rpx;
					height: 564rpx;
					border-radius: 16rpx;
				}

				>view {
					width: 68rpx;
					height: 32rpx;
					position: absolute;
					top: 24rpx;
					left: 24rpx;
					font-weight: 400;
					font-size: 14rpx;
					color: #FFFFFF;
					box-sizing: border-box;
					background: url($imgurl+'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
				}
			}

			.title {
				margin: 40rpx auto 0;
				width: 564rpx;
				height: 82rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 20rpx;
				// border: 2rpx solid #894DD3;
				border-radius: 12rpx;
				background: #F5F5F5;

				>text {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}

			.d-list {
				display: flex;
				flex-flow: row wrap;
				justify-content: space-between;
				padding: 20rpx 0 0;

				.d-item {
					margin-top: 14rpx;

					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.close {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translate(-50%, 160%);
			}
		}


		.ani-pop {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 88;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #000;

			image {
				width: 100%;
				height: 1624rpx;
			}
		}
	}

	.gradient-text {
		background-image: linear-gradient(to right, #FF5722, #FFEB3B);
		/* 从橙色到黄色的渐变 */
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: #FF5722;
	}

	.yu-tag-text {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 32rpx;

	}


	.item-info {
		padding: 5rpx 0;
	}

	.item-title {
		padding: 0 2%;
		margin: 10rpx 0rpx 0rpx 0rpx;
		width: 96%;
		font-size: 21rpx;
		text-align: left;
		height: 35rpx;
		line-height: 35rpx;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.item-probability {
		padding: 0 5%;
		margin: 1rpx 0;
		width: 100%;
		font-size: 21rpx;
		text-align: left;
		height: 35rpx;
		line-height: 35rpx;
		color: #f39205;
	}

	.item-price {
		padding: 0 2%;
		margin: 1rpx 10rpx;
		font-size: 21rpx;
		text-align: left;
		height: 35rpx;
		line-height: 35rpx;
		border-radius: 10rpx;
		background: #DFFF76;
		color: #333333;
	}

	.log-tag {
		padding: 0 20rpx;
		min-width: 68rpx;
		height: 32rpx;
		box-sizing: border-box;
		line-height: 32rpx;
		border-radius: 18rpx;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.multiple-tag {

		padding: 0 20rpx;
		min-width: 50rpx;
		height: 32rpx;
		box-sizing: border-box;
		line-height: 32rpx;
		border-radius: 18rpx;

		color: #FFFFFF;
		background-color: #BBF3D0;
		font-size: 22rpx;
		margin-left: 6rpx;
	}

	/* 添加角标样式 */
	.corner-tag {
		position: absolute;
		left: 0;
		top: 0;
		background: url($iconurl + "fbs.png") no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 0 0 12rpx 0;
		z-index: 10;
		min-width: 68rpx;
		height: 32rpx;
	}

	.lingzhu-tag {
		position: absolute;
		left: 0;
		top: 0;
		background: url($iconurl + "lingzhu.png") no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 0 0 12rpx 0;
		z-index: 10;
		min-width: 68rpx;
		height: 32rpx;
	}

	.log-multiple-tag {
		position: absolute;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		background: url($iconurl + "fanbei.png") no-repeat;
		background-size: 100% 100%;
		color: #000;
		width: 68rpx;
		height: 32rpx;
		// border-radius: 25rpx;
		top: 12rpx;
		right: 12rpx;
		font-size: 22rpx;
		line-height: 32rpx;
	}

	.log-lingzhu-tag {
		position: absolute;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		background: url($iconurl + "lingzhu.png") no-repeat;
		background-size: 100% 100%;
		color: #000;
		width: 68rpx;
		height: 32rpx;
		// border-radius: 25rpx;
		top: 12rpx;
		right: 12rpx;
		font-size: 22rpx;
		line-height: 32rpx;
	}

	.baoxiang-tag {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		z-index: 5;
		font-weight: 400;
		font-size: 24rpx;
		color: #333;
		border-radius: 30rpx;
		background-image: url($iconurl + "baoxiang.png");
		background-size: 100% 100%;
		height: 32rpx;
		width: 68rpx;
	}
</style>