<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat :opacity='opacity' :title='titlename'></navseat>
		<view class="onecontent">
			<view class="onecontentabsolute">
				<view class="onecontentabsoluteitem flex-between">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/l.png" mode=""></image>
					<input type="text" placeholder="订阅提醒，每日爆品上线不错过" />
					<view class="onecontentabsoluteitembotton">
						订阅提醒
					</view>
				</view>
			</view>
		</view>
		<view class="towcontent">
			<view class="fivecontent_item" v-for="(item,index) in 20" :key="index">
				<view class="fivecontent_item_nav flex-start">
					<image class="fivecontent_item_navimage" src="@/static/avatar.png" 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="flex-start">
							<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
								:key="index1">
								<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
									mode="aspectFill"></image>
								<text>{{s}}</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="fivecontent_item_boxitemlefttow flex-start" v-for="(c,index2) in item.proTag"
								:key="index2">
								<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
									mode="aspectFill"></image>
								<text>{{c}}</text>
							</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>
			<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
		</view>
		<!-- 小内切圆 -->
		<!-- <view class="after"></view> -->
	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				titlename: '今日上新',
				opacity: false,
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore'
				},
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacity = false
			} else {
				this.opacity = true
			}
		},
	};
</script>

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

	.content {
		.onecontent {
			width: 100%;
			height: 492rpx;
			position: relative;
			background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/nav.png) no-repeat;
			background-size: cover;

			.onecontentabsolute {
				position: absolute;
				width: 100%;
				padding: 0 52rpx;
				bottom: 64rpx;

				.onecontentabsoluteitem {
					padding: 8rpx 16rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;

					image {
						width: 24.16rpx;
						height: 29.31rpx;
					}

					input {
						padding: 0 16rpx;
						flex: auto;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

					.onecontentabsoluteitembotton {
						width: 120rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
						border-radius: 28rpx 28rpx 28rpx 28rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}

		.towcontent {
			padding: 0 28rpx;
			position: relative;
			margin-top: -32rpx;

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

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

				.fivecontent_item_nav {
					.fivecontent_item_navimage {
						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;
						}

						.flex-start {
							.fivecontent_item_nav_leftlang {
								margin-top: 8rpx;
								width: max-content;
								padding: 4rpx 10rpx;
								background: #FFF9E1;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								text {
									margin-left: 6rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 400;
									font-size: 16rpx;
									color: #F9A511;
								}
								image {
									width: 10.82rpx;
									height: 14.06rpx;
								}
							}

							.fivecontent_item_nav_leftlang:nth-child(2) {
								margin-left: 12rpx;
								background: #FEE9DF;
							}
						}


					}
				}

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

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

								text {
									margin-left: 6rpx;

									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 400;
									font-size: 16rpx;
									color: #F9A511;
								}

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

							.fivecontent_item_boxitemlefttow:nth-child(2) {
								margin-left: 12rpx;
								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;
									}
								}
							}
						}
					}
				}
			}
		}

		.after {
			position: absolute;
			top: -40rpx;
			right: 0;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
		}
	}
</style>