<template>
	<view class="page">
		<view class="">
			<u-navbar :background="background">
				<view class="group_3">
					<view class="text-wrapper_1" @click="changeHome('home')"
						:style="{'backgroundColor':type=='home'?'rgba(255, 255, 255, 1.000000)':none,'color':type=='home'?'red':'#333'}">
						<text lines="1" class="text_1">首页</text>
					</view>
					<view class="text-wrapper_1" @click="changeHome('city')"
						:style="{'backgroundColor':type=='city'?'rgba(255, 255, 255, 1.000000)':none,'color':type=='city'?'red':'#333'}">
						<text lines="1" class="text_2">同城送</text>
					</view>

				</view>
			</u-navbar>
		</view>
		<view class="box_1">
			<view class="box_3">
				<view class="group_4">
					<view class="group_5" @click="search">
						<view class="image-text_6">
							<image src="../../static/home/search.png" mode="" class="box_4"></image>
							<text lines="1" decode="true" class="text-group_6">iPhone&nbsp;15</text>
						</view>
						<view class="text-wrapper_2">
							<text lines="1" class="text_3">搜索</text>
						</view>
					</view>
					<view class="group_6">
						<view class="text-wrapper_3">
							<text lines="1" class="text_4">4</text>
						</view>
					</view>
				</view>
				<view v-if="!sameCity">
					<view class="group_7">
						<view lines="1" class="text_5">
							<view class="typeName" @click="changeGoodsType({'category_id':0,children:[]})">
								推荐
							</view>
							<view class="group_9" v-if="chosedType==0"></view>
						</view>
						<view lines="1" class="text_5" v-for="(item,index) in goodsType" :key="index">
							<view class="typeName" @click="changeGoodsType(item)">
								{{item.name}}
							</view>
							<view class="group_9" v-if="chosedType==item.category_id"></view>
						</view>
					</view>

					<view class="suggest">
						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="interval" :duration="duration">
							<swiper-item>
								<view class="swiper-item uni-bg-red">
									<image src="/static/home/suprise.png" mode="" class="supImg"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="group_10">
						<view class="list_1">
							<view class="image-text_8-0" @click="goPage('/pages/activity/presale')">
								<image src="/static/home/ys.png" class="label_2-0"></image>
								<text lines="1" class="text-group_8-0">预售专区</text>
							</view>
							<view class="image-text_8-0" @click="goPage('/pages/invite/index')">
								<image src="/static/home/yq.png" class="label_2-0"></image>
								<text lines="1" class="text-group_8-0">邀请有礼</text>
							</view>
							<view class="image-text_8-0" @click="goPage('/pages/coupon/index')">
								<image src="/static/home/lq.png" class="label_2-0"></image>
								<text lines="1" class="text-group_8-0">领券中心</text>
							</view>
							<view class="image-text_8-0" @click="goPage()">
								<image src="/static/home/az.png" class="label_2-0"></image>
								<text lines="1" class="text-group_8-0">安装报修</text>
							</view>
							<view class="image-text_8-0" @click="goPage('/pages/news/recycling/index')">
								<image src="/static/home/sm.png" class="label_2-0"></image>
								<text lines="1" class="text-group_8-0">上门回收</text>
							</view>
							<view class="image-text_8-0" v-for="(item,index) in secondType">
								<image :src="item.image.external_url" class="label_2-0"></image>
								<text lines="1" class="text-group_8-0">{{item.name}}</text>
							</view>
						</view>
					</view>
					<view class="newUser" @click="goNewUser">
						<view class="firLine">
							<view class="lineTitle">
								新人首单礼
							</view>
							<view class="more">
								查看更多
							</view>
						</view>
						<view class="secLine">
							<view class="linePrice">
								￥2698
							</view>
							<view class="newsInfo">
								<view class="newsCoupon">
									新人券包
								</view>
								<view class="newTime">
									领取后7天内有效
								</view>
							</view>
							<view class="newLine">

							</view>
							<view class="newAccept">
								去领取
							</view>
						</view>
					</view>
					<view class="big" @click="goBigGoods" v-if="bigGoodsList.length>0">
						<view class="bigheader">
							<view class="headLeft">
								<view class="card">
									大牌正品
								</view>
								<view class="shop">
									<text class="shopText">店内现货</text>
								</view>
							</view>

							<view class="lookMore">
								查看更多
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="sellGoods">
							<view v-for="(item,index) in bigGoodsList" :key="index" class="goodsItem">
								<view class="goodsImage">
									<image :src="item.goods_image" mode=""></image>
								</view>
								<view class="goodsPrice">
									<text class="price">￥{{item.goods_price_min}}</text>
								</view>
								<view class="goodsName">
									{{item.goods_name}}
								</view>
							</view>
						</view>
					</view>
					<view class="limitTime" @click="seckill" v-if="seckillList.length>0">
						<view class="limitHeadr">
							<view class="headeLeft">
								<view class="headerTitle">
									<image src="/static/home/limitBuy.png" mode=""></image>
								</view>
							</view>
							<view class="headeLeft">
								<view class="residue">
									本场剩余
									<count-down style='display: inline-block;' :date="seckillCutDownTime"
										separator="colon" theme="custom" />
								</view>
								<view class="lookMore">
									查看更多
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>

						</view>
						<view class="limitGoods">
							<view v-for="(item,index) in seckillList" :key="index" class="limitItem">
								<view class="limitImg">
									<image :src="item.goods_image" mode=""></image>
								</view>
								<view class="price">
									<view class="limitPrice">
										￥{{item.seckill_price_min}}
									</view>
									<view class="oldPrice">
										￥{{item.seckill_price_max}}
									</view>
								</view>

							</view>

						</view>
					</view>
					<view class="newGoods">
						<view class="newImage" @click="goNews">
							<image src="../../static/home/newImg.png" mode=""></image>
						</view>
						<view class="newRight">
							<view class="newFirt" @click="goNewGoods">
								<view class="starting">
									新品首发
								</view>
								<view class="firstGoods">
									<view v-for="(item,index) in newGoodsList" :key="index" class="goodsItem">
										<image :src="item.goods_image" mode=""></image>
										<view class="firstPrice">
											￥{{item.goods_price_min}}
										</view>
									</view>

								</view>
							</view>
							<view class="newFirt ranking " @click="rankIng">
								<view class="starting">
									排行榜
									<text class="hotSell">热卖好物专场</text>
								</view>
								<view class="firstGoods">
									<view v-for="(item,index) in rankList" :key="index" class="goodsItem">
										<image :src="item.goods_image" mode=""></image>
										<view class="firstPrice">
											￥{{item.goods_price_min}}
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
					<view class="goodsList">
						<view class="group_11" v-for="(item,index) in suggestGoodsList" :key="index">
							<view class="block_2" @click="goDetails(item)">
								<image :src="item.goods_image" class="image_3"></image>
								<view class="box_6">
									<!-- <view class="text-wrapper_4">
										<text lines="1" class="text_12">自营</text>
									</view> -->
									<text lines="1" decode="true" class="text_13">{{item.goods_name}}</text>
								</view>
								<view class="text-wrapper_5">
									<text lines="1" class="text_14">¥</text>
									<text lines="1" class="text_15">{{item.goods_price_min}}</text>
									<text lines="1" class="text_16">到手价</text>
									<text lines="1" class="text_17">¥{{item.line_price_max}}</text>
								</view>
								<!-- <text lines="1" decode="true" class="text_18">200+条评论&nbsp;99%好评率</text> -->
							</view>

						</view>
					</view>
				</view>
				<view class="sameCity" v-if="sameCity">
					<view class="shopBg">

					</view>
					<view class="shopInfo">
						<view class="shopName">
							<view class="name">
								昆明湖店·YN_k121
							</view>
							<view class="status">
								营业中
							</view>
						</view>
						<view class="star">
							<image src="/static/home/star.png" mode="" class="starImg" v-for="(item,index) in 5"
								:key="index"></image>
							<text>5.0</text>
						</view>
						<view class="openTime">
							营业时间：9:00-21:30
						</view>
						<view class="tip">
							<view class="tipItem" v-for="(item,index) in 4" :key="index">
								手机选购
							</view>
							<view class="ask">
								<image src="/static/user/weChat.png" mode="" class="weChat"></image>
								<view class="askText">
									咨询
								</view>
							</view>
							<view class="al">

							</view>
							<view class="ask">
								<image src="/static/home/ph.png" mode="" class="weChat"></image>
								<view class="askText">
									电话
								</view>
							</view>
						</view>
						<view class="hline">

						</view>
						<view class="shopAddress">
							<view class="address">
								<view class="ad">
									昆明市盘龙区盘江路瀑布公园广场
									<u-icon name="arrow-right"></u-icon>
								</view>
								<view class="adInfo">
									<u-icon name="map-fill"></u-icon>
									距地铁2号线大道站2号口600m
								</view>
							</view>
							<view class="pCar">
								<image src="/static/home/p.png" mode="" class="p"></image>
								<view class="car">
									附近停车场
								</view>
							</view>
						</view>
					</view>
					<view class="shopGoods">
						<view class="fli">
							<view class="xh">
								店内现货
							</view>
							<view class="lookMore">
								查看更多
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="shopGoodsList">
							<view class="listItem" v-for="(item,index) in 5" :key="index">
								<image src="/static/newGoods/goods.png" mode="" class="itemGoodsImg"></image>
								<view class="itemGoodsName">
									iPhone13
								</view>
							</view>
						</view>
					</view>
					<view class="shopGoods sameCityServe" @click="sameCityServe">
						<view class="fli">
							<view class="xh">
								同城服务
							</view>
							<view class="lookMore">
								查看更多
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="pictureList">
							<view class="picItem" v-for="(item,index) in 3" :key="index">
								<image src="/static/home/up.png" alt="" class="pic"></image>
							</view>
						</view>
					</view>
					<view class="shopGoods shopEvaluate">
						<view class="fli">
							<view class="xh">
								门店评价<text>(30)</text>
							</view>
							<view class="lookMore">
								查看更多
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="customerEvalu">
							<view class="cusInfo">
								<view class="cusLeft">
									<image src="" mode="" class="ch"></image>
									<text class="cusName">Shark特</text>
								</view>
								<view class="day">
									1天前
								</view>
							</view>
							<view class="evaluateInfo">
								非常棒，讲解细致，下次还来！
							</view>
						</view>
						<view class="evaLine">

						</view>
						<view class="fli" @click="shopPicture">
							<view class="xh">
								门店相册
							</view>
							<view class="lookMore">

								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="pictureList">
							<view class="picItem" v-for="(item,index) in 3" :key="index">
								<image src="/static/home/up.png" alt="" class="pic"></image>
							</view>
						</view>
					</view>
					<view class="shopGoods shopHistory">
						<view class="fli">
							<view class="xh">
								门店历史
							</view>
							<view class="lookMore">

								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="steps">
							<u-steps :list="numList" mode="dot" direction="column"></u-steps>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import img from "@/static/home/top.png"
	import * as GoodsApi from '@/api/home/index.js';
	import * as limit from '@/api/sharp/home.js';
	import CountDown from '@/components/countdown';
	import * as Api from '@/api/goods'
	export default {
		components: {
			CountDown
		},
		data() {
			return {
				background: {
					background: 'url(' + img + ') center top no-repeat',
					backgroundSize: '100% auto',
				},
				suggestGoodsList: [],
				bigGoodsList: [],
				seckillCutDownTime: '',
				seckillList: [],
				newGoodsList: [],
				rankList: [],
				type: 'home',
				active: 1,
				numList: [{
					name: '2023年07月01日'
				}, {
					name: '2023年07月01日'
				}, {
					name: '2023年07月01日'
				}, {
					name: '2023年07月01日'
				}],
				sameCity: false,
				secondType: [],
				chosedType: 0,
				goodsList: [

				],
				goodsType: [],
			}
		},
		onShow() {
			this.getTypeList()
			this.getRankingList();
			this.getbrandList();
			this.getSeckill();
			this.getSuggest()
		},
		methods: {
			getTypeList() {
				const that = this
				GoodsApi.typeList()
					.then(res => {
						if (res.status == 200) {
							that.goodsType = res.data.list
						}


					})
					.finally(() => {})
			},
			getSuggest() {
				// 获取推荐商品
				const that = this
				Api.recommended()
					.then(res => {
						that.suggestGoodsList = res.data.goodsList
					})

			},
			getSeckill() {
				// 限时抢购
				const that = this
				that.seckillList = []
				limit.data()
					.then(result => {
						let seckillList = result.data.goodsList.data;
						that.seckillCutDownTime = result.data.tabbar[0].count_down_time
						for (var i = 0; i < seckillList.length; i++) {
							if (seckillList[i].spec_type == 10) {
								that.seckillList.push(seckillList[i])
							}
						}
					})

			},
			getbrandList() {
				// 商品/大牌正品/新品首发列表
				this.getNewGoods()
				this.getBigList()
			},
			getBigList() {
				const that = this
				let param = {
					page: 1,
					categoryId: 0,
					is_brand: 1,
					is_new: 0,
					order: 1
				}
				GoodsApi.brandList(param)
					.then(res => {
						that.bigGoodsList = res.data.data;

					})
					.finally(() => {})
			},
			getNewGoods() {
				const that = this
				let param = {
					page: 1,
					categoryId: 0,
					is_brand: 0,
					is_new: 1,
					order: 1
				}
				GoodsApi.brandList(param)
					.then(res => {
						that.newGoodsList = res.data.data;
						if (that.newGoodsList.length == 4) {
							that.newGoodsList.pop()
						}
					})
					.finally(() => {})
			},
			getRankingList() {
				// 获取首页排行榜
				const that = this
				GoodsApi.chartsGoodsJing()
					.then(result => {
						that.rankList = result.data[0].goods_list
					})
					.finally(() => {})
			},
			changeGoodsType(item) {
				// 切换商品类型
				this.chosedType = item.category_id
				this.secondType =item.children
			},
			changeHome(val) {
				this.type = val
				this.sameCity = val == 'home' ? false : true
			},
			search() {
				// 跳转商品搜索
				uni.navigateTo({
					url: '/pages/search/index'
				})
			},
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + item.goods_id
				})
			},
			goNews() {
				// 新年换新
				uni.navigateTo({
					url: '/pages/activity/newsshop'
				})
			},
			goNewUser() {
				// 新人首单礼
				uni.navigateTo({
					url: '/pages/activity/newPeople'
				})
			},
			goNewGoods() {
				uni.navigateTo({
					url: '/pages/activity/newGoods'
				})
			},
			seckill() {
				uni.navigateTo({
					url: '/pages/activity/seckill'
				})
			},
			rankIng() {
				uni.navigateTo({
					url: '/pages/activity/ranking'
				})
			},
			goPage(url) {
				uni.navigateTo({
					url:url
				})
			},
			goBigGoods() {
				uni.navigateTo({
					url: '/pages/user/vip/goods'
				})
			},
			sameCityServe() {
				uni.navigateTo({
					url: '/pages/activity/intimate'
				})
			},
			shopPicture() {
				uni.navigateTo({
					url: '/pages/news/consult/store'
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: rgba(255, 255, 255, 1.000000);
		position: relative;
		width: 750rpx;
		overflow: hidden;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		background-image: url('../../static/home/homeback.png');
		background-size: 100% 100%;
	}

	.box_1 {
		position: relative;
		width: 750rpx;
		flex-direction: row;
		display: flex;
		justify-content: flex-end;
	}

	.box_2 {
		background-color: rgba(255, 255, 255, 1.000000);
		height: 160rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		margin: 2032rpx 0 0 -6rpx;
	}

	.section_1 {
		width: 608rpx;
		height: 84rpx;
		flex-direction: row;
		display: flex;
		margin: 12rpx 0 0 74rpx;
	}

	.image-text_1 {
		width: 48rpx;
		height: 84rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.image_1 {
		width: 38rpx;
		height: 44rpx;
		margin-left: 6rpx;
	}

	.text-group_1 {
		width: 48rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(255, 23, 0, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 6rpx;
	}

	.image-text_2 {
		width: 48rpx;
		height: 76rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 8rpx 0 0 86rpx;
	}

	.label_1 {
		width: 42rpx;
		height: 42rpx;
		margin-left: 4rpx;
	}

	.text-group_2 {
		width: 48rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(124, 124, 124, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.image-text_3 {
		width: 48rpx;
		height: 74rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 10rpx 0 0 94rpx;
	}

	.thumbnail_1 {
		width: 40rpx;
		height: 36rpx;
		margin-left: 6rpx;
	}

	.text-group_3 {
		width: 48rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(124, 124, 124, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 4rpx;
	}

	.image-text_4 {
		width: 72rpx;
		height: 74rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 10rpx 0 0 88rpx;
	}

	.thumbnail_2 {
		width: 36rpx;
		height: 36rpx;
		margin-left: 12rpx;
	}

	.text-group_4 {
		width: 72rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(124, 124, 124, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 4rpx;
	}

	.image-text_5 {
		width: 48rpx;
		height: 72rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 12rpx 0 0 76rpx;
	}

	.thumbnail_3 {
		width: 32rpx;
		height: 32rpx;
		margin-left: 8rpx;
	}

	.text-group_5 {
		width: 48rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(124, 124, 124, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 6rpx;
	}

	.section_2 {
		width: 272rpx;
		height: 8rpx;
		display: flex;
		flex-direction: row;
		margin: 32rpx 0 24rpx 228rpx;
	}

	.group_1 {
		background-color: rgba(0, 0, 0, 1.000000);
		border-radius: 58rpx;
		width: 272rpx;
		height: 8rpx;
		display: flex;
		flex-direction: column;
	}

	.box_3 {
		position: relative;
		width: 750rpx;
		margin-left: -744rpx;
		display: flex;
		flex-direction: column;
	}

	.group_2 {
		width: 482rpx;
		height: 56rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 94rpx 0 0 242rpx;
		align-items: center;
	}

	.group_3 {
		background-color: rgba(255, 255, 255, 0.510000);
		border-radius: 68rpx;
		width: 212rpx;
		height: 56rpx;
		flex-direction: row;
		display: flex;
		align-items: center;
		left: 0;
		right: 0;
		margin: auto;
	}

	.text-wrapper_1 {
		// background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 68rpx;
		height: 48rpx;
		display: flex;
		flex-direction: column;
		width: 94rpx;
		margin: 4rpx 0 0 4rpx;
	}

	.text_1 {
		width: 48rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		// color: rgba(251, 33, 61, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 8rpx 0 0 22rpx;
	}

	.text_2 {
		width: 72rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		// color: rgba(0, 0, 0, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 12rpx 24rpx 0 18rpx;
	}

	.image_2 {
		width: 158rpx;
		height: 56rpx;
	}

	.group_4 {
		width: 658rpx;
		height: 64rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 14rpx 0 0 36rpx;
		align-items: center;
	}

	.group_5 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 68rpx;
		width: 590rpx;
		height: 64rpx;
		flex-direction: row;
		display: flex;
		align-items: center;
	}

	.image-text_6 {
		width: 176rpx;
		height: 40rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 12rpx 0 0 22rpx;
	}

	.box_4 {
		width: 28rpx;
		height: 28rpx;
	}

	.text-group_6 {
		width: 126rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(141, 141, 141, 1.000000);
		font-size: 28rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text-wrapper_2 {
		background-color: rgba(243, 32, 42, 1.000000);
		border-radius: 48rpx;
		height: 56rpx;
		line-height: 40rpx;
		display: flex;
		text-align: center;
		width: 126rpx;
		margin: 4rpx 4rpx 0 262rpx;
		align-items: center;
	}

	.text_3 {
		width: 56rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1.000000);
		font-size: 28rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 8rpx 0 0 36rpx;
	}

	.group_6 {
		background-image: url('../../static/home/news.png');
		background-size: 100% 100%;
		height: 44rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		width: 48rpx;
	}

	.text-wrapper_3 {
		background: #F3202A;
		border-radius: 100%;
		height: 30rpx;
		display: flex;
		text-align: center;
		align-items: center;
		width: 30rpx;
		margin: -8rpx 0 0 34rpx;
	}

	.text_4 {
		width: 16rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: -4rpx 0 0 8rpx;
	}

	.group_7 {
		width: 660rpx;
		height: 44rpx;
		flex-direction: row;
		display: flex;
		margin: 14rpx 0 0 40rpx;
	}

	.text_5 {
		width: 56rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(40, 40, 40, 1.000000);
		font-size: 28rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin-top: 4rpx;
		margin-right: 54rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.group_9 {
		background-color: rgba(251, 48, 51, 1.000000);
		width: 20rpx;
		height: 8rpx;
		margin-top: 4rpx;
	}

	.group_10 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 8rpx;
		width: 700rpx;
		max-height: 354rpx;
		display: flex;
		flex-direction: column;
		margin: 12rpx 0 0 20rpx;
	}

	.goodsList {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 354rpx;
	}

	.newUser {
		width: 698rpx;
		height: 230rpx;
		background-image: url('../../static/home/newUserBg.png');
		background-size: 100% 100%;
		margin-left: 20rpx;

		.firLine {
			display: flex;
			justify-content: space-between;

			.lineTitle {
				font-size: 40rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 52rpx;
				margin-left: 32rpx;
				margin-top: 42rpx;
			}

			.more {
				margin-top: 48rpx;
				width: 96rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFF;
				line-height: 34rpx;
				margin-right: 194rpx;
			}
		}

		.secLine {
			display: flex;
			align-items: center;

			.linePrice {
				margin-left: 66rpx;
				font-size: 52rpx;
				font-weight: 600;
				line-height: 72rpx;
				background: linear-gradient(180deg, #FF0777 0%, #FF4038 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-right: 24rpx;
				margin-top: 22rpx;
			}

			.newsInfo {
				margin-right: 48rpx;
				margin-top: 22rpx;

				.newsCoupon {
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #FF0777; // #FF0777;
					line-height: 42rpx;

				}

				.newTime {
					height: 28rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #FF0777;
					line-height: 23rpx;

				}
			}

			.newLine {
				width: 0rpx;
				height: 76rpx;
				opacity: 1;
				border: 2rpx solid #B9B9B9;
				margin-top: 22rpx;
				margin-right: 22rpx;
			}

			.newAccept {
				width: 134rpx;
				height: 54rpx;
				background: linear-gradient(180deg, #FF1C75 0%, #FF470D 100%);
				border-radius: 56rpx 56rpx 56rpx 56rpx;
				opacity: 1;
				text-align: center;
				line-height: 54rpx;
				margin-top: 22rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.big {
		width: 696rpx;
		max-height: 408rpx;
		background-image: url('../../static/home/bigBack.png');
		background-size: 100% 100%;
		margin-top: 16rpx;
		margin-left: 20rpx;
		padding-left: 20rpx;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		.bigheader {
			display: flex;
			align-items: center;
			justify-content: space-between;

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

			.card {
				width: 146rpx;
				height: 58rpx;
				font-size: 30rpx;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				font-weight: 600;
				color: #303030;
				line-height: 58rpx;
			}

			.shop {
				width: 148rpx;
				height: 42rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #8C4D00;
				line-height: 42rpx;
				background-image: url('../../static/home/shopBack.png');
				margin-left: 12rpx;

				.shopText {
					width: 96rpx;
					text-align: center;
					margin-left: 18rpx;
				}
			}

			.lookMore {
				height: 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #8C4D00;
				line-height: 28rpx;
				margin-right: 28rpx;
			}
		}

		.sellGoods {
			display: flex;
			flex-wrap: wrap;

			.goodsItem {
				width: 134rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				align-items: center;

				.goodsImage {
					width: 108rpx;
					height: 108rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.goodsPrice {
					width: 134rpx;
					height: 34rpx;
					position: relative;
					top: -6rpx;
					background-image: url('../../static/home/priceBack.png');
					background-size: 100% 100;
					text-align: center;

					.price {
						height: 28rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 28rpx;
					}
				}

				.goodsName {
					width: 100rpx;
					height: 28rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #505050;
					line-height: 28rpx;
					text-align: center;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
					/* 溢出部分显示省略号 */
				}
			}

		}
	}

	.limitTime {
		width: 694rpx;
		height: 234rpx;
		background: linear-gradient(180deg, #FFF8F8 0%, #FFFFFF 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		margin-left: 20rpx;
		margin-top: 14rpx;
		padding-top: 16rpx;
		.limitHeadr {
			display: flex;
			justify-content: space-between;
			align-items: center;

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

			.headerTitle {
				width: 159rpx;
				height: 60rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.residue {
				display: flex;
				align-items: center;
				margin-right: 24rpx;

				.com {
					width: 31rpx;
					height: 27rpx;
					background: #FF4D4D;
					border-radius: 2rpx 2rpx 2rpx 2rpx;
					font-size: 19rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 27rpx;
					text-align: center;
				}
			}

			.lookMore {
				height: 28rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8C4D00;
				line-height: 28rpx;
				margin-right: 28rpx;
			}
		}

		.limitGoods {
			display: flex;
			align-items: center;
			margin-left: 24rpx;

			.limitItem {
				width: 116rpx;
				align-items: center;
				display: flex;
				flex-direction: column;
				text-align: center;
				align-items: center;
				margin-right: 14rpx;

				.limitImg {
					width: 100%;
					height: 106rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.price {
					width: 116rpx;
					position: relative;
					top: -32rpx;
					display: flex;
					flex-direction: column;
					text-align: center;
					align-items: center;

					.limitPrice {
						width: 82rpx;
						height: 32rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: center;
						background-image: url('../../static/home/tip.png');
					}

					.oldPrice {
						width: 116rpx;
						height: 28rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #8E8E8E;
						line-height: 28rpx;
						text-decoration: line-through;
					}
				}

			}
		}
	}

	.newGoods {
		width: 694rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;

		.newImage {
			width: 300rpx;
			height: 436rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin-top: 14rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.newRight {
			margin-top: 14rpx;
			margin-left: 14rpx;
			width: 390rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			.newFirt {
				width: 390rpx;
				height: 208rpx;
				background-image: url('../../static/home/newFirst.png');
				background-size: 100% 100%;

				.starting {
					text-align: left;
					width: 300rpx;
					height: 58rpx;
					font-size: 40rpx;
					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
					font-weight: 400;
					color: #333333;
					line-height: 58rpx;
					margin: 14rpx 0 0 26rpx;

					.hotSell {
						;
						height: 28rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #454545;
						line-height: 28rpx;
					}
				}

				.firstGoods {
					display: flex;
					overflow-x: hidden;

					.goodsItem {
						position: relative;
						width: 112rpx;
						height: 140rpx;
						margin-left: 26rpx;

						image {
							width: 100%;
							height: 130rpx;
						}

						.firstPrice {
							width: 112rpx;
							height: 34rpx;
							position: absolute;
							background-image: url('../../static/home/priceBack.png');
							background-size: 100% 100%;
							top: 100rpx;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 34rpx;
						}
					}

				}
			}

			.ranking {
				margin-top: 16rpx;
				width: 390rpx;
				height: 208rpx;
				// background-image: url('../../static/home/ranking.png');
				background-size: 100% 100%;
			}
		}
	}

	.list_1 {
		width: 100%;
		min-height: 122rpx;
		flex-direction: row;
		flex-wrap: wrap;
		display: flex;
		margin: 26rpx 0 0 28rpx;
	}

	.image-text_8-0 {
		width: 84rpx;
		height: 114rpx;
		margin-right: 54rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 38rpx;
	}

	.label_2-0 {
		width: 84rpx;
		height: 84rpx;
	}

	.text-group_8-0 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.000000);
		font-size: 20rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.image-text_8-3 {
		width: 84rpx;
		height: 122rpx;
		margin-right: 54rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.group_11 {
		width: 340rpx;
		height: 438rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 14rpx 0 0 16rpx;
	}

	.block_2 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 8rpx;
		width: 340rpx;
		height: 436rpx;
		margin-top: 2rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-center;
	}

	.image_3 {
		width: 276rpx;
		height: 252rpx;
		margin: 20rpx 0 0 28rpx;
	}

	.box_6 {
		width: 300rpx;
		height: 34rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 14rpx 0 0 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text-wrapper_4 {
		background-color: rgba(255, 68, 56, 1.000000);
		border-radius: 4rpx;
		height: 34rpx;
		display: flex;
		flex-direction: column;
		width: 58rpx;
	}

	.text_12 {
		width: 48rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-left: 6rpx;

	}

	.text_13 {
		// width: 236rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(30, 30, 30, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text-wrapper_5 {
		// width: 242rpx;
		height: 50rpx;
		flex-direction: row;
		display: flex;
		margin: 20rpx 0 0 34rpx;
	}

	.text_14 {
		width: 16rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(242, 26, 28, 1.000000);
		font-size: 24rpx;
		font-family: PingFang SC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 12rpx;
	}

	.text_15 {
		min-width: 86rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(242, 26, 28, 1.000000);
		font-size: 28rpx;
		font-family: PingFang SC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_16 {
		width: 60rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(242, 26, 28, 1.000000);
		font-size: 20rpx;
		font-family: PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 14rpx 0 0 6rpx;
	}

	.text_17 {
		width: 66rpx;
		height: 30rpx;
		overflow-wrap: break-word;
		color: rgba(148, 148, 148, 1.000000);
		font-size: 22rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 16rpx 0 0 10rpx;
		text-decoration: line-through;
	}

	.text_18 {
		width: 220rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(148, 148, 148, 1.000000);
		font-size: 20rpx;
		font-family: PingFang SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: -2rpx 0 20rpx 36rpx;
	}

	.suggest {
		width: 694rpx;
		height: 196rpx;
		margin: 8rpx 0 0 20rpx;

		.swiper {
			width: 694rpx;
			height: 196rpx;

			.swiper-item {
				width: 100%;
				display: block;
				height: 196rpx;
				line-height: 196rpx;
				text-align: center;

				.supImg {
					width: 694rpx;
					height: 196rpx;
				}
			}
		}
	}

	.shopBg {
		width: 100%;
		height: 496rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}

	.shopInfo {
		width: 698rpx;
		height: 400rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, #FFFFFF 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		margin-left: 26rpx;
		padding: 30rpx 28rpx 0 34rpx;
		position: relative;
		top: -240rpx;

		.shopName {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.name {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}

			.status {
				width: 84rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #F3202A;
				line-height: 40rpx;
			}
		}

		.star {
			margin-top: 10rpx;

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

			text {
				height: 36rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #FA8C3D;
				line-height: 36rpx;
			}
		}

		.openTime {
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #818181;
			line-height: 40rpx;
			margin-top: 12rpx;
		}

		.tip {
			display: flex;


			margin-top: 10rpx;

			.tipItem {
				margin-right: 10rpx;
				width: 116rpx;
				height: 42rpx;
				background: #F5F5F5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;
				text-align: center;
				line-height: 42rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #818181;
			}

			.al {
				width: 0rpx;
				height: 52rpx;
				opacity: 1;
				border: 1rpx solid #E5E5E5;
				margin-left: 8rpx;
			}

			.ask {
				margin-left: 16rpx;

				position: relative;
				top: -20rpx;

				.weChat {
					width: 32rpx;
					height: 32rpx;
				}

				.askText {
					height: 28rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #989898;
					line-height: 28rpx;
				}
			}
		}

		.hline {
			width: 656rpx;
			height: 0rpx;
			opacity: 1;
			border: 2rpx solid #F2F2F2;
			margin: 32rpx 0 24rpx 0;
		}

		.shopAddress {
			display: flex;
			justify-content: space-between;

			.address {
				.ad {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #2B2B2B;
					line-height: 40rpx;
				}

				.adInfo {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #818181;
					line-height: 40rpx;
				}
			}

			.pCar {
				display: flex;
				flex-direction: column;
				align-items: center;

				.p {
					width: 54rpx;
					height: 54rpx;
				}

				.car {
					height: 28rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #989898;
					line-height: 28rpx;
				}
			}
		}
	}

	.shopGoods {
		width: 698rpx;
		height: 226rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		margin: 10rpx 0 0 26rpx;
		position: relative;
		top: -226rpx;

		.fli {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 28rpx 0 34rpx;

			.xh {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;

				text {
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #909090;
				}
			}

			.lookMore {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #909090;
				line-height: 34rpx;
			}
		}

		.steps {
			margin-left: 34rpx;
		}

		.customerEvalu {
			.cusInfo {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.cusLeft {
					.ch {
						width: 74rpx;
						height: 74rpx;
						margin-right: 18rpx;
						margin-left: 48rpx;
					}
				}

				.day {
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #BBBBBB;
					line-height: 34rpx;
					margin-right: 32rpx;
				}
			}

			.evaluateInfo {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #515151;
				line-height: 40rpx;
				margin-left: 48rpx;
			}
		}

		.evaLine {
			width: 618rpx;
			height: 0rpx;
			opacity: 1;
			border: 2rpx solid #EFEFEF;
			margin: 30rpx 0 26rpx 0;
		}

		.shopGoodsList {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			justify-content: space-around;

			.listItem {
				display: flex;
				flex-direction: column;
				align-items: center;

				.itemGoodsImg {
					width: 100rpx;
					height: 100rpx;
				}

				.itemGoodsName {
					width: 100rpx;
					height: 28rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #1E1E1E;
					line-height: 28rpx;
					text-align: center;
				}
			}
		}

		.pictureList {
			display: flex;
			margin-top: 20rpx;
			padding-left: 26rpx;

			.picItem {
				width: 202rpx;
				height: 246rpx;
				margin-right: 26rpx;

				.pic {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.sameCityServe {
		height: 338rpx;
	}

	.shopEvaluate {
		height: 580rpx;
	}

	.shopHistory {
		height: 800rpx;
	}
</style>