yicangzongtai_app_240321/pages/index/lidaPage.vue

<template>
	<view class="index">
		<!-- <navbar :config="config"></navbar> -->
		<!-- <view :style="{ top: top + 'px' }" class="top"></view> -->
		<!-- <div class="seat"></div> -->
		<!-- <view style="background: linear-gradient(180deg,#2bba26 0%, #047753 100%);">
			<div class="search-box">
				<div class="search" @click="searchClick">
					<text class="hxicon search-icon" style="color:#dbdbdb;">&#xe65c;</text>
					<div class="key-word">请输入搜索关键字</div>
				</div>
				<div class="iconfont2 message" @click="goToMsg()">
					&#xe60e;
					<view class="num" v-if="msgCenter==0?false:msgCenter">{{msgCenter > 99 ? '99+' : msgCenter}}</view>
				</div>
			</div>
		</view> -->
		<view class="top-box" :class="showTopSearch?'':'hide'">
			<view :style="`height:${statusBarHeight}px`"></view>
			<view class="title">
				<u-icon class="back-icon" name="arrow-left" size="40" @click="backHome()"></u-icon>
				<view>
					<!-- <image src="/static/shop_logo.png" mode="aspectFill"></image> -->
					<text class="titlt-txt">宜昌优选</text>
				</view>
			</view>
			<view class="input-box">
				<view class="status-bar" :style="`height:${statusBarHeight}px`" @click="searchClick"></view>
				<!-- <input @click="searchClick"  placeholder="请输入商品搜索"  placeholder-class="input-placeholder" /> -->
				<view class="input-placeholder" @click="searchClick">请输入检索关键字</view>
				<text class="iconfont2 msgCenter" @click="goToMsg()">
					&#xe67c;
					<text v-if="msgCenter==0?false:msgCenter">{{msgCenter}}</text>
				</text>
			</view>
		</view>
		<view class="u-skeleton">
			<view class="swiper u-skeleton-rect" :class="showTopSearch?'':'mt120'" v-if="shopBanner&&shopBanner.length>0||skeletonShow">
				<view class="uni-margin-wrap ">
					<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
						circular=false>
						<swiper-item v-for="item in skeletonShow?1:shopBanner" :key="item.id">
							<view class="swiper-item " @click="$mUtil.imgLink(item.model_type, item.model_id, item.url, item.shop_id)
              ">
								<image class="bannersize" :src="item.cover" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 首页一级分类 -->
			<div class="one-cate">
				<!-- cateList.slice(0,4) -->
				<div class="item" v-for="(item,index) in (skeletonShow?4:cateList.slice(0,4))" @click="jumpCate(item.id)" :key="item.id">
					<image class="u-skeleton-fillet" mode="widthFix " :src="item.cover_image"></image>
					<div class="word u-skeleton-fillet">{{ item.name||'加载中' }}</div>
				</div>
				<div class="item" @click="jumpCate()">
					<image class="u-skeleton-fillet" mode="widthFix " src="/static/common/more.png"></image>
					<div class="word u-skeleton-fillet">分类</div>
				</div>
			</div>
			<view class="classlist">
				<view class="item" @click="goDetail('/pages/research/nearby/timeLimit')">
					<div class="img-box">
						<image class="u-skeleton-fillet"  src="/static/common/alarmClock-icon.png"></image>
					</div>
					<view class="font u-skeleton-fillet">限时秒杀</view>
				</view>
				<view class="item" @click="goDetail('/pages/research/homepage/groupList')">
					<div class="img-box">
						<image class="u-skeleton-fillet" src="/static/common/spell-icon.png"></image>
					</div>
					<view class="font u-skeleton-fillet">拼团</view>
				</view>
				<!-- <div class="one-cate"> -->
					<view class="item" v-for="(item,index) in (skeletonShow?3:cateList.slice(4,6))" @click="jumpCate(item.id)"
						:key="item.id">
						<view class="imgbox">
							<image class="u-skeleton-fillet" mode="widthFix" :src="item.cover_image"></image>
						</view>
						<view class="word font u-skeleton-fillet">{{ item.name||'加载中' }}</view>
					</view>
					<view class="item" @click="goDetail('/pages/pointsMall/index')">
						<div class="img-box">
							<image class="u-skeleton-fillet" src="/static/common/shop-icon.png"></image>
						</div>
						<view class="font u-skeleton-fillet">积分商城</view>
					</view>
				<!-- </div> -->
				<!-- 			<view class="item" @click="goDetail('/pages/welfareBuy/index')"> -->
				<!-- <view class="item" @click="goDetail('/pages/index/list')">
        <div class="img-box"><text class="iconfont3 integral">&#xe602;</text></div>
        <view class="font">公益福利</view>
      </view> -->
				<!-- 			<view v-if="ispay" class="item" @click="goDetail('/pages/couponCenter/index', true)"> -->
				<!-- <view v-if="ispay" class="item" @click="goDetail('/pages/index/list')">
        <div class="img-box"><text class="iconfont3 discounts">&#xec03;</text></div>
        <view class="font">优惠商品</view>
      </view> -->
				<!-- <view v-if="ispay" class="item" @click="goDetail('/pages/nearbyShop/index')"> -->
				<!-- <view v-if="ispay" class="item" @click="goDetail('/pages/freeCollection/index')">
				<div class="img-box">
					<image mode="widthFix" src="/static/common/activeRegion-icon.png"></image>
				</div>
				<view class="font">复购区</view>
			</view> -->
			</view>
			<view  v-if="homeBanner1&&homeBanner1.cover||skeletonShow" class="banner1Cls "
				@click="$mUtil.imgLink(homeBanner1.model_type, homeBanner1.model_id, homeBanner1.url, homeBanner1.shop_id)">
				<image class="font u-skeleton-fillet" :src="homeBanner1.cover" mode=""></image>
			</view>
			<!-- 惠选专区 hxCateList-->
			<view class="hxbox u-skeleton-fillet" v-if="hxCateList.length||skeletonShow">
				<view class="title">惠选专区</view>
				<view class="hxClassify">
					<view class="item" v-for="(item,index) in (skeletonShow?1:hxCateList.slice(0,4))" @click="jumpHxCate(item)"
						:key="item.id">
						<image mode="widthFix" :src="item.cover_image"></image>
						<!-- <view class="word">{{ item.name }}</view> -->
					</view>
				</view>
			</view>

			<!-- 限时秒杀 -->
			<view class="seckill u-skeleton-fillet" v-if="currSeckill && currSeckill.length > 0||skeletonShow">
				<view class="seckill-item">
					<view class="seckill-top" @click="goDetail('/pages/research/nearby/timeLimit')">
						<view class="left">限时秒杀</view>
						<view class="line" v-if="currTime"></view>
						<view class="time" v-if="currTime">{{ currTime }}点场 剩余</view>
						<view class="reciprocal" v-if="currTime">
							<uni-countdown :backgroundColor="'none'" @timeup="overDown2" :color="'#fff'"
								:splitorColor="'#fff'" :show-day="time2[0] > 0" :day="time2[0]" :hour="time2[1]"
								:minute="time2[2]" :second="time2[3]">
							</uni-countdown>
						</view>
					</view>
					<view class="option" v-if="currSeckill && currSeckill.length > 0||skeletonShow">
						<!-- <scroll-view scroll-x="true">
            <div class="fa-item" v-for="(item,key) in currSeckill" :key="key">
              <view class="option-item" v-for="itemSon in item"
                @click="goProductDetails('/pages/product/goods/seckillGoods?id=' + itemSon.id)" :key="item.id">
                <image v-if="itemSon && itemSon.cover" :src="itemSon.cover" mode="aspectFill"></image>
                <view class="number">
                  <rich-text :nodes="$mUtil.priceBigSmall(itemSon.min_price)"></rich-text>
                </view>
              </view>
            </div>
          </scroll-view> -->
						<swiper :indicator-dots="false" :autoplay="false" :display-multiple-items="itemsDis2"
							@change="imgActiveFun2" style="height: 220rpx" circular="true">
							<swiper-item v-for="(item,key) in currSeckill" :key="key">
								<div class="fa-item">
									<view class="option-item" v-for="itemSon in item"
										@click="goProductDetails('/pages/product/goods/seckillGoods?id=' + itemSon.id)"
										:key="item.id">
										<image v-if="itemSon && itemSon.cover" :src="itemSon.cover" mode="aspectFill">
										</image>
										<view class="number">
											<rich-text :nodes="$mUtil.priceBigSmall(itemSon.min_price)"></rich-text>
										</view>
									</view>
								</div>
							</swiper-item>
						</swiper>
						<view class="slide-box">
							<view class="dotBox" v-if="currSeckill.length > 1">
								<view class="dotBox_item" v-for="(v, i) in currSeckill" :key="i"
									:class="{ active_dotBox: activeBannerIndex2 == i }"></view>
							</view>
						</view>
					</view>
					<!-- <view class="scroll" v-if="currSeckill && currSeckill.length > 0"
          ><view class="scroll-red"></view
        ></view> -->
					<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
				</view>
			</view>

			<!-- 拼团购 -->
			<view class="group-work u-skeleton-fillet" v-if="groupList && groupList.length > 0||skeletonShow">
				<view class="work-top" @click="goDetail('/pages/research/homepage/groupList')">
					<view class="top-left">拼团购</view>
					<view class="top-right" style="color: #333333;">
						查看更多
						<text class="iconfont u-font24 u-999" style="margin-left: 10rpx;">&#xe6c7;</text>
					</view>
				</view>
				<view v-if="groupList && groupList.length > 0||skeletonShow">
					<view class="middle_item" v-for="item in (skeletonShow?1:groupList)" :key="item.id">
						<view class="middle" @click="
            goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)
          ">
							<view class="middle-left">
								<image v-if="item && item.cover" :src="item.cover" mode="aspectFill"></image>
							</view>
							<view class="middle-right">
								<view class="middle-title u-text2">{{ item.title }}</view>
								<view class="division">
									<view class="middle-num">
										<view class="contain">
											<view class="large">
												<rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
											</view>
											<view class="small">¥ {{ item.min_sale_price }}</view>
										</view>
										<view class="three">{{ item.group_people_num }}人团，已拼 <text style="color: red;">
												{{item.result_sale_num}}</text> 件</view>
									</view>
									<view class="button">去拼团</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
			</view>

			<!-- 热门推荐 -->
			<view class="hot">
				<view class="hot-top u-skeleton-fillet">
					<view class="hot-left">热门推荐</view>
					<view class="hot-body"></view>
					<view class="hot-right">精选好物推荐</view>
				</view>
				<view class="hot-item u-skeleton-fillet" v-if="recommendList && recommendList.length > 0|| skeletonShow">
					<view class="item" v-for="item in recommendList.length>0?recommendList:2" :key="item.id"
						@click="goProductDetails('/pages/product/goods/goods?id=' + item.id)">
						<image v-if="item && item.cover" :src="item.cover" mode="aspectFill"></image>
						<div class="title-price">
							<view class="hot-introduce" v-if="item && item.title">{{item.title}}</view>
							<view class="hot-number">
								<view class="hot-large">
									<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
								</view>
								<view class="hot-small">￥{{ item.max_market_price }}</view>
							</view>
						</div>
					</view>
				</view>
				<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
			</view>

			<!-- 每周上新 -->
			<view class="new-products u-skeleton-fillet">
				<view class="new-top ">
					<view class="new-left">每周上新</view>
					<view class="new-line"></view>
					<view class="new-right">新品上市优惠热销</view>
				</view>
				<view class="new-list " v-if="newsList && newsList.length > 0||skeletonShow">
					<view class="item" v-for="item in newsList.length>0?newsList:2" :key="item.id"
						@click="goProductDetails('/pages/product/goods/goods?id=' + item.id)">
						<image v-if="item && item.cover||skeletonShow" :src="item.cover" mode="aspectFill"></image>
						<view class="list-num">
							<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
						</view>
					</view>
				</view>
				<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
			</view>

			<!-- 本月热销 -->
			<view class="new-products u-skeleton-fillet">
				<view class="new-top">
					<view class="new-left">本月热销</view>
					<view class="new-line"></view>
					<view class="new-right">爆品热卖中</view>
				</view>
				<view v-if="hotList && hotList.length > 0||skeletonShow">
					<!-- itemsDis -->
					<swiper class="month-list" :indicator-dots="false" :autoplay="false"
						:display-multiple-items="itemsDis" @change="imgActiveFun" :circular="false">
						<swiper-item class="item" @click="
              goProductDetails('/pages/product/goods/goods?id=' + item.id)
            " v-for="item in hotList.length>0?hotList:1" :key="item.id">
							<image v-if="item && item.cover" :src="item.cover" mode="aspectFill"></image>
							<view class="list-num">
								<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
							</view>
							<!-- <view class="sold">已售{{ item.result_sale_num }}件</view> -->
						</swiper-item>
					</swiper>
					<view class="slide-box">
						<view class="dotBox" v-if="hotList.length > 0">
							<!-- 上面给的动态样式 :style="{ marginLeft: ml + 'rpx' }" -->
							<!-- v-for="(v, i) in hotList.slice(0,hotList.length-2)" -->
							<view class="dotBox_item" v-for="(v, i) in lineList" :key="i"
								:class="{ active_dotBox: activeBannerIndex == i }"></view>
						</view>
					</view>
				</view>

				<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
			</view>
			<!-- 本月热销 -->
			<!-- 猜你喜欢 -->
			<view class="guess">
				<view class="guess-top u-skeleton-fillet">
					<view class="guess-left">猜你喜欢</view>
					<view class="guess-line"></view>
					<view class="guess-right">智能推荐你感兴趣的优品</view>
				</view>
				<view class="guess-item" v-if="goodsList && goodsList.length > 0||skeletonShow">
					<view class="item u-skeleton-fillet" @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
						v-for="(item, index) in goodsList.length>0?goodsList:10" :key="index">
						<image v-if="item && item.cover" :src="item.cover" mode="aspectFill"></image>
						<view style=" padding-bottom: 40rpx;">
							<view class="name" style="flex: 1;">{{ item.title||'加载中' }}</view>
							<view class="number">
								<view class="number-red">
									<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
								</view>
								<view class="number-grey">￥{{ item.max_market_price||'加载中' }}</view>
							</view>
						</view>


					</view>
				</view>
				<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
				<loadMore v-if="goodsList.length > 0" :status="status"></loadMore>
			</view>
			<!-- 猜你喜欢 -->

			<view class="cart-entrance" @click="toCartPage()">
				<image src="/static/czd/car.png" alt=""></image>
			</view>
			<u-skeleton :loading="skeletonShow" :animation="true" bgColor="#FFF"></u-skeleton>
		</view>
		<entrepreneurship-zone-tabbar :current="0"></entrepreneurship-zone-tabbar>
	</view>
