<!-- 盲盒详情 -->
<template>
	<view class="box-blind-page">
		<view class="nav">
			<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
			<view class="nav-title">{{detailData.name}}</view>
			<view class="nav-back"></view>
		</view>
		<view class="box-main">
			<image src="@/static/index/mf.png" mode="" class="cube-img"></image>
			<view class="box-top">
				<image src="@/static/index/mf.png" mode="" class="box-shop-img"></image>
			</view>
			<view class="box-right">
				<image src="@/static/index/mf.png" mode="" class="box-shop-img"></image>
			</view>
			<view class="box-bottom">
				<image src="@/static/index/mf.png" mode="" class="box-shop-img"></image>
			</view>
			<view class="box-btn" :style="{'bottom':detailData.price.length === 1 ? '110rpx' : '80rpx'}">
				<view v-if="detailData.price.length === 1" class="btn">
					<view class="btn-main" v-for="(item,index) in detailData.price" @click="sellBox(item)" :key="index">
						<view
							:class="{'blue-tip':item.type === 'TRIPLE','red-tip':item.type === 'SINGLE','orange-tip':item.type === 'PENTA'}">
							{{priceTypeObj[item.type]}}</view>
						<view
							:class="{'blue':item.type === 'TRIPLE','red':item.type === 'SINGLE','orange':item.type === 'PENTA'}">
							<text class="txt">
								¥{{item.sale}}
							</text>
						</view>
					</view>
				</view>
				<view v-if="detailData.price.length === 2" class="btn-two">
					<view v-for="(item,index) in detailData.price" :key="index" @click="sellBox(item)"
						class="btn-two-main">
						<view
							:class="{'blue-tip':item.type === 'TRIPLE','red-tip':item.type === 'SINGLE','orange-tip':item.type === 'PENTA'}">
							{{priceTypeObj[item.type]}}</view>
						<view
							:class="{'blue':item.type === 'TRIPLE','red':item.type === 'SINGLE','orange':item.type === 'PENTA'}">
							<text class="txt">
								¥{{item.sale}}
							</text>
						</view>
					</view>
				</view>
				<view v-if="detailData.price.length === 3" class="btn-three">
					<view v-for="(item,index) in detailData.price" :key="index" @click="sellBox(item)"
						class="btn-three-main">
						<view
							:class="{'blue-tip':item.type === 'TRIPLE','red-tip':item.type === 'SINGLE','orange-tip':item.type === 'PENTA'}">
							{{priceTypeObj[item.type]}}</view>
						<view
							:class="{'blue':item.type === 'TRIPLE','red':item.type === 'SINGLE','orange':item.type === 'PENTA'}">
							<text class="txt">
								¥{{item.sale}}
							</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- <view class="cue-card">提示卡</view> -->
		<view class="main">
			<!-- 提示卡 -->
			<view class="cue-card" @click="cueCard"></view>
			<view class="probability">
				<view class="probability-title">产出概率</view>
				<view class="probability-list">
					<view class="probability-list-item">
						<image src="@/static/index/pt.png" mode="" class="list-item-img"></image>
						<view class="list-item-num">
							{{detailData.probability && detailData.probability['NORMAL']*100 || 0}}％
						</view>
					</view>
					<view class="probability-list-item">
						<image src="@/static/index/yc.png" mode="" class="list-item-img"></image>
						<view class="list-item-num">
							{{detailData.probability && detailData.probability['HIDDEN']*100 || 0}}％
						</view>
					</view>
					<view class="probability-list-item">
						<image src="@/static/index/xy.png" mode="" class="list-item-img"></image>
						<view class="list-item-num">
							{{detailData.probability && detailData.probability['RARE']*100 || 0}}％
						</view>
					</view>
					<view class="probability-list-item">
						<image src="@/static/index/zz.png" mode="" class="list-item-img"></image>
						<view class="list-item-num">
							{{detailData.probability && detailData.probability['SUPREME']*100 || 0}}％
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="open-box-list-main">
			<view class="open-box-list" v-for="(item,index) in detailData.items" :key="index" @click="goDetail(item)">
				<view class="box-item">
					<image :src="item.coverResource.url" mode="" class="shop-img"></image>
					<view class="grade">
						<image :src="gradeData[item.grade]" mode="" class="box-item-img"></image>
					</view>

				</view>
				<view class="box-detail">
					<view class="box-detail-name">{{item.name}}</view>
					<view class="info">
						<view class="point">
							<image src="@/static/mine/jf.png" class="point-img"></image>
							{{item.ponit}}
						</view>
						<view class="box-detail-money">
							<text class="box-detail-symbol">¥ </text>
							{{item.sellPrice}}
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/detail"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import {
		boxesDetail,
		boxOrderApi
	} from '@/API/index.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	export default {
	mixins: [myMixins],
		data() {
			return {
				statusBarHeight,
				id: "", //盲盒id
				detailData: {
					items: [],
					price: []
				},
				priceTypeObj: {
					SINGLE: "一发入魂",
					TRIPLE: "三连抽",
					PENTA: "五连抽"
				},
				gradeData: {
					NORMAL: '../../static/index/pt.png',
					HIDDEN: '../../static/index/yc.png',
					RARE: '../../static/index/xy.png',
					SUPREME: '../../static/index/zz.png',
				},
			}
		},
		onLoad(opation) {
			this.id = opation.id
			this.getDetail()
		},
		onPageScroll(res) {},
		methods: {
			// 购买盲盒
			sellBox(item) {
				uni.navigateTo({
					url: `/pages/index/confirmOrder?boxId=${this.detailData.id}&type=${item.type}`
				})
			},
			// 查看详情
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${item.productId}`
				})
			},
			// 获取盲盒详情
			getDetail() {
				boxesDetail({
					id: this.id
				}).then(res => {
					if (res.code === 200) {
						this.detailData = res.data
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			goBack() {
				uni.navigateBack({
					url: '/pages/index/index'
				})
			},
			cueCard(){
				uni.navigateTo({
					url:`/pages/index/card`
				})
			},
		}
	}
</script>

<style lang="scss">
	.box-blind-page {
		.nav {
			width: 100%;
			height: 172rpx;
			background-image: url('@/static/index/nav.png');
			background-size: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 23rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;

			.nav-back {
				width: 19rpx;
				height: 34rpx;
			}

			.nav-title {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
		}

		.box-main {
			margin-top: 172rpx;
			width: 100%;
			height: 749rpx;
			background-image: url('@/static/index/main.png');
			background-size: 100%;
			position: relative;

			.cube-img {
				position: absolute;
				width: 289rpx;
				height: 261rpx;
				top: 60rpx;
				left: 236rpx;
			}

			.box-top {
				position: absolute;
				top: 61rpx;
				left: 36rpx;
				width: 136rpx;
				height: 136rpx;
				background-image: url('@/static/index/qp.png');
				background-size: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.box-right {
				position: absolute;
				top: 172rpx;
				right: 0rpx;
				width: 136rpx;
				height: 136rpx;
				background-image: url('@/static/index/qp.png');
				background-size: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.box-bottom {
				position: absolute;
				top: 333rpx;
				left: 58rpx;
				width: 136rpx;
				height: 136rpx;
				background-image: url('@/static/index/qp.png');
				background-size: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;

				.btn-main {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.blue-tip {
						width: 130rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: #27B3E8;
						background-image: url('@/static/btn/tip-blue.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;

					}

					.red-tip {
						width: 130rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: #F83E3E;
						background-image: url('@/static/btn/one-tip.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
					}

					.orange-tip {
						width: 130rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: #FF8547;
						background-image: url('@/static/btn/cheng-tip.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
					}

					.red {
						width: 284rpx;
						height: 184rpx;
						background-image: url('@/static/btn/three-red.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						padding-top: 40rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}


					}

					.orange {
						width: 284rpx;
						height: 184rpx;
						background-image: url('@/static/btn/three-cheng.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						padding-top: 40rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					.blue {
						width: 284rpx;
						height: 184rpx;
						background-image: url('@/static/btn/three-blue.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						padding-top: 40rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}

			}

			.btn-two {
				display: flex;
				align-items: center;
				justify-content: center;

				.btn-two-main {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.blue-tip {
						width: 130rpx;
						height: 40rpx;
						font-size: 20rpx;
						color: #27B3E8;
						background-image: url('@/static/btn/tip-blue.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;

					}

					.red-tip {
						width: 130rpx;
						height: 40rpx;
						font-size: 20rpx;
						color: #F83E3E;
						background-image: url('@/static/btn/one-tip.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
					}

					.orange-tip {
						width: 130rpx;
						height: 40rpx;
						font-size: 20rpx;
						color: #FF8547;
						background-image: url('@/static/btn/cheng-tip.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
					}

					.red {
						width: 284rpx;
						height: 184rpx;
						background-image: url('@/static/btn/three-red.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						margin: 0 14rpx;
						padding-top: 40rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}


					}

					.orange {
						width: 284rpx;
						height: 184rpx;
						background-image: url('@/static/btn/three-cheng.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						margin: 0 14rpx;
						padding-top: 40rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					.blue {
						width: 284rpx;
						height: 184rpx;
						background-image: url('@/static/btn/three-blue.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						margin: 0 14rpx;
						padding-top: 40rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}

			}

			.btn-three {
				display: flex;
				align-items: center;
				justify-content: center;

				.btn-three-main {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.blue-tip {
						width: 108rpx;
						height: 36rpx;
						font-size: 20rpx;
						color: #27B3E8;
						background-image: url('@/static/btn/tip-blue.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;

					}

					.red-tip {
						width: 108rpx;
						height: 36rpx;
						font-size: 20rpx;
						color: #F83E3E;
						background-image: url('@/static/btn/one-tip.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
					}

					.orange-tip {
						width: 108rpx;
						height: 36rpx;
						font-size: 20rpx;
						color: #FF8547;
						background-image: url('@/static/btn/cheng-tip.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
					}

					.red {
						width: 235rpx;
						height: 152rpx;
						background-image: url('@/static/btn/three-red.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						padding-top: 26rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}


					}

					.orange {
						width: 226rpx;
						height: 146rpx;
						background-image: url('@/static/btn/three-cheng.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						padding-top: 26rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					.blue {
						width: 231rpx;
						height: 149rpx;
						background-image: url('@/static/btn/three-blue.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						justify-content: center;
						padding-top: 26rpx;
						margin-top: -16rpx;

						.txt {
							font-family: Impacts;
							font-weight: bold;
							font-size: 38rpx;
							color: #FE965E;
							background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}


			}

			.box-shop-img {
				width: 90rpx;
				height: 90rpx;
			}

			.box-btn {
				width: 100%;
				position: absolute;
				bottom: 80rpx;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn {
					width: 254rpx;
					height: 154rpx;
					background-image: url('@/static/index/btn.png');
					background-size: 100%;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					position: relative;

					.btn-txt {
						position: absolute;
						bottom: 80rpx;
						left: 75rpx;
					}
				}
			}
		}
		.cue-card{
			// margin: 0 auto;
			// margin-top: -110rpx;
			// background-image: url('../../static/index/tsk.png');
			// background-repeat: no-repeat;
			// background-size: 100%;
			// width: 203rpx;
			// height: 59rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			// font-weight: bold;
			// font-size: 28rpx;
			// color: #FFFFFF;
		}
		.main {
			width: 100%;
			// background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon/detail-bg.png);
			background-size: 100%;
			background-repeat: no-repeat;
			margin-top: -130rpx;
			 // margin-top: -50rpx;
			 position: relative;
			 .cue-card{
				 position: absolute;
				 top: -40rpx;
				 right: 0;
				 width: 185rpx;
				 height: 85rpx;
				 background-image: url('@/static/prize/use.png');
				 background-size: 100%;
				 background-repeat: no-repeat;
				 z-index: 100;
			 }

			.nav-bar {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: fixed;
				padding: 52rpx 32rpx 0 32rpx;
				z-index: 999;
				// background-color: red;

				.go-back {
					width: 24rpx;
					height: 40rpx;
				}

				.nav-title {
					font-size: 48rpx;
					color: #000000;
					font-weight: 800;
				}
			}

			.headerBack {
				padding-bottom: 20rpx;
			}

			.box {
				box-sizing: content-box;
				margin-top: 54rpx;
				width: 100%;
				height: 500rpx;

				.swiper {
					height: 500rpx;
					margin: 0 10rpx;

					.swiper-item {
						width: 500rpx;
						display: flex;
						justify-content: center;
					}

					/deep/ .uni-swiper-slides {
						inset: 0px 140rpx !important;
					}

					/deep/ .uni-swiper-slides {
						inset: 0px 140rpx !important;
						top: 0 !important;
						right: 120rpx !important;
						bottom: 0 !important;
						left: 120rpx !important;
					}


					.le-img {
						width: 500rpx;
						height: 500rpx;
						// width: 312rpx;
						// height: 472rpx;
						display: block;
						background-repeat: no-repeat;
						background-size: 100%;
						background-position: 50%;
						transform: scale(0.8);
						transition: transform 0.3s ease-in-out 0s;
						// border-radius: 4px;

						&.le-active {
							transform: scale(1);
						}
					}

					.swiper-name {
						text-align: center;
						font-size: 40rpx;
						color: #999999;
						transform: translate(0, -25px) scale(0.8);
						transform: translate(0, -25rpx) scale(0.8);
						transition: transform 0.3s ease-in-out 0s;

						&.name-active {
							transform: translate(0, -10px) scale(1);
							transform: translate(0, -10rpx) scale(1);
							color: #333333;
						}
					}
				}
			}

			.box-price {
				text-align: center;
				font-size: 44rpx;
				color: #333333;
				margin-top: 20rpx;
				font-family: YouSheBiaoTiHei;
			}

			.box-title {
				margin: 12rpx auto 0 auto;
				width: 476rpx;
				height: 92rpx;
				text-align: center;
				font-size: 34rpx;
				color: #333333;
				font-weight: 800;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.hot-content {
				width: 750rpx;
				height: 152rpx;
				margin-top: 20rpx;

				.hot-main {
					z-index: 10;
					display: flex;
					align-items: center;
					width: 750rpx;
					height: 152rpx;
					background: rgba(255, 255, 255, 0.3900);
					box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2000);

					.hot {
						padding: 12rpx 10rpx 12rpx 12rpx;
						display: flex;
						align-items: center;
						width: 60rpx;
						height: 152rpx;
						background: #70E3DC;
						border-radius: 0px 20rpx 20rpx 0px;
						font-family: YouSheBiaoTiHei;
						font-size: 24rpx;
						color: #333;
						font-weight: 400;

						.hot-arrows {
							width: 20rpx;
							height: 24rpx;
						}
					}

					.scroll-view {
						min-width: calc(100% - 60rpx);
						padding-top: 12rpx;
						white-space: nowrap;
						box-sizing: border-box;

						.hot-item {
							display: inline-block;
							width: 136rpx;
							margin-left: 40rpx;

							.boxbind-img {
								width: 136rpx;
								height: 80rpx;
								background-size: 100%;
								background-repeat: no-repeat;
								background-position: 50%;
							}

							.boxblind-txt {
								margin-top: 20rpx;
								text-align: center;
								font-size: 20rpx;
								color: #000000;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}

				.hot-fixed {
					position: fixed;
					top: 136rpx;
				}

			}

			.open {
				width: 100%;
				margin: 44rpx auto 72rpx auto;
				display: flex;
				justify-content: center;

				.open-img {
					width: 396rpx;
					height: 180rpx;
				}
			}

			.open-num {
				text-align: center;
				font-size: 40rpx;
				color: #000000;
				font-weight: 400;
				font-family: YouSheBiaoTiHei;
			}

			.price-view {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;

				.price-view-item {
					font-family: YouSheBiaoTiHei;
					flex: 1;
					margin: 0 20rpx;
					padding: 4rpx;
					border: 1px solid red;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.price-view-item-name {
						text-align: center;
					}

					.price-view-item-price {}
				}
			}

			.probability {
				margin-top: 80rpx;
				padding: 0 22rpx 50rpx 22rpx;

				.probability-title {
					text-align: center;
					font-weight: 500;
					font-size: 34rpx;
					color: #000000;
				}

				.probability-list {
					margin-top: 18rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.probability-list-item {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						.list-item-img {
							width: 83rpx;
							height: 94rpx;
						}

						.list-item-num {
							font-weight: 500;
							font-size: 20rpx;
							color: #888888;
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		.open-box {
			text-align: center;
			margin-top: 26rpx;
			margin-bottom: 48rpx;
			font-family: YouSheBiaoTiHei;
			color: #333333;
			font-size: 40rpx;
		}

		.open-box-list-main {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			display: grid;
			gap: 25rpx;
			grid-template-rows: 1fr;
			margin: 0px auto;
			grid-template-columns: repeat(2, 1fr);
			padding: 0 22rpx 44rpx 22rpx;

			.open-box-list {
				.box-item {
					width: 190rpx;
					background-position: 50%;
					background-repeat: no-repeat;
					background-size: 100%;
					position: relative;
					border-radius: 10rpx;

					.shop-img {
						width: 340rpx;
						height: 210rpx;
						background: #E2E2E2;
						border-radius: 10rpx;
					}

					.grade {
						position: absolute;
						left: 0;
						top: 0;
						width: 101rpx;
						height: 62rpx;
						border-radius: 10rpx 0 0 0;

						background-image: url('@/static/index/g-bg.png');
						background-size: 100%;

						.box-item-img {
							position: absolute;
							left: 18rpx;
							top: 6rpx;
							width: 28rpx;
							height: 32rpx;
						}
					}
				}

				.box-detail {

					// margin-left: 16rpx;
					.box-detail-name {
						width: 320rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						// min-height: 84rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						// display: -webkit-box;
						// -webkit-box-orient: vertical;
						// -webkit-line-clamp: 2;
					}

					.box-detail-price {
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;
					}
					
					.info{
						display: flex;
						align-items: center;
						margin-top: 13rpx;
						.point{
							display: flex;
							align-items: center;
							font-weight: bold;
							font-size: 26rpx;
							color: #F0463A;
							.point-img{
								width: 30rpx;
								height: 31rpx;
								margin-right: 10rpx;
							}
						}
						.box-detail-money {
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 22rpx;
							color: #888888;
							text-decoration: line-through;
							margin-left: 12rpx;
						
							.box-detail-symbol {
								// font-size: 24rpx;
								// font-weight: 400;
							}
						}
					}
					
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 40rpx;
			left: 32rpx;
			width: 686rpx;
			height: 104rpx;
			background: #70E3DE;
			box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.1600);
			border-radius: 52rpx;
			font-size: 32rpx;
			color: #000000;
			font-weight: 800;
			text-align: center;
			line-height: 104rpx;
		}

		.box-dlg {
			width: 652rpx;
			background: #fff;
			border: 2rpx solid #707070;
			border-radius: 20rpx;
			position: relative;

			.dlg-header {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: -100rpx;

				.dlg-img {
					width: 366rpx;
					height: 214rpx;
				}
			}

			.dlg-title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
				color: #333333;
				font-weight: bold;
				margin-top: 36rpx;
			}

			.dlg-main {
				padding: 0 20rpx;

				.opc {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 38rpx;

					.dlg-step {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 340rpx;
						height: 110rpx;
						border-radius: 12rpx;
						border: 2rpx solid #CCCCCC;

						.step-sub {
							width: 92rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 44rpx;
							color: #BFC2C8;
							border-right: 2rpx solid #C2C2C2;
						}

						.step-num {
							width: 154rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 44rpx;
							color: #000000;
						}

						.step-add {
							width: 92rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 44rpx;
							color: #000000;
							border-left: 2rpx solid #C2C2C2;
						}
					}

					.dlg-buy {
						width: 242rpx;
						height: 110rpx;
						background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/buy.png);
						background-repeat: no-repeat;
						background-size: cover;
						display: flex;
						justify-content: center;
						padding-top: 26rpx;
						font-size: 40rpx;
						color: #8DFEF8;
						font-family: YouSheBiaoTiHei;
					}
				}

				.dlg-type {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 60rpx;

					.dlg-one {
						width: 310rpx;
						height: 146rpx;
						background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/one.png);
						background-repeat: no-repeat;
						background-size: cover;
						display: flex;
						padding-top: 24rpx;
						align-items: center;
						flex-direction: column;

						.one-title {
							font-family: YouSheBiaoTiHei;
							font-size: 40rpx;
							color: #3A4355;
						}

						.one-price {
							font-size: 24rpx;
							color: #3A4355;
							font-weight: 800;
						}
					}

					.dlg-three {
						width: 310rpx;
						height: 146rpx;
						background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/three.png);
						background-repeat: no-repeat;
						background-size: cover;
						display: flex;
						padding-top: 24rpx;
						align-items: center;
						// justify-content: center;
						flex-direction: column;

						.three-title {
							font-family: YouSheBiaoTiHei;
							font-size: 40rpx;
							color: #A1511E;
						}

						.three-price {
							font-size: 24rpx;
							font-weight: 800;
							color: #A1511E;
						}

					}
				}

				.dlg-five {
					margin-top: 34rpx;
					width: 100%;
					height: 146rpx;
					background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/five.png);
					background-repeat: no-repeat;
					background-size: cover;
					display: flex;
					padding-top: 24rpx;
					align-items: center;
					// justify-content: center;
					flex-direction: column;

					.five-title {
						color: #FEFACE;
						font-family: YouSheBiaoTiHei;
						font-size: 40rpx;
					}

					.five-price {
						font-size: 24rpx;
						font-weight: 800;
						color: #FEFACE;
					}

				}

				.authorization {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 24rpx;
					font-size: 28rpx;
					color: #333333;
					font-weight: 800;
					padding-bottom: 30rpx;

					.authorization-select {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}

					.authorization-txt {
						color: #E23C62;
					}
				}
			}

			.dlg-close {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				bottom: -140rpx;
				left: 50%;
				margin-left: -40rpx;
			}
		}
	}

	.hot-none {
		animation-name: hotNone;
		animation-duration: .5s;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}

	@keyframes hotNone {
		0% {
			// width: 750rpx;
		}

		100% {
			width: 0;
		}
	}

	.hot-show {
		animation-name: hotShow;
		animation-duration: .5s;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}

	@keyframes hotShow {
		0% {
			width: 0;
		}

		100% {
			width: 750rpx;
		}
	}
</style>