<template>
	<view class="page-index" :class="{'bgf':navIndex >0}">
		<!-- #ifdef H5 -->
		<view class="header">
			<view class="serch-wrapper flex acea-row row-between-wrapper">
				<view v-if="logoUrl" class="logo">
					<!-- <image v-if="!logoUrl" class="logo" src="/static/images/crmeb.png"></image> -->
					<image :src="logoUrl" mode=""></image>
				</view>
				<navigator url="/pages/columnGoods/goods_search/index" :class="logoUrl ? 'input' : 'uninput'" hover-class="none"><text class="iconfont icon-xiazai5"></text>
					搜索商品</navigator>
				<navigator class="btn" url="/pages/chat/customer_list/index?type=0" hover-class="none">
					<view class="iconfont icon-xiaoxi"></view>
					<text class="iconnum bg-color-red" v-if="userInfo.total_unread">{{userInfo.total_unread}}</text>
				</navigator>
			</view>
			
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="mp-header">
			<view class="sys-head" view :style="{ height: statusBarHeight }"></view>
			<view class="serch-box" view style="height: 43px;">
				<view class="serch-wrapper flex">
					<view v-if="logoUrl" class="logo">
						<image :src="logoUrl" mode=""></image>
					</view>
					<navigator url="/pages/columnGoods/goods_search/index" :class="logoUrl ? 'input' : 'uninput'" hover-class="none"><text class="iconfont icon-xiazai5"></text>
						搜索商品</navigator>
				</view>
			</view>
			<!-- <tabNav class="tabNav" :tabTitle="navTop" @changeTab='changeTab'></tabNav> -->
		</view>
		<!-- #endif -->
		<!-- 首页展示 -->
		<view class="page_content" v-if="navIndex == 0" :style="{marginTop:mpHeight+'px'}">
			<!-- #ifdef MP -->
			<!-- <view class="mp-bg"></view> -->
			<!-- #endif -->
			<!-- menu -->
			<view class='nav acea-row' v-if="menus.length">
				<block v-for="(item,index) in menus" :key="index">
					<view class="item" @click="goMenuDetail(item)">
						<view class='pictrue'>
							<image :src='item.pic'></image>
						</view>
						<view class="menu-txt area-row">{{item.name}}</view>
					</view>
				</block>
			</view>
			<!-- banner -->
			<view class="swiper" v-if="imgUrls.length">
				<swiper :indicator-dots="false" :autoplay="true" :circular="circular" :interval="interval" :duration="duration"
				 indicator-color="#E4E4E4" indicator-active-color="#E93323" previous-margin="40rpx" next-margin="40rpx" :current="swiperCur"
				 @change="swiperChange">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item :class="{active:index == swiperCur}">
							<navigator :url='item.url' class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
								<image :src="item.pic" class="slide-image"></image>
							</navigator>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<!-- 导航 -->
			<tabNav class="tabNav" :class="{'fixed':isFixed}" :tabTitle="navTop" @changeTab='changeTab'></tabNav>
			<!-- 广告 -->
			<navigator v-if="ad.home_ad_pic" class="ad" :url="ad.home_ad_url" hover-class="none">
				<image mode="" :src="ad.home_ad_pic"></image>
			</navigator>
			
			<!--秒杀-->
			<view class="main" v-if="spikeList.length > 0">
				<view class="seckill-count">
					<view class="spike-bd">
						<view class="title line1">限时秒杀</view>
						<view class="spike-distance">
							<text class="text bg-red">距结束</text>
							<countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="':'" :minute-text="':'" :second-text="' '"
							 :datatime="datatime"></countDown>
						</view>
						<navigator url="/pages/activity/goods_seckill/index" class="more-btn" hover-class="none">更多<text class="iconfont icon-jiantou"
							 hover-class='none'></text></navigator>
					</view>
					<view class="spike-wrapper">
						<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
							<navigator class="spike-item" v-for="(item,index) in spikeList" :key="index" :url="'/pages/activity/goods_seckill_details/index?id='+item.product_id+'&time='+item.stop+''"
							 hover-class='none'>
								<view class="img-box">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="info">
									<view class="name line1">{{item.store_name}}</view>
									<view class="stock-box">
										<view class="grabbed" :style="'width:'+item.sales+';'"></view>
										<text class="stock-sales">{{item.sales}}</text>
									</view>
									<view class="price-box">
										<text class="price"><text>￥</text>{{item.price}}</text>
										<text class="old-price"><text>￥</text>{{item.ot_price}}</text>
									</view>
								</view>
							</navigator>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 拼团 -->
			<view v-if="combinationList.length > 0" class="main">
				<view class="combination-count">
					<view class="spike-bd">
						<view class="title line1">拼团活动</view>
						<navigator url="/pages/activity/combination/index" class="more-btn" hover-class="none">更多<text class="iconfont icon-jiantou"
							 hover-class='none'></text></navigator>
					</view>
					<view class="combination_wrapper">
						<view class="spike-wrapper">
							<block class=" acea-row row-between-wrapper combination">
								<view class="combination-item" v-for="(item,index) in combinationList" :key="index" hover-class='none' @click="goCombinDetail(item)">
									<view class="info">
										<view class="price-box combination-price">
											<view class="name line1">{{item.product.store_name}}</view>
											<text class="price"><text>￥</text>{{item.price}}</text>
											<text class="gocom_btn">去拼团<text class="iconfont icon-jiantou"></text></text>
										</view>
									</view>
									<view class="img-box">
										<image :src="item.product.image" mode=""></image>
									</view>
								</view>
								<view v-if="combinationList.length == 1" class="combination-item" @click="goCombinDetail(combinationList[0])">
									<view class="info">
										<view class="price-box combination-price">
											<view class="name line1">{{combinationList[0].product.store_name}}</view>
											<text class="price"><text>￥</text>{{combinationList[0].price}}</text>
											<text class="gocom_btn">去拼团<text class="iconfont icon-jiantou"></text></text>
										</view>
									</view>
									<view class="img-box">
										<image :src="combinationList[0].product.image" mode=""></image>
									</view>
								</view>
								<view v-if="combinationList.length == 1" class="combination-item" @click="goCombinDetail(combinationList[0])">
									<view class="info">
										<view class="price-box combination-price">
											<view class="name line1">{{combinationList[0].product.store_name}}</view>
											<text class="price"><text>￥</text>{{combinationList[0].price}}</text>
											<text class="gocom_btn">去拼团<text class="iconfont icon-jiantou"></text></text>
										</view>
									</view>
									<view class="img-box">
										<image :src="combinationList[0].product.image" mode=""></image>
									</view>
								</view>
								<view v-if="combinationList.length == 2" class="combination-item" @click="goCombinDetail(combinationList[1])">
									<view class="info">
										<view class="price-box combination-price">
											<view class="name line1">{{combinationList[1].product.store_name}}</view>
											<text class="price"><text>￥</text>{{combinationList[1].price}}</text>
											<text class="gocom_btn">去拼团<text class="iconfont icon-jiantou"></text></text>
										</view>
									</view>
									<view class="img-box">
										<image :src="combinationList[1].product.image" mode=""></image>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef MP -->
			<!--直播-->
			<!-- <view class="main" v-if="liveList.length > 0">
				<view class="live-count">
					<view> -->
						<!-- 直播 -->
						<!-- <block>
							<view class="spike-bd">
								<view class="title line1">直播专场</view>
								<navigator url="/pages/activity/liveBroadcast/index" class="more-btn" hover-class="none">更多<text class="iconfont icon-jiantou"
									 hover-class='none'></text></navigator>
							</view>
							<view class="live-wrapper mores">
								<scroll-view scroll-x="true" style="white-space: nowrap; display: flex">
									<view class="item" v-for="(item, index) in liveList" :key="index">
										<navigator hover-class="none" :url="item.link">
											<view class="live-top" :style="'background:' + (item.live_status == 101 ? playBg : (item.live_status != 101 && item.live_status != 102) ? endBg : notBg) + ';'"
											 :class="item.live_status == 102 ? 'playRadius' : 'notPlayRadius'">
												<block v-if="item.live_status == 101">
													<image src="/static/images/live-01.png" mode=""></image>
													<text>直播中</text>
												</block>
												<block v-if="item.live_status == 103 && item.replay_status === 1">
													<image src="/static/images/live-02.png" mode=""></image>
													<text>回放</text>
												</block>
												<block v-if="(item.live_status != 101 && item.live_status != 102 && item.live_status != 103) ||  (item.live_status == 103 && item.replay_status == 0)">
													<image src="/static/images/live-02.png" mode=""></image>
													<text>已结束</text>
												</block>
												<block v-if="item.live_status == 102">
													<image src="/static/images/live-03.png" mode=""></image>
													<text>预告</text>
												</block>
											</view>
											<view v-if="item.live_status == 101 || item.live_status == 102" class="broadcast-time">{{ item.show_time }}</view>
											<image :src="item.share_img"></image> -->
											<!-- <view class="live-title">{{ item.live_status }}</view> -->
										<!-- </navigator>
									</view>
								</scroll-view>
							</view>
						</block>
					</view>
				</view>
			</view> -->
			<!-- #endif -->
			<!--预售-->
			<view class="main" v-if="presellList.length > 0">
				<view class="presell-count">
					<view class="spike-bd title-bd">
						<view class="title line1">预售专区</view>
						<navigator url="/pages/activity/presell/index" class="more-btn" hover-class="none">更多<text class="iconfont icon-jiantou"
							 hover-class='none'></text></navigator>
					</view>
					<view class="wapper_count">
						<view class="spike-wrapper">
							<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
								<navigator class="spike-item presell-item" v-for="(item,index) in presellList" :key="index" :url="'/pages/activity/presell_details/index?id='+item.product_presell_id"
								 hover-class='none'>
									<view class="img-box presell_imgBox">
										<image :src="item.product.image" mode=""></image>
										<view class="box_bg">火热预定中</view>
									</view>
									<view class="info">
										<view class="price-box presell-price">
											<text class="price"><text>预售价:￥</text>{{item.price}}</text>
											<view class="name line1">{{item.store_name}}</view>
										</view>
									</view>
								</navigator>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<!--助力-->
			<view class="main" v-if="assistList.length > 0">
				<view class="assist-count">
					<view class="spike-bd">
						<view class="title line1">助力活动</view>
						<view v-if="assistUserList.length > 0" class="activity_pic">
							<view v-for="(item,index) in assistUserList" class="picture" :key="index">
								<span class="avatar" :style='"background-image: url("+item.avatar_img+")"'></span>
							</view>
							<text class="pic_count">{{assistUserCount}}人助力成功</text>
						</view>
						<navigator url="/pages/activity/assist/index" class="more-btn" hover-class="none">更多<text class="iconfont icon-jiantou"
							 hover-class='none'></text></navigator>
					</view>
					<view class="wapper_count">
						<view class="spike-wrapper">
							<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
								<view class="spike-item assist-item" v-for="(item,index) in assistList" :key="index" @click="handleAssist(item.product_assist_id)">
									<view class="img-box">
										<image :src="item.product.image" mode=""></image>
										<text class="participants">{{ item.user_count }}人参与</text>
									</view>
									<view class="assist-info">
										<view class="price-box presell-price">
											<view class="name line1">{{item.store_name}}</view>
											<text class="price"><text class="assist_price">助力价</text><text>￥</text>{{item.assistSku[0].assist_price}}</text>
										</view>
										<button class="initiate_btn">发起助力</button>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>

			</view>
			<view class="main">
				<!-- 热点菜单 -->
				<!-- #ifdef MP-TOUTIAO -->
				<view class="hot-img" style="margin-top:20rpx" v-if="power">
					<navigator :url="item.url" class="item" v-for="(item,index) in hot" :key="index" hover-class="none">
						<!-- <image src="../../static/img/dhbg.png" mode="" class="dhbg"></image>
						<view class="title area-row">{{item.title}}</view>
						<view class="msg area-row" :style="'color:'+item.color+';'">{{item.s_title}}</view> -->
						<view class="dhbg">
							<image :src="item.pic" mode=""></image>
						</view>
					</navigator>
				</view>
				<!-- #endif -->
				<!-- 热点菜单 -->
				<!-- #ifndef MP-TOUTIAO -->
				<view class="hot-img" style="margin-top:20rpx">
					<navigator :url="item.url" class="item" v-for="(item,index) in hot" :key="index" hover-class="none">
						<!-- <image src="../../static/img/dhbg.png" mode="" class="dhbg"></image>
						<view class="title area-row">{{item.title}}</view>
						<view class="msg area-row" :style="'color:'+item.color+';'">{{item.s_title}}</view> -->
						<view class="dhbg">
							<image :src="item.pic" mode=""></image>
						</view>
					</navigator>
				</view>
				<!-- #endif -->
				
				<!-- 品牌好店 -->
				<!-- #ifndef MP-TOUTIAO -->
				<view class="explosion" v-if="brandList.length && hide_mer_status !=1">
					<view class="common-hd">
						<view class="title">品牌好店</view>
						<!-- <view class="title"></view> -->
					</view>
					<view class="mer-box">
						<view class="mer-item" v-for="(item,index) in brandList" :key='index'>
							<view class="mer-hd" @click="goStore(item.mer_id)">
								<image :src="item.mer_banner"></image>
								<view class="mer-name">
									<image :src="item.mer_avatar"></image>
									<view class="txt line1">{{item.mer_name}}</view>
									<text v-if="item.is_trader" class="font-bg-red ml8">自营</text>
								</view>
							</view>
							<view class="pro-box">
								<navigator :url="`/pages/goods_details/index?id=${itemn.product_id}`" hover-class="none" class="pro-item" v-for="(itemn,indexn) in item.recommend"
								 :key='indexn' v-if="item.recommend.length<=4">
									<image :src="itemn.image" mode=""></image>
									<!-- #ifdef MP-TOUTIAO -->
									<view class="price" v-if="power">
										<text>￥</text>{{itemn.price}}
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-TOUTIAO -->
									<view class="price">
										<text>￥</text>{{itemn.price}}
									</view>
									<!-- #endif -->
								</navigator>
							</view>
						</view>
						<view class="more-shop" @click="moreShop">
							<text>
								更多店铺
							</text>
							<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<view class="explosion" v-if="brandList.length && hide_mer_status !=1 && power">
					<view class="common-hd">
						<view class="title">品牌好店</view>
						<!-- <view class="title"></view> -->
					</view>
					<view class="mer-box">
						<view class="mer-item" v-for="(item,index) in brandList" :key='index'>
							<view class="mer-hd" @click="goStore(item.mer_id)">
								<image :src="item.mer_banner"></image>
								<view class="mer-name">
									<image :src="item.mer_avatar"></image>
									<view class="txt line1">{{item.mer_name}}</view>
									<text v-if="item.is_trader" class="font-bg-red ml8">自营</text>
								</view>
							</view>
							<view class="pro-box">
								<navigator :url="`/pages/goods_details/index?id=${itemn.product_id}`" hover-class="none" class="pro-item" v-for="(itemn,indexn) in item.recommend"
								 :key='indexn' v-if="item.recommend.length<=4">
									<image :src="itemn.image" mode=""></image>
									<!-- #ifdef MP-TOUTIAO -->
									<view class="price" v-if="power">
										<text>￥</text>{{itemn.price}}
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-TOUTIAO -->
									<view class="price">
										<text>￥</text>{{itemn.price}}
									</view>
									<!-- #endif -->
								</navigator>
							</view>
						</view>
						<view class="more-shop" @click="moreShop">
							<text>
								更多店铺
							</text>
							<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- 首页推荐 -->
				<view class="index-product-wrapper">
					<!-- 首发新品 -->
					<recommend :hostProduct="hostProduct" :indexP='true' :isLogin='isLogin'></recommend>
					<view class='loadingicon acea-row row-center-wrapper' v-if='hostProduct.length > 0 '>
						<text class='loading iconfont icon-jiazai' :hidden='hotLoading==false'></text>{{hotTitle}}
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" :isGoIndex="false"></authorize>
		<!-- #endif -->
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		getIndexData,
		getCoupons,
		getPower
	} from '@/api/api.js';
	// #ifdef MP
	import {
		getTemlIds
	} from '@/api/api.js';
	import {
		SUBSCRIBE_MESSAGE,
		TIPS_KEY
	} from '@/config/cache';
	// import {
	// 	getLiveList
	// } from '@/api/store.js';
	// #endif

	import {
		getShare,
		follow,
		getconfig,
	} from '@/api/public.js';
	import {
		getSeckillIndexTime
	} from '@/api/activity.js';

	import goodList from '@/components/goodList';
	import promotionGood from '@/components/promotionGood';
	import couponWindow from '@/components/couponWindow';
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	// import { mapState, mapMutations } from 'vuex';
	import tabNav from '@/components/tabNav.vue'
	import countDown from '@/components/countDown'
	import {
		getCategoryList,
		getProductslist,
		getProductHot,
		storeCategory,
		storeMerchantList,
	} from '@/api/store.js';
	import {
		getPresellList,
		getSeckillList,
		getAssistList,
		initiateAssistApi,
		assistUserData,
		getCombinationList
	} from '@/api/activity.js';
	import {
		openBargainSubscribe
	} from '@/utils/SubscribeMessage.js';
	import {
		setVisit,
		spread
	} from '@/api/user.js'
	import recommend from '@/components/recommend';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import {
		silenceBindingSpread
	} from '@/utils';
	import history from "@/mixins/history";
	import {
		toLogin
	} from '@/libs/login.js';
	import shareScence from "@/libs/spread";
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		mixins: [history],
		components: {
			tabNav,
			goodList,
			promotionGood,
			couponWindow,
			countDown,
			recommend,
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				countDownHour: "00",
				countDownMinute: "00",
				countDownSecond: "00",
				// datatime: '',
				ad: '',
				userInfo: '',
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				statusBarHeight: statusBarHeight,
				navIndex: 0,
				navTop: [],
				subscribe: false,
				followUrl: "",
				followHid: true,
				followCode: false,
				logoUrl: app.globalData.site_logo,
				// logoUrl: "",
				imgUrls: [],
				hot: [],
				sortList: [],
				itemNew: [],
				menus: [],
				bastInfo: '',
				fastInfo: '',
				firstInfo: '',
				firstList: [],
				salesInfo: '',
				likeInfo: [],
				benefit: [],
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				window: false,
				iShidden: false,
				navH: "",
				newGoodsBananr: '',
				couponList: [],
				lovely: [],
				spikeList: [], //秒杀
				// liveList: [], //直播
				presellList: [], //预售
				assistList: [], //助力
				assistUserList: [], //已助力数据
				assistUserCount: '',
				combinationList: [],
				hotList: [{
					pic: '/static/images/hot_001.png'
				}, {
					pic: '/static/images/hot_002.png'
				}, {
					pic: '/static/images/hot_003.png'
				}],
				// spikeList: [],
				bargList: [],
				ProductNavindex: 0,
				marTop: 0,
				datatime: 0,
				childID: 0,
				loadend: false,
				// loading: false,
				loadTitle: '加载更多',
				sortProduct: [],
				where: {
					pid: 0,
					page: 1,
					limit: 6,
				},
				is_switch: true,
				hostProduct: [],
				hotPage: 1,
				hotLimit: 8,
				hotScroll: true,
				hotLoading: false,
				hotTitle: '加载更多',
				explosiveMoney: [],
				prodeuctTop: 0,
				pinkInfo: '',
				searchH: 0,
				isFixed: false,
				goodScroll: true, //精品推荐开关
				params: { //精品推荐分页
					page: 1,
					limit: 10,
				},
				tempArr: [], //精品推荐临时数组
				pageInfo: '', // 精品推荐全数据
				site_name: app.globalData.site_name, //首页title
				swiperCur: 0,
				brandList: [],
				d: '',
				h: '',
				m: '',
				s: '',
				sum_h: '',
				endBg: 'linear-gradient(#666666, #999999)',
				notBg: 'rgb(26, 163, 246)',
				playBg: 'linear-gradient(#FF0000, #FF5400)',
				hide_mer_status: 1,
				sortMarTop: 0,
				globalDatas: {},
				mpHeight: 0,
				currSpid: '',
				// sortMarTop: 0,
				mer_location: "",
				share_title: "",
				showNum: 0,
				power: '',
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: that.share_title,
				path: '/pages/index/index?spid=' + that.uid
				
			}
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: that.share_title,
				query: {
					spid: that.uid,
				},
				imageUrl: '',
			}
		},
		// #endif
		onLoad(options) {
			// #ifdef MP-TOUTIAO
			this.getPower()
			// #endif
			let that = this;
			if (options.spid) {
				that.currSpid = options.spid
				app.globalData.spid = options.spid;
			}
			// #ifdef MP
			if (options.scene) {
				let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
				if (value.id) options.id = value.id;
				//记录推广人uid
				if (value.spid) {
					that.currSpid = value.spid
					
					app.globalData.spid = value.spid;
				}
			}
			// #endif
			shareScence(that.currSpid, that.isLogin)
			// #ifndef MP-TOUTIAO
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					try {
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
					} catch(res) {
						console.log(res)
					}
				}
			});
			// #endif
			

			// #ifdef MP
			// 获取小程序头部高度
			this.navH = app.globalData.navHeight;
			let info = uni.createSelectorQuery().select(".mp-header");
			info.boundingClientRect(function(data) {
				console.log(data.height,'++++++++++++++++++++++++++++++++++')
				that.marTop = data.height
			}).exec()
			// #endif
			// #ifndef MP
			this.navH = 0;
			// #endif
			this.isLogin && silenceBindingSpread();

			// this.setVisit()
			Promise.all([this.getIndexConfig(), this.storeMerchant(), this.get_host_product(), this.getSpeckillCutTime(), this.getSpikeProduct(),
				this.getCombinationProduct(), this.getPresellProduct(), this.getAssistProduct(), this.getAssistUserCount(),
			]);
			// #ifdef MP
			// this.getLiveLists()
			// #endif
			if (this.isLogin) {
				console.log("登录了+++++")
				this.showNum = 1
				this.getUserInfo();
				// #ifdef MP
				// this.getHistory()
				// #endif
			};
		},
		onShow() {
			this.getConfig()
			if(this.isLogin){
				if(this.showNum !== 1){
					this.getUserInfo()
				}else {
					this.showNum = 0
				}
			}
		},
		onReady() {
			let self = this
			// #ifdef MP
			setTimeout(res => {
				let info = uni.createSelectorQuery().select(".mp-header");
				info.boundingClientRect(function(data) { //data - 各种参数
					self.mpHeight = data.height
				}).exec()
			}, 800)
			// #endif
		},
		watch: {
			globalDatas(nVal, oVal) {
				// #ifdef H5
				this.ShareInfo(nVal)
				// #endif

			}
		},
		methods: {
			// 微信登录回调
			onLoadFun: function(e) {
				console.log('回调数据',e);
				this.isShowAuth = false
				// if(!e.phone){
				// 	uni.showModal({
				// 		title: "请绑定手机号",
				// 		content: "为了方便您的取货和我们的送货，并获取更多优惠活动,需要您的手机授权！",
				// 		showCancel: false,
				// 		complete(){
				// 			console.log("绑定手机号")
				// 			uni.navigateTo({
				// 				url: '/pages/users/user_phone/index'
				// 			})
				// 		}
				// 	})
				// }
			},
			setViewport(content) {
				const meta = document.querySelector('meta[name=viewport]');
				if (!meta) return;
				meta.setAttribute('content', content);
			},
			// 菜单详情
			goMenuDetail(item) {
				// let url = this.$util.stringIntercept(item.url, 0, "\?")
				if (item.url == '/pages/goods_cate/goods_cate') {
					let data = this.$util.stringIntercept(item.url, 1, "\?")
					data = this.$util.stringIntercept(data, 1, "\=")
					uni.setStorageSync('storeIndex', data);
					uni.switchTab({
						url: '/pages/goods_cate/goods_cate'
					})
					// try {

					// } catch (e) {}
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			getConfig() {
				// 获取配置
				getconfig().then(res => {
					let self = this
					this.globalDatas = res.data
					this.logoUrl = res.data.site_logo
					this.site_name = res.data.site_name
					this.hide_mer_status = res.data.hide_mer_status
					this.mer_location = res.data.mer_location
					this.share_title = res.data.share_title
					uni.setNavigationBarTitle({
						title: self.site_name
					})
					uni.$emit('configData', res.data)
				}).catch(err => {})
			},
			// 分类页更多
			bindMore() {
				console.log(this.navTop[this.navIndex])
				try {
					uni.setStorageSync('storeIndex', this.navTop[this.navIndex].pid);
					uni.switchTab({
						url: '/pages/goods_cate/goods_cate'
					})
				} catch (e) {}
			},
			goDetails(item){
				goShopDetail(item, this.uid).then(res => {
				if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							// #ifndef MP
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
							// #endif
							// #ifdef MP
							openBargainSubscribe().then(res => {
								uni.hideLoading();
								uni.navigateTo({
									url: '/pages/activity/assist_detail/index?id=' + id
								});
							}).catch((err) => {
								uni.hideLoading();
							});
							// #endif					
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						// #ifdef H5 || APP-PLUS
						toLogin();
						// #endif 
						// #ifdef MP
						this.$emit('isShowAuth', true);
						this.$emit('isAuto', true);
						// #endif
					}
				})		
			},
			// 进店
			goStore: function(id) {
				if (this.hide_mer_status != 1) {
					uni.navigateTo({
						url: `/pages/store/home/index?id=${id}`
					})
				}
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					if(!that.userInfo.phone){
						uni.showModal({
							title: "请绑定手机号",
							content: "为了方便您的取货和我们的送货，并获取更多优惠活动,需要您的手机授权！",
							showCancel: false,
							complete() {
								uni.navigateTo({
									url: '/pages/users/user_phone/index'
								})
							}
						})
					}
				});
			},
			// 品牌好店
			storeMerchant() {
				storeMerchantList({
					page: 1,
					limit: 3,
					is_best: 1
				}).then(res => {
					
					this.brandList = res.data.list;
					console.log(this.brandList,'this.brandList++++++++++')
				})
			},
			// 获取秒杀截止时间
			getSpeckillCutTime() {
				getSeckillIndexTime().then(res => {
					this.datatime = res.data.seckillEndTime;
				});
			},
			// 获取秒杀商品
			getSpikeProduct() {
				let that = this;
				getSeckillList({
					limit: 10
				}).then(res => {
					that.spikeList = res.data.list;
					that.spikeList.map((item) => {
						item.sales = item.stock === 0 ? '0%' : (item.sales * 100 / item.stock).toFixed(2) + '%'
					})
				}).catch((e) => {});
			},
			// #ifdef MP
			// 直播
			// getLiveLists() {
			// 	let that = this;
			// 	getLiveList({
			// 		limit: 10
			// 	}).then(res => {
			// 		that.liveList = res.data.list;
			// 		that.liveList.forEach((val) => {
			// 			val.link = ((val.live_status == 103 && val.replay_status) || val.live_status === 101 || val.live_status ===
			// 				102) ? 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + val.room_id : ''
			// 		});

			// 	}).catch((e) => {});;
			// },
			// #endif
			// 拼团
			getCombinationProduct() {
				let that = this;
				
				getCombinationList({
					limit: 3
				}).then(res => {
					that.combinationList = res.data.list;
				}).catch((e) => {});
			},
			// 预售
			getPresellProduct() {
				let that = this;
				getPresellList({
					limit: 10
				}).then(res => {
					that.presellList = res.data.list;
				}).catch((e) => {});
			},
			// 助力
			getAssistProduct() {
				let that = this;
				getAssistList({
					limit: 10
				}).then(res => {
					that.assistList = res.data.list;
				}).catch((e) => {});
			},
			// 获取已助力成功数据
			getAssistUserCount() {
				let that = this;
				assistUserData().then(res => {
					that.assistUserCount = res.data.count;
					that.assistUserList = res.data.list;
				}).catch((e) => {});
			},
			handleAssist(id) {
				if (this.isLogin) {
					initiateAssistApi(id).then(res => {
						let id = res.data.product_assist_set_id;
						uni.hideLoading();
						// #ifndef MP
						uni.navigateTo({
							url: '/pages/activity/assist_detail/index?id=' + id
						});
						// #endif
						// #ifdef MP
						openBargainSubscribe().then(res => {
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.hideLoading();
						});
						// #endif					
					}).catch((err) => {
						uni.showToast({
							title: err,
							icon: 'none'
						})
					});
				} else {
					// #ifdef H5 || APP-PLUS
					toLogin();
					// #endif 
					// #ifdef MP
					this.isAuto = true;
					this.$set(this, 'isShowAuth', true);
					// #endif
				}
			},
			// swiper
			swiperChange(e) {
				// this.swiperCur = e.detail.current
				let {
					current,
					source
				} = e.detail
				if (source === 'autoplay' || source === 'touch') {
					//根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
					this.swiperCur = e.detail.current
				}
			},
			// 记录会员访问
			setVisit() {
				setVisit({
					url: '/pages/index/index'
				}).then(res => {
					console.log(res)
				})
			},
			// 导航分类切换
			changeTab(e) {
				let self = this
				if (this.navIndex == e.index) return
				uni.navigateTo({
					url: '/pages/index/index_cate?e=' + JSON.stringify(e) + '&navIndex=' + e.index
				})
			},
			//分类产品
			get_product_list: function() {
				console.log(123);
				let that = this;
				// if (!that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				getProductslist(that.where).then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.sortProduct);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '已全部加载' : '加载更多';
					that.$set(that, 'sortProduct', productList);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				let num = that.hotLimit
				if (!that.hotScroll) return;
				if (that.hotLoading) return;
				that.hotLoading = true;
				that.hotTitle = '';
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.hostProduct);
					let hotScroll = list.length <= num && list.length != 0;
					that.hotScroll = hotScroll;
					that.hotLoading = false;
					that.hotTitle = !hotScroll ? '已全部加载' : '加载更多';
					that.$set(that, 'hostProduct', productList);
					that.$set(that, 'hotPage', that.hotPage + 1);
				});
			},
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					 
					that.$set(that, "imgUrls", res.data.banner);
					that.$set(that, "menus", res.data.menu);
					that.$set(that, "hot", res.data.hot);
					that.$set(that, "ad", res.data.ad);
					res.data.category.unshift({
						'cate_name': '首页'
					})
					that.$set(that, "navTop", res.data.category);


					that.lovely = res.data.lovely
					that.$set(that, "pageInfo", res.data)
					that.$set(that, "likeInfo", res.data.likeInfo);
					that.$set(that, "benefit", res.data.benefit);
					that.explosiveMoney = res.data.explosive_money
					// #ifdef H5
					that.subscribe = res.data.subscribe;
					// #endif
					// 小程序判断用户是否授权；
					// #ifdef MP
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.userInfo']) {
								that.window = that.couponList.length ? true : false;
							} else {
								that.window = false;
								that.iShidden = true;
							}
						}
					});
					// #endif
					// #ifndef MP
					if (that.isLogin) {
						that.window = false;
					} else {
						that.window = that.couponList.length ? true : false;
					}
					// #endif
				})
			},
			// 砍价详情
			bargDetail(item) {
				if (!this.isLogin) {
					// #ifdef H5
					uni.showModal({
						title: '提示',
						content: '您未登录，请登录！',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/users/login/index'
								})
							} else if (res.cancel) {}
						}
					})
					// #endif
					// #ifdef MP
					this.$set(this, 'isAuto', true);
					this.$set(this, 'isShowAuth', true);
					// #endif
				} else {
					uni.navigateTo({
						url: `/pages/activity/goods_bargain_details/index?id=${item.id}&bargain=${this.uid}`
					})
				}
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 首发新品详情
			goDetail(item) {
				if (item.activity && item.activity.type === "2" && !this.isLogin) {
					// #ifdef H5
					uni.showModal({
						title: '提示',
						content: '您未登录，请登录！',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/users/login/index'
								})
							} else if (res.cancel) {}
						}
					})
					// #endif
					// #ifdef MP
					this.$set(this, 'isAuto', true);
					this.$set(this, 'isShowAuth', true);
					// #endif
					return
				} else {
					goShopDetail(item, this.uid).then(res => {
						uni.navigateTo({
							url: `/pages/goods_details/index?id=${item.id}`
						})
					})
				}
			},
			// 分类详情
			godDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}`
				})
			
			},
			//拼团详情
			goCombinDetail(item) {
				uni.navigateTo({
					url: `/pages/activity/combination_details/index?id=${item.product_group_id}`
				})
			
			},
			countTime: function() {
				// 获取当前时间
				var date = new Date();
				var now = date.getTime();
				//设置截止时间
				var endDate = new Date("2020-10-22 23:23:23");
				var end = endDate.getTime();
				//时间差
				var leftTime = end - now;
				//定义变量 d,h,m,s保存倒计时的时间
				if (leftTime >= 0) {
					this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
					this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					this.m = Math.floor(leftTime / 1000 / 60 % 60);
					this.s = Math.floor(leftTime / 1000 % 60);
					this.sum_h = this.d * 24 + this.h
				}
				// console.log(this.h)
				// console.log(this.m)
				// console.log(this.s)
				// console.log(this.s);
				//递归每秒调用countTime方法，显示动态时间效果
				setTimeout(this.countTime, 1000);
			},
			//#ifdef H5
			ShareInfo(datas) {
				let data = this.storeInfo;
				let href = location.href;
				if (this.$wechat.isWeixin()) {
					if (this.isLogin) {
						href = href.indexOf("?") === -1 ? href + "?spid=" + this.uid : href + "&spid=" + this.uid;
					} else {
						href = href
						
					}
					let configAppMessage = {
						desc: datas.share_info,
						title: datas.share_title,
						link: href,
						imgUrl: datas.share_pic
					};

					this.$wechat.wechatEvevt([
						"updateAppMessageShareData",
						"updateTimelineShareData",
						"onMenuShareAppMessage",
						"onMenuShareTimeline"
					], configAppMessage).then(res => {
						console.log(res, '=============================>>WXAPI');
					}).catch(err => {
						console.log(err);
					})

				}
			},
			//#endif
			moreShop() {
				uni.navigateTo({
					url: `/pages/store/shopStreet/index`
				})
			},
			getPower() {
				getPower().then( ({data}) => {
					if(data.openlink) {
						this.power = data.openlink
						console.log(this.power)
						uni.setStorageSync('power', data.openlink);
					}else {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '抖音小程序主要为商品展示，不支持加入购物车和购买功能！',
						})
					}
					
					
				})
			}
		},
		mounted() {
			let self = this
			// #ifdef H5
			// 获取H5 搜索框高度
			let appSearchH = uni.createSelectorQuery().select(".serch-wrapper");
			appSearchH.boundingClientRect(function(data) {
				self.searchH = data.height
			}).exec()
			// #endif
		},
		// 滚动到底部
		onReachBottom() {
			console.log('到底了')
			if (this.navIndex == 0) {
				// 首页加载更多
				this.get_host_product();
			} else {
				// 分类栏目加载更多
				if (this.sortProduct.length > 0) {
					this.get_product_list();
				} else {
					this.get_host_product();
				}
			}
		},
		// 滚动监听
		onPageScroll(e) {
			// #ifdef H5
			let self = this
			if (e.scrollTop >= self.searchH) {
				self.isFixed = true
			} else {
				self.isFixed = false
			}
			// #endif
		}
	}
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* #ifdef H5 */
		background-color: #fff;
		/* #endif */

	}
</style>
<style lang="scss">
	.area-row {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		width: 100%;
		text-align: center;
	}

	.seckill-count,
	.assist-count {
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		padding: 20rpx 0 26rpx 20rpx;
		box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
	}

	.assist-count {
		padding: 20rpx 0 26rpx 0;
	}

	.wapper_count {
		padding: 0 0 26rpx 20rpx;
	}

	.presell-count {
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
	}

	.spike-bd {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		padding-left: 20rpx;
		display: flex;
		position: relative;

		&.title-bd {
			margin-bottom: 0;
			padding: 30rpx 0 20rpx 20rpx;
			border-radius: 16rpx 16rpx 0 0;
			background-image: url('data:image/png;base64,[encoded data, 5964 characters]');
			background-size: 100%;

			.more-btn {
				top: 28rpx;
			}
		}

		.title {
			font-weight: bold;
			color: #282828;
			font-size: 32rpx;
		}

		.spike-distance {
			margin-left: 15rpx;
			position: relative;
			top: 1.4rpx;
			display: flex;
			border: 1px solid #E93323;
			border-radius: 4rpx;
			height: 40rpx;

			.bg-red {
				font-size: 20rpx;
				color: #fff;
				background-color: #E93323;
				padding: 0 10rpx;
				line-height: 38rpx;
				height: 38rpx;
			}

			.time {
				font-size: 22rpx;
				padding: 0 12rpx;
				color: #E93323;
				height: 38rpx;
				line-height: 38rpx;

				/deep/.red {
					margin: 0;
				}
			}

			.red-color {
				color: #E93323;
			}

		}

		.more-btn {
			position: absolute;
			right: 20rpx;
			top: 0;
			color: #999;
			font-size: 28rpx;

			.iconfont {
				font-size: 26rpx;
			}
		}

	}

	.spike-wrapper {
		width: 100%;
		margin-top: 27rpx;

		.spike-item {
			display: inline-block;
			width: 222rpx;
			margin-right: 20rpx;

			&.presell-item {
				width: 210rpx;

				.img-box {
					height: 210rpx;

					image {
						height: 210rpx;
					}
				}

				.name {
					margin-top: 8rpx;
					color: #282828;
				}
			}

			&.assist-item {
				box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08);
			}

			.img-box {
				position: relative;
				height: 222rpx;

				.participants {
					padding: 4rpx 12rpx;
					border-radius: 16rpx;
					background: rgba(0, 0, 0, .35);
					color: #fff;
					text-align: center;
					position: absolute;
					top: 10rpx;
					left: 10rpx;
					font-size: 20rpx;
				}

				image {
					width: 100%;
					height: 222rpx;
					border-radius: 16rpx;
				}

				.box_bg {
					position: absolute;
					bottom: 0;
					left: 0;
					text-align: center;
					width: 149rpx;
					height: 42rpx;
					line-height: 42rpx;
					background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAAAqCAMAAACN4OndAAAAmVBMVEUAAAD/dy37mij/eiz+hCv+fSz8kyn+gCz9hyv9jSr9iir8kCn8lin7lyj7mij7mij7mij7mij7mij7mij7mij7mij7mSj7mij7mij7mij7mSj7mij7mij7mij+gSz7mij7mij7mij7mij7mij/dy37mij7mCj/eyz+fiz+gSv8kCn9jCr9hiv9iSr8lCn8kin+hCv8lin9jiqx53KQAAAAJHRSTlMA8fHx8fHx8fHx8fHx8cdMjnpvNBgN59vYrp9eKfXt4tGUP76oKK8EAAABeklEQVRYw82Z126DQBBFx6S3xRQ3wDXZkJ7Y//9xgVm2GQXJIZHveWEfj0YczUpLA5cTzZniomaxOG24ZK6ZK+aGOVfc1twxwW9YhqR5aFE2PCmema+KN+adeWV2uxfms+ajZrt9NMhDET9blT21enitW1bd07JebS3FX2glXVZllxbzP1oTUqQja+WLabq0fK/+WkNSTOPGqj2tI/zzG2IyOdNWAClOiVnXp8YBIMXxJk2LUFSnubaCSDEYN19tBZSilCttBZRiFaO2AkpRykJb4aRYj0pb4aQohd04OCmKkbWCSXE1ImuFkmKQkmOFkmJIrhVIijPyrEBSDH0rkBSjyiiMjBVKisNIyMBYIaU4M1ZIKdqNg5RibqyQUkyMFVCKEzJWQClm1gooxdBa4aS4JGuFk2LkWMGkGLj3K5gUY3c7o6Q4IdcKJcXEswJJMSbPCiPFiHwrhBTnOe1ZAaR4X9C+1dFTFDk5DHrQfjVQHPhqMBZZnJDLN9Y/g30cqDDDAAAAAElFTkSuQmCC');
					background-repeat: no-repeat;
					background-size: cover;
					color: #fff;
					font-size: 22rpx;
				}

				.msg {
					position: absolute;
					left: 10rpx;
					bottom: 16rpx;
					width: 86rpx;
					height: 30rpx;
					background: rgba(255, 255, 255, 1);
					border: 1px solid rgba(255, 109, 96, 1);
					border-radius: 6rpx;
					font-size: 20rpx;
					color: $theme-color;
				}
			}


			.info {
				margin-top: 10rpx;

				.name {
					font-size: 26rpx;
				}

				.stock-box {
					width: 100%;
					height: 20rpx;
					background-color: #FFDCD9;
					border-radius: 20rpx;
					margin-top: 13rpx;
					position: relative;
					color: #fff;
					font-size: 18rpx;
					line-height: 20rpx;
					text-align: center;
					overflow: hidden;

					.grabbed {
						height: 20rpx;
						background: linear-gradient(#FF0000, #FF5400);
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 20rpx;
					}

					.stock-sales {
						position: absolute;
						left: 50%;
						margin-left: -40rpx;
					}
				}

				.price-box {
					display: flex;
					align-items: center;
					justify-content: start;
					margin-top: 4rpx;

					&.presell-price {
						display: block;

						.price {}

						.old-price {
							display: block;
							margin: 6rpx 0 0 0;
						}
					}

					.tips {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 28rpx;
						height: 28rpx;
						background-color: $theme-color;
						color: #fff;
						font-size: 20rpx;
						border-radius: 2px;
					}

					.price {
						display: flex;
						color: $theme-color;
						font-size: 28rpx;
						font-weight: bold;

						text {
							font-size: 18rpx;
						}
					}

					.old-price {
						display: flex;
						margin-left: 10rpx;
						color: #AAAAAA;
						text-decoration: line-through;
						font-size: 20rpx;

						text {
							font-size: 18rpx;
						}
					}
				}
			}

			.assist-info {
				.price {
					display: flex;
					color: $theme-color;
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 2rpx;

					text {
						font-size: 18rpx;
					}

					.assist_price {
						font-size: 20rpx;
						display: inline-block;
						width: 82rpx;
						height: 32rpx;
						text-align: center;
						line-height: 30rpx;
						background: #ffeae5;
						border-radius: 4rpx;
					}
				}

				.price-box {
					padding: 15rpx 15rpx 8rpx;

					.name {
						font-size: 24rpx;
						color: #333;
						line-height: 30rpx;
					}
				}

				.initiate_btn {
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					;
					background: linear-gradient(90deg, #FF0000 0%, #FF5400 100%);
					text-align: center;
					color: #fff;
					font-size: 24rpx;
					border-radius: 0 0 16rpx 16rpx;
				}

			}
		}
	}

	.combination-count {
		background-color: #fff;
		margin-bottom: 11px;
		border-radius: 16rpx;
		box-shadow: 2px 1px 6px 1px rgba(0, 0, 0, 0.03);
		padding: 25rpx 20rpx;
		position: relative;

		.spike-wrapper {
			overflow: hidden;
			width: 670rpx;
		}
	}

	/deep/.spike-box .styleAll {
		display: inline-block;
		width: 44rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0;
		text-align: center;
		border-radius: 8rpx;
	}

	.page-index {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);

		.ad {
			width: 710rpx;
			height: 156rpx;
			margin: 10rpx auto 20rpx auto;

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

		// &.bgf{
		// 	background: #fff;
		// }
		.header {
			width: 100%;

			// height: 320rpx;
			.btn {
				position: relative;

				.iconfont {
					font-size: 45rpx;
				}
			}

			.iconnum {
				min-width: 6px;
				color: #fff;
				border-radius: 15rpx;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				font-size: 10px;
				padding: 0 4px;
			}

			.serch-wrapper {
				align-items: center;
				padding: 20rpx 30rpx 0 30rpx;

				.logo {
					width: 127rpx;
					height: 46rpx;
				}

				image {
					width: 118rpx;
					height: 42rpx;
				}

				.input,.uninput {
					display: flex;
					align-items: center;
					max-width: 490rpx;
					min-width: 460rpx;
					height: 64rpx;
					padding: 0 0 0 30rpx;
					background: rgba(237, 237, 237, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 32rpx;
					color: #BBBBBB;
					font-size: 28rpx;
					.iconfont {
						margin-right: 20rpx;
					}
				}
				.uninput{
					min-width: 610rpx;
					max-width: 620rpx;
				}
			}

			.tabNav {
				padding-top: 24rpx;
			}
		}

		/*直播*/
		.live-count {
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			padding: 20rpx 0 26rpx 20rpx;
			box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
		}

		.live-wrapper {
			position: relative;
			width: 100%;
			overflow: hidden;
			border-radius: 16rpx;

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

			.live-top {
				z-index: 20;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 120rpx;
				height: 32rpx;

				&.playRadius {
					border-radius: 0;
				}

				&.notPlayRadius {
					border-radius: 0rpx 0px 18rpx 0px;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;
					/* #ifdef H5 */
					display: block;
					/* #endif */
				}
			}

			.broadcast-time {
				z-index: 20;
				position: absolute;
				left: 110rpx;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 160rpx;
				height: 36rpx;
				background: rgba(0, 0, 0, .4);
				font-size: 22rpx;
				border-radius: 0 0 18rpx 0;
			}

			.live-title {
				position: absolute;
				left: 0;
				bottom: 6rpx;
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
				background: rgba(0, 0, 0, 0.35);
			}

			&.mores {
				width: 100%;

				.item {
					position: relative;
					width: 280rpx;
					height: 224rpx;
					display: inline-block;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 20rpx;

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

					.live-title {
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						font-size: 22rpx;
					}

					.live-top {
						width: 110rpx;
						height: 32rpx;
						font-size: 22rpx;

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

		/* #ifdef MP */
		.mp-header {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			/* #ifdef H5 */
			padding-bottom: 20rpx;
			/* #endif */
			// background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);
			background-color: #fff;

			.serch-wrapper {
				height: 100%;
				align-items: center;
				padding: 0 50rpx 0 53rpx;

				image {
					width: 118rpx;
					height: 42rpx;
					margin-right: 30rpx;
				}
				.input,.uninput {
					display: flex;
					align-items: center;
					width: 305rpx;
					height: 58rpx;
					padding: 0 0 0 30rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 28rpx;
					
					.iconfont {
						margin-right: 20rpx;
					}
					
				}
				.uninput{
					min-width: 460rpx;
					max-width: 480rpx;
				}
				
			}
		}

		/* #endif */

		.page_content {

			/* #ifdef MP */
			margin-top: 270rpx;

			/* #endif */
			.swiper {
				position: relative;
				width: 100%;
				/* #ifdef MP */
				height: auto;
				/* #endif */
				/* #ifdef H5 */
				height: 320rpx;
				/* #endif */

				margin: 0 auto;
				border-radius: 10rpx;
				overflow-x: hidden;
				/* #ifdef MP */
				z-index: 10;

				/* #endif */
				swiper,
				.swiper-item,
				image {
					width: 100%;
					height: 280rpx;
					border-radius: 10rpx;

				}

				.slide-navigator {}

				image {
					transform: scale(.93);
					transition: all .6s ease;
				}

				swiper-item.active {
					image {
						transform: scale(1);
					}
				}
			}

			.nav {
				padding: 0 0rpx 30rpx;
				flex-wrap: wrap;
				/* #ifdef MP */
				margin-top: 0;
				/* #endif */
				/* #ifdef H5 */
				margin-top: 0;

				/* #endif */
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 20%;
					margin-top: 30rpx;

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

			.live-wrapper {
				position: relative;
				width: 100%;
				overflow: hidden;
				border-radius: 16rpx;

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

				.live-top {
					z-index: 20;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					width: 110rpx;
					height: 36rpx;

					&.playRadius {
						border-radius: 0;
					}

					&.notPlayRadius {
						border-radius: 0rpx 0px 18rpx 0px;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
						/* #ifdef H5 */
						display: block;
						/* #endif */
					}
				}

				.live-title {
					position: absolute;
					left: 0;
					bottom: 6rpx;
					width: 100%;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					font-size: 22rpx;
					color: #fff;
					background: rgba(0, 0, 0, .35);
				}

				&.mores {
					width: 100%;

					.item {
						position: relative;
						width: 280rpx;
						display: inline-block;
						border-radius: 16rpx;
						overflow: hidden;
						margin-right: 20rpx;

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

						.live-title {
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 22rpx;
						}

						.live-top {
							width: 110rpx;
							height: 36rpx;
							font-size: 22rpx;

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

			.hot-img {
				// position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 170rpx;
					// background-color: #FEFEFF;
					padding: 20rpx 0 4rpx;
					border-radius: 8rpx;
					box-shadow: 2px 1px 6px 1px rgba(0, 0, 0, 0.03);
					position: relative;
					.dhbg {
						// position: absolute;
						// top: 0;
						width: 170rpx;
						height: 245rpx;
						// background-color: red;
						image {
							width: 100%;
							height: 100%;
							// background-color: red;
						}
							
					}
					.title {
						font-weight: bold;
						color: #282828;
					}

					.msg {
						margin-top: 5rpx;
						font-size: 20rpx;
					}

					.img {
						margin-top: 10rpx;
					}

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

					&:first-child .msg {
						color: #8FBBE8;
					}

					&:nth-child(2) .msg {
						color: #D797B7;
					}

					&:nth-child(3) .msg {
						color: #C49BD1;
					}

					&:nth-child(4) .msg {
						color: #A3BF95;
					}
				}
			}

			.common-hd {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 170rpx;
				
				.title {
					padding: 40rpx 120rpx;
					font-size: 34rpx;
					// color: $theme-color;
					color: #bc7b00;
					font-weight: bold;
					background-image: url("~@/static/images/index-foryou.png");
					background-repeat: no-repeat;
					background-size: 100% auto;
					background-position: left center;
					
				}
			}

			.explosion {
				.mer-box {
					.mer-item {
						margin-bottom: 20rpx;
						background-color: #fff;
						border-radius: 16rpx;

						.mer-hd {
							position: relative;
							width: 100%;
							height: 200rpx;
							border-radius: 16rpx 16rpx 0 0;
							overflow: hidden;

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

							.mer-name {
								position: absolute;
								left: 20rpx;
								top: 20rpx;
								display: flex;
								align-items: center;
								width: 300rpx;
								height: 50rpx;
								padding: 0 10rpx;
								border-radius: 26rpx;
								background: #fff;
								font-weight: bold;

								image {
									width: 38rpx;
									height: 38rpx;
									margin-right: 10rpx;
									border-radius: 50%;
								}

								.txt {
									flex: 1;
								}
							}
						}

						.pro-box {
							display: flex;
							align-items: center;
							padding: 20rpx 20rpx 30rpx;

							.pro-item {
								width: 25%;
								margin-right: 14rpx;

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

								.price {
									margin-top: 5rpx;
									font-size: 28rpx;
									color: $theme-color;
									font-weight: bold;

									text {
										font-size: 28rpx;
									}
								}

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


						}


					}

					.more-shop {
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #FFFFFF;
						padding: 27rpx 0;
						color: #999999;
						font-size: 26rpx;

						.icon-xiangyou {
							font-size: 22rpx;
						}
					}
				}
			}

			.spike-box {
				margin-top: 20rpx;
				padding: 23rpx 20rpx;
				border-radius: 24rpx;
				background-color: #fff;
				overflow: hidden;
				box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.04);

				.hd {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						width: 500rpx;

						.icon {
							width: 38rpx;
							height: 38rpx;
							margin-right: 8rpx;
						}

						.title {
							width: 134rpx;
							height: 33rpx;
						}
					}

					.more {
						font-size: 26rpx;
						color: #999;

						.iconfont {
							margin-left: 6rpx;
							font-size: 25rpx;
						}
					}
				}

				.spike-wrapper {
					width: 100%;
					margin-top: 27rpx;

					.spike-item {
						display: inline-block;
						width: 222rpx;
						margin-right: 20rpx;

						.img-box {
							position: relative;
							height: 222rpx;

							image {
								width: 100%;
								height: 222rpx;
								border-radius: 16rpx;
							}

							.msg {
								position: absolute;
								left: 10rpx;
								bottom: 16rpx;
								width: 86rpx;
								height: 30rpx;
								background: rgba(255, 255, 255, 1);
								border: 1px solid rgba(255, 109, 96, 1);
								border-radius: 6rpx;
								font-size: 20rpx;
								color: $theme-color;
							}
						}


						.info {
							margin-top: 8rpx;
							padding: 0 10rpx;

							.name {
								font-size: 28rpx;
							}

							.price-box {
								display: flex;
								align-items: center;
								justify-content: center;

								.tips {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 28rpx;
									height: 28rpx;
									background-color: $theme-color;
									color: #fff;
									font-size: 20rpx;
									border-radius: 2px;
								}
								.price {
									display: flex;
									margin-left: 10rpx;
									color: $theme-color;
									font-size: 28rpx;
									font-weight: bold;

									text {
										font-size: 18rpx;
									}
								}
							}
						}
					}
				}
			}

			.barg {
				width: 100%;
				height: 478rpx;
				margin-top: 20rpx;
				padding-left: 20rpx;
				background-size: 100% 100%;

				.title {
					display: flex;
					align-items: center;
					justify-content: center;
					padding-top: 42rpx;

					image {
						width: 463rpx;
						height: 39rpx;
					}
				}

				.barg-swiper {
					margin-top: 43rpx;
					padding-right: 20rpx;

					.wrapper {
						display: flex;
					}

					.list-box {
						flex-shrink: 0;
						width: 210rpx;
						background-color: #fff;
						border-radius: 16rpx;
						overflow: hidden;
						padding-bottom: 18rpx;
						margin-right: 20rpx;

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

						.info-txt {
							width: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding-top: 15rpx;

							.price {
								font-weight: 700;
								color: $theme-color;
								
							}

							.txt {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 136rpx;
								height: 33rpx;
								margin-top: 10rpx;
								background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
								border-radius: 17px;
								font-size: 22rpx;
								color: #fff;

							}
						}
					}

					.more-box {
						flex-shrink: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 80rpx;
						background-color: #fff;
						border-radius: 16rpx;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-top: 10rpx;
						}

						.txt {
							display: block;
							writing-mode: vertical-lr;
							font-size: 26rpx;
							line-height: 1.2;
						}
					}
				}
			}

			.group-wrapper {
				padding: 26rpx 20rpx;
				margin-top: 20rpx;
				background: #fff;
				border-radius: 24rpx;

				.hd {
					display: flex;
					align-items: center;
					justify-content: space-between;

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

						.icon {
							width: 38rpx;
							height: 38rpx;
							margin-right: 8rpx;
						}

						.title {
							width: 134rpx;
							height: 33rpx;
						}

						.person {
							display: flex;
							align-items: center;
							margin-left: 40rpx;

							.avatar-box {
								display: flex;
								align-items: center;

								image {
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									margin-right: -10rpx;
								}
							}

							.num {
								margin-left: 18rpx;
								font-size: 26rpx;
								color: #999999;
							}
						}
					}

					.more {
						font-size: 26rpx;
						color: #999;

						.iconfont {
							margin-left: 6rpx;
							font-size: 25rpx;
						}
					}
				}

				.group-scroll {
					width: 100%;
					margin-top: 25rpx;

					.group-item {
						display: inline-block;
						width: 222rpx;
						margin-right: 20rpx;
						box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.03);
						border-radius: 16rpx;

						image {
							width: 100%;
							height: 222rpx;
							border-radius: 16rpx 16rpx 0 0;
						}

						.info {
							padding: 8rpx 13rpx;

							.name {
								font-size: 24rpx;
							}

							.price-box {
								display: flex;
								align-items: center;
								margin-top: 10rpx;

								.tips {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 76rpx;
									height: 30rpx;
									margin-right: 6rpx;
									background: linear-gradient(90deg, rgba(255, 0, 0, .1) 0%, rgba(255, 84, 0, .1) 100%);
									border-radius: 2px;
									font-size: 20rpx;
									color: $theme-color;
								}

								.price {
									font-size: 26rpx;
									color: $theme-color;
									font-weight: 700;

									text {
										font-size: 20rpx;
									}
								}
							}

						}

						.bom-btn {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100%;
							height: 48rpx;
							background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
							border-radius: 0px 0px 16rpx 16rpx;
							color: #fff;

						}
					}
				}
			}

			.boutique {
				margin-top: 20rpx;

				swiper,
				swiper-item,
				.slide-image {
					width: 100%;
					height: 240rpx;
					border-radius: 12rpx;
				}
			}

			.index-product-wrapper {
				.nav-bd {
					display: flex;
					align-items: center;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 25%;

						.txt {
							font-size: 32rpx;
							color: #282828;
						}

						.label {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 124rpx;
							height: 32rpx;
							margin-top: 5rpx;
							font-size: 24rpx;
							color: #999;
						}

						&.active {
							color: $theme-color;

							.label {
								background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
								border-radius: 16rpx;
								color: #fff;
							}
						}
					}
				}

				.list-box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						width: 345rpx;
						margin-bottom: 20rpx;
						background-color: #fff;
						border-radius: 10px;
						overflow: hidden;

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

						.text-info {
							padding: 10rpx 20rpx 15rpx;

							.title {
								color: #222222;
							}

							.old-price {
								margin-top: 8rpx;
								font-size: 26rpx;
								color: #AAAAAA;
								text-decoration: line-through;

								text {
									margin-right: 2px;
									font-size: 20rpx;
								}
							}

							.price {
								display: flex;
								align-items: flex-end;
								color: $theme-color;
								font-size: 34rpx;
								font-weight: 800;

								text {
									padding-bottom: 4rpx;
									font-size: 24rpx;
									font-weight: normal;
								}

								.txt {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 28rpx;
									height: 28rpx;
									margin-left: 15rpx;
									margin-bottom: 10rpx;
									border: 1px solid $theme-color;
									border-radius: 4rpx;
									font-size: 22rpx;
									font-weight: normal;
								}
							}
						}
					}

					&.on {
						display: flex;
					}
				}
			}
		}
	}

	.activity_pic {
		margin-left: 20rpx;
		padding-left: 20rpx;
		position: relative;

		&::before {
			content: "";
			display: inline-block;
			width: 2rpx;
			height: 40rpx;
			background: #DCDCDC;
			position: absolute;
			top: 0;
			left: 0;
		}

		.picture {
			display: inline-block;
		}

		.avatar {
			width: 42rpx;
			height: 42rpx;
			line-height: 20rem;
			display: inline-block;
			background: #2ddcd3 no-repeat center/cover;
			position: relative;
			text-align: center;
			color: #fff;
			font-weight: 600;
			vertical-align: bottom;
			font-size: .875rem;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 0 0;
			margin-right: -10rpx;
			box-shadow: 0 0 0 1px #fff;
		}

		.pic_count {
			margin-left: 30rpx;
			color: #999999;
			font-size: 26rpx;
			position: relative;
			top: -4rpx;
		}
	}

	.productList {
		background-color: #F1F1F1;

		.sort {
			width: 710rpx;
			max-height: 380rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			padding: 0 0rpx 30rpx;
			flex-wrap: wrap;
			margin: 25rpx auto 30rpx auto;
			padding-top: 8rpx;

			&.no_pad {
				padding: 0;
			}

			/* #ifdef MP */
			/* #endif */
			.item {
				.pictrues {
					width: 90rpx;
					height: 90rpx;
					background: rgba(248, 248, 248, 1);
					border-radius: 50%;
					margin: 0 auto;
				}

				width: 20%;
				margin-top: 30rpx;
				text-align: center;

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

				.text {
					color: #272727;
					font-size: 24rpx;
					margin-top: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.productList .list {
		padding: 0 20rpx;
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
	}

	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx 10rpx 0 0;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 14rpx 17rpx 26rpx 17rpx;
		font-size: 28rpx;
		color: #212121;
	}

	.productList .list .item .text.on {
		width: 508rpx;
		padding: 0 0 0 22rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .coupon {
		background: rgba(255, 248, 247, 1);
		border: 1px solid rgba(233, 51, 35, 1);
		border-radius: 4rpx;
		font-size: 20rpx;
		margin-left: 18rpx;
		padding: 1rpx 4rpx;
	}

	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.pictrue {
		position: relative;
	}

	.fixed {
		z-index: 100;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #fff;
		box-shadow: 0 10rpx 20rpx -5rpx rgba(0, 0, 0, 0.06);
		// background: linear-gradient(90deg, red 50%, #ff5400 100%);
	}

	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}

	.menu-txt {
		font-size: 24rpx;
		color: #454545;
	}

	.mp-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 330rpx;
		// background: linear-gradient(90deg, #fff 50%, #fff 100%);
		// border-radius: 0 0 30rpx 30rpx;
	}

	.main {
		padding: 0 20rpx;
	}

	.combination-item {
		width: 328rpx;
		height: 180rpx;
		display: inline-block;
		background-size: 100%;
		position: relative;
		background-size: cover;
		border-radius: 16rpx;

		.img-box {
			width: 122rpx;
			height: 122rpx;
			position: absolute;

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

		.name {
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			line-height: 32rpx;
		}

		.price {
			display: block;
			font-size: 30rpx;
			font-weight: bold;
			margin-top: 8rpx;
			color: #E93323;

			text {
				font-size: 20rpx;
			}
		}

		.gocom_btn {
			display: block;
			margin-top: 6rpx;
			color: #fff;
			font-size: 22rpx;
			font-weight: bold;
			width: 100rpx;
			line-height: 30rpx;
			text-align: center;
			border-radius: 16rpx;

			text {
				font-weight: normal;
				font-size: 16rpx;
			}
		}

		&:nth-child(1) {
			height: 378rpx;
			padding: 20rpx 20rpx 28rpx;
			float: left;
			background-image: url(data:image/png;base64,[encoded data, 50796 characters]);

			.img-box {
				width: 210rpx;
				height: 210rpx;
				right: 18rpx;
				bottom: 18rpx;

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

			.gocom_btn {
				background: linear-gradient(90deg, #FD5D48 0%, #F63724 100%);
			}
		}

		&:nth-child(2),
		&:nth-child(3) {
			float: right;
			padding: 20rpx 18rpx;

			.name {
				width: 148rpx;
			}

			.img-box {
				right: 14rpx;
				bottom: 14rpx;
			}
		}

		&:nth-child(2) {
			background-image: url(data:image/png;base64,[encoded data, 34908 characters]);

			.gocom_btn {
				background: linear-gradient(90deg, #FDCA1A 0%, #F7B21F 100%);
			}
		}

		&:nth-child(3) {
			margin-top: 18rpx;
			background-image: url(data:image/png;base64,[encoded data, 37984 characters]);

			.img-box {
				right: 14rpx;
				bottom: 14rpx;
			}

			.gocom_btn {
				background: linear-gradient(90deg, #FFB052 0%, #FE961A 100%);
			}
		}
	}
</style>
