<template>
	<!-- 展示页面 -->

	<view class="showPage">
		<!-- 展示头部信息 -->
		<view class="showHeader">
			<!-- 返回按钮 -->
			<view class="return" @click="returnIndex">
				<u-icon color="white" size="45" name="arrow-left"></u-icon>
			</view>
			<!-- 卡片抽奖 -->
			<view class="card">
				<!-- 商品展示信息 -->
				<view class="goodcommodity">
					<!-- 跳动的商品信息 -->
					<!-- <view class="bounce">
						<view class="circle">

						</view>
						<span>181***0购买了史诗款</span>
						<view class="goods">

						</view>
					</view> -->
					<!-- 商品 -->
					<view class="commodity">
						<img v-if="boxMsg.productList" :src="boxMsg.productList[0].pic" alt="">
					</view>
					<!-- 商品信息 -->
					<view class="goodMessage" v-if="boxMsg.productList">
						<view class="styleImg" v-if="boxMsgGoods[0]" :class="typeArr[boxMsgGoods[0].level]">
						</view>
						<view class="size">
							<p class="sizeName">{{boxMsg.productList[0].name}}</p>
							<p class="reference">¥{{boxMsg.productList[0].price}}</p>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 下方展示 -->
		<view class="showbottom">
			<!-- 滚动图片 -->
			<view class="rollPicture">
				<!-- :style="{left:moveLeft+'rpx'}" -->
				<ul class="leftRoll">
					<li v-for="(el,index) in boxMsgGoods" :key="index">
						<view class="RollLabel" :class="smileTypeArr[el.level]">
							
						</view>
						<image :src="el.pic" mode=""></image>
						
					</li>
				</ul>
			</view>

			<!-- 查看抽奖概率 -->
			<view class="probability" @click="commodityDetails">
				<view class="probabilityBox">
					<view class="left">
						<image class="xia" :src="require('@/static/xia.png')" mode=""></image>
						<span>查看盒内全部商品</span>
					</view>
					<view class="right">
						<image class="hezi" :src="require('@/static/hezi.png')" mode=""></image>
						<span>抽奖概率</span>
					</view>
				</view>

			</view>

			<!-- 商品 -->
			<view class="goodAll">
				<!-- 商品标题 -->
				<view class="goodstitle">
					<p>ALL GOOD THINGS</p>
					<span>盒内全部商品</span>
				</view>

				<!-- 商品列表 -->
				<view class="goodsList">
					<view class="good" v-for="(el,index) in boxMsgGoods" :key="index">
						<view class="goodLabel" :class="typeArr[el.level]">
						</view>
						<view class="goodImg">
							<!-- <img :src="el.pic" alt=""> -->
							<u-lazy-load class="lazyImg" :image="el.pic"></u-lazy-load>
						</view>
						<span class="goodDescribe">
							{{el.name}}
						</span>
						<view class="goodPriceOrNum">
							<span class="price"><span class="small">参考价 ￥</span>{{el.price}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 下拉页面 -->
		<view class="Details">
			<u-popup v-model="show" mode="bottom" :mask="true" width="750rpx" close-icon-color="#FFFFFF"
				:closeable="true" close-icon-size="60" close-icon="close-circle">
				<!-- 商品概率 -->
				<view class="probabilityBelow">
					<view class="topBor"></view>
					<!-- 滚动视图 -->
					<scroll-view class="scrollBox" :scroll-y="true" :show-scrollbar="true">
						<!-- 头提示 -->
						<view class="topHint">
							奖品抽奖存在概率性，付费请谨慎
						</view>
						<!-- 概率商品类型 -->
						<view class="typeProd">
							<span>盒内商品类型概率</span>
							<view class="classify">
								<view class="lei">
									<view class="goodLabelFont pt"></view>

									<span class="goodLabel">90.767%</span>
								</view>
								<view class="lei">
									<view class="goodLabelFont zg"></view>
									<span class="goodLabel">8.723%</span>
								</view>
								<view class="lei">
									<view class="goodLabelFont ss"></view>
									<span class="goodLabel">0.342%</span>
								</view>
								<view class="lei">
									<view class="goodLabelFont cs"></view>
									<span class="goodLabel">0.168%</span>
								</view>
							</view>
						</view>
						<!-- 全部商品 -->
						<view class="goodAll">
							<!-- 商品标题 -->
							<view class="goodstitle">
								<p>ALL GOOD THINGS</p>
								<span>盒内全部商品</span>
							</view>

							<!-- 商品列表 -->
							<view class="goodsList">
								<view class="good" v-for="(el,index) in boxMsgGoods" :key="index">
									<view class="goodLabel" :class="typeArr[el.level]">
									</view>
									<view class="goodImg">
										<!-- <img :src="el.pic" alt=""> -->
										<u-lazy-load class="lazyImg" :image="el.pic"></u-lazy-load>
									</view>
									<span class="goodDescribe">
										{{el.name}}
									</span>
									<view class="goodPriceOrNum">
										<span class="price"><span class="small">参考价 ￥</span>{{el.price}}</span>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>

		<!-- 一发入魂 -->
		<view class="oneOpen">
			<u-popup :mask-close-able="false" v-model="oneShow" mode="bottom" :mask="true" width="750rpx"
				close-icon-color="#FFFFFF" :closeable="true" close-icon-size="60" close-icon="close-circle">
				<!-- 支付开始 -->
				<view class="startPay">
					<p class="title">确认支付</p>
					<!-- 支付商品 -->
					<view class="Paygoods">
						<!--  -->
						<view class="goods">
							<img :src="boxMsg.pic" alt="">
						</view>
						<view class="message">
							<view class="top">
								<p>【限时五折】{{boxMsg.subTitle}}</p>
								<span>未成年人须在家长监督下进行购买</span>
							</view>
							<view class="bottom">
								<view class="leftPrice">
									<span class="normal">￥<span class="PriceBig">{{boxMsg.price*payNum}}</span></span>
									<span class="discount">￥{{boxMsg.price*payNum*2}}</span>
								</view>
								<p>限时福利打五折</p>
							</view>
						</view>
					</view>

					<!-- 需要支付金额 -->
					<p class="needPay">
						<span>您需要支付：</span>
						￥{{boxMsg.price*payNum}}
					</p>
					<!-- 购买协议 -->
					<view class="agreement">
						<p>我已阅读并同意<span @click="navAgreement">《幸运星球用户购买协议》</span></p>

						<u-icon @click="consent" name="checkmark-circle-fill" :color="consentBtn?'red':'darkgray'"
							size="50"></u-icon>
					</view>
					<!-- 约定 -->
					<view class="appoint">
						<p>若完成交易则代表您同意以下约定：</p>
						<p class="import">1.盲盒一经开启，不可退款</p>
						<p class="import">2.提货须支付10元运费，App内暂无包邮活动</p>
						<p>3.受疫情及天气影响，部分偏远地区(新疆、西藏、甘肃、青海)不配送，内蒙古、宁夏、海南部分地区需补物流差价。多地物流公司无法接单及配送，订单将暂缓发出,待当地情况好转后处理p</p>
						<p>4.站内魔盒将不定时上线“保底必中 R 款”活动，该活动每位用户仅可享受 1
							次，保底所需的最大购买次数以页面展示为准。第一次开出R款后，该魔盒“保底必中R款”活动将对购买用户失效，如有疑问请咨询在线客服</p>
					</view>
					<!-- 支付按钮 -->
					<view class="btnPay" @click="payment">
						确认支付 ￥{{boxMsg.price*payNum}}
					</view>
				</view>
			</u-popup>
		</view>


		<!-- 底部固定 -->
		<view class="Footer">
			<view class="FooterBox">
				<!-- 试一试 -->
				<view class="giveAshot" @click="attempt">
					<image class="sys" :src="require('@/static/sys.png')" mode=""></image>
					<span>试一试</span>
				</view>
				<!-- 一发入魂 -->
				<view class="once" @click="payCli">
					一发入魂 ¥{{boxMsg.price}}
				</view>
				<!-- 五连不重 -->
				<view class="five" @click="payFiveCli">
					五连不重 ¥{{boxMsg.price*5}}
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 下拉物品
				show: false,
				// 一发支付
				oneShow: false,
				// 购买须知按钮状态
				consentBtn: false,
				// 
				showTorF: false,

				// 判断是买一还是买五
				payNum: 1,
				// 标签数组
				typeArr: ["", "cs", "ss", "zg", "pt", "pt"],
				// 滚动图片小标签数组
				smileTypeArr: ["", "ssr", "sr", "r", "n", "n"],
			};
		},
		methods: {
			// 返回首页
			returnIndex() {
				this.$Router.pushTab({
					path: "/pages/index/index"
				})
			},
			// 商品详情显示
			commodityDetails() {
				this.show = !this.show
			},
			//试一试
			attempt() {
				// this.$Router.push({
				// 	name: "attemptPage",
				// })
				this.$refs.uToast.show({
					title: '敬请期待',
					type: 'info'
				})
			},
			// 支付宝支付
			async payment() {
				if (this.consentBtn) {
					try {
						//开始支付
						await this.$store.dispatch("payment", {
							boxId: this.boxMsg.boxId,
							price: this.boxMsg.price,
							num: this.payNum,
							total: this.payNum * this.boxMsg.price,
							isToken: uni.getStorageSync("isToken")
						})
						// 调起支付宝进行支付
						await uni.requestPayment({
							provider: 'alipay',
							orderInfo: this.$store.state.pay.orderSn,
							success: res => {
								console.log("@@@", res);
								// 抽取的物品
								this.$store.dispatch("gainOrder", {
									orderId: this.$store.state.pay.orderId,
									isToken: uni.getStorageSync("isToken")
								})
								if (this.payNum == 1) {
									console.log(this.$store.state.pay.commoditys);
									this.$Router.push({
										path: "/pages/index/showPage/openOneBox/openOneBox"
									})
								} else {
									this.$Router.push("/pages/index/showPage/openFiveBox/openFiveBox")
								}

							},
							fail: (err) => {
								this.$refs.uToast.show({
									title: '未支付',
									type: 'info'
								})
							}
						});


					} catch (e) {
						console.log(e)
					}





				} else {
					this.$refs.uToast.show({
						title: '请先确认勾选协议',
						type: 'warning'
					})
				}

			},
			// 一发入魂开始支付
			payCli() {
				this.oneShow = !this.oneShow
				this.payNum = 1
				this.consentBtn = false
			},
			//五连不重开始支付
			payFiveCli() {
				this.oneShow = !this.oneShow
				this.payNum = 5
				this.consentBtn = false
			},
			// 跳转购买协议
			navAgreement() {
				this.$Router.push("/pages/my/buyAgreement/buyAgreement")
			},
			// 购买须知同意
			consent() {
				this.consentBtn = !this.consentBtn
			}
		},
		onShow() {
			// 根据id获取每个盲盒的信息
			this.$store.dispatch("gainBoxMsg", uni.getStorageSync("isId"));
			this.$store.dispatch("gainBogMsgId", uni.getStorageSync("isId"));

		},
		computed: {
			// 盲盒信息
			boxMsg() {
				return this.$store.state.home.boxmsg
			},
			//盲盒内商品
			boxMsgGoods() {
				return this.$store.state.home.boxGoods
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 适配函数计算
	@function rpx($px) {
		@return 750 * $px/720+rpx;
	}

	page {
		background-color: #F7F7F7;
	}

	* {
		margin: 0;
		padding: 0;
	}

	// 跳转动画
	// .bounce {
	// 	animation: move 3s linear infinite;
	// }

	// @keyframes move {
	// 	0% {
	// 		opacity: 1;
	// 		top: 90rpx;
	// 	}

	// 	100% {
	// 		opacity: 0;
	// 		top: 0;
	// 	}
	// }

	// 左滚动动画
	// @keyframes leftMove {
	// 	0% {
	// 		transform: translateX(0);
	// 	}

	// 	100% {
	// 		transform: translateX(-1110rpx);
	// 	}
	// }
	// 左轮播图动画
	.n{
		background: url("@/static/n.png") center right /contain no-repeat;
	}
	.r{
		background: url("@/static/r.png") center right /contain no-repeat;
	}
	.sr{
		background: url("@/static/sr.png") center right /100%  no-repeat;
	}
	.ssr{
		background: url("@/static/ssr.png") center right /100%  no-repeat;
	}

	.pt {
		background: url("@/static/putong.png") left center/rpx(116) 100% no-repeat;
	}

	.zg {
		background: url("@/static/zg.png")left center /rpx(116) 100%  no-repeat;
	}

	.ss {
		background: url("@/static/ss.png")left center/rpx(116) 100%  no-repeat;
	}

	.cs {
		background: url("@/static/cs.png") left center /rpx(116) 100%   no-repeat;
	}

	// 展示页面
	.showPage {
		padding-bottom: 140rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;

		// 返回按钮
		.return {
			width: 70rpx;
			height: 70rpx;
			background-color: rgba(0, 0, 0, 0.7);
			position: absolute;
			top: var(--status-bar-height);
			left: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
		}

		// 展示头部信息
		.showHeader {
			width: 750rpx;
			background-image: url("~@/static/showbgd.png");
			background-repeat: no-repeat;
			background-size: cover;
			display: flex;
			justify-content: center;

			// 卡片
			.card {
				width: 680rpx;
				// background-image: url("~@/static/kapian.png");
				background-repeat: no-repeat;
				background-size: cover;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.goodcommodity {
					width: 680rpx;
					height: 900rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					border-radius: 30rpx;

					//跳动的商品信息
					// .bounce {
					// 	position: absolute;
					// 	top: 90rpx;
					// 	left: 10rpx;
					// 	background-color: #0300FF;
					// 	width: 420rpx;
					// 	height: 70rpx;
					// 	border-radius: 30rpx;
					// 	display: flex;
					// 	justify-content: center;
					// 	align-items: center;

					// 	.circle {
					// 		width: 70rpx;
					// 		height: 70rpx;
					// 		background-color: green;
					// 		border-radius: 100%;
					// 	}

					// 	span {
					// 		font-size: 12px;
					// 		color: whi
					// 	}

					// 	.goods {
					// 		width: 100rpx;
					// 		height: 100rpx;
					// 		background-color: aqua;
					// 		border-radius: 100%;
					// 	}
					// }

					// 商品展示
					.commodity {
						width: 350rpx;
						height: 420rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						img {
							width: 350rpx;
							height: 350rpx;
						}
					}

					// 商品信息
					.goodMessage {
						position: absolute;
						bottom: 90rpx;
						left: rpx(0);
						width: 390rpx;
						height: 215rpx;
						

						.styleImg {
							width: 150rpx;
							height: 45rpx;
							margin-bottom: rpx(13);
						}

						.size {
							width: 390rpx;
							height: 150rpx;
							border: 1px solid black;
							background: rgba(220, 229, 246, 0.4000);
							border-radius: rpx(10);
							border: rpx(3) solid rgba(245, 249, 252, 0.8000);
							backdrop-filter: blur(rpx(8));
							box-sizing: border-box;
							padding: 12rpx 0 0 10rpx;

							.sizeName {
								font-size: 16px;
								font-weight: 600;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.reference {
								width: 220rpx;
								height: 55rpx;
								font-size: 15px;
								color: white;
								background: url("~@/static/express.png") 0 0 /100% no-repeat;
								margin-top: 15rpx;
								line-height: 49rpx;
								border-radius: rpx(15);
								font-weight: 600;
								text-align: right;
								padding: 5rpx 8rpx;
							}
						}
					}
				}
			}
		}

		//下方展示
		.showbottom {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #1E3250;

			// 滚动图片
			.rollPicture {
				width: 750rpx;
				margin: 33rpx 0 60rpx;
				display: flex;
				justify-content: center;

				.leftRoll {
					width: 720rpx;
					display: flex;
					overflow-y: scroll;

					li {
						width: 170rpx;
						height: 170rpx;
						background: linear-gradient(134deg, #314B6F 0%, #406187 48%, #314B6F 100%);
						margin-right: 10rpx;
						list-style: none;
						flex-shrink: 0;
						display: flex;
						justify-content: center;
						border-radius: 10rpx;
						position: relative;
						
						align-items: center;
						//标签
						.RollLabel{
							position: absolute;
							right: rpx(8);
							top: rpx(8);
							z-index: 1;
							width: rpx(50);
							height: rpx(40);
						}
						image {
							width: 120rpx;
							height: 120rpx;
						}
					}

				}
			}

			//查看抽奖概率
			.probability {
				width: 720rpx;
				height: 100rpx;
				border-radius: 18rpx;
				background-image: url("~@/static/probability.png");
				box-shadow: 0px 6rpx 10rpx 0px #111F35;
				background-repeat: no-repeat;
				background-size: 720rpx 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.probabilityBox {
					width: 650rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: white;

					.left {
						width: 420rpx;
						height: 100rpx;
						display: flex;
						padding-left: 20rpx;
						align-items: center;
					}

					.right {
						display: flex;
						align-items: center;
					}

					.xia {
						width: 50rpx;
						height: 50rpx;
						margin-right: 22rpx;
					}

					.hezi {
						width: 45rpx;
						height: 50rpx;
						margin-right: 22rpx;
					}

				}

			}

			//商品
			.goodAll {
				width: 750rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				// 商品标题
				.goodstitle {
					width: 720rpx;
					height: 160rpx;
					color: white;
					margin: 20rpx 0;

					p {
						font-size: 30px;
						font-weight: 700;
					}

					span {
						font-size: 20px;
					}
				}

				// 商品列表688rpx
				.goodsList {
					width: 720rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-bottom: 40rpx;



					.good {
						width: 352rpx;
						overflow: hidden;
						border-radius: 15rpx;
						background-color: #314B6F;
						margin-bottom: 15rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;

						.goodLabel {
							width: rpx(120);
							height: rpx(45);
							position: absolute;
							top: rpx(9);
							left: rpx(9);
							z-index: 1;
						}

						.goodImg {
							width: 320rpx;
							height: 320rpx;

							.lazyImg {
								max-height: 330rpx !important;
								background-color: #314B6F !important;
							}

							// img {
							// 	width: 220rpx;
							// 	height: 280rpx;
							// }
						}

						.goodDescribe {
							color: white;
							width: 320rpx;
							overflow: hidden;
							/* 设置元素为弹性伸缩盒 */
							display: -webkit-box;
							/* 设置弹性盒纵向排列 */
							-webkit-box-orient: vertical;
							/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
							-webkit-line-clamp: 2;
							font-size: 13px;

						}

						.goodPriceOrNum {
							width: 320rpx;
							margin: auto;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								font-weight: 700;
								color: white;
								font-size: 23px;
								margin: 20rpx 0 20rpx;

								.small {
									font-weight: 200;
									font-size: 13px;
									margin-right: 7rpx;
								}
							}

						}
					}
				}
			}
		}

		// 下拉商品内容
		// 下拉商品
		.Details {

			// 关闭按钮
			::v-deep .u-drawer-content {
				.u-close {
					top: -85rpx !important;
					right: 35rpx !important;
				}
			}

			// 上边框颜色
			::v-deep .u-drawer-content-visible {
				// overflow: hidden;
				border-radius: 20rpx !important;

				.u-drawer__scroll-view {
					border-top: 0rpx solid transparent !important;
					border-radius: 20rpx !important;
					// border-image: linear-gradient(#CA81F7, #79ECFF, #FFE7BE) 250 50 20 20 !important;

				}
			}

			// 详细物品内容
			.probabilityBelow {
				width: 750rpx;
				height: 1200rpx;
				background-color: #1E3250;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-top: 0rpx solid transparent !important;
				border-radius: 20rpx 20rpx 0 0;

				.topBor {
					width: 750rpx;
					height: 20rpx;
					background: linear-gradient(299deg, #FFE7BE 5%, #CA81F7 50%, #79ECFF 100%);
					border-radius: 20rpx 20rpx 0 0;
				}

				// 滚动视图
				.scrollBox {
					width: 710rpx;
					height: 1180rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					// 头提示
					.topHint {
						width: 710rpx;
						height: 70rpx;
						background-color: #314B6F;
						margin: 25rpx 0;
						border-radius: 10rpx;
						line-height: 70rpx;
						text-align: center;
						color: white;
					}

					// 商品概率类型
					.typeProd {
						width: 710rpx;
						height: 300rpx;
						border-radius: 10rpx;
						background-color: #314B6F;
						display: flex;
						align-items: center;
						flex-direction: column;
						color: white;
						justify-content: space-around;
						margin-bottom: 48rpx;
						padding-bottom: rpx(35);
						span {
							font-size: 13px;
							color: #FFFFFF;
						}

						.classify {
							width: 650rpx;
							display: flex;
							justify-content: space-between;
							
							.lei {
								width: 160rpx;
								height: rpx(100);
								display: flex;
								align-items: center;
								flex-direction: column;
								justify-content: space-between;
								.goodLabelFont {
									width: rpx(117);
									height: rpx(45);
								}
								.goodLabel{
									font-size: 13px;
								}

							}

						}
					}


					//全部商品
					.goodAll {
						width: 710rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						// 商品标题
						.goodstitle {
							width: 710rpx;
							height: 160rpx;
							color: white;
							margin: 20rpx 0;

							p {
								font-size: 30px;
								font-weight: 700;
							}

							span {
								font-size: 20px;
							}
						}

						// 商品列表688rpx
						.goodsList {
							width: 710rpx;
							display: flex;
							justify-content: space-between;
							flex-wrap: wrap;
							margin-bottom: 40rpx;

							.good {
								width: 348rpx;
								overflow: hidden;
								border-radius: 15rpx;
								background-color: #314B6F;
								margin-bottom: 15rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								position: relative;

								.goodLabel {
									width: rpx(117);
									height: rpx(45);
									position: absolute;
									top: rpx(9);
									left: rpx(9);
									z-index: 1;
								}

								.goodImg {
									width: 348rpx;
									height: 330rpx;

									.lazyImg {
										max-height: 330rpx !important;
										background-color: #314B6F !important;
									}

									// img {
									// 	width: 100%;
									// 	height: 280rpx;
									// }
								}

								.goodDescribe {
									color: white;
									width: 320rpx;
									overflow: hidden;
									/* 设置元素为弹性伸缩盒 */
									display: -webkit-box;
									/* 设置弹性盒纵向排列 */
									-webkit-box-orient: vertical;
									/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
									-webkit-line-clamp: 2;
									font-size: 13px;

								}

								.goodPriceOrNum {
									width: 320rpx;
									margin: auto;
									display: flex;
									justify-content: space-between;
									align-items: center;

									.price {
										font-weight: 700;
										color: white;
										font-size: 23px;
										margin: 20rpx 0 20rpx;

										.small {
											font-weight: 200;
											font-size: 13px;
											margin-right: 7rpx;
										}
									}

								}
							}
						}
					}
				}

			}
		}


		// 一发入魂
		.oneOpen {

			// 关闭按钮
			::v-deep .u-drawer-content {
				.u-close {
					top: -85rpx !important;
					right: 35rpx !important;
				}
			}

			//支付开始
			.startPay {
				width: 750rpx;
				height: 1250rpx;

				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 50rpx;

				.title {
					width: 680rpx;
					height: 40rpx;
					font-size: 20px;
					margin-bottom: 70rpx;
				}

				// 支付的商品
				.Paygoods {
					width: 680rpx;
					height: 220rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.goods {
						width: 220rpx;
						height: 220rpx;

						img {
							width: 220rpx;
							height: 220rpx;
						}
					}

					.message {
						width: 400rpx;
						height: 220rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.top {
							width: 400rpx;

							p {
								width: 400rpx;
								font-size: 14px;
								margin-bottom: 8rpx;
								overflow: hidden;
								/* 设置元素为弹性伸缩盒 */
								display: -webkit-box;
								/* 设置弹性盒纵向排列 */
								-webkit-box-orient: vertical;
								/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
								-webkit-line-clamp: 2;
							}

							span {
								color: red;
								font-size: 11px;
							}
						}

						.bottom {
							width: 400rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: red;

							.leftPrice {
								.normal {
									margin-right: 10rpx;

									.PriceBig {
										font-size: 22px;
										font-weight: 700;
									}

								}

								.discount {
									text-decoration: line-through;
									color: gray;
								}

							}

							p {
								font-weight: 600;
							}
						}
					}
				}

				// 需要支付金额
				.needPay {
					width: 680rpx;
					height: 60rpx;
					margin-top: 90rpx;
					border-top: 1px solid darkgray;
					text-align: right;
					font-size: 20px;
					line-height: 60rpx;
					color: black;

					span {
						color: darkgray;
						font-size: 14px;
					}
				}

				// 协议
				.agreement {
					width: 680rpx;
					display: flex;
					justify-content: space-between;
					margin: 30rpx 0;

					p {
						font-size: 12px;
						color: darkgray;

						span {
							color: red;
						}
					}

				}

				// 约定
				.appoint {
					width: 680rpx;

					.import {
						color: red;
					}
				}

				//按钮
				.btnPay {
					width: 680rpx;
					height: 80rpx;
					position: absolute;
					bottom: 20rpx;
					background: linear-gradient(129deg, #FFB193 5%, #F72934 100%);
					font-size: 19px;
					color: white;
					line-height: 80rpx;
					text-align: center;
					border-radius: 10rpx;
					box-shadow: 0px 7rpx 1px dimgrey;
				}
			}
		}


		// 底部固定
		.Footer {
			width: 750rpx;
			height: 150rpx;
			background-color: white;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;

			.FooterBox {
				width: 690rpx;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				// 试一试
				.giveAshot {
					width: 90rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.sys {
						width: 60rpx;
						height: 70rpx;
					}
				}

				// 一发入魂
				.once {
					width: 260rpx;
					height: 100rpx;
					background: linear-gradient(299deg, #0C4CF9 5%, #64E7FF 100%);
					font-size: 18px;
					color: white;
					line-height: 100rpx;
					text-align: center;
					border-radius: 10rpx;
					box-shadow: 0px 7rpx 1px dimgrey;
				}

				// 五连不重
				.five {
					width: 260rpx;
					height: 100rpx;
					background: linear-gradient(129deg, #FFB193 5%, #F72934 100%);
					font-size: 18px;
					color: white;
					line-height: 100rpx;
					text-align: center;
					border-radius: 10rpx;
					box-shadow: 0px 7rpx 1px dimgrey;
				}
			}

		}
	}
</style>