<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat :opacity='opacity' :title='titlename' :titleshow='false'></navseat>
		<view class="onecontent">
			<!-- 小内切圆 -->
			<view class="after"></view>
			<!-- <image class="onecontentimage" :src="listdata.images"
				mode=""></image> -->
			<u-swiper class="onecontentimage" :list="listdata.images" height='490'></u-swiper>
		</view>
		<view class="towcontent">
			<view class="onetowcontent flex-between">
				<view class="onetowcontent_one flex-start">
					<view class="onetowcontent_oneo">
						到手￥
					</view>
					<view class="onetowcontent_onet">
						{{listdata.salePrice}}
					</view>
					<view class="onetowcontent_oneth">
						{{listdata.discount}}折
					</view>
					<view class="onetowcontent_onefour">
						￥{{listdata.originPrice}}
					</view>
				</view>
				<view class="onetowcontent_tow flex-center">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/h.png" mode="aspectFill">
					</image>
					<text>已售{{listdata.realSalesNumber}}份</text>
				</view>
				<view class="after"></view>
			</view>
			<view class="towtowcontent">
				<view class="towtowcontent_one">
					{{listdata.shopName}}|{{listdata.productName}}
				</view>
				<view class="towtowcontent_tow flex-start">
					<view class="flex-center" v-for="(item,index) in listdata.noticeTag" :key="index">
						<image class="towtowcontent_towimage" :src="item.shareImg" mode="aspectFill"></image>
						<text class="towtowcontent_towtext">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="therecontent">
				<view class="onetherecontent flex-between">
					<view class="onetherecontent_o">
						通用门店
					</view>
					<view class="onetherecontent_t flex-start">
						<view class="" v-if="listdata.shopNum" @click="productgeneralstore(listdata.shopName)">
							{{listdata.shopNum}}家店可用
						</view>
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="towtherecontent flex-between">
					<view class="towtherecontent_o">
						{{listdata.shopName || ''}}<text v-if="listdata.chainName">（{{listdata.chainName}}门店）</text>
					</view>
					<u-icon name="phone-fill" color="#333333" size="50" @click="clickphone(listdata.phone)"></u-icon>
				</view>
				<view class="theretherecontent">
					营业时间：{{listdata.businessTime}}
				</view>
				<view class="fourtherecontent flex-start" @click="goMap(listdata)">
					<image class="fourtherecontentimage"
						src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/d.png" mode="aspectFill"></image>
					<view class="fourtherecontent_o">
						{{listdata.distances}}
					</view>
					<view class="fourtherecontent_t">
						{{listdata.address}}
					</view>
				</view>
			</view>
			<view class="fourcontent">
				<view class="fourcontent_o">
					套餐详情
				</view>
				<view v-for="(item,index) in listdata.productList" :key="index">
					<view class="fourcontent_t">
						{{item.title}}
					</view>
					<view class="fourcontent_th flex-between" v-for="(item1,index1) in item.goods" :key="index1">
						<view class="fourcontent_th_one flex-start">
							<view>
								{{item1.name}}
							</view>
							<view v-for="(item2,index2) in item1.proTag"
								:style="{'background':item.backColor,'color':item.fontColor}" :key="index2">
								{{item2.name}}
							</view>
						</view>
						<view class="fourcontent_th_tow flex-start">
							<view class="fourcontent_th_towo">
								（{{item1.groupNum}}{{item1.unitName}}）
							</view>
							<view class="fourcontent_th_towt">
								￥{{item1.lowPrice}}
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="fivecontent">
				<view class="fivecontentone">
					购买须知
				</view>
				<view class="fivecontenitem">
					<view class="fivecontenitemone">
						使用日期
					</view>
					<view class="fivecontenitemtow">
						{{listdata.purchaseNotice.dateUsed || '无'}}
					</view>
				</view>
				<view class="fivecontenitem">
					<view class="fivecontenitemone">
						可用时间
					</view>
					<view class="fivecontenitemtow">
						{{listdata.purchaseNotice.availableTime || '无'}}
					</view>
				</view>
				<view class="fivecontenitem">
					<view class="fivecontenitemone">
						预约方式
					</view>
					<view class="fivecontenitemtow">
						{{listdata.purchaseNotice.bookingType || '无'}}
					</view>
				</view>
				<view class="fivecontenitem">
					<view class="fivecontenitemone">
						退款说明
					</view>
					<view class="fivecontenitemtow">
						{{listdata.purchaseNotice.refundPolicy || '无'}}
					</view>
				</view>
				<view class="fivecontenitem" v-if="listdata.purchaseNotice.usageRules">
					<view class="fivecontenitemone">
						使用规则
					</view>
					<view class="fivecontenitemtow" v-html="listdata.purchaseNotice.usageRules">
					</view>
				</view>
			</view>
			<view class="sixcontent flex-start" @click="showpopup = true">
				<view>
					价格说明
				</view>
				<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
			</view>
		</view>


		<view :style="{height:height}">

		</view>
		<view class="fixedview flex-between">
			<view class="fixedview_letr flex-start">
				<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/index.png" mode="aspectFill">
					</image>
					<text>首页</text>
				</view>
				<view class="fixedview_letr_item flex-colum" @click="clickphone(listdata.phone)">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/Call.png" mode="aspectFill">
					</image>
					<text>客服</text>
				</view>
			</view>
			<view class="fixedview_tow">
				<!-- 	<view class="fixedview_towone" @click="overlayshowsboxs(1)">
					加入购物车
				</view> -->
				<view class="fixedview_towtow" @click="overlayshowsboxs(listdata)">
					立即购买
				</view>
				<!-- <view class="fixedview_towtow" style="background: #ccc;">
					立即购买
				</view> -->
			</view>
		</view>


		<!-- <view class="bottomcontent flex-between">
			<view class="bottomcontent_texttop flex-start">
				附近推荐
			</view>
			<view class="bottomcontent_textright flex-start">
				去首页
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
		</view> -->
		<view class="fivecontentes">
			<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index">
				<view class="fivecontent_item_nav flex-start">
					<image :src="item.shopImage" mode="aspectFill"></image>
					<view class="fivecontent_item_nav_left">
						<view class="fivecontent_item_nav_lefttop flex-between">
							<view>
								{{item.shopName}}
							</view>
							<view>
								龙首.{{item.distances}}m
							</view>
						</view>
						<view class="fivecontent_item_nav_lefttopstart flex-start">
							<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
								:key="index1" :style="{'background':s.backColor,'color':s.backColor}">
								<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg" :src="s.shareImg"
									mode="aspectFill"></image>
								<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="fivecontent_item_box">
					<view class="fivecontent_item_boxitem flex-between">
						<image :src="item.image" mode=""></image>
						<view class="fivecontent_item_boxitemleft flex-colum-start">
							<view class="fivecontent_item_boxitemleftone flex-between">
								<view>{{item.productName}}</view>
								<text>已抢{{item.realSalesNumber}}份</text>
							</view>
							<view class="flex-start flexstartboxfttow">
								<view class="fivecontent_item_boxitemlefttow flex-start"
									v-for="(c,index2) in item.proTag" :key="index2"
									:style="{'background':c.backColor,'color':c.backColor}">
									<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
										:src="c.shareImg" mode="aspectFill"></image>
									<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
								</view>
							</view>
							<view class="indexboxitemleftthere flex-colum-start">
								<view class="indexboxitemleftthereabsolute">
									马上抢
								</view>
								<view class="indexboxitemlefttheretext flex-start">
									<view class="indexboxitemlefttheretextone">
										<text>¥</text>
										<text>{{item.salePrice}}</text>
									</view>
									<view class="indexboxitemlefttheretexttow">
										¥{{item.discount}}
									</view>

								</view>
								<view class="indexboxitemleftthere_countdown flex-between">
									<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
									<view class="indexboxitemleftthere_countdowntexts">
										<uni-countdown @timeup="updateCity" :show-day="false" :day="item.end_times.d"
											:hour="item.end_times.h" :minute="item.end_times.m"
											:second="item.end_times.s" :indexs='index' color="#FFFFFF"
											border-color="#00B26A" splitorColor="#FFFFFF"
											:font-size="7"></uni-countdown>

									</view>

								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showpopup" :round="40" @close="showpopup = false">
			<view class="classshowpopup">
				<view class="classshowpopuptop">
					价格说明
				</view>
				<view class="classshowpopupabsolute" @click="showpopup = false">
					<u-icon name="close" color="#333333" size="28"></u-icon>
				</view>
				<view class="classshowpopupitem">
					<view class="classshowpopupitemone">
						团购价
					</view>
					<view class="classshowpopupitemtow">
						{{listdata.purchaseNotice.groupPurInfo || '无'}}
					</view>
					<view class="classshowpopupitemone">
						门市价/划线价
					</view>
					<view class="classshowpopupitemtow">
						{{listdata.purchaseNotice.marketPriceInfo || '无'}}
					</view>
					<view class="classshowpopupitemone">
						折扣
					</view>
					<view class="classshowpopupitemtow">
						{{listdata.purchaseNotice.discountInfo || '无'}}
					</view>
					<view class="classshowpopupitemone">
						平台温馨提示
					</view>
					<view class="classshowpopupitemtow">
						{{listdata.purchaseNotice.platformTips || '无'}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				titlename: '详情',
				opacity: false,
				showpopup: false,
				indexform: '',
				height: '',
				listdata: {

				},
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacity = false
			} else {
				this.opacity = true
			}
		},
		onLoad(e) {
			console.log(e)
			this.indexform = e.id
			this.onLoadInfo()
		},
		mounted() {
			//#ifdef MP-WEIXIN || H5
			var query = uni.createSelectorQuery().in(this).select('.fixedview')
			query.boundingClientRect(ele => {
				var that = this;
				uni.getSystemInfo({
					success(res) {
						that.height = (ele.height) + "px";
						that = null;
					}
				})
			}).exec();
			//#endif
			//#ifdef MP-ALIPAY
			my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
				var nodeData = ele[0]
				var that = this;
				that.height = (nodeData.height) + "px";
				that = null;
			})
			//#endif
		},
		methods: {
			eeInfoindex() {
				uni.pro.switchTab('index/index')
			},
			overlayshowsboxs(e) {
				// this.cartshping = e
				// this.overlayshow = true
				let _this = this
				uni.pro.navigateTo('product/placeOrder', {
					id: _this.indexform
				})
			},
			//打电话
			clickphone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			// 通用门店
			productgeneralstore(name) {
				uni.navigateTo({
					url: '/pages/product/generalstore?name=' + encodeURIComponent(JSON.stringify(name))
				})
			},
			goMap(d) {
				uni.openLocation({
					longitude: (d.lng * 1),
					latitude: (d.lat * 1)
				})
			},
			// 跳转
			async onLoadInfo() { //详情接口
				let res = await this.api.productproductInfo({
					productId: this.indexform,
					lng: uni.cache.get('getLocationstorage').lng,
					lat: uni.cache.get('getLocationstorage').lat
				})
				try {
					this.listdata = res.data
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		.onecontent {
			width: 100%;
			height: 490rpx;
			position: relative;
			z-index: 9;

			.after {
				position: absolute;
				bottom: 40rpx;
				right: 0;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				z-index: 8;
				background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
			}

			.onecontentimage {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				z-index: 2;
			}
		}

		.fixedview {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 180rpx;
			padding: 24rpx 28rpx;
			background: #FFFFFF;
			z-index: 999;

			.fixedview_letr {
				margin-left: 14rpx;

				.fixedview_letr_item:nth-child(1) {
					margin: 0;
				}

				.fixedview_letr_item {
					margin-left: 32rpx;

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

					text {
						margin-top: 8rpx;
						font-size: 20rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.fixedview_one {
				.fixedview_oneone {
					font-size: 28rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #333333;
				}

				.fixedview_onetow {
					font-size: 44rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #F45C4C;
					font-weight: bold;

					text {
						font-size: 28rpx;
					}
				}
			}

			.fixedview_tow {
				// flex: auto;
				padding-left: 24rpx;

				.fixedview_towone {
					width: 50%;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: var(--cart-text-color);
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					border-radius: 50rpx 0 0 50rpx;
					background: var(--cart-background-color);
				}

				.fixedview_towtow {
					width: 302rpx;
					height: 72rpx;
					text-align: center;
					line-height: 72rpx;
					background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

		}

		.towcontent {
			position: relative;
			margin-top: -40rpx;
			width: 100%;
			z-index: 10;
			background: #F9F9F9;
			padding: 32rpx 28rpx;
			border-radius: 40rpx 0 0rpx 0rpx;

			.onetowcontent {
				position: relative;
				width: 100%;
				padding: 24rpx 24rpx 48rpx 24rpx;
				background: linear-gradient(87deg, #FE6560 0%, #FD5976 100%);
				border-radius: 24rpx 24rpx 0 0;

				.after {
					position: absolute;
					bottom: 24rpx;
					right: 0;
					width: 24rpx;
					height: 24rpx;
					line-height: 24rpx;
					text-align: center;
					z-index: 8;
					background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 24rpx, #fff 24rpx);
				}

				.onetowcontent_one {
					.onetowcontent_oneo {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					.onetowcontent_onet {
						margin-left: 4rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.onetowcontent_oneth {
						margin-left: 4rpx;
						padding: 2rpx 16rpx;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #FFFFFF;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
					}

					.onetowcontent_onefour {
						margin-left: 16rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						text-decoration: line-through;
					}
				}

				.onetowcontent_tow {

					image {
						width: 10.82rpx;
						height: 14.06rpx;
					}

					text {
						margin-left: 5rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					background: rgba(129, 79, 39, 0.14);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					padding: 4rpx 18rpx;
				}
			}

			.towtowcontent {
				position: relative;
				padding: 0 24rpx;
				z-index: 11;
				width: 100%;
				margin-top: -24rpx;
				border-radius: 24rpx 0 24rpx 24rpx;
				background: #FFFFFF;

				.towtowcontent_one {
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
					padding-top: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					padding-bottom: 24rpx;
					border-bottom: 2rpx solid #E5E5E5;
				}

				.towtowcontent_tow {
					padding: 24rpx 0;

					.flex-center {
						margin-left: 16rpx;

						.towtowcontent_towimage {
							width: 24rpx;
							height: 24rpx;
						}

						.towtowcontent_towtext {
							margin-left: 6rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}

			.therecontent {
				width: 100%;
				padding: 32rpx 24rpx;
				background: #FFFFFF;
				margin-top: 32rpx;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.onetherecontent {
					.onetherecontent_o {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}

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

				.towtherecontent {
					margin-top: 32rpx;

					.towtherecontent_o {
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
						width: 364rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}

				.theretherecontent {
					padding: 16rpx 0 24rpx 0;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					border-bottom: 2rpx solid #E5E5E5;
				}

				.fourtherecontent {
					padding-top: 24rpx;

					.fourtherecontentimage {
						width: 24rpx;
						height: 24rpx;
					}

					.fourtherecontent_o {
						margin-left: 6rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

					.fourtherecontent_t {
						margin-left: 12rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

			}

			.fourcontent {
				margin-top: 32rpx;
				padding: 32rpx 24rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.fourcontent_o {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.fourcontent_t {
					margin-top: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.fourcontent_th {
					margin-top: 32rpx;

					.fourcontent_th_one {
						view:nth-child(1) {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}

						view:nth-child(2) {
							margin-left: 8rpx;
							padding: 4rpx 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 16rpx;
							color: #FF5053;
							background: #FFD6D7;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}
					}
				}

				.fourcontent_th_tow {
					.fourcontent_th_towo {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-size: 24rpx;
						color: #999999;
					}

					.fourcontent_th_towt {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}
				}
			}

			.fivecontent {
				margin-top: 32rpx;
				padding: 32rpx 24rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.fivecontentone {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}

				.fivecontenitem {
					margin-top: 32rpx;

					.fivecontenitemone {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.fivecontenitemtow {
						margin-top: 16rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}

			.sixcontent {
				padding: 0rpx 24rpx 32rpx 24rpx;
				width: 100%;
				background: #FFFFFF;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.bottomcontent {
			padding: 0 28rpx;

			.bottomcontent_texttop {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.bottomcontent_texttop::before {
				content: '';
				display: inline-block;
				width: 4rpx;
				height: 22rpx;
				background: #333333;
				margin-right: 10rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}

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

		.fivecontentes {
			padding: 0 28rpx;
			overflow: auto;

			.fivecontent_item:nth-child(1) {
				margin-top: 0;
			}

			.fivecontent_item {
				margin-top: 32rpx;
				padding: 24rpx 32rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.fivecontent_item_nav {
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 8rpx;
					}

					.fivecontent_item_nav_left {
						flex: auto;
						margin-left: 12rpx;

						.fivecontent_item_nav_lefttop {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}

						.fivecontent_item_nav_lefttopstart {
							margin-top: 8rpx;

							.fivecontent_item_nav_leftlang {
								margin-left: 12rpx;
								width: max-content;
								padding: 4rpx 10rpx;
								background: #FFF9E1;
								border-radius: 4rpx 4rpx 4rpx 4rpx;

								.fivecontent_item_nav_leftlangtext {
									margin-left: 6rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 400;
									font-size: 16rpx;
									color: #F9A511;
								}

								.fivecontent_item_nav_leftlangimage {
									width: 10.82rpx;
									height: 14.06rpx;
								}
							}

							.fivecontent_item_nav_leftlang:nth-child(1) {
								margin-left: 0;
							}
						}

					}
				}

				.fivecontent_item_box {
					margin-top: 20rpx;
					border-top: 2rpx solid #E5E5E5;
					padding-top: 14rpx;

					.fivecontent_item_boxitem {
						image {
							width: 208rpx;
							height: 208rpx;
							border-radius: 12rpx;
						}

						.fivecontent_item_boxitemleft {
							margin-left: 24rpx;
							flex: auto;

							.fivecontent_item_boxitemleftone {
								width: 100%;

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

								view {
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 28rpx;
									color: #333333;
								}
							}

							.flexstartboxfttow {
								.fivecontent_item_boxitemlefttow {
									margin-left: 16rpx;
									margin-top: 8rpx;
									width: max-content;
									padding: 4rpx 10rpx;
									background: #FFF9E1;
									border-radius: 4rpx 4rpx 4rpx 4rpx;

									.fivecontent_item_boxitemlefttowtext {
										margin-left: 6rpx;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: 16rpx;
										color: #F9A511;
									}

									.fivecontent_item_boxitemlefttowimage {
										width: 10.82rpx;
										height: 14.06rpx;
									}
								}

								.fivecontent_item_boxitemlefttow:nth-child(1) {
									margin-left: 0;
									background: #FFD6D7;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
								}
							}


							.indexboxitemleftthere {
								position: relative;
								margin-top: 30rpx;
								padding-left: 16rpx;
								width: 100%;
								height: 88rpx;
								background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
								background-size: 100% 100%;

								.indexboxitemleftthereabsolute {
									position: absolute;
									top: 14rpx;
									right: 12rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: bold;
									font-size: 24rpx;
									color: #FFFFFF;
								}

								.indexboxitemlefttheretext {
									.indexboxitemlefttheretextone {
										text {
											font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
											font-weight: normal;
											color: #FF5053;
										}

										text:nth-child(2) {
											font-weight: bold;
											font-size: 34rpx;
										}

										text:nth-child(1) {
											font-size: 24rpx;
										}
									}

									.indexboxitemlefttheretexttow {
										margin-left: 12rpx;
										font-size: 20rpx;
										font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
										font-weight: normal;
										color: #999999;
										text-decoration: line-through;
									}
								}

								.indexboxitemleftthere_countdown {
									width: 100%;
									padding-right: 7rpx;

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

									.indexboxitemleftthere_countdowntexts {
										font-family: Roboto, Roboto;
										font-weight: 400;
										color: #333333;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: bold;
										font-size: 16rpx;
										color: #FFFFFF;
									}
								}
							}
						}
					}
				}
			}

		}

		.classshowpopup {
			position: relative;
			width: 100%;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 48rpx 28rpx 28rpx 28rpx;

			.classshowpopuptop {
				text-align: center;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				width: 100%;
			}

			.classshowpopupabsolute {
				position: absolute;
				top: 55rpx;
				right: 28rpx;
			}

			.classshowpopupitem {
				.classshowpopupitemone {
					margin-top: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}

				.classshowpopupitemtow {
					margin-top: 16rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
</style>