<template>
	<view class="content" :style="'background: url('+ z_imgPath + '/ka_bg.png'+ ') repeat 0 0 / 100% 100%;'">

		<view class="head">
			<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
			<view class="header_title">
				<view @click="back()">
					<image :src="z_imgPath + 'back.png'"></image>返回
				</view>
				<view class="hang1">抽卡机 </view>
			</view>
		</view>

		<view class="ka_title">
			<view>
				<view>{{goods.title}} </view>
				<view style="font-size: 24rpx;"><text>{{goods.price}}</text> </view>
			</view>
		</view>

		<view class="gonggao" :style="goods.card_notice?'border: 2rpx solid #FFFFFF;':''" v-if="goods.card_notice">
			<uni-notice-bar :single="true" :speed="50" color="#ffffff" :scrollable="true" :text="goods.card_notice"
				backgroundColor="rgba(0,0,0,0)"></uni-notice-bar>

		</view>

		<view class="box" :style="'background: url(' + z_imgPath + '/ka_item_bg.png' + ') repeat 0 0 / 100% 100%;'">
			<view :style="'background: url('+ goods.imgurl_detail+ ') repeat 0 0 / 100% 100%;'">
			</view>
		</view>

		<view class="footer">
			<view :style="'background: url('+z_imgPath + 'btn_l.png'+ ') repeat 0 0 / 100% 100%;'"
				@click="choujiang('left_count')">
				{{card_set.left_title}}
				<view :style="'background: url('+ z_imgPath + 'pop.png'+ ') repeat 0 0 / 100% 100%;'"
					v-if="card_set.left_notice">
					{{card_set.left_notice}}
				</view>
			</view>
			<view :style="'background: url('+ z_imgPath + 'btn_r.png'+ ') repeat 0 0 / 100% 100%;'"
				@click="choujiang('right_count')">
				{{card_set.right_title}}
				<view :style="'background: url('+ z_imgPath + 'pop.png'+ ') repeat 0 0 / 100% 100%;'"
					v-if="card_set.right_notice">
					{{card_set.right_notice}}
				</view>
			</view>
			<view :style="'background: url('+ z_imgPath + 'btn_c.png'+ ') repeat 0 0 / 100% 100%;'"
				@click="choujiang('center_count')">
				{{card_set.center_title}}
				<view :style="'background: url('+ z_imgPath + 'pop.png'+ ') repeat 0 0 / 100% 100%;'"
					v-if="card_set.center_notice">
					{{card_set.center_notice}}
				</view>
			</view>
		</view>

		<view class="xuanfu">
			<image :src="z_imgPath + 'jilv.png'" @click="getjilv()"></image>
			<image :src="z_imgPath + 'tujian.png?1'" @click="getTujian()"></image>
			<image :src="z_imgPath + 'guize.png'" @click="$refs.shuoming.open()"></image>
			<image :src="z_imgPath + 'kace.png'" @click="gotoPage('/pages/chouka/detail?goods_id=' + goods.id)">
			</image>
			<image :src="z_imgPath + 'kefu.png'" @click="tokefu()"></image>
		</view>

		<uni-popup ref="shuoming" type="center">
			<view class="pop" :style="'background: url('+ z_imgPath + 'gz_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
				<view class="pop_con">
					<scroll-view scroll-y="true" style="height: 440rpx;">
						<view v-html="news"></view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<!-- 确认订单 -->
		<uni-popup ref="order_show" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<image :src="z_imgPath + 'order_p.png'"></image>
					<view class="ca" @click="$refs.order_show.close()">×</view>
				</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;">类型：1包</view>
							<view style="margin-top: 10rpx;">
								<text>单价：<text style="color: ;">{{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">
						<view class="flex_center">
							<image :src="z_imgPath+'bi.png'"></image>
							<view>
								使用星钻抵扣￥<text>{{pay_news.use_integral}}</text>（剩余：<text>{{pay_news.integral}}</text>）
							</view>
						</view>
						<image :src="z_imgPath + 'yuan'+ (bi?'_sel':'') +'.png'"></image>
					</view>
					<view class="fangshi" @click="change_yuan_index(2)">
						<view class="flex_center">
							<image :src="z_imgPath + 'yue.png'"></image>
							<view>
								使用星钻抵扣￥<text>{{pay_news.use_money}}</text>（剩余：<text>{{pay_news.money}}</text>）
							</view>
						</view>
						<image :src="z_imgPath + 'yuan'+ (yue?'_sel':'') +'.png'"></image>
					</view>
				</view>
				<view style="font-size: 24rpx;margin:20rpx 10rpx;">
					下单购买即表示同意
					<text style="color: #FF7514;" @click="gotoPage('/pages/guize/guize?type=2')">《用户服务协议条款》</text>
				</view>
				<view class="order_title_btn">
					<view>
						总计:{{goods.box_type==5?'':'￥'}}<text
							style="font-size: 40rpx;">{{pay_news.price}}{{goods.box_type==5?'积分':''}}</text>
					</view>
					<view class="zhifu" @click="pay()">确定支付</view>
				</view>
			</view>
		</uni-popup>
		<!-- 抽卡记录 -->
		<uni-popup ref="jilv" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<image :src="z_imgPath + 'ckjl_p.png'"></image>
					<view class="ca" @click="$refs.jilv.close(),page_num=1,mixTotal=0">×</view>
				</view>
				<view class="jilv_title">
					<view v-for="(item,index) in shang_cate" :key="index" @click="change_shang_id(item.id)"
						:style="shang_id==item.id?'background:#FF7514':''">
						<text>{{item.title}}</text>
					</view>
				</view>
				<!--   -->
				<scroll-view scroll-y="true" @scrolltolower="getjilv" style="height: 900rpx;">
					<view v-for="(item,index) in jl_Arr" :key="index" class="jilv_list">
						<view>
							<view class="flex_center ">
								<image :src="item.user_info.headimg"></image>
								<view class="hang1" style="max-width: 260rpx;">{{item.user_info.nickname}}</view>
							</view>
							<view style="font-size: 24rpx;">{{item.addtime}}</view>
						</view>
						<view>
							<view class="flex_center">
								<image :src="item.goodslist_imgurl" style="border-radius: 8rpx;"></image>
								<view class="hang1" style="max-width: 300rpx;">{{item.goodslist_title}}</view>
							</view>
							<view>X{{item.prize_num}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 图鉴 -->
		<uni-popup ref="tujian" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<image :src="z_imgPath + 'tujian_p.png'"></image>
					<view class="ca" @click="$refs.tujian.close(),page_num_t=1,mixTotal_t=0">×</view>
				</view>
				<view class="jilv_title">
					<view v-for="(item,index) in tujian_cate" :key="index" @click="change_tujian(item.id)"
						:style="tujian_id==item.id?'background:#FF7514':''">
						<text>{{item.title}}</text>
						<!-- v-if="index!==0"  -->
						<view style="font-size: 20rpx;">({{item.pro}})</view>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="getTujian" style="height: 900rpx;">
					<view class="tuijian_list">
						<view class="tuijian_item" v-for="(item,index) in tujian_Arr" :key="index">
							<image :src="item.imgurl"></image>
							<view>{{item.title}}</view>
							<!-- <view style="font-size: 20rpx;">{{item.shang_title}}</view> -->
							<view style="font-size: 20rpx;">{{item.price}}</view>
							<view style="font-size: 20rpx;">{{item.real_pro}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 奖品弹窗 -->
		<uni-popup ref="jp_show" type="center" :isMaskClick="false" mask-background-color="rgba(0,0,0,.95)">
			<view class="pop_jp ">
				<view class="jp_title_1">
					<view class="jp_list" v-for="(v,i) in jp_arr" :key='i'
						:animation="!v.kaiqi && kaiqi_index==i ?animationMain:animationBack"
						:style="'background: url('+  v.special_imgurl +') no-repeat 0 0 / 100% 100%;'"
						@click="kaiqi_jp(v.kaiqi,i)">
						<!-- z_imgPath+ 'bei.png -->
						<view class="jp_img"
							:style="'background: url('+  (!v.kaiqi?v.prize_imgurl:v.goodslist_imgurl) +') no-repeat 0 0 / 100% 100%;'">

						</view>
						<view class="jp_shang_title" v-if="v.kaiqi"> {{v.shang_title}} </view>
						<view class="jp_prize_num">x{{v.prize_num}}</view>
					</view>
				</view>

				<view class="jp_btn">
					<image :src="z_imgPath + 'yjdk.png'" @click="dakai()"></image>
					<image :src="z_imgPath + 'srkc.png'" @click="inkace()"></image>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				z_imgPath: this.$z_img + 'chouka/',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				goods_id: '',
				goods: {},
				card_set: {},
				news: '',

				// 
				prize_num_type: '',
				bi: true,
				yue: true,
				pay_news: {},
				// 支付失效
				pay_status: false,

				// 抽卡记录
				shang_cate: [],
				shang_id: 0,
				// 中赏记录
				jl_Arr: [],
				page_num: 1, // 页码
				mixTotal: 0, // 统计信息总页数
				// 图鉴详情
				tujian_cate: [],
				tujian_id: 0,
				tujian_Arr: [],
				page_num_t: 1, // 页码
				mixTotal_t: 0, // 统计信息总页数
				// 翻牌
				jp_news: {},
				jp_arr: [],
				animationMain: null, //正
				animationBack: null,
				kaiqi_index: '',
				// 是否全收 1:全收
				buy_type: 0,
				// 是否开完明信片
				is_open_end: false,

			}
		},

		onLoad(v) {
			if (v.pid) {
				uni.setStorageSync('pid', v.pid)
			}
			this.goods_id = v.goods_id
			this.getData()
			this.getDanye(6)
		},
		onShareAppMessage() {
			let that = this;
			
			return {
				title: that.$config.getAppSetting("app_name")+ that.goods.title + '系列',
				imageUrl: that.goods.card_banner,
				path: "/pages/chouka/ka?goods_id=" + that.goods_id + '&pid=' + uni.getStorageSync('userinfo').ID
			};
		},
		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_open_end = true
							return
						}
					} else {
						this.is_open_end = false
						return
					}
				}
			}
		},
		methods: {
			inkace() {
				let that = this;
				console.log(this.is_open_end)
				if (!this.is_open_end) {
					uni.showModal({
						title: '提示',
						content: '系统将默认自动开启您的奖袋，并存入卡册',
						cancelText: '取消',
						confirmText: '确定',
						confirmColor: '#FF7514',
						cancelColor: '#999999 ',
						success(res) {
							if (res.confirm) {
								for (let i = 0; i < that.jp_arr.length; i++) {
									that.$set(that.jp_arr[i], 'kaiqi', true)
								}
								setTimeout(() => {
									that.$refs.jp_show.close()
								}, 2000)
							} else if (res.cancel) {

							}
						}
					})
				} else {
					this.$refs.jp_show.close()
				}

			},
			dakai() {
				for (let i = 0; i < this.jp_arr.length; i++) {
					this.$set(this.jp_arr[i], 'kaiqi', true)
				}
			},
			kaiqi_jp(a, b) {
				let that = this
				that.kaiqi_index = b
				that.animation_main = uni.createAnimation({
					duration: 800,
					timingFunction: 'linear'
				})
				that.animation_back = uni.createAnimation({
					duration: 0,
					timingFunction: 'linear'
				})
				if (!a) {
					// 点击正面
					this.animation_main.rotateY(180).step()
					this.animationMain = this.animation_main.export()
					setTimeout(() => {
						that.$set(that.jp_arr[b], 'kaiqi', true)
						that.animation_back.rotateY(0).step()
						this.animationBack = this.animation_back.export()
					}, 750)
				}
			},
			// 图鉴详情
			change_tujian(e) {
				this.tujian_id = e
				this.page_num_t = 1
				this.tujian_Arr = []
				this.getTujian()
			},
			getTujian() {
				let that = this;
				if (this.page_num_t !== 1 && this.page_num_t > this.mixTotal_t) {
					return
				}
				that.req({
					url: 'cardextractor_goodslist_log',
					Loading: true,
					data: {
						page: that.page_num_t,
						goods_id: that.goods_id,
						shang_id: that.tujian_id
					},
					success(res) {
						if (res.status == 1) {
							that.tujian_cate = res.data.category;
							// that.tujian_id = that.tujian_cate[0].id;
							that.mixTotal_t = res.data.last_page
							if (that.page_num_t === 1) {
								that.tujian_Arr = res.data.goodslist;
							} else {
								that.tujian_Arr = that.tujian_Arr.concat(res.data.goodslist)
							}
							that.page_num_t += 1
							that.$refs.tujian.open()
							console.log(that.tujian_Arr)
						}
					}
				})
			},
			// 抽卡记录
			change_shang_id(e) {
				this.shang_id = e
				this.page_num = 1
				this.jl_Arr = []
				this.getjilv()
			},
			getjilv() {
				let that = this;
				if (this.page_num !== 1 && this.page_num > this.mixTotal) {
					return
				}
				that.req({
					url: 'cardextractor_shang_log',
					Loading: true,
					data: {
						page: that.page_num,
						goods_id: that.goods_id,
						shang_id: that.shang_id
					},
					success(res) {
						if (res.status == 1) {
							// that.shang_cate = res.data.category;
							// that.jl_Arr = res.data.data;
							// that.$refs.jilv.open()

							that.shang_cate = res.data.category;
							that.mixTotal = res.data.last_page
							if (that.page_num === 1) {
								that.jl_Arr = res.data.data;
							} else {
								that.jl_Arr = that.jl_Arr.concat(res.data.data)
							}
							that.page_num += 1
							that.$refs.jilv.open()
						}
					}
				})
			},
			change_yuan_index(e) {
				if (e == 1) {
					this.bi = !this.bi
				}
				if (e == 2) {
					this.yue = !this.yue
				}
				this.order_money()
			},
			choujiang(e) {
				this.prize_num_type = e
				this.order_money()
			},
			order_money() {
				let that = this;
				that.req({
					url: 'cardextractor_ordermoney',
					Loading: true,
					data: {
						prize_num_type: that.prize_num_type,
						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
						}
					}
				})
			},

			pay() {
				let that = this;
				that.jp_arr = []
				let info = {
					prize_num_type: that.prize_num_type,
					goods_id: that.goods_id,
					use_money_is: that.yue ? 1 : 2,
					use_integral_is: that.bi ? 1 : 2
				}
				if (that.pay_status) {
					return
				}
				that.req({
					url: 'cardextractor_orderbuy',
					data: info,
					success(res) {
						if (res.status == 1) {
							if (res.data.status == 1) {
								that.info = {}
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.res.timeStamp,
									nonceStr: res.data.res.nonceStr,
									package: res.data.res.package,
									signType: 'MD5',
									paySign: res.data.res.paySign,
									complete(ress) {
										if (ress.errMsg == 'requestPayment:fail cancel') {
											uni.showToast({
												title: '取消支付',
												icon: 'none',
												duration: 1000
											})
										}
										if (ress.errMsg == 'requestPayment:ok') {
											uni.showToast({
												title: '支付成功',
												icon: 'success',
												duration: 1000
											})
											setTimeout(() => {
												that.$refs.order_show.close()
												that.req({
													url: 'cardextractor_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.$refs.jp_show.open()
															// that.loadData(1)
														}

													}
												})
											}, 1500)

										}
									}
								})
							} else {
								that.info = {}
								that.$refs.order_show.close()
								that.req({
									url: 'cardextractor_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.$refs.jp_show.open()
											// that.loadData(1)
										}

									}
								})
							}
						}
					}
				})
			},

			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
						}
					}
				})
			},
			back() {
				// uni.navigateBack()
				uni.switchTab({
					url: '/pages/chouka/index'
				})
			},
			getData() {
				let that = this;
				that.req({
					url: 'cardextractor_goodsdetail',
					Loading: true,
					data: {
						goods_id: that.goods_id
					},
					success(res) {
						if (res.status == 1) {
							that.goods = res.data;
							that.card_set = res.data.card_set
						}

					}
				})
			},



		}
	}