</template>

<script>
	let app = getApp()
	export default {
		data() {
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				showTopSearch: true,
				background: ["color1", "color2", "color3"],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				config: {
					back: false, //false是tolbar页面 是则不写
					title: "宜昌优选",
					color: "#FFFFFF",
					fixed: false,
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, ['#0B844A', '#00a54e']],

					// rightButton:[{
					// 	key:'btn1',
					// 	position:"left",
					// 	icon:'&#xe6eb;'
					// }],
					// rightSlot: true,
					// search: {
					// 	disabled:true,
					// 	value: "",
					// 	placeholder: "请输入搜索关键字",
					// },
				},
				keyWord: "",
				groupList: [], //团购
				hotList: [
					// {cover: 'https://gulimall-java.oss-cn-chengdu.aliyuncs.com/img/admin/t32W8pXB.png'},
					// {cover: 'https://gulimall-java.oss-cn-chengdu.aliyuncs.com/img/admin/QyYZ1abZ.jpg'},
					// {cover: 'https://gulimall-java.oss-cn-chengdu.aliyuncs.com/img/admin/XT4XBY4H.jpg'},
					// {cover: 'https://gulimall-java.oss-cn-chengdu.aliyuncs.com/img/admin/ikbbTkHC.jpg'}
				], //本月热销
				newsList: [], //每周上新
				recommendList: [], //推荐
				shopBanner: [], //轮播图
				currSeckill: [], //秒杀
				time2: [0, 0, 0, 0], //秒杀倒计时
				goodsList: [], //猜你喜欢
				currTime: null,
				keyList: 0,
				ml: -22,
				itemsDis: 1,
				activeBannerIndex: 0,
				keyList2: 0,
				ml2: -22,
				itemsDis2: 1,
				activeBannerIndex2: 0,
				page: 1,
				status: "more",
				isOver2: false,
				msgCenter: null,
				imgUrl: this.$mConfig.staticUrl,
				top: 0,
				cateList: [], // 一级分类
				hxCateList: [],
				lineList: 0,
				ispay: app.globalData.openPay,
				homeBanner1: {},
				skeletonShow:true
			};
		},
		onLoad() {
			this.skeletonShow=true;
			// // #ifdef APP-PLUS
			// if (plus.os.name == 'iOS') {
			//   // 首先获取一次网络状态
			//   uni.getNetworkType({
			//     success: (res) => {
			//       if (res.networkType != 'none') {
			//         this.init()
			//       }
			//     }
			//   });
			//   // 监听网络变化
			//   uni.onNetworkStatusChange((res) => {
			//     if (res.isConnected) {
			//       this.init()
			//     }
			//   });
			// } else {
			//   this.init()
			//   this.getAppInfo()
			// }
			// // #endif
			// #ifdef H5
			// #endif
			this.init()

			// #ifdef APP-PLUS
			if (plus.os.name == 'iOS') {} else {
				this.getAppInfo()
			}
			// #endif

			// this.page = 1;
			// this.getAll();
			// this.top = app.globalData.barHeight + 44
			// this.getOneCate()
			// 是否开启支付
			// this.$http.get("/saleconfig/openPayment").then(res => {
			// 	if (res && res.code == 200) {
			// 		this.ispay = res.openPayment
			// 	}
			// })
			// let that = this;
			// #ifdef APP-PLUS
			// if (plus.os.name == 'iOS') {} else {
			//   this.getAppInfo()
			// }
			// #endif
			this.getHomeBanner1()
		},
		onShow() {
			this.getmessageNum()
		},
		onPullDownRefresh() {
			this.page = 1;
			// uni.showModal({
			// 	title:'onPullDownRefresh'
			// })
			this.getAll();
			this.getOneCate()
			this.getHxCateList();
			this.getHomeBanner1()
			// uni.stopPullDownRefresh();
		},

		onReachBottom() {
			if (this.status == 'more') {
				this.page++;
				this.guessLike();
			}
			// this.status = "loading";

		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > uni.upx2px(49 + 30)) {
				this.showTopSearch = false;
			} else {
				this.showTopSearch = true;
			}
		},
		methods: {
			getHomeBanner1() {
				this.$http.get('/ad/ad/getShopAdByAdL/0/home-banner1').then(res => {
					if (res.list && res.list.length > 0) {
						this.homeBanner1 = res.list[0]
					}
				})
			},
			backHome() {
				uni.switchTab({
					url: '/pages/home'
				})
			},
			init() {
				this.page = 1;
				this.getAll();
				this.top = app.globalData.barHeight + 44
				this.getOneCate()
				this.getHxCateList()
				// this.getLocation()
			},
			// // 获取经纬度
			// getLocation() {
			//   uni.getLocation({
			//     type: 'wgs84',
			//     geocode: true,
			//     success: (res) => {
			//       console.log(res, 1111)
			//       uni.setStorageSync('locationObj', res)
			//     }
			//   });
			// },
			//跳转消息页面
			goToMsg() {
				let token = uni.getStorageSync("apiToken")
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				} else {
					uni.navigateTo({
						url: "/pages/research/setup/myMsg"
					})
				}
			},
			searchClick() {
				// console.log("dian");
				uni.navigateTo({
					url: "/pages/research/homepage/search",
				});
			},
			goProductDetails(url) {
				uni.navigateTo({
					url: url,
				});
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots;
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay;
			},
			intervalChange(e) {
				this.interval = e.detail.value;
			},
			durationChange(e) {
				this.duration = e.detail.value;
			},
			getAll() {
				this.rest();
				// this.getmessageNum();
				this.getBanner();
				this.seckillList();
				this.getgroupList();
				this.recommend();
				this.newWeek();
				this.hotSale();
				this.guessLike();
			},
			/**获得消息数量 */
			getmessageNum() {
				let token = uni.getStorageSync("apiToken")
				if (token) {
					this.$http.get("/private/message/unread-num").then(res => {
						if (res && res.code == 200) {
							this.msgCenter = res.data
						}
					})
				} else {
					this.msgCenter = 0
				}
			},
			// 一级分类
			getOneCate() {
				this.$http.get("/category/home/recommend").then(res => {
					if (res && res.code == 200) {
						this.cateList = res.list
					}
				})
			},
			getHxCateList() {
				this.$http.get("/hxcategory/home/recommend/4").then(res => {
					if (res && res.code == 200) {
						this.hxCateList = res.list
					}
				})
			},
			// 跳转一级分类
			jumpCate(id) {
				let that = this;
				that.$store.commit('changeCateId', id || '')
				uni.navigateTo({
					url: "/pages/index/list",
					success: (res) => {

					}
				});
			},
			jumpHxCate(item) {
				uni.navigateTo({
					url: `/pages/freeCollection/index?hxCategoryId=${item.id}&title=${item.name}`
				})
			},
			/**轮播图 */
			getBanner() {
				this.$http
					.get(`/ad/ad/getShopAdByAdL/0/publicshop-banner`, {}, false)
					.then((res) => {
						uni.stopPullDownRefresh();
						this.loading = false;
						if (res && res.code == 200) {
							this.shopBanner = res.list;
						}
					})
					.catch(err => {
						console.log('err')
						console.log(err)
					});
			},
			imgActiveFun(e) {

				this.activeBannerIndex = e.detail.current;
			},
			imgActiveFun2(e) {
				this.activeBannerIndex2 = e.detail.current;
			},
			overDown2() {
				this.isOver2 = true;
			},
			/**限时秒杀 */
			seckillList() {
				this.$http
					.get(
						`/marketing/seckillActivityGoods/flash-sale`, {
							limit: 10,
							page: 1
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {
							this.currTime = res.data.start_hour;
							// this.currSeckill = res.data.list;
							if (res.data.list) {
								this.currSeckill = this.oneArrToTwoArr(res.data.list)
							}
							// if (this.currSeckill && res.data.list.length <= 4) {
							// 	this.keyList2 = 1;
							// 	this.itemsDis2 = res.data.list.length;
							// }
							// if (
							// 	this.currSeckill &&
							// 	res.data.list.length > 4 &&
							// 	res.data.list.length <= 8
							// ) {
							// 	this.keyList2 = 2;
							// 	this.ml2 = -45;
							// 	this.itemsDis2 = 3;
							// }
							// if (
							// 	this.currSeckill &&
							// 	res.data.list.length > 8 &&
							// 	res.data.list.length <= 12
							// ) {
							// 	this.keyList2 = 3;
							// 	this.ml2 = -68;
							// 	this.itemsDis2 = 3;
							// }
							// if (
							// 	this.currSeckill &&
							// 	res.data.list.length > 12 &&
							// 	res.data.list.length <= 16
							// ) {
							// 	this.keyList2 = 4;
							// 	this.ml2 = -90;
							// 	this.itemsDis2 = 3;
							// }
							if (res.data.finish_time) {
								this.time2 = this.$mUtil
									.countDown(Math.floor(res.data.finish_time / 1000))
									.split(":")
									.map((val) => Number(val));
							}
						}
					});
			},
			oneArrToTwoArr(data) {
				let newData = [];
				let zyf = 4; //一维数组转二维数组长度(此处是二维数组每一个长度控制)
				for (var i = 0; i < Math.ceil(data.length / zyf); i++) {
					newData[i] = [];
					newData[i].push(data[i * zyf]);
					for (var j = 1; j < zyf; j++) {
						if (data[i * zyf + j] == undefined) {
							//超出长度控住
							return newData;
						} else {
							newData[i].push(data[i * zyf + j]);
						}
					}
				}
				return newData;
			},
			/**团购 */
			getgroupList() {
				this.$http
					.get(
						`/groupbuy/activitygoods/will-you-spell`, {
							limit: 10,
							page: 1
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {
							if (res.list.length > 0) {
								this.groupList = res.list;
							}
						}
					});
			},
			/**热门推荐 */
			recommend() {
				this.$http
					.get(`/goods/new`, {
						limit: 6,
						type: "hot"
					}, false)
					.then((res) => {
						if (res && res.code == 200) {
							this.recommendList = res.list;
						}
					});
			},
			/**每周上新 */
			newWeek() {
				this.$http.get(`/goods/new`, {
					limit: 16
				}, false).then((res) => {
					if (res && res.code == 200) {
						this.newsList = res.list;
					}
				});
			},
			/**本月热销 */
			hotSale() {
				this.$http
					.get(`/goods/month`, {
						limit: 12,
						mix_num: 3
					}, false)
					.then((res) => {
						if (res && res.code == 200) {
							this.hotList = res.list;
							if (this.hotList.length > 2) {
								this.lineList = this.hotList.length - 2
							}
							if (res.list.length <= 3) {
								this.keyList = 1;
								this.itemsDis = res.list.length;
							}
							if (res.list.length > 3 && res.list.length <= 6) {
								this.keyList = 2;
								this.ml = -45;
								this.itemsDis = 3;
							}
							if (res.list.length > 6 && res.list.length <= 9) {
								this.keyList = 3;
								this.ml = -68;
								this.itemsDis = 3;
							}
							if (res.list.length > 9 && res.list.length <= 12) {
								this.keyList = 4;
								this.ml = -90;
								this.itemsDis = 3;
							}
						}
					});
			},
			/**猜你喜欢 */
			guessLike() {
				this.keyWord = uni.getStorageSync("history") ? uni.getStorageSync("history").join(",") : ''
				this.$http
					.get(
						`/goods/smart`, {
							page: this.page,
							limit: 6,
							keywords: this.keyWord,
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {

							this.goodsList = this.page == 1 ? res.page.list : this.goodsList.concat(res.page.list);
							if (res.page.totalPage <= res.page.currPage) {
								this.status = "noMore";
							} else {
								this.status = "more";
							}
							this.skeletonShow=false;
						}
					});
			},
			/**轮播图跳转 */
			// imgLink(type, id, url, shopid) {
			//   if (type == "goods") {
			//     uni.navigateTo({
			//       url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
			//     });
			//   } else if (type == "service") {
			//     uni.navigateTo({
			//       url: "/pages/product/goods/serviceGood?id=" + id
			//     });
			//   } else if (type == "point_goods") {
			//     uni.navigateTo({
			//       url: "/pages/product/goods/IntegralGood?id=" + id
			//     });
			//   } else if (type == "url") {
			//     if (/^http/.test(url)) {
			//       uni.navigateTo({
			//         url: "/pages/index/webView?linkUrl=" + url,
			//       });
			//     } else {
			//       uni.navigateTo({
			//         url
			//       });
			//     }
			//   }
			// },
			// 跳转商家
			jumpsj() {
				// uni.navigateTo({
				// 	url: "/pages/user/merchant/registerAndAudit",
				// });
				let token = uni.getStorageSync("apiToken")
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				} else {
					this.$http.get("/yxt/shopapply/shopApplyInfo").then(res => {
						if (res && res.code == 200) {
							if (res.data == null) {
								uni.navigateTo({
									url: "../user/merchant/registerAndAudit"
								})
							} else {
								uni.navigateTo({
									url: "../user/merchant/audit"
								})
							}
						}
					})
				}
			},
			goDetail(url, isNeedLogin) {
				if ((isNeedLogin && uni.getStorageSync("apiToken") == "") || null) {
					this.$mUtil.toast("请先登录");
					return false;
				}
				uni.navigateTo({
					url: url,
				});
			},
			/**重置数据*/
			rest() {
				this.goodsList = [];
				this.currSeckill = [];
				this.shopBanner = [];
				this.recommendList = [];
				this.newsList = [];
				this.hotList = [];
				this.groupList = [];
			},
			toCartPage() {
				uni.navigateTo({
					url: '/pages/index/shop'
				})
			},
			// 获取更新信息
			getAppInfo() {
				this.$http.get('/app/config/info').then(res => {
					if (res && res.code == 200) {
						this.appInfo = res.data || {};
						// #ifdef APP-PLUS
						plus.runtime.getProperty(plus.runtime.appid, (info) => {
							this.versionCode = info.versionCode;
							if (this.appInfo.number > info.versionCode) {
								uni.navigateTo({
									url: "/components/appUpdatePop"
								})
							}
						})
						// #endif
					}
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	@font-face {
		font-family: 'hxicon';
		/* project id 2009392 */
		src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
	}

	.hxicon {
		font-family: "hxicon" !important;
		font-size: 20px;
		font-style: normal;
		/* #ifndef APP-NVUE */
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		/* #endif */
	}

	.swiper {
		width: 100%;
		height: 370rpx !important;
		// border-radius: 20rpx;
		overflow: hidden;
		margin: 0 auto;

		/deep/ .uni-swiper-dot {
			width: 16rpx !important;
			height: 6rpx;
			border-radius: 4rpx !important;
			background-color: #ffffff !important;
			opacity: 0.5;
		}

		/deep/ .uni-swiper-dot-active {
			width: 32rpx !important;
			height: 6rpx;
			border-radius: 4rpx !important;
			background-color: #ffffff !important;
			opacity: 1;
		}
	}


	/deep/.hx-navbar__content__main_search_hxicon {
		span {
			font-size: 30rpx;
		}
	}


	/deep/.hx-navbar__content__main_search_input {
		background-color: #4A705E;
	}

	.one-cate {
		display: flex;
		// width: 750rpx;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 31rpx;
		margin-top: 30rpx;
		color: #373737;

		.item {
			width: 120rpx;
			text-align: center;
			// margin-right: 40rpx;

			// &:last-child {
			//   margin-right: 0;
			// }

			image {
				width: 70rpx !important;
				height: 70rpx !important;
			}

			.word {
				// margin-top: 17rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.item:first-child {
			margin-left: 0;
		}

		.item:nth-child(5n+1) {
			margin-left: 0;
		}

	}

	.seat {
		width: 100%;
		background-color: #0B844A;
		position: absolute;
		z-index: 5;
		height: 60rpx;
	}

	.search-box {
		display: flex;
		justify-content: space-between;
		width: 709rpx;
		margin-left: 12rpx;
		height: 71rpx;
		align-items: center;
		position: absolute;
		z-index: 10;
		background-color: #0B844A;
		margin-top: 15rpx;

		.search {
			width: 641rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			background: #018836;
			border: 1px solid rgba(255, 255, 255, 0.42);
			border-radius: 30rpx;
			position: relative;

			.search-icon {
				font-size: 18px;
				margin-left: 30rpx;
				color: #dbdbdb;
			}

			.key-word {
				color: #abc5b5;
				margin-left: 25rpx;
				font-size: 22rpx;
			}

			// .hxicon {
			// 	position: absolute;
			// 	left: 24px;
			// 	font-size: 18px;
			// 	color: #dbdbdb;
			// 	z-index: 100;
			// }
		}

		.iconfont {
			position: relative;
		}

		.message {
			font-size: 40rpx;
			color: white;
			z-index: 11;
		}

		.num {
			position: absolute;
			top: -18rpx;
			left: -20rpx;
			background-color: red;
			padding: 2rpx 10rpx;
			border-radius: 14rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.bannersize {
		display: block;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

	.guess {
		margin: 0 30rpx;

		.guess-item {
			display: flex;
			// justify-content: space-around;
			flex-wrap: wrap;

			.item {
				margin-bottom: 36rpx;
				background-color: #ffffff;
				overflow: hidden;
				display: flex;
				flex-direction: column;

				image {
					width: 336rpx;
					height: 336rpx;
					border-radius: 18rpx;
				}

				.name {
					margin: 6rpx 20rpx;
					width: 296rpx;
					// height: 70rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal !important;
				}

				.tag-box {
					margin: 10rpx 20rpx 0 20rpx;

					.tag1 {
						width: 69rpx;
						height: 30rpx;
					}

					.tag2 {
						width: 116rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}

				.number {
					display: flex;
					align-items: flex-end;
					// padding-bottom: 40rpx;
					margin: 8rpx 20rpx 0 20rpx;

					.number-red {
						color: #FF6600;
						font-size: 36rpx;
						font-weight: 700;

						text {
							font-size: 36rpx;
							font-weight: Bold;
						}
					}

					.number-grey {
						color: #999999;
						font-size: 22rpx;
						font-weight: 400;
						text-decoration: line-through;
						margin-left: 16rpx;
						padding-bottom: 4rpx;
					}
				}
			}

			.item:nth-child(2n) {
				margin-left: 18rpx;
			}
		}

		.guess-top {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.guess-left {
				font-size: 36rpx;
				color: #1a1a1a;
				font-weight: Bold;
				line-height: 30rpx;
			}

			.guess-line {
				width: 1rpx;
				height: 32rpx;
				background-color: #707070;
				margin: 0 16rpx;
			}

			.guess-right {
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
				line-height: 24rpx;
			}
		}
	}

	.new-products {
		margin: 50rpx 30rpx;

		.new-list {
			display: flex;
			overflow: scroll;
			white-space: nowrap;

			.item {
				margin-right: 20rpx;
				margin-top: 28rpx;
				margin-bottom: 28rpx;
				text-align: center;

				image {
					border: 1rpx solid #e6e6e6;
					width: 172rpx;
					height: 172rpx;
					border-radius: 10rpx;
				}

				.list-num {
					margin-top: 16rpx;
					font-size: 36rpx;
					line-height: 24rpx;
					color: #FF6600;
					font-weight: Bold;
					text-align: center;

					text {
						font-size: 32rpx;
						text-align: center;
					}
				}
			}
		}

		.montn-scroll {
			margin: 0 auto;
			border-radius: 6rpx;
			width: 124rpx;
			height: 14rpx;
			background-color: #dddddd;
			border-radius: 7rpx;
			text-align: center;

			.montn-red {
				width: 50rpx;
				border-radius: 6rpx;
				height: 14rpx;
				background-color: #FF6600;
			}
		}

		.month-list {
			// display: flex;
			// overflow: scroll;
			// white-space: nowrap;
			position: relative;
			padding-bottom: 20rpx;
			height: 350rpx;

			/deep/ uni-swiper {
				height: 350rpx;
			}

			.item {
				margin: 28rpx 0;
				text-align: center;
				height: 350rpx;
				width: 217rpx;

				image {
					width: 217rpx;
					margin: 0 auto;
					height: 217rpx;
					border-radius: 10rpx;
				}

				.list-num {
					margin-top: 16rpx;
					font-size: 36rpx;
					line-height: 24rpx;
					color: #FF6600;
					font-weight: bold;
					text-align: center;

					text {
						font-size: 32rpx;
						text-align: center;
					}
				}

				.sold {
					font-size: 22rpx;
					font-weight: Medium;
					line-height: 24rpx;
					color: #999999;
					margin-top: 8rpx;
					text-align: center;
				}
			}

			/deep/ swiper-item {
				width: 33.333%;
			}
		}

		.new-top {
			display: flex;
			align-items: center;

			.new-left {
				font-size: 36rpx;
				color: #1a1a1a;
				font-weight: Bold;
				line-height: 30rpx;
			}

			.new-line {
				width: 1rpx;
				height: 33rpx;
				background-color: #707070;
				margin: 0 16rpx;
			}

			.new-right {
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
				line-height: 24rpx;
			}
		}
	}

	.slide-box {
		display: flex;
		justify-content: center;
	}

	.dotBox {
		// position: absolute;
		// bottom: 0rpx;
		// left: 50%;
		// margin: 0 auto;
		height: 14rpx;
		overflow: hidden;
		border-radius: 14rpx;
		background-color: #ccc;
		display: flex;
		justify-content: center;

		.dotBox_item {
			width: 45rpx;
			height: 14rpx;
			border-radius: 2rpx;
			background-color: #ccc;
			transition: all 0.5s;
		}

		.active_dotBox {
			width: 45rpx;
			background: #FA6138;
			transition: all 0.5s;
		}
	}

	.hot {
		margin: 0 30rpx;

		.hot-item {
			display: flex;
			overflow: scroll;
			white-space: nowrap;

			.hot-number {
				display: flex;
				align-items: flex-end;
				margin-top: 20rpx;
			}

			.hot-large {
				color: #FF6600;
				font-size: 36rpx;
				font-weight: Bold;
				line-height: 24rpx;

				text {
					font-size: 36rpx;
					margin-left: 10rpx;
				}
			}

			.hot-small {
				font-size: 22rpx;
				font-weight: Medium;
				line-height: 24rpx;
				color: #cccccc;
				margin-left: 16rpx;
				text-decoration: line-through;
			}

			.title-price {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 140rpx;
			}

			.hot-introduce {
				overflow: hidden;
				word-break: break-all;
				margin-top: 24rpx;
				// width: 240rpx;
				font-size: 24rpx;
				font-weight: Regular;
				line-height: 34rpx;
				color: #333333;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-wrap: break-word;
				white-space: normal !important;
				width: 252rpx;
			}

			.item {
				padding: 20rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}

			display: flex;

			margin-top: 27rpx;

			image {
				width: 252rpx;
				height: 252rpx;
				border-radius: 16rpx;
			}
		}

		.hot-top {
			display: flex;
			align-items: center;

			.hot-left {
				font-size: 36rpx;
				font-weight: Bold;
				color: #1a1a1a;
				line-height: 30rpx;
			}

			.hot-body {
				width: 1rpx;
				height: 32rpx;
				background-color: #707070;
				margin: 0 16rpx 0 14rpx;
			}

			.hot-right {
				font-size: 24rpx;
				font-weight: Regular;
				line-height: 24rpx;
				color: #666666;
			}
		}
	}

	.middle_item {
		padding: 0 30rpx;
	}

	.middle_item:last-child {
		border: none;
	}

	.middle {
		display: flex;
		border-bottom: 1rpx solid #e6e6e6;
		padding-bottom: 40rpx;
		padding-top: 42rpx;

		.middle-left {
			margin-right: 20rpx;

			image {
				width: 226rpx;
				height: 226rpx;
				border-radius: 10rpx;
			}
		}

		.middle-right {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 10rpx;
			padding-bottom: 10rpx;

			.middle-title {
				font-size: 28rpx;
				margin-top: 10rpx;
				color: #181818;
				font-weight: 400;
				line-height: 36rpx;
			}

			.division {
				display: flex;
				// margin-top: 60rpx;
				width: 100%;
				padding-bottom: 10rpx;
				justify-content: space-between;
			}

			.middle-num {
				flex: 1;

				.contain {
					display: flex;
					align-items: flex-end;
				}

				.three {
					font-size: 24rpx;
					font-weight: Regular;
					color: #333333;
					line-height: 24rpx;
					margin-top: 8rpx;
				}

				.large {
					color: #FF6600;
					font-size: 36rpx;
					font-weight: Bold;
					line-height: 24rpx;

					text {
						font-size: 36rpx;
					}
				}

				.small {
					margin-left: 16rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #cccccc;
					line-height: 24rpx;
					text-decoration: line-through;
				}
			}

			.button {
				// padding: 10rpx 25rpx 10rpx 25rpx;
				width: 130rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				font-size: 28rpx;
				background: linear-gradient(180deg, #fa6037, #feb26d);
				border-radius: 32rpx;
			}
		}
	}

	.group-work {
		margin: 50rpx 30rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		padding: 30rpx 0;

		.work-top {
			// padding-bottom: 20rpx;
			margin-bottom: 10rpx;
			padding: 0 30rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e6e6e6;

			.top-left {
				font-size: 36rpx;
				font-weight: Bold;
				color: #1a1a1a;
				line-height: 30rpx;
			}

			.top-right {

				color: #333333;
				font-size: 24rpx;
				font-weight: Regular;

				.iconfont {
					color: #666666;
				}
			}
		}
	}


	// 惠选专区
	.hxbox {
		padding: 30rpx 30rpx 0;
		margin: 0rpx 30rpx 30rpx;
		background: url('/static/home/hx.png') no-repeat;
		background-size: 100% 100%;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #1a1a1a;
		}

		.hxClassify {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 30rpx;
			color: #373737;

			.item {
				text-align: center;
				margin-bottom: 20rpx;

				image {
					width: 300rpx !important;
					height: 210rpx !important;
				}

				.word {
					// margin-top: 17rpx;
				}
			}

			.item:first-child {
				margin-left: 0;
			}

			.item:nth-child(5n+1) {
				margin-left: 0;
			}
		}
	}

	.seckill {
		margin: 30rpx 30rpx 50rpx;

		.seckill-item {
			border-radius: 16rpx;
			background-color: #ffffff;
			// padding: 0 29rpx 26rpx 29rpx;
			padding-bottom: 26rpx;

			.scroll {
				margin: 26rpx auto 26rpx auto;

				width: 124rpx;
				height: 14rpx;
				background-color: #ededed;
				border-radius: 8rpx;

				.scroll-red {
					width: 50rpx;
					height: 14rpx;
					background-color: red;
					border-radius: 8rpx;
				}
			}


			.option {
				//   display: flex;
				position: relative;
				//   padding: 12rpx 20rpx;
				margin-top: 20rpx;
				padding: 0 29rpx;

				/deep/ .uni-swiper-slide-frame {
					// width: 26% !important;
				}

				.fa-item {
					display: flex;
				}

				.option-item:first-child {
					margin-left: 0;
				}

				.option-item {
					margin-left: 24rpx;

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

					.number {
						margin-top: 4rpx;
						text-align: center;
						font-size: 36rpx;
						font-weight: Bold;
						line-height: 24rpx;
						color: #333333;
						width: 140rpx;

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

			.seckill-top {
				padding: 24rpx 26rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #e6e6e6;

				.left {
					font-size: 36rpx;
					font-weight: Bold;
					color: #1a1a1a;
					margin-right: 14rpx;
				}

				.line {
					width: 1rpx;
					height: 32rpx;
					background-color: #707070;
				}

				.time {
					margin-left: 16rpx;
					color: #666666;
					font-size: 24rpx;
					font-weight: Regular;
				}

				.reciprocal {
					color: #ffffff;
					padding: 0rpx 14rpx;
					background-color: #FF0000;
					font-size: 24rpx;
					font-weight: Bold;
					border-radius: 30rpx;
					margin-left: 30rpx;

				}
			}
		}
	}

	.advertisement {
		margin: 50rpx 30rpx;

		image {
			width: 690rpx;
			height: 156rpx;
			border-radius: 28rpx;
		}
	}

	.classlist {
		margin: 30rpx;
		display: flex;
		justify-content: space-between;
		color: #373737;

		.item {
			width: 120rpx;
			text-align: center;
			// margin-right: 38rpx;

			// &:last-child {
			//   margin-right: 0;
			// }

			.img-box {
				width: 100%;
				// height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 8rpx;
				}

				text {
					font-size: 70rpx;
				}

				.word {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.alarmClock {
					color: #EB963A;
				}

				.spell {
					color: #4581F6;
				}

				.integral {
					color: #4EA700;
				}

				.discounts {
					color: #F55F40;
				}

				.activeRegion {
					color: #4581F6;
				}
			}

			.font {
				// margin-top: 17rpx;
			}

			.imgbox {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				// height: 110rpx;

				image {
					width: 70rpx;
					height: 70rpx !important;
					margin-bottom: 8rpx;
				}
			}
		}
	}

	.item-red {
		background: #f76260;
		color: #fff;
	}

	.item-green {
		background: #09bb07;
		color: #fff;
	}

	.item-blue {
		background: #007aff;
		color: #fff;
	}

	.swiper {
		// margin-top: 105rpx;
		height: 360rpx;

		.swiper-item {
			width: 100%;
			height: 100%;
		}
	}

	.index {
		position: relative;
		background-color: #f5f5f5;
		overflow-x: hidden;

		.top {
			position: absolute;
			// top: 0;
			left: -13%;
			width: 126%;
			overflow-x: hidden;
			height: 400rpx;
			border-radius: 0 0 50% 50%;
			background-color: #0B844A;
		}
	}



	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.cart-entrance {
		position: fixed;
		right: 30rpx;
		bottom: 180rpx;
		width: 50px;
		height: 50px;
		// background-image: url('/static/commonwealMall/cart.png');
		background-size: 100% 100%;
		border-radius: 50%;
		filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.3));
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 65%;
			height: 65%;
			margin-right: 5rpx;
		}
	}

	.top-box {
		width: 100%;
		padding-top: 46rpx;
		// padding: 49rpx 0 0 0;
		background: linear-gradient(132deg, #fd995d 1%, #feb771 45%, #ed9f61 95%);

		&.hide {
			// padding: 0;

			// .title {
			//   display: none;
			// }

			// .input-box {
			//   position: fixed;
			//   top: 0;
			//   left: 0;
			//   background: linear-gradient(132deg,#fd995d 1%, #feb771 45%, #ed9f61 95%);

			//   .status-bar {
			//     display: block;
			//   }
			// }

			.seat {
				display: block;
			}
		}

		.seat {
			display: none;
			height: 130rpx;
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin: 0 auto;
			height: 45rpx;
			padding: 0 30rpx;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #ffffff;
			line-height: 45rpx;
			text-align: center;

			.back-icon {
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				float: left;
			}

			image {
				width: 41rpx;
				height: 31rpx;
				margin-right: 4rpx;
			}

			.titlt-txt {
				font-size: 36rpx;
			}
		}

		.input-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: sticky;
			top: 0;
			z-index: 100;
			width: 100%;
			padding: 23rpx 30rpx 20rpx;

			.text {
				margin-right: 20rpx;
				margin-left: 0rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #fff;
			}

			.input-placeholder {
				// flex: 1;
				box-sizing: border-box;
				display: inline-block;
				vertical-align: middle;
				width: 630rpx;
				height: 70rpx;
				line-height: 66rpx;
				// background: rgba(2,81,43,0.3);
				background: #fff;
				padding-left: 80rpx;
				// color: #666666;
				background: rgba(255, 255, 255, 0.30);
				background-image: url('/static/czd/search.png');
				background-size: 40rpx 40rpx;
				background-position: 24rpx 50%;
				background-repeat: no-repeat;
				border: 1rpx solid rgba(255, 255, 255, 0.36);
				border-radius: 36rpx;
			}

			text {
				margin-left: 10rpx;
				display: inline-block;
				vertical-align: middle;
				font-size: 42rpx;
				font-weight: 400;
				text-align: right;
				color: #ffffff;
				line-height: 42rpx;

				&.iconfont2 {
					font-size: 55rpx;
				}
			}

			.status-bar {
				display: none;
			}

			.msgCenter {
				position: relative;

				text {
					min-width: 50rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					font-weight: 400;
					padding: 0 4rpx;
					background-color: #FF0000;
					border-radius: 13rpx;
					border: 2rpx solid #fff;
					text-align: center;
					position: absolute;
					left: 10rpx;
					top: -30rpx;
					line-height: normal;
				}
			}
		}

		.input-placeholder {
			color: #FEE3CF;
			opacity: 0.74;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			line-height: 70rpx;
		}
	}

	.top-box.hide {
		position: fixed;
		z-index: 9999;
	}

	.notice-box {
		height: 92rpx;
		font-size: 28rpx;
		margin-bottom: 0;

		::v-deep .uni-noticebar-icon {
			width: 40rpx;
			background-image: url('/static/home/noticebar-icon.png');
			background-size: cover;
			color: transparent !important;
		}
	}

	.mt120 {
		margin-top: 240rpx;
	}

	.banner1Cls {
		text-align: center;
		margin-top: 20rpx;

		image {
			width: 690rpx;
			height: 200rpx;
		}
	}
</style>