zsw-farm-bxg/pages/home/index.vue

<template>
	<view class="index">
		<view class="head_box" :class="navStyle?'active':''">
			<cu-custom :isBack="true" bgColor="''">
				<block slot="backText">
					<view class="acea-row row-middle">
						<!-- <text class="icon"></text> -->
						<image v-if="navStyle" class="icon" src="../../static/images/earth-white.png"></image>
						<image v-else class="icon" src="../../static/images/earth.png"></image>
						<image v-if="navStyle" class="title-image" src="../../static/images/yanjie-logo-white.png">
						</image>
						<text class="nav-title shopro-selector-rect" v-else>{{ '中国·武汉' }}</text>
					</view>
				</block>
				<block slot="right">
					<view class="icon-box acea-row row-middle">
						<image v-if="navStyle" src="../../static/images/search-white.png" @click="goGoodSearch()">
						</image>
						<image v-else src="../../static/images/search.png" @click="goGoodSearch()"></image>
						<!-- <image v-if="navStyle" src="../../static/images/scan-white.png" mode=""></image>
						<image v-else src="../../static/images/scan.png" mode=""></image> -->
					</view>
				</block>
			</cu-custom>
		</view>
		<Banner :detail="info.banner"></Banner>
		<!-- <Banner :detail="homeData[2].componentContent.bannerData"></Banner> -->
		<!-- <Banner :detail="homeData[2].componentContent.bannerData" @getbgcolor="getbgcolor"></Banner>  v-if="index < 5"-->

		<view class="content-box">
			<view class="menus-box acea-row row-between">
				<view class="item" v-for="(item, index) in info.menus" :key="index" @tap="goRoll(item)">
					<view class="img-box">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="title">{{item.name}}</view>
				</view>
			</view>
			<view class="selections-box">
				<view class="top">
					<view class="tip" style="font-family: Futura;font-size: 10px;">YANJIE SELECTIONS</view>
					<view class="acea-row row-between-wrapper">
						<view class="title">眼界甄选</view>
						<view class="acea-row row-middle" @click="goEvaluations">
							<view class="more">全部评测</view>
							<view class="jiantou"></view>
						</view>
					</view>
				</view>
				<view class="selections">
					<scroll-view scroll-x="true" class="scroll">
						<view class="item-box">
							<view class="" v-for="(item,index) in info.evaluationList" :key="index"
								@click="goEvaluationDetail(item)">
								<view class="item">
									<!-- <view :class="'item ' + (index%2 == 0?'':'black')"> -->
									<image :src="item.homeImage" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="tab-box">
				<view class="scroll-box">
					<swiper :previous-margin="'32rpx'" :current="tabType" @change="changeCurrent">
						<swiper-item :class="'title-box ' + (tabType?'':'on')"
							:style="tabType?'transform: translate(75%, 0px) translateZ(0px) !important;':'transform: translate(0%, 0px) translateZ(0px) !important;'"
							@click="changeTab(0)">
							<view class="tip">{{tabType?'':'PICK FOR YOU'}}</view>
							<view class="title">推荐好物</view>
						</swiper-item>
						<swiper-item :class="'title-box ' + (tabType?'on':'')"
							:style="!tabType?'transform: translate(151%, 0px) translateZ(0px) !important;':'transform: translate(79%, 0px) translateZ(0px) !important;'"
							@click="changeTab(1)">
							<view class="tip">{{tabType?'HOT LIST':''}}</view>
							<view class="title">热门榜单</view>
						</swiper-item>
					</swiper>
				</view>

				<view class="tab-line-box acea-row">
					<view class="tab-line" @click="changeTab(0)">
						<view :class="'active ' + (tabType?'':'on')"></view>
					</view>
					<view class="tab-line" @click="changeTab(1)">
						<view :class="'active ' + (tabType?'on2':'')"></view>
					</view>
				</view>
			</view>

			<view class="list-box">
				<swiper :current="tabType" @change="changeListCurrent" :style="'height:'+swiperHeight+'px;'">
					<swiper-item>
						<!-- 精品推荐 bastList -->
						<!-- 为您推荐 推荐好物 benefit v-show="!tabType" -->
						<!-- <PromotionGood :benefit="bastList" /> -->
						<view class="goods-list acea-row row-between">
							<view class="goods-item" v-for="(item, promotionGoodIndex) in bastList"
								:key="promotionGoodIndex" @tap="goGoodsCon(item)">
								<view class="img-box">
									<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
								</view>
								<view class="name more-t">{{ item.storeName }}</view>
								<view class="price-box">
									<view class="current">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<!-- 热门榜单 v-show="tabType" -->
						<!-- <HotCommodity :detail="hotList" /> -->
						<view class="hot-list">
							<view class="classify-tab-box acea-row">
								<view :class="'classify-item ' + (classifyType == index?'on':'')"
									v-for="(item,index) in hotList" :key="index" @click="changeClassify(index)">
									{{item.listName}}</view>
							</view>
							<view class="top-box">
								<view class="top-item acea-row" v-for="(item,index) in topList" :key="index"
									@tap="goGoodsCon(item)">
									<view class="top-num-box">
										<view class="">{{index+1}}</view>
										<view class="tip">{{index===0?'ST':index===1?'ND':index===2?'RD':'TH'}}</view>
									</view>
									<image class="img" :src="item.image" mode="aspectFill"></image>
									<view class="info-box">
										<view class="title more-t">{{item.storeName}}</view>
										<view class="price-box">¥{{ item.price }}<text>¥{{item.otPrice}}</text> </view>
										<view class="original">{{ item.sales }}+人购买</view>
									</view>
								</view>
							</view>
							<view class="goods-list acea-row row-between" v-if="goodsList.length">
								<view class="goods-item" v-for="(item, promotionGoodIndex) in goodsList"
									:key="promotionGoodIndex" @tap="goGoodsCon(item)">
									<view class="img-box">
										<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
									</view>
									<view class="name more-t">{{ item.storeName }}</view>
									<view class="price-box">
										<view class="current">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
									</view>
								</view>
							</view>
						</view>

					</swiper-item>
				</swiper>
			</view>

		</view>
		<!-- <view v-for="(item, index) in homeData" :key="index"> -->
		<!-- <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }">
        <cu-custom :isBack="true" :bgColor="bgcolor">
          <block slot="backText">
            <text class="nav-title shopro-selector-rect">{{ item.componentContent.title }}</text>
          </block>
        </cu-custom>
      </view> -->
		<!-- <view class="header header-search acea-row row-center-wrapper" v-if="item.type == 'search'" :style="{ background: bgcolor }">
        <view @click="goGoodSearch()" class="search acea-row row-middle">
          <text class="iconfont icon-xiazai5"></text>
          搜索商品
        </view> -->
		<!-- #ifndef H5 -->
		<!-- <view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'">
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/qr.png`" />
        </view> -->
		<!-- #endif -->
		<!-- </view> -->
		<!-- <Banner v-if="item.type == 'banner'"
	  :detail="item.componentContent.bannerData"
	  @getbgcolor="getbgcolor"></Banner> -->
		<!-- <uni-notice-bar
	  v-if="item.type == 'noticeBar'"
	  scrollable="true"
	  @click="goRoll(item.componentContent.roll[0])"
	  single="true" :speed="10"
	  showIcon="true"
	  :text="item.componentContent.roll[0].info"></uni-notice-bar> -->
		<!-- 菜单 -->
		<!-- <view class="content_box home_content_box"
		v-if="item.type == 'menu' && item.componentContent.menus">
        <Menu :list="item.componentContent.menus"></Menu>
      </view> -->
		<!-- 滚动新闻 -->
		<!-- 广告 -->
		<!-- <Adv v-if="item.type == 'adv' && item.componentContent.detail" :detail="item.componentContent.detail" /> -->
		<!-- 热门榜单 -->
		<!-- <HotCommodity v-if="item.type == 'hotCommodity'" :detail="likeInfo" /> -->
		<!-- 超值拼团 -->
		<!-- <Groupon v-if="item.type == 'groupon'" :detail="combinationList" /> -->
		<!-- 首发新品->秒杀 -->
		<!-- <FirstNewProduct v-if="item.type == 'firstNewProduct'" :detail="firstList" /> -->
		<!-- 精品推荐 -->
		<!-- <ProductsRecommended v-if="item.type == 'productsRecommended'" :detail="bastList" /> -->
		<!-- 促销单品 -->
		<!-- <PromoteProduct v-if="item.type == 'promoteProduct'" :detail="benefit" /> -->
		<!-- 直播 -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <Live v-if="item.type == 'live'" :detail="live" /> -->
		<!-- #endif -->
		<!-- 为您推荐 -->
		<!-- <PromotionGood v-if="item.type == 'promotionGood'" :benefit="benefit" /> -->
		<!-- <Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose" /> -->
		<!-- </view> -->
		<Tabbar :pagePath="pagePath"></Tabbar>
		<!-- #ifdef H5 -->
		<view class="bottomSpace" style='line-height:100rpx'>正在使用H5方式浏览</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	// import GoodList from '@/components/GoodList'
	// import PromotionGood from '@/components/PromotionGood'
	// import CouponWindow from '@/components/CouponWindow'
	// import Menu from '@/components/Menu'
	// import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
	// import Adv from '@/components/sh-adv'
	// import Groupon from '@/components/sh-groupon.vue'

	import Banner from './components/Banner'
	// import HotCommodity from './components/HotCommodity'
	// import FirstNewProduct from './components/FirstNewProduct'
	// import ProductsRecommended from './components/ProductsRecommended'
	// import Live from './components/Live'
	import Tabbar from '@/components/Tabbar';

	import {
		getHomeData,
		getShare,
		getCanvas,
		getHotList
	} from '@/api/public'
	import cookie from '@/utils/store/cookie'
	import {
		isWeixin,
		handleUrlParam
	} from '@/utils/index'

	import {
		openShareAll
	} from '@/libs/wechat'

	const HAS_COUPON_WINDOW = 'has_coupon_window'

	export default {
		name: 'Index',
		components: {
			// swiper,
			// swiperSlide,
			// UniNoticeBar,
			// GoodList,
			// PromotionGood,
			// CouponWindow,
			// Menu,
			// Adv,
			// Groupon,
			Banner,
			// HotCommodity,
			Tabbar,
			// FirstNewProduct,
			// ProductsRecommended,
			// Live,
		},
		props: {},
		data: function() {
			return {
				pagePath: '',
				navStyle: false,
				tabType: 0,
				homeData: [],
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				formatMenus: [],
				categoryCurrent: 0,
				menuNum: 4,
				bgcolor: '',
				bgColor: '',
				swiperCurrent: 0, //轮播下标
				webviewId: 0,
				showCoupon: false,
				logoUrl: '',
				banner: [],
				menus: [],
				combinationList: [],
				roll: [],
				activity: [],
				activityOne: {},
				bastList: [],
				firstList: [],
				info: {
					fastList: [],
					bastBanner: [],

					bastList: [],
				},
				likeInfo: [],
				live: [],
				lovely: [],
				benefit: [],
				hotList: [],
				topList: [], // hotList 前五
				goodsList: [], // hotList 除前五之外
				couponList: [],
				swiperOption: {
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
					autoplay: {
						disableOnInteraction: false,
						delay: 2000,
					},
					loop: true,
					speed: 1000,
					observer: true,
					observeParents: true,
				},
				swiperRoll: {
					direction: 'vertical',
					autoplay: {
						disableOnInteraction: false,
						delay: 2000,
					},
					loop: true,
					speed: 1000,
					observer: true,
					observeParents: true,
				},
				swiperScroll: {
					freeMode: true,
					freeModeMomentum: false,
					slidesPerView: 'auto',
					observer: true,
					observeParents: true,
				},
				swiperBoutique: {
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
					autoplay: {
						disableOnInteraction: false,
						delay: 2000,
					},
					loop: true,
					speed: 1000,
					observer: true,
					observeParents: true,
				},
				swiperProducts: {
					freeMode: true,
					freeModeMomentum: false,
					slidesPerView: 'auto',
					observer: true,
					observeParents: true,
				},
				bgImage: '',
				classifyType: 0, // 热门榜单分类
				swiperHeight: 0,
				// indexTitle: false,
			}
		},
		computed: {
			singNew() {
				return this.roll.length > 0 ? this.roll[0] : '你还没添加通知哦！'
			},
			customStyle() {
				var bgImage = this.bgImage
				// var style = `height:${this.CustomBar}px;padding-top:${0}px;background: ${this.bgcolor}`;
				var style = `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background: ${this.bgcolor}`
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`
				}
				return style
			},
		},
		onLoad() {
			uni.hideTabBar();
			let pages = getCurrentPages();
			this.pagePath = '/' + pages[pages.length - 1].route;
			this.getLocation()
			uni.showLoading({
				title: "加载中",
			});
			//   getCanvas()
			//     .then(res => {
			//   console.log('223',res)
			//  })
			//     .catch(error => {
			// if (!error) {
			//   return
			// }
			//       this.homeData = JSON.parse(error.data.json)
			// console.log('225',this.homeData)
			//     })

			getHomeData().then(res => {
				this.logoUrl = res.data.logoUrl
				// res.data.banner.forEach(item => (item.bgcolor = item.color || ''))
				// this.info = res.data.info
				// console.log('239', res.data)
				// console.log('239',this.info)
				this.$set(this, 'info', res.data)
				// this.$set(this, 'info', res.data.info)
				this.$set(this, 'firstList', res.data.firstList)
				this.$set(this, 'bastList', res.data.bastList)
				this.$set(this, 'likeInfo', res.data.likeInfo)
				this.$set(this, 'live', res.data.liveList)
				this.$set(this, 'lovely', res.data.lovely)
				this.$set(this, 'benefit', res.data.benefit)
				this.$set(this, 'couponList', res.data.couponList)
				this.$set(this, 'combinationList', res.data.combinationList)
				uni.hideLoading()
				this.setOpenShare();
				// this.doColorThief()
			}).then(() => {
				let query = uni.createSelectorQuery();
				query.select('.goods-list').boundingClientRect(rect => {
					// console.log('rectrectrect239',rect)
					this.swiperHeight = rect.height;
				}).exec();
			})

			getHotList().then(res => {
				this.hotList = res.data;
				this.goodsList = this.sortData(this.hotList[this.classifyType].productInfo, 4);
			})
		},
		onPageScroll(e) {
			if (e.scrollTop > 80) {
				this.navStyle = true;
			} else {
				this.navStyle = false;
			};
		},
		methods: {
			
			...mapActions(['getLocation']),
			onShareTimeline: function() {
				return {
					title: this.miniHomeRemark,
					imageUrl: this.miniHomeImg,
					path: 'pages/home/index?spread=' + uni.getStorageSync('uid'),
				}
			},
			onShareAppMessage: function() {
				return {
					title: this.miniHomeRemark,
					imageUrl: this.miniHomeImg,
					path: 'pages/home/index?spread=' + uni.getStorageSync('uid'),
				}
			},
			goRoll(item) {
				if (item.uniapp_url) {
					this.$yrouter.push(item.uniapp_url)
				}
			},
			changeCurrent(e) {
				this.tabType = e.detail.current;
			},
			changeListCurrent(e) {
				this.tabType = e.detail.current;
				if (this.tabType == 1) {
					let query = uni.createSelectorQuery();
					query.select('.hot-list').boundingClientRect(rect => {
						// console.log('rectrectrect239',rect)
						if (this.swiperHeight >= rect.height) return;
						if (this.swiperHeight != 0 && rect.height > this.swiperHeight) {
							this.swiperHeight = rect.height;
						}
					}).exec();
				}
			},
			changeTab(i) {
				if (this.tabType == i) return;
				this.tabType = i;
				if (i == 1) {
					let query = uni.createSelectorQuery();
					query.select('.hot-list').boundingClientRect(rect => {
						if (this.swiperHeight >= rect.height) return;
						if (this.swiperHeight != 0 && rect.height > this.swiperHeight) {
							this.swiperHeight = rect.height;
						}
					}).exec();
				}
			},
			goGoodSearch() {
				// this.$yrouter.push('/pages/shop/GoodsEvaluate/index');
				this.$yrouter.push('/pages/shop/GoodSearch/index')
			},
			goEvaluations() {
				this.$yrouter.push('/pages/shop/Evaluations/index');
			},
			goEvaluationDetail(item) {
				this.$yrouter.push({
					path: '/pages/shop/Evaluations/EvaluationDetail/index',
					query: {
						id: item.id
					},
				})
			},
			// goWxappUrl(item) {
			//   this.$yrouter.push(item.uniapp_url)
			// },
			// goHotNewGoods(type) {
			//   this.$yrouter.push({
			//     path: '/pages/shop/HotNewGoods/index',
			//     query: {
			//       type,
			//     },
			//   })
			// },
			goGoodsCon(item) {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: item.id,
					},
				})
			},
			// goGoodsPromotion() {
			//   this.$yrouter.push('/pages/shop/GoodsPromotion/index')
			// },
			changeClassify(i) {
				if (this.classifyType == i) return;
				this.classifyType = i;
				this.goodsList = this.sortData(this.hotList[this.classifyType].productInfo, 4);
				setTimeout(() => {
					let query = uni.createSelectorQuery();
					query.select('.hot-list').boundingClientRect(rect => {
						// console.log('rectrectrect',rect)
						if (this.swiperHeight >= rect.height) return;
						this.swiperHeight = rect.height;
					}).exec();
				}, 160)

			},
			// 数据分层
			sortData(oArr, length) {
				let arr = [];
				let minArr = [];
				if (oArr.length > 5) {
					this.topList = oArr.slice(0, 5);
					arr = oArr.slice(5, oArr.length);
				} else {
					this.topList = oArr;
				}
				return arr;
			},
			setOpenShare: function() {
				if (this.$deviceType == 'weixin') {
					getShare().then(res => {
						var data = res.data.data
						var configAppMessage = {
							desc: data.synopsis,
							title: data.title,
							link: location.href,
							imgUrl: data.img,
						}
						openShareAll(configAppMessage)
					})
				}
			},
			startQr: function() {
				uni.scanCode({
					success: res => {
						let option = handleUrlParam(res.result)
						console.log(option)
						switch (option.pageType) {
							case 'good':
								// 跳转商品详情
								this.$yrouter.push({
									path: '/pages/shop/GoodsCon/index',
									query: {
										q: res.result,
									},
								})
								break
							case 'group':
								// 跳转团购
								this.$yrouter.push({
									path: '/pages/activity/GroupRule/index',
									query: {
										q: res.result,
									},
								})
								break
							case 'dargain':
								// 跳转砍价
								this.$yrouter.push({
									path: '/pages/activity/DargainDetails/index',
									query: {
										q: res.result,
									},
								})
								break
							default:
								// 跳转分销
								this.$yrouter.push({
									path: '/pages/Loading/index',
									query: {},
								})
								break
						}
					},
				})
			},
			// getbgcolor(e) {
			//   this.bgcolor = e
			// },
		},
		created: async function() {
			// await this.doColorThief();
		},
	}