</script>

<style>
	.jp_btn>image {
		width: 301rpx;
		height: 93rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.jp_btn {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 200rpx;
		/* background: rgba(0, 0, 0, 0.85); */
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.jp_prize_num {
		text-align: center;
		color: #FFFFFF;
		margin-top: -10rpx;
	}

	.jp_shang_title {
		position: absolute;
		top: 22rpx;
		left: 14rpx;
		box-sizing: border-box;
		background: #FF7514;
		color: #FFFFFF;
		padding: 2rpx 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 10rpx 0;
	}

	.jp_img {
		/* position: absolute;
		top: 14rpx;
		left: 14rpx;
		box-sizing: border-box; */
		width: 210rpx;
		height: 283rpx;
		margin: 15rpx auto;
	}


	.jp_list {
		font-size: 24rpx;
		width: 224rpx;
		height: 318rpx;
		margin-top: 20rpx;
		/* padding: 0 30rpx; */
		box-sizing: border-box;
	}

	.jp_title_1>view:nth-child(3n+2) {
		/* margin: 20rpx 26rpx 0; */
	}

	.jp_title_1 {
		width: 750rpx;
		/* padding: 0 40rpx; */
		box-sizing: border-box;
		/* height: 900rpx; */
		/* overflow-y: scroll; */
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.pop_jp {
		width: 750rpx;
		height: 100vh;
		padding-top: 88rpx;
		padding-bottom: 300rpx;
		overflow-y: scroll;
		box-sizing: border-box;
	}

	.tuijian_item>image {
		width: 212rpx;
		height: 297rpx;
	}

	.tuijian_item {
		font-size: 24rpx;
		text-align: center;
		width: 212rpx;
		margin-top: 20rpx;
	}

	.tuijian_list>.tuijian_item:nth-child(3n+2) {
		margin: 20rpx 20rpx 0;
	}

	.tuijian_list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		/* height: 700rpx; */
	}

	.jilv_list>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #F7F7F7;
	}

	.jilv_list image:nth-of-type(2) {
		width: 55rpx;
		height: 55rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
	}

	.jilv_list image:nth-of-type(1) {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.jilv_list {
		width: 657rpx;
		height: 164rpx;
		border: 2rpx solid #F7F7F7;
		margin: 22rpx auto;
		padding: 10rpx 20rpx 16rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.jilv_title>view {
		padding: 4rpx 20rpx;
		border: 3rpx solid;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 24rpx;
		flex-shrink: 0;
		color: #F7F7F7;
	}

	.jilv_title {
		font-size: 30rpx;
		color: #F7F7F7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 20rpx auto;
		overflow-x: scroll;
	}

	.fangshi text {
		color: #FF7514;
	}

	.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: 252rpx;
		height: 67rpx;
		background: #FF7514;
		border-radius: 7rpx;
		font-size: 33rpx;
		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;
	}

	.order_num text {
		font-size: 32rpx;
		color: #FF7514;
	}

	.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: 610rpx;
	}

	.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: 0;
		height: 188rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_pic {
		display: flex;
	}

	.order_title_con1 {
		width: 690rpx;
		background: #090909;
		border: 2rpx solid #FF7514;
		border-radius: 17rpx;
		margin-top: 28rpx;
		padding: 20rpx 30rpx 10rpx;
		box-sizing: border-box;
	}

	.order_title>image {
		width: 275rpx;
		height: 88rpx;
		position: absolute;
		left: 30rpx;
		top: -44rpx;
	}

	.order_title {
		font-size: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		position: relative;
		text-align: right;
	}

	.order {
		width: 750rpx;
		background: rgba(0, 0, 0, 0.9);
		border-radius: 30rpx 30rpx 0px 0px;
		border: 5rpx solid #FF7315;
		border-bottom: none;
		position: absolute;
		bottom: 0;
		padding: 10rpx 30rpx 50rpx;
		box-sizing: border-box;
		color: #FFFFFF;
	}


	.pop_con {
		height: 440rpx;
		margin: auto;
		padding: 0rpx 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	.pop {
		width: 543rpx;
		height: 801rpx;
		padding-top: 192rpx;
		box-sizing: border-box;
		/* background: #FFFFFF; */
		/* border-radius: 20rpx; */
	}

	button::after {
		border: none;
	}

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

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

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

	.footer>view>view {
		width: 145rpx;
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: -20rpx;
		font-size: 20rpx;
		font-weight: 400;
		padding-bottom: 24rpx;
		box-sizing: border-box;
	}

	.footer>view {
		width: 311rpx;
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		font-weight: bold;
	}

	.footer>view:nth-of-type(3) {
		width: 268rpx;
		height: 265rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}

	.footer {
		width: 650rpx;
		/* margin: 330rpx auto; */
		margin: 120rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		color: #FFFFFF;
	}

	.box>view {
		/* width: 631rpx;
		height: 889rpx;
		box-sizing: border-box;
		position: absolute;
		top: -138rpx;
		left: -188rpx; */
		width: 255rpx;
		height: 473rpx;
		display: block;
		margin: 138rpx auto 0;
	}

	.box {
		/* 	width: 255rpx;
		height: 473rpx;
		margin: 170rpx auto 0;
		position: relative; */
		width: 631rpx;
		height: 889rpx;
		padding-top: 1rpx;
		margin: 20rpx auto 0;
	}

	.gonggao {
		width: 718rpx;
		height: 48rpx;
		margin: 20rpx auto;
		/* display: flex; */
		/* align-items: center; */
		font-size: 22rpx;
		color: #CCCCCC;
		padding-top: 6rpx;
		box-sizing: border-box;
	}

	.ka_title text {
		font-size: 24rpx;
		font-weight: bold;
		margin: 0 4rpx;
	}

	.ka_title>view {
		box-shadow: 0px 9rpx 55rpx 0px rgba(255, 117, 20, 0.64) inset;
		border: 3rpx solid #FF7514;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		padding: 0 36rpx;
		box-sizing: border-box;
	}

	.ka_title {
		width: 750rpx;
		height: 128rpx;
		background: #161616;
		box-shadow: 0px 9rpx 55rpx 0px rgba(255, 117, 20, 0.64);
		box-sizing: border-box;
	}

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

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

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

	.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;
		color: #FFFFFF;
	}

	.head {
		position: fixed;
		top: 0;
		z-index: 20;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
		width: 750rpx;
		box-sizing: border-box;
		height: 150rpx;
	}

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

	.content {
		background: #222222;
		width: 100vw;
		height: 1597rpx;
		padding-top: 150rpx;
		box-sizing: border-box;
		background-attachment: fixed;
		position: relative;
	}
</style>
