<template>
	<view class="content">
		<!-- 头部 -->
		<!-- <view
      class="header common_bg"
      v-if="goods"
      :style="{
        'background-image': `url(${goods.imgurl_detail})`
      }"
    > -->
		<uni-nav-bar left-icon="left" :title="goods.title" color="#fff" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>

		<!-- 
      <view class="header_news">
        <view
          class="header_news_t common_bg"
          :style="{
            'background-image': `url(${$img(
              '/static/img/inf_banner_ft_bg.png'
            )})`
          }"
        >
          <view class="header_news_t_price">
            <view>抽奖需要{{ goods.need_draw_num || 0 }}张抽奖券</view>
          </view>
          <view
            class="redu"
            v-if="goods.join_user && goods.join_user.length > 0"
          >
            <image
              :src="item"
              v-for="(item, index) in goods.join_user"
              :key="index"
              v-if="index < 5"
              :style="'transform:translateX(' + -index * 20 + 'rpx' + ')'"
            ></image>
            {{ join_count }}次参与
          </view>
        </view>
      </view> -->
		<!-- </view> -->

		<view v-if="goods" class="hot-num">
			<view class="user-list">
				<view class="avatar icon" v-for="(item, i) in goods.join_user.slice(0, 5)" :key="i" :style="{
            'z-index': `${i + 1}`
          }">
					<image :src="item"></image>
				</view>
			</view>

			<view class="num">{{ join_count }}次参与</view>
		</view>

		<swiper class="sw-wrap" autoplay circular>
			<swiper-item v-for="(item, i) in shangGoods" :key="i">
				<view class="pic">
					<image :src="item.imgurl" lazy-load></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="tong-ji" @click="$refs.shuoming.open()" :style="{
        top: `calc(${$sys().statusBarHeight}px + 88rpx + 150rpx)`
      }">
			<image :src="$img('/static/img/info.png')" mode="scaleToFill" />

			抽赏说明
		</view>

		<view class="ticket-num">
			<view class="ticket-num-inner">
				抽奖需要{{ goods.need_draw_num || 0 }}张抽奖券
			</view>
		</view>

		<view class="goods-title common_bg" :style="{
        backgroundImage: `url(${$img('/static/img/2_title_bg.png')})`
      }">
			<text class="hang1">{{ goods.title }}</text>
		</view>

		<view class="type-list common_bg" :style="{
        backgroundImage: `url(${$img('/static/img/2_type_bordder.png')})`
      }">
			<view class="type-item" v-for="(item, i) in shang_list" :key="i">
				<view class="dot" :style="{
            'background-color': item.shang_color
          }"></view>

				<view class="title">
					{{ item.shang_title }}

					<text>{{ item.pro }}</text>
				</view>
			</view>
		</view>

		<!-- <scroll-view
      scroll-x="true"
      class="shangList common_bg"
      :style="{
        'background-image': `url(${$img(
          '/static/img/inf_parize_type_list.png'
        )})`
      }"
    >
      <view class="shangList_item">
        <view v-for="(item, index) in shang_list" :key="index">
          <view :style="'color:' + item.shang_color">
            {{ item.shang_title }}款
          </view>

          <view>{{ item.pro }}</view>
        </view>
      </view>
    </scroll-view> -->

		<view class="choujiang">
			<!-- 切换 -->
			<view class="qiehuan">
				<view @click="getlist(i)" v-for="(v, i) in list" :key="i">
					<view :class="show == i ? 'xzs' : 'wzs'">{{ v.name }}</view>
					<view class="qiehuan_line" v-if="show == i">
						<!-- <image :src="$img('/static/img/tab_arrow.png')"></image> -->
					</view>
				</view>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<!-- 赏池预览 直接展示所有赏品 -->
			<view class="shop" v-if="show == 0 && shangGoods.length > 0" :style="{
          display: `flex`,
          'flex-flow': `row wrap`,
          padding: `1rpx 30rpx 0`
        }">
				<view v-for="(item, index) in shangGoods" :key="index" class="shop_item" @click="previewDetail(item)">
					<view class="item_head">
						<image :src="item.imgurl"></image>
						<view class="item_num">
							<view :style="'color:' + item.shang_color">
								{{ item.shang_title }}
							</view>
						</view>
					</view>
					<view class="shop_con">
						<view class="hang1" style="color: #ffffff">{{ item.title }}</view>
						<view class="hang1">{{ item.pro }}</view>
						<view class="hang1" v-if="item.shang_id > 5">
							售价:{{ item.price }}
						</view>
					</view>
					<view class="qiangguang" v-if="item.surplus_stock == 0">
						<image :src="z_imgPath + 'detail/qiangguangle.png'"></image>
					</view>
				</view>
			</view>
			<!-- 中赏记录 -->
			<view class="jilv" v-if="show == 1 && shang_cate.length > 0">
				<scroll-view scroll-x class="jilv_title">
					<view class="jilv-tab common_bg" v-for="(item, index) in shang_cate" :key="index"
						@click="change_shang_id(item.shang_id)" :class="{
              act: shang_id == item.shang_id
            }" :style="{
              'background-image': `url(${$img('/static/img/2_tab_bg.png')})`
            }">
						{{ item.shang_title }}
					</view>
				</scroll-view>
				<view v-for="(item, index) in jl_Arr" :key="index" class="jilv_con">
					<view class="jilv_list">
						<view class="log-tag">
							{{ item.luck_no }}
						</view>

						<view class="jilv_list_l">
							<image class="avatar" :src="item.headimg" mode="scaleToFill" />

							<view class="info">
								<view class="name hang1">{{ item.nickname }}</view>

								<view class="time">{{ item.addtime }}</view>
							</view>
						</view>
						<view class="log-item-r">
							<!-- <view class="type">{{ item.shang_title }}</view> -->

							<view class="prize">
								<image class="pic" :src="item.goodslist_imgurl" mode="scaleToFill" />

								<view class="prize-title hang1">
									{{ item.goodslist_title }}
								</view>
								×1
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<!-- 抽奖按钮 -->
		<view class="bar_box">
			<view @click="pay" class="draw-btn" :class="{
          dis: hasNum == 0
        }">
				当前有{{ hasNum }}张抽奖券,{{
          hasNum == 0 ? '请先获取抽奖券' : '立即抽赏'
        }}
			</view>
		</view>

		<!-- 刷新浮框 -->
		<view class="xuanfu">
			<image :src="$img('/static/img/refresh.png')" @click="loadData(1, true)"></image>

			<button open-type="share" hover-class="">
				<image :src="$img('/static/img/share.png')"></image>
			</button>

			<image :src="$img('/static/img/bag.png')" @click="toBag"></image>
		</view>

		<!-- 购买说明 -->
		<uni-popup ref="shuoming" type="center">
			<view class="popGm common_bg" :style="{
          'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
        }">
				<view class="pop_title">抽赏说明</view>

				<view class="pop_con">
					<scroll-view scroll-y="true" style="height: 600rpx">
						<view v-html="news"></view>
					</scroll-view>
				</view>

				<image @click="$refs.shuoming.close()" class="close" :src="$img('/static/icon/close.png')"></image>
			</view>
		</uni-popup>

		<!-- 确认订单 -->
		<uni-popup ref="order_show" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<view class="ca">确认订单</view>
					<image :src="$img('/static/icon/close1.png')" @click="$refs.order_show.close()"></image>
				</view>
				<view class="order_title_con1">
					<view class="order_pic" v-if="pay_news.goods">
						<view class="order_pic_img">
							<image :src="pay_news.goods.imgurl_detail"></image>
						</view>
						<view>
							<view style="font-size: 35rpx">{{ pay_news.goods.title }}</view>
							<view style="margin-top: 40rpx">类型：明信片</view>
							<view style="margin-top: 10rpx">
								<text>
									<text style="font-family: zihun152hao-jijiachaojihei">
										{{ pay_news.goods.price }}元
									</text>
								</text>
								<text>×{{ pay_news.goods.prize_num }}</text>
							</view>
						</view>
					</view>
					<view class="order_num">
						<view style="font-size: 28rpx" v-if="pay_news.goods">
							明信片×{{ pay_news.goods.prize_num }}
						</view>
						<view>
							小计:{{ goods.box_type == 5 ? '' : '￥' }}
							<text>
								{{ pay_news.order_total
                }}{{ goods.box_type == 5 ? '积分' : '' }}
							</text>
						</view>
					</view>
				</view>
				<view class="order_title_con1" v-if="goods.box_type != 1">
					<view style="font-size: 28rpx; margin-bottom: 10rpx">支付方式</view>
					<view class="fangshi" @click="change_yuan_index(1)" v-if="goods.type != 3"
						style="padding-bottom: 15rpx">
						<view class="flex_center">
							<image :src="$img('/static/icon/coin.png')" style="width: 40rpx; height: 40rpx"></image>
							<view>
								使用星钻抵扣￥
								<text>{{ pay_news.use_integral }}</text>
								（剩余：
								<text>{{ pay_news.integral }}</text>
								）
							</view>
						</view>
						<image v-if="bi" :src="$img('/static/icon/check_act.png')" style="width: 40rpx; height: 40rpx">
						</image>
						<image v-else :src="$img('/static/icon/check.png')" style="width: 40rpx; height: 40rpx"></image>
					</view>
					<view class="fangshi" @click="change_yuan_index(2)" style="
              border-top: 1px solid rgba(255, 255, 255, 0.2);
              padding-top: 15rpx;
            ">
						<view class="flex_center">
							<image :src="$img('/static/icon/balance.png')" style="width: 40rpx; height: 40rpx"></image>
							<view>
								使用星钻抵扣￥
								<text>{{ pay_news.use_money }}</text>
								（剩余：
								<text>{{ pay_news.money }}</text>
								）
							</view>
						</view>
						<image v-if="yue" :src="$img('/static/icon/check_act.png')" style="width: 40rpx; height: 40rpx">
						</image>
						<image v-else :src="$img('/static/icon/check.png')" style="width: 40rpx; height: 40rpx"></image>
					</view>
				</view>
				<view style="color: #999; font-size: 24rpx; margin: 20rpx 10rpx">
					下单购买即表示同意
					<text style="color: #fff" @click="gotoPage('/pages/guize/guize?type=2')">
						《用户服务协议条款》
					</text>
				</view>
				<view class="order_title_btn">
					<view class="total-price">
						共{{ pay_news.goods && pay_news.goods.prize_num }}抽总计:{{
              goods.box_type == 5 ? '' : '￥'
            }}
						<text>
							{{ pay_news.price }}{{ goods.box_type == 5 ? '积分' : '' }}
						</text>
					</view>
					<view class="zhifu common_bg" @click="pay()" :style="{
              'background-image': `url(${$img('/static/img/yf_ljzf.png')})`
            }">
						<!-- 支付 -->
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 奖品弹窗 -->
		<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="res-pop common_bg" :style="{
          backgroundImage: `url(${$img('/static/img/3_suc_pop.png')})`
        }">
				<view class="res-pop-hd"></view>

				<scroll-view class="res-pop-bd" scroll-y>
					<view class="res-list">
						<view class="res-item" v-for="(item, i) in jp_arr" :key="i">
							<view class="pic">
								<image :src="item.goodslist_imgurl" lazy-load></image>

								<view class="type-tag">{{ item.shang_title }}</view>

								<view class="num">×1</view>
							</view>

							<view class="title hang1">
								{{ item.goodslist_title }}
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="res-pop-ft">
					<view class="ft-btn confirm common_bg" :style="{
              backgroundImage: `url(${$img('/static/img/btn_bg.png')})`
            }" @click="toBag">
						<text>去盒柜</text>
					</view>

					<view class="ft-btn common_bg" :style="{
              backgroundImage: `url(${$img('/static/img/btn_bg.png')})`
            }" @click="close('resPop')">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 抽奖统计 -->
		<uni-popup ref="tongji" type="center" :isMaskClick="false">
			<view class="popGm common_bg" :style="{
          'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
        }">
				<view class="pop_title">统计</view>

				<view class="pop_con">
					<scroll-view scroll-y="true" style="height: 600rpx" @scrolltolower="getjilv">
						<view class="pop_item" v-for="(item, index) in fa_Arr" :key="index">
							<view>
								<image :src="item.userinfo.headimg"></image>
								<view class="name hang1">{{ item.userinfo.nickname }}</view>
							</view>
							<view style="color: #87dfff">冲{{ item.count }}发</view>
						</view>
					</scroll-view>
				</view>

				<image @click="$refs.tongji.close()" class="close" :src="$img('/static/icon/close.png')"></image>
			</view>
		</uni-popup>
		<!-- 详情弹窗 -->
		<uni-popup ref="dPop" type="center">
			<view v-if="previewData" class="d-pop common_bg" :style="{
          backgroundImage: `url(${$img('/static/img/3_detail_pop.png')})`
        }">
				<view class="pic">
					<image :src="previewData.imgurl" lazy-load></image>
				</view>

				<view class="title common_bg" :style="{
            backgroundImage: `url(${$img('/static/img/3_detail_title.png')})`
          }">
					<text class="hang1">
						{{ previewData.title }}
					</text>
				</view>

				<view class="d-list">
					<view class="d-item">
						{{ previewData.shang_title }} {{ previewData.real_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>
	</view>
</template>
<script>
	import gbroMarquee from '@/components/gbro-marquee/marquee.vue'
	export default {
		components: {
			gbroMarquee
		},
		data() {
			return {
				z_imgPath: this.$z_img2 + 'shouye/',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				downOption: {
					auto: false
				},
				broadcastStyle2: {
					speed: 100
				},
				// 延时动画
				doamin: false,
				list: [{
						name: '赏池预览'
					},
					{
						name: '中赏记录'
					}
				],
				// 商品id
				goods_id: '',
				show: 0,
				// 赏池
				goods: '',
				order_list: [],
				shang_list: [],
				// 中赏记录
				shang_id: 0,
				/* 默认 超神*/
				shang_cate: [],
				jl_Arr: [],

				type: '',
				pay_news: {},
				prize_num: '',

				// 是否显示订单弹窗
				order_show: false,

				bi: true,
				yue: true,
				num: 1,

				jp_news: {},
				jp_arr: [],
				news: '',
				// 支付失效
				pay_status: false,
				// 动画
				rollTimer: null, //动画定时器句柄
				moveCss: [], //奖励滚动组件的滑动的动画效果css
				luckyNums: 0, //中奖位置
				luckydata: [], //中奖位置数组
				lnStart: 50, //中奖位置区间开始
				lnEnd: 60, //中奖位置区间结束
				items: [], //滚动的卡片列表
				awardItem: [], //中奖道具
				left_px: '',
				tiaotype: 1,
				//抽奖统计
				fa_Arr: [],
				page_num: 1,
				mixTotal: 0, // 统计信息总页数
				shangGoods: [],
				//预览
				current_index: 0,
				join_count: 0,
				hasNum: 0,
				previewData: ''
			}
		},
		onShareAppMessage(e) {
			let that = this
			return {
				title: this.$config.getAppSetting("app_name")+ that.goods.title + '系列',
				imageUrl: that.goods.imgurl_detail,
				path: '/pages/shouye/detail_wuxian?goods_id=' +
					that.goods_id +
					'&pid=' +
					uni.getStorageSync('userinfo').ID
			}
		},
		onLoad(e) {
			this.goods_id = e.id ? e.id : ''
			setTimeout(() => {
				this.doamin = true
			}, 1000)
			this.getDanye(10)
			if (e.pid) {
				uni.setStorageSync('pid', e.pid)
			}
		},
		watch: {
			jp_arr() {
				for (let i = 0; i < this.jp_arr.length; i++) {
					if (this.jp_arr[i].kaiqi) {
						if (this.jp_arr.length - 1 == i) {
							this.is_tiaoguo = false
							return
						}
					} else {
						this.is_tiaoguo = true
						return
					}
				}
			}
		},

		methods: {
			close(e) {
				this.$refs[e].close()
			},

			open(e) {
				this.$refs[e].open()
			},

			previewDetail(item) {
				console.log(item)
				this.previewData = item

				this.open('dPop')
			},

			toBag() {
				uni.switchTab({
					url: '/pages/sangdai/sangdai'
				})
			},

			yulan(e, a) {
				this.current_index = a

				setTimeout(() => {
					this.$refs.yulanPop.open()
				}, 300)
			},
			getjilv(reload = false) {
				let that = this

				if (reload) {
					this.page_num = 1
					this.fa_Arr = []
				}

				if (this.page_num !== 1 && this.page_num > this.mixTotal) {
					return
				}
				that.req({
					url: 'luck_draw_log',
					Loading: true,
					data: {
						page: that.page_num,
						id: that.goods_id
					},
					success(res) {
						if (res.status == 1) {
							// that.shang_cate = res.data.category;
							that.mixTotal = res.data.last_page
							if (that.page_num === 1) {
								that.fa_Arr = res.data.data
							} else {
								that.fa_Arr = that.fa_Arr.concat(res.data.data)
							}
							that.page_num += 1
							that.$refs.tongji.open()
						}
					}
				})
			},
			tokefu() {
				// #ifdef  MP-WEIXIN
				wx.openCustomerServiceChat({
					extInfo: {
						url: uni.getStorageSync('wx_link') //客服地址链接
					},
					corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					}
				})
				// #endif
			},
			getDanye(e) {
				let that = this
				that.req({
					url: 'danye',
					data: {
						type: e
					},
					success(res) {
						if (res.status == 1) {
							that.news = res.data
						}
					}
				})
			},

			sc_collect() {
				let that = this
				that.req({
					url: 'addCollect',
					data: {
						goods_id: that.goods.id
					},
					success(res) {
						if (res.status == 1) {
							if (that.goods.collection_is == 1) {
								that.goods.collection_is = 0
							} else {
								that.goods.collection_is = 1
							}
						}
					}
				})
			},
			back() {
				var pages = getCurrentPages()
				// console.log(pages)

				if (pages.length == 1 && pages[0].route == 'pages/shouye/detail_wuxian') {
					uni.redirectTo({
						url: '/pages/infinite/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			getlist(v) {
				this.show = v
				this.mescroll.resetUpScroll(false)
			},

			tosangdai() {
				uni.setStorageSync('page', this.$mp.page.route)
				uni.switchTab({
					url: '/pages/sangdai/sangdai'
				})

				// uni.redirectTo({
				//   url: '../sangdai/sangdai'
				// })
			},
			change_yuan_index(e) {
				if (e == 1) {
					this.bi = !this.bi
				}
				if (e == 2) {
					this.yue = !this.yue
				}
				this.order_money()
			},
			pay() {
				if (this.hasNum <= 0) {
					return uni.showToast({
						title: '当前无抽奖券',
						icon: 'none'
					})
				}

				let that = this
				that.jp_arr = []
				let info = {
					goods_id: that.goods_id
				}

				that.req({
					url: 'do_draw',
					data: info,
					success(res) {
						if (res.status == 1) {
							that.info = {}
							that.req({
								url: 'prizeorderlog',
								data: {
									order_num: res.data.order_num
								},
								success(aa) {
									if (aa.status == 1) {
										that.jp_news = aa.data.user_info
										that.jp_arr = aa.data.data
										that.open('resPop')
										that.show = 0
										that.loadData(1)
									}
								}
							})
						}
					}
				})
			},
			choujiang(e) {
				this.prize_num = e
				this.order_money()
			},
			order_money() {
				let that = this
				that.req({
					url: 'infinite_ordermoney',
					Loading: true,
					data: {
						prize_num: that.prize_num,
						goods_id: that.goods_id,
						use_money_is: that.yue ? 1 : 2,
						use_integral_is: that.bi ? 1 : 2
					},
					success(res) {
						if (res.status == 1) {
							that.$refs.order_show.open()
							that.pay_news = res.data
						}
					}
				})
			},
			change_shang_id(e) {
				this.shang_id = e
				this.mescroll.resetUpScroll(false)
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll(false)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.loadData(page.num)
			},
			loadData(pageNo, showToast = false) {
				let that = this
				that.req({
					url: that.show == 0 ?
						'infinite_goodsdetail' :
						that.show == 1 ?
						'infinite_shang_log' :
						'',
					data: {
						page: pageNo,
						goods_id: that.goods_id,
						shang_id: that.shang_id
					},
					// Loading: true,
					success(res) {
						if (res.status == 1) {
							if (showToast) {
								setTimeout(() => {
									uni.showToast({
										title: '刷新成功',
										icon: 'success'
									})
								}, 100)
							}

							if (that.show == 0) {
								that.hasNum = res.data.draw_num
								that.goods = res.data.goods
								// setTimeout(()=>{
								that.order_list = res.data.bulletchat
								// },1000)
								//所有商品按赏池分类
								that.join_count = res.data.goods.join_count
								that.shang_list = res.data.goodslist
								that.mescroll.endByPage(res.data.goodslist.length, 1)
								console.log(that.order_list)
								//所有商品未按赏池分类
								that.shangGoods = res.data.goods_list.data
								that.mescroll.endByPage(res.data.goods_list.data.length, 1)
							}
							if (that.show == 1) {
								that.shang_cate = res.data.category
								that.mescroll.endByPage(res.data.data.length, res.data.last_page)
								if (pageNo == 1) {
									that.jl_Arr = res.data.data
								} else {
									that.jl_Arr = that.jl_Arr.concat(res.data.data)
								}
							}
						} else if (res.status == 0) {
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pop_title {
		font-size: 48rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin-bottom: 23rpx;
	}

	.yulanStyle>.shang_img {
		width: 540rpx;
		height: 460rpx;
		position: absolute;
		top: 30rpx;
		left: 28rpx;
		margin: 0 auto;
	}

	.yulanStyle>.img_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.yulanStyle>view:nth-of-type(1) {
		position: absolute;
		top: 54rpx;
		left: 45rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		background: rgba(1, 14, 14, 0.83);
		opacity: 0.83;
		border-radius: 29rpx;
		padding: 10rpx 30rpx;
	}

	.yulanStyle {
		font-size: 47rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		position: relative;
		width: 600rpx;
		height: 794rpx;

		.detail-title {
			position: absolute;
			top: 500rpx;
			left: 130rpx;
			width: 346rpx;
			height: 84rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;

			font-size: 28rpx;
			font-family: zihun152hao-jijiachaojihei;
			font-weight: 400;
			color: #ffffff;
		}

		.detail-type {
			position: absolute;
			top: 618rpx;
			left: 50%;
			transform: translateX(-50%);

			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #cccccc;

			text {
				color: #fff;
			}
		}

		.detail-price {
			position: absolute;
			top: 674rpx;
			left: 50%;
			transform: translateX(-50%);

			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #cccccc;

			text {
				color: #fff;
			}
		}

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

	// 头部样式
	.header {
		width: 750rpx;
		height: 450rpx;
		// background: #ffffff;
		font-size: 32rpx;
		color: #ffffff;

		.info-btn {
			position: fixed;
			left: 30rpx;
			display: flex;
			align-items: center;
			z-index: 1;

			image {
				width: 12rpx;
				height: 24rpx;
			}

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

		.like-btn {
			position: fixed;
			right: 30rpx;
			display: flex;
			align-items: center;
			z-index: 1;

			image {
				width: 24rpx;
				height: 21rpx;
				margin-right: 10rpx;
			}

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

		.head {
			position: fixed;
			top: 0;
			z-index: 20;

			.status_bar {
				height: var(--status-bar-height);
				width: 100%;
			}

			.header_title {
				height: 70rpx;
				line-height: 70rpx;
				width: 100%;
				box-sizing: border-box;
				font-weight: bold;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				box-sizing: border-box;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				>view:nth-of-type(1) {
					display: flex;
					align-items: center;
				}

				>view:nth-of-type(2) {
					width: 520rpx;
					text-align: center;
					/* margin: auto; */
				}
			}
		}

		&_center {
			>image:nth-of-type(1) {
				width: 146rpx;
				height: 50rpx;
				position: absolute;
				bottom: 75rpx;
				right: 195rpx;
				z-index: 9;
			}

			>image:nth-of-type(2) {
				width: 146rpx;
				height: 50rpx;
				position: absolute;
				bottom: 75rpx;
				right: 20rpx;
				z-index: 9;
			}

			>image:nth-of-type(3) {
				width: 153rpx;
				height: 74rpx;
				position: absolute;
				bottom: 300rpx;
				right: 0;
			}
		}

		&_news {
			width: 750rpx;
			position: absolute;
			bottom: -15rpx;

			&_t {
				display: flex;
				justify-content: space-between;
				align-items: center;
				// margin-top: 24rpx;
				// width: 750rpx;
				padding-right: 30rpx;
				height: 121rpx;
				box-sizing: border-box;
				padding-bottom: 10rpx;
				transform: translateY(10rpx);

				&_price {
					// width: 200rpx;
					// height: 100rpx;
					padding-left: 30rpx;
					color: #ffffff;
					opacity: 0.87;
					margin-right: 30rpx;
					text-align: center;
					font-size: 24rpx;

					>view:nth-of-type(1) {
						font-size: 32rpx;
						font-family: zihun152hao-jijiachaojihei;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}
		}
	}

	//赏tab
	.shangList {
		width: 692rpx;
		height: 138rpx;
		margin: 20rpx auto 30rpx;
		padding: 0 35rpx;
		box-sizing: border-box;

		&_item {
			display: flex;
			height: 138rpx;
			justify-content: start;
			white-space: nowrap;
			align-items: center;

			>view {
				margin: 0 20rpx;
				text-align: center;
			}

			// image{
			// 	width: 101rpx;
			// 	height: 25rpx;
			// }
			view:first-child {
				font-size: 22rpx;
				font-family: zihun147hao-xingyuanhei;
				font-weight: 400;
				color: #fff;
			}

			view:last-child {
				font-family: Source Han Sans CN;
				margin-top: 6rpx;
				font-size: 20rpx;
				color: #fff;
			}
		}
	}

	//购买说明
	.popGm {
		width: 607rpx;
		// height: 904rpx;
		padding-top: 70rpx;
		box-sizing: border-box;
		position: relative;

		.pop_title {
			font-size: 36rpx;
			font-family: zihun152hao-jijiachaojihei;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
		}

		.pop_con {
			padding: 30rpx 40rpx 50rpx;
			box-sizing: border-box;

			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 42rpx;
		}

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

	//抽奖统计
	.choujiang {
		display: flex;
		justify-content: space-between;
		// align-items: center;
		margin: 0 40rpx;

		>view {
			flex: 1;
		}
	}

	.pop_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// border-bottom: 1px solid #BBFFD7;
		color: #fff;
		padding: 20rpx 0;
		box-sizing: border-box;
		margin: 0 auto;
		width: calc(100% - 40rpx);

		>view {
			font-size: 28rpx;
			display: flex;
			align-items: center;

			.name {
				max-width: 200rpx;
			}
		}

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 15rpx;
			border-radius: 50%;
		}
	}

	.bar_box {
		width: 100%;
		position: fixed;
		height: 80rpx;
		z-index: 10;
		left: 0;
		bottom: 40rpx;
		display: flex;
		justify-content: space-around;

		.draw-btn {
			width: 690rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			// padding-top: 40rpx;
			box-sizing: border-box;
			background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
			box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(208, 209, 255, 0.2);
			border-radius: 10rpx;

			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #ffffff;
			text-shadow: 0rpx 3rpx 1rpx rgba(0, 0, 0, 0.4);

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

	.headimg {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.jilv_list_b>image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 6rpx;
	}

	.jilv_list_b {
		font-size: 20rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.jilv_list_l>text {
		/* font-family: 'zcq'; */
		font-size: 28rpx;
		color: #40eee7;
		margin-right: 10rpx;
	}

	.jilv_list_l>image:nth-of-type(1) {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.jilv_list_l {
		display: flex;
		align-items: center;
		flex: 7;
	}

	.jilv_list {
		width: 690rpx;
		// height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 20rpx;
		box-sizing: border-box;
		color: #ffffff;
		position: relative;

		.log-tag {
			position: absolute;
			left: 0;
			top: 0;
			height: 28rpx;
			padding: 0 30rpx 0 20rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(270deg,
					rgba(208, 209, 255, 0) 0%,
					#b080ff 100%);

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

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

			.avatar {
				width: 62rpx;
				height: 62rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.info {
				width: 250rpx;
				padding-left: 10rpx;

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

				.time {
					margin-top: 10rpx;
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #dddddd;
				}
			}
		}

		.log-item-r {
			display: flex;
			flex-flow: column nowrap;
			align-items: flex-end;

			.type {
				font-size: 26rpx;
				font-family: zihun147hao-xingyuanhei;
				font-weight: 400;
				color: #ffffff;
			}

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

				.pic {
					width: 40rpx;
					height: 40rpx;
					border-radius: 6rpx;
					overflow: hidden;
					margin-right: 6rpx;
				}

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

				.prize-title {
					max-width: 160rpx;
				}
			}
		}
	}

	.jilv_con {
		margin: 20rpx auto 0;
		width: 690rpx;

		border: 1px solid;
		border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
		box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(176, 128, 255, 0.8);
	}

	.jilv_title .jilv-tab {
		height: 44rpx;
		padding: 0 30rpx;
		display: inline-flex;
		align-items: center;
		margin-right: 26rpx;

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

		&:first-child {
			margin-left: 30rpx;
		}

		&.act {
			color: #d0d1ff;
		}
	}

	.jilv_title {
		white-space: nowrap;
		margin-top: 30rpx;
	}

	.jilv {
		margin: 22rpx auto;
		width: 690rpx;
	}

	// .jp_btn>image{
	// 	width: 292rpx;
	// 	height: 70rpx;
	// }
	// .jp_btn>view:nth-of-type(2) {
	// 	background: #FF7514;
	// 	border-radius: 10rpx;
	// }

	// .jp_btn>view:nth-of-type(1) {
	// 	border: 2rpx solid #FF7514;
	// 	border-radius: 10rpx;
	// 	color: #FF7514;
	// }

	.jp_btn>view {
		width: 206rpx;
		height: 84rpx;
		font-size: 43rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #ffffff;
	}

	.jp_btn {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.dhbtmbox {
		width: 750rpx;
		height: 32rpx;
	}

	.list_img>.type-num {
		height: 40rpx;
		box-sizing: border-box;
		padding: 0 8rpx;
		width: 100%;
		position: absolute;
		background: rgba(0, 0, 0, 0.8);
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.type {
			font-size: 22rpx;
			font-family: zihun147hao-xingyuanhei;
			font-weight: 400;
			color: #fff;
		}

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

	.list_img>image {
		width: 100%;
		height: 184rpx;
		border-radius: 10rpx;
	}

	.list_img {
		width: 184rpx;
		height: 184rpx;
		margin: 0 auto;
		/* border-radius: 10rpx; */
		position: relative;

		// border: 1px solid #c5fadc;
		/* box-shadow: 0px 0px 10rpx 0px #FF7514; */
	}

	.jp_list {
		font-size: 24rpx;
		width: 210rpx;
		margin-top: 20rpx;
		position: relative;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.pop_gongxi {
		width: 750rpx;
		height: 197rpx;
		display: block;
		margin-bottom: 30rpx;
	}

	// .jp_title_1 > view:nth-child(3n-1) {
	//   margin: 20rpx 30rpx 0 30rpx;
	// }

	.jp_title_1 {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		margin: auto;
		color: #ffffff;
		// padding-bottom: 15rpx;
		// box-sizing: border-box;
	}

	.jp_title {
		box-sizing: border-box;
		padding: 0rpx 50rpx;
		box-sizing: border-box;
		height: 100%;
		/* margin-top: 200rpx; */
	}

	// .jp_name {
	// 	font-size: 28rpx;
	// 	color: #FFFFFF;
	// 	position: absolute;
	// 	top: 104rpx;
	// 	left: 0;
	// 	right: 0;
	// 	margin: auto;
	// 	z-index: 13;
	// }

	// .jp_headimg>image {
	// 	width: 114rpx;
	// 	height: 114rpx;
	// 	border-radius: 50%;
	// }

	// .jp_headimg {
	// 	width: 114rpx;
	// 	height: 114rpx;
	// 	border-radius: 50%;
	// 	border: 1px solid #FF7514;
	// 	position: absolute;
	// 	top: -26rpx;
	// 	left: 0;
	// 	right: 0;
	// 	margin: auto;
	// 	z-index: 12;
	// }

	.pop_jp {
		/* width: 750rpx;
		height: 942rpx;
		margin: auto;
		text-align: center; */
		// height: 854rpx;

		.jp_bg {
			padding-top: 20rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			width: 750rpx;
			height: 650rpx;
			// padding-top: 363rpx;
			box-sizing: border-box;
			// background-position: 0 90rpx;
			// background-size: 100% calc(100% - 90rpx);
		}

		.suc-pop-hd {
			width: 346rpx;
			height: 94rpx;
			margin: 0 auto;
		}

		.shang-title {
			padding: 10rpx;
			text-align: center;

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

	.fangshi text {
		// color: #70ede8;
	}

	.fangshi>view>image {
		margin-right: 20rpx;
	}

	.fangshi image {
		width: 40rpx;
		height: 40rpx;
	}

	.fangshi {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		line-height: 60rpx;
		align-items: center;
	}

	.zhifu {
		width: 206rpx;
		height: 84rpx;
		/* background: #FF7514;
		border-radius: 7rpx; */
		font-size: 36rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_title_btn {
		width: 690rpx;
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;
		box-sizing: border-box;
		margin-top: 50rpx;

		.total-price {
			font-size: 28rpx;
			font-family: zihun152hao-jijiachaojihei;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.order_num text {
		font-size: 32rpx;
		// color: #70ede8;
	}

	.order_num>view:nth-of-type(2) {
		font-size: 24rpx;
	}

	.order_num {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #333333;
		margin-top: 20rpx;
		padding: 20rpx 0;
	}

	.order_pic>view>view:nth-of-type(3) {
		display: flex;
		justify-content: space-between;
		width: 410rpx;
	}

	.order_pic>view:nth-of-type(2) {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #ffffff;
		padding-top: 14rpx;
		box-sizing: border-box;
	}

	.order_pic_img>image {
		width: 168rpx;
		height: 168rpx;
		border-radius: 10rpx;
	}

	.order_pic_img {
		width: 188rpx;
		height: 188rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_pic {
		display: flex;
	}

	.order_title_con1 {
		width: 690rpx;
		background: rgba(34, 34, 34, 0.5);
		// border: 1px solid #ffffff;
		// box-shadow: 0px 0px 13rpx 0px rgba(15, 195, 197, 0.69);
		margin-top: 28rpx;
		padding: 20rpx 30rpx 10rpx;
		box-sizing: border-box;
	}

	.order_title>image {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		right: 14rpx;
		top: 10rpx;
	}

	.order_title {
		font-size: 36rpx;
		font-family: zihun152hao-jijiachaojihei;
		font-weight: 400;
		color: #ffffff;
		position: relative;
		text-align: center;
	}

	.order {
		width: 750rpx;
		height: 994rpx;
		background: #000;
		/* background: rgba(0, 0, 0, 0.9); */
		/* border-radius: 30rpx 30rpx 0px 0px;
		border-top: 5rpx solid #35ED85; */
		position: absolute;
		bottom: 0;
		padding: 30rpx 21rpx 50rpx;
		box-sizing: border-box;
		color: #ffffff;

		border-radius: 20rpx 20rpx 0rpx 0rpx;

		border-top: 2px solid transparent;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to right, #000, #000),
			linear-gradient(20deg, #ffffff, #a11aff, #85dfff, #ba39ff);
		// border-bottom: none;
	}

	.pop_con {
		max-height: 900rpx;
		// background: rgba(0, 0, 0, 0.5);
		margin: 10rpx auto;
		padding: 20rpx 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #ffffff;
		box-sizing: border-box;
	}

	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
	}

	.xuanfu image {
		width: 94rpx;
		height: 110rpx;
		margin-top: 20rpx;
	}

	.xuanfu {
		position: fixed;
		bottom: 220rpx;
		right: 20rpx;
		width: 104rpx;
		z-index: 21;
	}

	.qiehuan {
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		margin-top: 20rpx;
	}

	.qiehuan_line {
		margin: 10rpx auto 0;
		width: 32rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
		border-radius: 2rpx;
	}

	.qiehuan_line>image {
		width: 26rpx;
		height: 16rpx;
	}

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

	.xzs {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: transparent;

		background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
		background-clip: text;
	}

	.lunbo_r image {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}

	.lunbo_r>view:nth-of-type(1) {
		color: #ff7315;
	}

	.lunbo_r {
		font-size: 24rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		color: #ffffff;
	}

	.lunbo>image:nth-of-type(1) {
		width: 132rpx;
		height: 132rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.lunbo {
		display: flex;
		align-items: center;
		height: 172rpx;
		margin-left: 20rpx;
	}

	.zmd {
		width: 690rpx;
		height: 172rpx;
		margin: 20rpx auto;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid #ff7315;
	}

	.goods_v_1 {
		width: 250rpx;
		height: 250rpx;
		border-radius: 10rpx;
	}

	.gmsm {
		width: 147rpx;
		height: 34rpx;
	}

	.goods_v_2_top {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		color: #ffffff;
		text-align: center;
	}

	.goods_v_2_top>image {
		width: 40rpx;
		height: 40rpx;
	}

	.goods_v_2 {
		box-sizing: border-box;
		font-size: 24rpx;
		color: #ffffff;
		width: 370rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods_v_2>.hang2 {
		height: 80rpx;
		font-size: 28rpx;
	}

	.goods_v_2>.flex_center {
		justify-content: space-between;
	}

	.jiaqian {
		font-size: 24rpx;
		color: #ff7514;
		text-shadow: 0px 0px 14rpx #ff7514;
	}

	.goods_v_2>image {
		width: 119rpx;
		height: 25rpx;
	}

	.goods_v_2 text {
		font-size: 40rpx;
		margin: 0 2rpx;
	}

	.redu {
		// width: 250rpx;
		height: 40rpx;
		font-size: 24rpx;
		margin-top: 34rpx;
		line-height: 40rpx;
		/* overflow: hidden; */
		display: flex;
		align-items: center;
	}

	.redu>image {
		width: 40rpx;
		height: 40rpx;
		border: 1px solid rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}

	.content {
		padding-bottom: 200rpx;
		// background: #222222;
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;

		.hot-num {
			margin: 0 auto;
			width: 710rpx;
			height: 70rpx;
			background: rgba(208, 209, 255, 0.1);
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user-list {
				display: flex;

				.avatar {
					width: 50rpx;
					height: 50rpx;
					background: #7f7f7f;
					border: 1px solid #cccccc;
					box-sizing: border-box;
					border-radius: 50%;
					overflow: hidden;
				}

				.avatar+.avatar {
					margin-left: -16rpx;
					position: relative;
				}
			}

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

		.tong-ji {
			position: absolute;
			right: 30rpx;
			z-index: 10;
			display: flex;
			align-items: center;

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

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

		.sw-wrap {
			width: 100%;
			height: 330rpx;

			.pic {
				width: 330rpx;
				height: 100%;
				margin: 0 auto;

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

		.ticket-num {
			margin: 40rpx 0 0;
			display: flex;
			justify-content: center;

			.ticket-num-inner {
				padding: 6rpx 12rpx;
				border: 1px solid;
				border-image: linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb) 1 1;

				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: transparent;
				background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
				background-clip: text;
			}
		}

		.goods-title {
			margin: 30rpx auto 0;
			width: 590rpx;
			height: 50rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

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

		.type-list {
			margin: 30rpx auto 0;
			width: 710rpx;
			box-sizing: border-box;
			padding: 30rpx 60rpx;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;

			.type-item {
				width: 45%;
				display: flex;
				align-items: center;
				margin: 10rpx 0;

				.dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background: #dddddd;
					margin-right: 20rpx;
				}

				.title {
					font-size: 34rpx;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #ffffff;

					text {
						padding-left: 10rpx;

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

	.sangs {
		font-size: 24rpx;
		margin: 6rpx 0;
	}

	.sp_head>text {
		font-size: 24rpx;
		color: #333333;
	}

	.sp_shang>image {
		width: 25rpx;
		height: 33rpx;
		margin-right: 10rpx;
	}

	.sp_shang {
		color: transparent;
		/* background: linear-gradient(90deg, #A3BFFF 0%, #9FE5CF 35%, #FFD1AF 72%, #FFB8C9 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
		/* font-family: 'zcq'; */
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-right: 6rpx;
	}

	.sp_head {
		font-size: 20rpx;
	}

	.sp {
		width: 690rpx;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		color: #ffffff;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.spt>view {
		width: 166rpx;
		margin-right: 25rpx;
		flex-shrink: 0;
	}

	.spt {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		overflow-y: hidden;
		overflow-x: scroll;
	}

	.imgs {
		width: 168rpx;
		height: 168rpx;
		border-radius: 8rpx;
		display: flex;
	}

	.spbox {
		width: 690rpx;
		margin: 22rpx auto 0;
	}

	.sang:nth-child(1) {
		margin-left: 20rpx;
	}

	.shop_con {
		padding: 10rpx;
		box-sizing: border-box;
		line-height: 40rpx;
		/* background: #000000; */
		border-radius: 0 0 10rpx 10rpx;
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.6);
	}

	.qiangguang>image {
		width: 100rpx;
		height: 52rpx;
	}

	.qiangguang {
		width: 220rpx;
		height: 214rpx;
		background: rgba(0, 0, 0, 0.7);
		// border-radius: 7rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.item_num {
		background: rgba(21, 23, 23, 0.8);
		bottom: 0rpx;
		left: 0rpx;
		position: absolute;
		display: flex;
		align-items: center;
		width: 100%;
		height: 40rpx;
	}

	.item_num>view:nth-of-type(2) {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		/* font-style: italic; */
		color: #ffffff;
	}

	.item_num>view:nth-of-type(1) {
		padding: 0 14rpx;
		box-sizing: border-box;

		font-size: 28rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #fff;
	}

	.item_head>image {
		width: 100%;
		height: 206rpx;
		border-radius: 10rpx;
		/* border-radius: 7rpx; */
	}

	.item_head {
		width: 100%;
		height: 206rpx;
		position: relative;
	}

	.shop_item {
		width: 210rpx;
		margin: 30rpx 0 0;
		position: relative;
		box-sizing: border-box;
		color: #ffffff;
		border-radius: 10rpx;
		background-color: #111;
		border: 1px solid;
		border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
	}

	.shop_item:nth-child(3n-1) {
		margin: 30rpx 30rpx 0;
	}

	.shop {
		padding: 1rpx 30rpx 0;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
	}

	.d-pop {
		position: relative;
		width: 610rpx;
		height: 820rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.pic {
			width: 100%;
			height: 530rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: inherit;
			}
		}

		.title {
			margin: 40rpx auto 0;
			width: 410rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;

			.hang1 {}

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

		.common_bg {}

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

		.icon {}
	}

	.res-pop {
		width: 100%;
		height: 758rpx;
		position: relative;

		.res-pop-hd {
			height: 120rpx;
		}

		.res-pop-bd {
			height: 620rpx;

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

				.res-item {
					width: 100%;
					border: 1px solid;
					border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
					box-sizing: border-box;
					background: #111111;

					.pic {
						width: 100%;
						height: 210rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							border-radius: inherit;
						}

						.type-tag {
							position: absolute;
							left: 0;
							top: 0;
							z-index: 2;
							padding: 0 16rpx;
							height: 32rpx;
							background: linear-gradient(90deg, #729fdb 0%, #d0dbff 100%);
							display: flex;
							align-items: center;

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

						.num {
							position: absolute;
							z-index: 2;
							right: 6rpx;
							bottom: 6rpx;
							padding: 0 16rpx;
							height: 32rpx;
							background: rgba(0, 0, 0, 0.6);
							border-radius: 16rpx;
							display: flex;
							align-items: center;

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

					.title {
						padding: 10rpx 10rpx;

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

					.hang1 {}
				}
			}
		}

		.res-pop-ft {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			transform: translateY(100%);
			padding-top: 40rpx;

			.ft-btn {
				width: 230rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;

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

				&.confirm {
					text {
						color: transparent;

						background: linear-gradient(90deg,
								#6adeff 0%,
								#7ab5ff 50%,
								#ff7feb 100%);
						background-clip: text;
					}
				}
			}
		}
	}
</style>