<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>
