<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="navbar" :class="{active:opacity}">
			<!-- #ifndef APP-PLUS || MP-WEIXIN -->
			<view class="status-bar"></view>
			<view class="navbar_tow flex-between"
				:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
			<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="navbar_tow flex-between"
						:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
					<!-- #endif -->
						<!-- 标题搜索框 -->
						<view class="flex-between">
							<view class="navbar_tow_one flex-start" @click="uindexlist">
								<text class="textnth-childone">{{NAME}}</text>
								<text class="textnth-childtow">{{form.address}}</text>
								<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
									size="16"></u-icon>
							</view>
							<view class="navbar_tow_tow flex-start">
								<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
								<view class="navbar_tow_towview">搜索</view>
							</view>
						</view>
					</view>
					<!-- 吸顶 -->
					<view v-if="isFixedTop" class="fourcontent flex-between">
						<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
							@click="viewHistory(item,index)"
							:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
							<text>{{item.name}}</text>
							<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill"
								color="#333333" size="16"></u-icon>
						</view>
					</view>
				</view>
				<!-- 以上都是导航栏处理 -->
				<!-- 轮播图 -->
				<swipers :carousel='hometoplist.carousel'></swipers>
				<!-- 广告 -->
				<advertisement :bannervo='hometoplist.bannerVO' :itemStyle='itemStyle'
					:timersetnteritem='timersetInterval' @changeValue="changeParentValue"></advertisement>
				<!-- 金刚区 -->
				<diamond :district='hometoplist.district'></diamond>
				<!-- 今日上线 -->
				<todaylist :todayList='hometoplist.todayList' :salesList='hometoplist.salesList'></todaylist>
				<!-- 类目 -->
				<view class="fourcontent">
					<!-- 用于防止榻卸 -->
					<view class="flex-between" style="flex-wrap: inherit;" v-if="!isFixedTop">
						<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
							@click="viewHistory(item,index)"
							:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
							<text style="margin-right: 10rpx;">{{item.name}}</text>
							<u-icon v-if="item.isChild" style="margin-left: 10rpx;" name="arrow-down-fill"
								color="#333333" size="16"></u-icon>
						</view>
					</view>
				</view>

				<view class="fivecontent">
					<!-- <view class="fivecontent" :style="{'height':seighT + 'px'}"> -->
					<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"
						scroll-with-animation> -->
					<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index"
						@click="fivecontentclick(item)">
						<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.districts}}&nbsp;{{item.distances}}
									</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}?x-oss-process=image/resize,m_lfit,w_192,h_192`"
									mode="aspectFill"></image>
								<view class="fivecontent_item_boxitemleft flex-colum-start">
									<view class="fivecontent_item_boxitemleftone flex-between"
										style="display: flex;justify-content: space-between;align-items: center;">
										<view>
											{{item.productName.length>7?item.productName.substring(0,7)+'...':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="fivecontent_item_boxitemlefthere_one flex-start">
												<text class="flex_startone">到手</text>
												<text class="flex_starttow">¥{{item.salePrice}}</text>
											</view>
											<view class="fivecontent_item_boxitemlefthere_tow">
												{{item.discount || ''}}折
											</view>
											<view class="fivecontent_item_boxitemlefthere_there">
												¥{{item.originPrice}}
											</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="10"></uni-countdown>

											</view>

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

							</view>
						</view>
					</view>
					<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
					<!-- </scroll-view> -->
				</view>



				<!-- 弹出层 -->
				<u-popup mode="top" :show="showproductlist" @close="closeproductlist" @open="openproductlist">
					<!-- 导航栏 -->
					<view class="navbar" :class="{active:opacity}">
						<!-- #ifndef APP-PLUS || MP-WEIXIN -->
						<view class="status-bar"></view>
						<view class="navbar_tow flex-between"
							:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
						<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="status-bar"></view>
							<view class="navbar_tow flex-between">
							<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<view class="navbar_tow flex-between"
									:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
								<!-- #endif -->
									<!-- 标题搜索框 -->
									<view class="flex-between">
										<view class="navbar_tow_one flex-start" @click="uindexlist">
											<text class="textnth-childone">{{NAME}}</text>
											<text class="textnth-childtow">{{form.address}}</text>
											<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
												size="16"></u-icon>
										</view>
										<view class="navbar_tow_tow flex-start">
											<input type="text" class="navbar_tow_towinput" v-model="keyword"
												placeholder="请输入关键字" />
											<view class="navbar_tow_towview">搜索</view>
										</view>
									</view>
								</view>
								<!-- 吸顶 -->
								<view class="fourcontent flex-between">
									<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
										:key="index" @click="viewHistory(item,index)"
										:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
										<text>{{item.name}}</text>
										<u-icon v-if="item.isChild" style="margin-left: 10rpx;" name="arrow-down-fill"
											color="#333333" size="16"></u-icon>
									</view>
								</view>
								<!-- 显示下拉字段 -->

								<view class="sixcontent" v-if="clickhometoplistmenulist.quilt == '1' ">
									<view class="sixcontentitemP flex-start" style="padding-bottom:0 ;">
										<category style="width: 100%;" :categoryList="clickhometoplistmenulist.detail"
											:subCategoryList="subCategoryList" @categoryMainClick="categoryMainClick"
											@categorySubClick="categorySubClick">
										</category>
									</view>
								</view>
								<view class="sixcontent" v-else>
									<view class="sixcontentitemP flex-colum-start">
										<view class="sixcontentitemP_item"
											:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''"
											v-for="(item,index) in clickhometoplistmenulist.detail" :key="index"
											@click="clickdetail(item,index)">
											{{item.name}}

										</view>
									</view>
								</view>
							</view>
				</u-popup>

			</view>
</template>
<script>
	import swipers from './components/swiper.vue'
	import diamond from './components/diamond.vue'
	import todaylist from './components/todaylist.vue'
	import productlist from './components/productlist.vue'
	import advertisement from './components/advertisement.vue'
	import customSwiper from '@/components/blackmonth-swiper/index'
	import category from '@/components/qiyue-category/qiyue-category.vue';
	export default {
		components: {
			swipers,
			diamond,
			todaylist,
			productlist,
			advertisement,
			category,
			customSwiper
		},
		data() {
			return {
				NAME: uni.cache.get('NAME'),
				timersetInterval: '0', //定时器
				isFixedTop: false, //吸顶是否显示
				Topdistance: 3000, //吸顶初始距离
				keyword: '',
				current: 0,
				opacity: false,
				showproductlist: false, //弹成
				seighT: null, //高度
				hometoplist: { //上面数据
					carousel: [],
					district: [],

				},
				itemStyle: [ //样式
				],
				homelist: [], //下面数据
				clickhometoplistmenulist: {
					detail: [],
					quilt: ''
				}, //下拉点击的数据
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore'
				},
				viewHistoryindex: '', //吸顶元素值
				clickdetailindex: 0, //默认下拉选项第一个
				clickdetailtowindex: 0, //默认二级菜单数据选项第一个
				clickdetailtowlist: [],
				// 二级菜单
				categoryList: [],
				subCategoryList: [] //二级菜单数据
			};
		},
		 
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacity = false
				this.showproductlist = false
			} else {
				this.opacity = true
			}
			if (e.scrollTop >= this.Topdistance) { //类别导航栏
				this.isFixedTop = true
			} else {
				this.isFixedTop = false
			}
		},
		onHide() {
			this.timersetInterval = '1'

		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		mounted() {
			setTimeout(() => {
				this.$nextTick(() => {
					this.GetTop()
				});
			}, 1000)
			// 当组件挂载完成后获取距离

		},
		onReachBottom() {
			this.onLoadhome()
		},
		onShow() {
			uni.getLocation({
				type: 'wgs84',
				success: async (res) => {
					let successres = await this.api.geocodelocation({
						lng: res.longitude,
						lat: res.latitude,
					})
					if (successres.code == 0) {
						let datastorage = {
							country: successres.data.addressComponent.country, // "中国"
							province: successres.data.addressComponent.province, //province: "陕西省"
							address: successres.data.addressComponent.city, //district: "西安市"
							district: successres.data.addressComponent.district, //district: "未央区"
							lng: res.longitude,
							lat: res.latitude,
						}
						uni.cache.set('getLocationstorage', datastorage);
						this.hometop()
						this.init_fn()
						this.timersetInterval = '0'
					}
				},
				fail: async (err) => {
					console.log(err, '获取错误')
					let successres = await this.api.geocodelocation({
						lng: '',
						lat: '',
					})
					if (successres.code == 0) {
						console.log(successres.data.addressComponent.streetNumber.location.split(','))
						let res = successres.data.addressComponent.streetNumber.location.split(',')
						// this.form.lng = res[0]
						// this.form.lat = res[1]
						let datastorage = {
							country: successres.data.addressComponent.country, // "中国"
							province: successres.data.addressComponent.province, //province: "陕西省"
							address: successres.data.addressComponent.city, //district: "西安市"
							district: successres.data.addressComponent.district, //district: "未央区"
							lng: res[0],
							lat: res[1],
						}
						uni.cache.set('getLocationstorage', datastorage);
						this.hometop()
						this.init_fn()
						this.timersetInterval = '0'
					}
				}
			});

		},
		methods: {
			closeproductlist() {
				this.showproductlist = false
				// console.log('close');
			},
			openproductlist() {
				// console.log('open');
			},
			uindexlist() {
				uni.pro.navigateTo('index/uindexlist')
			},
			fivecontentclick(item) {
				uni.pro.navigateTo('product/index', {
					id: item.id
				})
			},
			updateCity(data) {
				thiss.list[data].end_times = 0;
				this.$forceUpdate();
			},
			//获取元素距离顶部的距离
			GetTop() {
				uni.getSystemInfo({
					success: (data) => {
						this.seighT = data.windowHeight;
						this.$u.getRect('.fourcontent').then(res => {
							console.log(res.top)
							this.Topdistance = res.top - res.height //滚动距离
						})
					}
				})
			},
			changeParentValue(newValue) {
				this.itemStyle = newValue
			},
			getStyle(e) {
				if (e > this.hometoplist.bannerVO.counponsInfo.length / 2) {
					var right = this.hometoplist.bannerVO.counponsInfo.length - e
					return {
						transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
						zIndex: 9999 - right,
						opacity: 1
					}
				} else {
					return {
						transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
						zIndex: 9999 - e,
						opacity: 1
					}
				}
			},
			// 首页上面数据
			async hometop() {
				try {
					let res = await this.api.homehomePageUp()
					this.hometoplist = res.data
					if (this.hometoplist.bannerVO.counponsInfo) {
						this.itemStyle = []
						this.hometoplist.bannerVO.counponsInfo.forEach((item,
							index) => {
							this.itemStyle.push(this.getStyle(index))
						})
					}
					// 计算swiper样式

				} catch (e) {}
			},
			// 下面初始数据
			init_fn() {
				this.homelist = []
				this.form = {
						address: uni.cache.get('getLocationstorage').address, //地址
						lng: uni.cache.get('getLocationstorage').lng,
						lat: uni.cache.get('getLocationstorage').lat,
						type: '', //品类
						orderBy: 0, //1.理我最近 2.销量优先 3.价格优先
						other: '', //附近1KM 1选中 0不选中
						page: 1, //页数
						size: 10, //页容量
						status: 'loadmore'
					},
					this.onLoadhome()
			},
			async onLoadhome() {
				try {
					let res = await this.api.home(this.form)
					var dates = new Date().getTime();
					res.data.list.forEach((item, index) => {
						var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
						if (leftTime >= 0) {
							let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
							let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
							let m = Math.floor(leftTime / 1000 / 60 % 60);
							let s = Math.floor(leftTime / 1000 % 60);
							item.end_times = {
								d: d,
								h: h,
								m: m,
								s: s
							}
						} else {
							item.end_times = 0
						}
					})
					if (res.data.pages < this.form.page) {
						this.form.status = 'nomore'
						if (this.form.page == 1 && res.data.list.length == 0) {
							this.is_end = true
						}
						return false;
					} else {
						this.form.status = 'loading';
						this.form.page = ++this.form.page;
						setTimeout(() => {
							this.homelist = [...this.homelist, ...res.data.list];
							this.form.status = 'loading';
							if (res.data.pageNum == res.data.pages) {
								this.form.status = 'nomore';
							} else {
								this.form.status = 'loading';
							}
						}, 500)
					}
				} catch (e) {}
			},
			// 点击元素到指定位置
			async viewHistory(item, index) {
				uni.pageScrollTo({
					scrollTop: this.Topdistance,
					duration: 300
				});
				this.viewHistoryindex = index
				if (item.dictName == 'allCity') {
					let res = await this.api.locationdistrict({
						keywords: uni.cache.get('getLocationstorage').address
					})
					this.clickhometoplistmenulist.detail = res.data
					this.clickhometoplistmenulist.quilt = '1'
				} else {
					this.clickhometoplistmenulist.detail = item.detail
					this.clickhometoplistmenulist.quilt = ''
				}

				if (item.isChild) {
					this.form.type = '' //先清空后赋值
					setTimeout(() => {
						this.showproductlist = true
					}, 500);
				} else {
					this.showproductlist = false
					// 以下没有多选处理
					if (item.value == this.form.type) { // 再次选择取消选中
						this.viewHistoryindex = ''
					}
					this.form.type = item.value == this.form.type ? "" : item.value //附近1KM 1选中 0不选中
					this.form.page = 1
					this.form.size = 10
					this.form.status = 'loadmore'
					this.homelist = []
					this.onLoadhome()
				}

			},
			// 选择元素的指定选项
			clickdetail(item, index) {
				console.log(category);
				this.clickdetailindex = index
				this.showproductlist = false
				this.hometoplist.menu[this.viewHistoryindex].name = item.name
				switch (item.dictName) {
					case 'category':
						// 品类
						this.form.type = item.value
						break;
					case 'sort':
						// 智能排序
						this.form.orderBy = item.value
						break;
				}
				this.form.page = 1
				this.form.size = 10
				this.form.status = 'loadmore'
				this.homelist = []
				this.onLoadhome()
			},
			//城市二级菜单
			categoryMainClick(category) {
				console.log(category.category.name);
				if (category.category.name == '全城') {
					this.showproductlist = false
					this.form.lng = uni.cache.get('getLocationstorage').lng,
						this.form.lat = uni.cache.get('getLocationstorage').lat,
						this.form.address = uni.cache.get('getLocationstorage').address, //地址
						this.form.page = 1
					this.form.size = 10
					this.form.status = 'loadmore'
					this.homelist = []
					this.onLoadhome()
					this.hometoplist.menu[this.viewHistoryindex].name = uni.cache.get('getLocationstorage').address
					this.subCategoryList = []
				} else {
					this.subCategoryList = category.category.districts;
				}
			},
			//确定街道菜单赋值
			categorySubClick(category) {
				console.log(category);
				this.hometoplist.menu[this.viewHistoryindex].name = category.name
				this.form.address = category.name //地址
				this.showproductlist = false
				console.log(category.center.split(','))
				let res = category.center.split(',')
				this.form.lng = res[0]
				this.form.lat = res[1]
				this.form.page = 1
				this.form.size = 10
				this.form.status = 'loadmore'
				this.homelist = []
				this.onLoadhome()
			},
		}

	};
</script>

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

	.content {
		position: -webkit-sticky;
		position: sticky;
		top: 0;

		.active {
			background: rgba(249, 249, 249, 1);
		}

		.status-bar {
			// #ifdef APP-PLUS
			height: calc(var(--status-bar-height) / 2);
			// #endif
			// #ifdef MP-WEIXIN
			height: var(--status-bar-height);
			// #endif
		}

		// #ifdef APP-PLUS
		.statusbarmargin {
			margin-top: var(--status-bar-height);
		}

		// #endif

		.navbar {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 99;

			.navbar_tow {
				width: 100%;
				position: relative;
				font-size: 36rpx;

				.flex-between {
					// #ifdef APP-PLUS || H5
					margin: 28rpx;
					// #endif
					// #ifdef MP-WEIXIN
					margin-left: 28rpx;
					// #endif
					width: 100%;
					flex-wrap: nowrap;
					height: 100%;
					line-height: 100%;

					.navbar_tow_one {
						height: 100%;
						line-height: 100%;

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

						.textnth-childtow {
							margin-left: 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}

					.navbar_tow_tow {
						position: relative;
						height: 100%;
						line-height: 100%;
						flex: 1;
						margin-left: 10rpx;

						.navbar_tow_towview {
							position: absolute;
							right: 4rpx;
							top: 50%;
							transform: translate(0, -50%);
							text-align: center;
							background: #FEE06A;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							width: 116rpx;
							height: 56rpx;
							line-height: 56rpx;
							border-radius: 34rpx 34rpx 34rpx 34rpx;
						}

						.navbar_tow_towinput {
							padding-left: 32rpx;
							padding: 12rpx 120rpx 12rpx 32rpx;
							height: 100%;
							flex: auto;
							background: #FFFFFF;
							border-radius: 34rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 20rpx;
							color: #999999;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; //溢出不换行
						}
					}
				}

			}
		}

		.fourcontent {
			padding: 32rpx 28rpx;
			overflow-x: auto;
			flex-wrap: nowrap;

			.fourcontent_item {
				flex-wrap: nowrap;
				margin-left: 22rpx;
				padding: 11rpx 31rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				text {
					width: max-content;
				}
			}

			.fourcontent_itemactev {
				background: #fee06a;
			}

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

		.sixcontent {
			.sixcontentitemP {
				width: 100%;
				padding: 0 32rpx 28rpx 32rpx;
				max-height: 600rpx;
				overflow: auto;

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

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

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

				.sixcontentitemP_item {
					margin-top: 16rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333;
				}

				.sixcontentitemP_itemactive {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		.fivecontent {
			padding: 0 28rpx;
			height: 100vh;

			.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: 192rpx;
							height: 192rpx;
							border-radius: 12rpx;
						}

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

							.fivecontent_item_boxitemleftone {
								width: 100%;

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

								view {
									// width: 300rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap; //溢出不换行white-space:nowrap; //溢出不换行
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 32rpx;
									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%;
								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 {
									// width: 100%;
									margin-top: 12rpx;

									display: flex;
									justify-content: center;
									align-items: center;

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

										.flex_startone {
											font-family: Source Han Sans CN, Source Han Sans CN;
											font-weight: 500;
											font-size: 16rpx;
											color: #FF7127;
										}

										.flex_starttow {
											font-family: Source Han Sans CN, Source Han Sans CN;
											font-weight: 500;
											font-size: 24rpx;
											color: #FF7127;
										}
									}

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

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

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

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

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

		}
	}
</style>