</script>
<style>
	page {
		background: #FFFFFF;
		font-family: PingFang SC;
	}
</style>
<style scoped lang="less">
	// .content_box {
	//   background: #f6f6f6;
	// }

	// .index {
	//   background-color: #f6f6f6;
	// }

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

	// .fixed-header {
	//   position: fixed;
	//   z-index: 99;
	//   // #ifdef H5
	//   top: 88rpx;
	//   // #endif

	//   // #ifndef H5
	//   top: 0;
	//   // #endif
	//   left: 0;
	//   right: 0;
	//   background: #fff;
	//   box-shadow: 0 0 20rpx -10rpx #aaa;

	//   & + .fixed-header-box {
	//     height: 98rpx;
	//   }
	// }

	.head_box.active {
		background-image: linear-gradient(33deg, #2EB5AE 0%, #1B8DCC 100%);
	}

	.head_box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		width: 750rpx;

		/deep/.cuIcon-back {
			display: none;
		}

		.icon {
			display: inline-block;
			width: 62rpx;
			height: 62rpx;
			// background-color: aquamarine;
			margin-left: 22rpx;
		}

		.title-image {
			width: 184rpx;
			height: 46rpx;
			// background-color: bisque;
		}

		.nav-title {
			// font-size: 38rpx;
			// font-family: PingFang SC;
			// font-weight: 500;
			// color: #fff;

			font-size: 26rpx;
			color: #3A3A3C;
			line-height: 38rpx;
		}

		// .right-icon {
		// 	width: 62rpx;
		// 	height: 62rpx;
		// }
		.icon-box {
			// display: inline-block;
			// width: 562rpx;
			// width: 124rpx;
			// height: 62rpx;
			// background-color: aquamarine;
			margin-right: 14rpx;

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

	.content-box {
		position: relative;
		background: #FFFFFF;
	}

	.menus-box {
		position: relative;
		top: -48rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		background: #FFFFFF;
		padding: 32rpx 32rpx 20rpx;
		margin-bottom: -48rpx;
		box-shadow: 0rpx -12rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);

		.item {
			.img-box {
				width: 108rpx;
				height: 108rpx;
				background: #F5F6F8;
				box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 16rpx;
				padding: 24rpx;

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

			.title {
				padding-top: 16rpx;
				font-size: 22rpx;
				color: #2DB5AE;
				line-height: 30rpx;
				text-align: center;
			}
		}
	}

	.selections-box {
		padding-top: 24rpx;

		.top {
			padding: 0rpx 32rpx;

			.tip {
				font-size: 20rpx;
				font-family: Futura;
				color: #999999;
				line-height: 22rpx;
			}

			.title {
				font-size: 50rpx;
				font-weight: 600;
				color: #3A3A3C;
				line-height: 68rpx;
			}

			.more {
				font-size: 20rpx;
				font-weight: 300;
				color: #2DB5AE;
				line-height: 26rpx;
			}

			.jiantou {
				width: 0rpx;
				height: 0rpx;
				border-top: 8rpx solid transparent;
				border-left: 10rpx solid #2DB5AE;
				border-bottom: 8rpx solid transparent;
				border-right: 10rpx solid transparent;
				margin-left: 8rpx;
			}
		}

		.selections {
			padding-top: 6rpx;

			.scroll {
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
			}

			.item-box {
				display: flex;
				flex-wrap: nowrap;
				// width: 2144rpx;
				padding: 10rpx 0rpx 24rpx 32rpx;

				.item {
					width: 684rpx;
					height: 240rpx;
					// background: #F5F6F8;
					box-shadow: 0px 10rpx 16rpx 0px rgba(0, 0, 0, 0.15);
					border-radius: 16rpx;
					margin-right: 20rpx;
					overflow: hidden;

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

				// .black {
				// 	background: #4F4E53;
				// }
			}
		}
	}

	.tab-box {
		padding-bottom: 16rpx;

		.scroll-box {
			width: 382rpx;
			height: 90rpx;

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

		.title-box {
			width: 108rpx !important;
			position: absolute;
			width: 100%;
			height: 100%;

			.tip {
				opacity: 0;
				height: 22rpx;
				font-size: 20rpx;
				font-family: Futura;
				font-weight: 500;
				color: #999999;
				line-height: 22rpx;
			}

			.title {
				height: 68rpx;
				font-size: 26rpx;
				font-weight: 600;
				color: #3A3A3C;
				line-height: 38rpx;
				padding-top: 22rpx;
			}
		}

		.title-box.on {
			width: 200rpx !important;

			.title {
				font-size: 50rpx;
				line-height: 68rpx;
				padding-top: 0rpx;
				// transition: all .8s;
				// -webkit-transition: all .8s;
				// -moz-transition: all .8s;
				// -o-transition: all .8s;
				// transform:translateZ(0);
				// backface-visibility: hidden;
				// // 兼容写法
				// -webkit-backface-visibility: hidden;
			}

			.tip {
				opacity: 1;
				transition: opacity 1s cubic-bezier(.18, .89, .17, .88);
				-webkit-transition: opacity 1s cubic-bezier(.18, .89, .17, .88);
				-moz-transition: opacity 1s cubic-bezier(.18, .89, .17, .88);
				-o-transition: opacity 1s cubic-bezier(.18, .89, .17, .88);
			}
		}

		.title-box:first-child {
			// padding-left: 32rpx;
		}

		.title-box:last-child {
			transform: translate(151%, 0px) translateZ(0px) !important;
			padding-left: 24rpx;
		}

		.tab-line-box {
			padding-left: 32rpx;

			.tab-line {
				width: 92rpx;
				height: 4rpx;
				// opacity: 0.24;
				background: #CCEDEB;
				// border: 4rpx solid #CCEDEB;
				margin-right: 12rpx;
				position: relative;

				.active {
					width: 0rpx;
					height: 4rpx;
					// opacity: 1;
					background: #2DB5AE;
					// border: 4rpx solid #2DB5AE;
					position: absolute;
					top: 0;
					left: 0;
					transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-webkit-transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-moz-transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-o-transition: all .6s cubic-bezier(.18, .89, .17, .88);
				}

				.active.on2 {
					width: 92rpx;
					transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-webkit-transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-moz-transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-o-transition: all .6s cubic-bezier(.18, .89, .17, .88);
				}
			}

			.tab-line:first-child {
				.active {
					// width: 92rpx;
					left: 92rpx;
				}

				.active.on {
					width: 92rpx;
					left: 0;
					transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-webkit-transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-moz-transition: all .6s cubic-bezier(.18, .89, .17, .88);
					-o-transition: all .6s cubic-bezier(.18, .89, .17, .88);
				}
			}
		}
	}

	.list-box {
		width: 100%;

		swiper {
			width: 100%;
		}
	}

	.list-box .goods-list {
		padding: 0rpx 32rpx 8rpx;

		.goods-item {
			width: 332rpx;
			background: #F5F6F8;
			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.img-box {
				width: 332rpx;
				height: 316rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
					background-color: #fff;
				}
			}

			.name {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3A3A3C;
				line-height: 38rpx;
				height: 76rpx;
				margin: 10rpx 16rpx;
			}

			.price-box {
				padding: 0rpx 16rpx 26rpx;
				width: 100%;
				box-sizing: border-box;
				text-align: center;

				.current {
					font-size: 30rpx;
					font-family: Futura;
					font-weight: 600;
					color: #3A3A3C;
					line-height: 40rpx;

					text {
						padding-left: 10rpx;
						font-size: 20rpx;
						color: #999999;
						line-height: 26rpx;
						font-weight: 500;
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.list-box .classify-tab-box {
		padding: 4rpx 32rpx 22rpx;

		.classify-item {
			width: 124rpx;
			height: 40rpx;
			border-radius: 16rpx;
			border: 2rpx solid #2EB5AE;
			font-size: 24rpx;
			font-weight: 500;
			color: #2DB5AE;
			line-height: 36rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.on {
			color: #FFFFFF;
			background: #2DB5AE;
		}
	}

	.list-box .top-box {
		padding: 0rpx 32rpx 12rpx;

		.top-item {
			width: 686rpx;
			height: 174rpx;
			background: #F5F6F8;
			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.top-num-box {
				width: 146rpx;
				height: 174rpx;
				padding: 24rpx 0rpx 24rpx 12rpx;
				font-size: 80rpx;
				font-family: Futura;
				font-weight: 700;
				color: #2DB5AE;
				line-height: 106rpx;
				text-align: center;

				.tip {
					font-size: 32rpx;
					line-height: 42rpx;
					position: relative;
					top: -22rpx;
				}
			}

			.img {
				width: 168rpx;
				height: 162rpx;
				border-radius: 8rpx;
				margin: 6rpx 0rpx;
			}

			.info-box {
				width: 370rpx;
				height: 174rpx;
				padding: 16rpx 18rpx 16rpx 10rpx;

				.title {
					height: 76rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #3A3A3C;
					line-height: 38rpx;
				}

				.price-box {
					font-size: 30rpx;
					font-family: Futura;
					font-weight: 600;
					color: #3A3A3C;
					line-height: 40rpx;

					text {
						font-size: 20rpx;
						font-weight: 500;
						color: #999999;
						line-height: 26rpx;
						text-decoration: line-through;
						padding-left: 10rpx;
					}
				}

				.original {
					font-size: 20rpx;
					color: #999999;
					line-height: 26rpx;
				}
			}
		}
	}

	// .menus-box {
	// 	position: relative;
	// 	top: ;
	// }

	// .cu-bar.fixed {
	//   position: fixed;
	//   width: 100%;
	//   top: 0;
	//   z-index: 1024;
	//   // box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
	// }

	// .cu-bar {
	//   box-sizing: border-box;

	//   .index .header {
	//     height: 64rpx;
	//     // width: 100%;
	//     // padding: 0 30rpx;
	//     // box-sizing: border-box;
	//   }
	// }

	.header-search {
		transition: all linear 0.3s;
	}

	.cu-bar .action {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		height: 100%;
		max-height: 100%;

		&:first-child {
			margin-left: 15px;
			font-size: 15px;
		}
	}

	// .home_content_box {
	//   // margin-top: -20rpx;
	// }

	.index {
		.uni-noticebar {
			margin-bottom: 0;
		}
	}
</style>