<template>
	<view class='index'>
		<!-- #ifdef MP -->
		<view class='navbar' :style="'height:'+navH+'rpx'">
			<view class='navbarH' :style="'height:'+navH+'rpx'">
				<view class='navbarCon acea-row row-center-wrapper'>
					<view class='search acea-row row-middle'><text class='iconfont icon-xiazai5'></text>搜索商品</view>
					<view class='logo'>
						<image :src='logoUrl'></image>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="indexTip" :style="'top:'+(navH+13)+'rpx'" :hidden="iShidden">
			<view class="tip acea-row row-between-wrapper">
				<view class="text">点击“<image src="../../static/images/spot.png"></image>”添加到我的小程序， 微信首页下拉即可访问商城。</view>
				<view class="iconfont icon-guanbi1" @click="closeTip"></view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 || APP-PLUS-NVUE -->
		<view class="header acea-row row-center-wrapper">
			<view class="logo">
				<image :src="logoUrl"></image>
			</view>
			<navigator url="/pages/goods_search/index" class="search acea-row row-middle" hover-class="none">
				<span class="iconfont icon-xiazai5"></span>搜索商品
			</navigator>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view v-if="$wechat.isWeixin()">
			<view class="follow acea-row row-between-wrapper" v-if="followHid && followUrl && !subscribe">
				<view>点击“立即关注”即可关注公众号</view>
				<view class="acea-row row-middle">
					<view class="bnt" @click="followTap">立即关注</view>
					<span class="iconfont icon-guanbi" @click="closeFollow"></span>
				</view>
			</view>
			<view class="followCode" v-if="followCode">
				<view class="pictrue"><img :src="followUrl" /></view>
				<view class="mask" @click="closeFollowCode"></view>
			</view>
		</view>
		<!-- #endif -->
		<view class='index-bg' v-if="imgUrls.length">
			<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
			 indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
				<block v-for="(item,index) in imgUrls" :key="index">
					<swiper-item>
						<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>
		<view class='nav acea-row' v-if="menus.length">
			<block v-for="(item,index) in menus" :key="index">
				<navigator class='item' v-if="item.show == '1'" :url='item.url' open-type='switchTab' hover-class='none'>
					<view class='pictrue'>
						<image :src='item.pic'></image>
					</view>
					<view>{{item.name}}</view>
				</navigator>
				<navigator class='item' v-else :url='item.url' hover-class='none'>
					<view class='pictrue'>
						<image :src='item.pic'></image>
					</view>
					<view>{{item.name}}</view>
				</navigator>
			</block>
		</view>
		<view class='news acea-row row-between-wrapper' v-if="itemNew.length">
			<view class='pictrue'>
				<image src='../../static/images/news.png'></image>
			</view>
			<view class='swiperTxt'>
				<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration" vertical="true"
				 circular="true">
					<block v-for="(item,index) in itemNew" :key="index">
						<swiper-item catchtouchmove='catchTouchMove'>
							<navigator v-if="item.show == '1'" :url='item.url' open-type='switchTab' class='acea-row row-between-wrapper'
							 hover-class='none'>
								<view class='text acea-row row-between-wrapper'>
									<view class='label border2' v-if="item.id%2 == 0">最新</view>
									<view class='newsTitle line1'>{{item.info}}</view>
								</view>
								<view class='iconfont icon-xiangyou'></view>
							</navigator>
							<navigator v-else open-type='navigate' :url='item.url' class='acea-row row-between-wrapper' hover-class='none'>
								<view class='text acea-row row-between-wrapper'>
									<view class='label border2' v-if="item.id%2 == 0">最新</view>
									<view class='newsTitle line1'>{{item.info}}</view>
								</view>
								<view class='iconfont icon-xiangyou'></view>
							</navigator>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<view class='specialArea acea-row row-between-wrapper' v-if="activityList.length">
			<block v-for="(item,index) in activityList" :key="index">
				<navigator class='assemble' :url='item.link' v-if="index < 1">
					<image :src='item.pic'></image>
					<view class='text'>
						<view class='name'>{{item.title}}</view>
						<view class='infor'>{{item.info}}</view>
					</view>
				</navigator>
			</block>
			<view class='list acea-row row-column-between'>
				<block v-for="(item,index) in activityList" :key="index">
					<navigator class='item' :url='item.link' v-if="index > 0">
						<image :src='item.pic'></image>
						<view class='text'>
							<view class='name'>{{item.title}}</view>
							<view class='infor'>{{item.info}}</view>
						</view>
					</navigator>
				</block>
			</view>
		</view>
		<view class='wrapper' v-if="fastList.length">
			<view class='title acea-row row-between-wrapper'>
				<view class='text'>
					<view class='name line1'>快速选择</view>
					<view class='line1'>{{fastInfo}}</view>
				</view>
				<navigator class='more' url='/pages/goods_cate/goods_cate' open-type='switchTab'>更多<text class='iconfont icon-jiantou'></text></navigator>
			</view>
			<view class='scroll-product'>
				<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
					<block v-for="(item,index) in fastList" :key="index">
						<navigator hover-class="none" class='item' :url='"/pages/goods_list/index?sid="+item.id+"&title="+item.cate_name'>
							<view class='img-box'>
								<image :src='item.pic'></image>
							</view>
							<view class='pro-info line1'>{{item.cate_name}}</view>
						</navigator>
					</block>
				</scroll-view>
			</view>
		</view>
		<view class='wrapper' v-if="bastList.length">
			<view class='title acea-row row-between-wrapper'>
				<view class='text'>
					<view class='name line1'>精品推荐</view>
					<view class='line1'>{{bastInfo}}</view>
				</view>
				<navigator class='more' hover-class="none" url='/pages/first_new_product/index?type=1'>更多<text class='iconfont icon-jiantou'></text></navigator>
			</view>
			<view class='boutique'>
				<swiper autoplay="true" indicator-dots="true" :circular="circular" :interval="interval" :duration="duration"
				 indicator-color="rgba(252,65,65,0.3)" indicator-active-color="#fc4141">
					<block v-for="(item,index) in bastBanner" :key="index">
						<swiper-item>
							<navigator :url='item.link' style='width:100%;height:100%;' hover-class='none'>
								<image :src="item.img" class="slide-image" />
							</navigator>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<goodList :bastList="bastList"></goodList>
		</view>
		<view class='hotList' v-if="likeInfo.length">
			<view class='hot-bg'>
				<view class='title acea-row row-between-wrapper'>
					<view class='text line1'><text class='label'>热门榜单</text>根据销量、搜索、好评等综合得出</view>
					<navigator class='more' hover-class="none" url='/pages/first_new_product/index?type=2'>更多<text class="iconfont icon-jiantou"></text></navigator>
				</view>
			</view>
			<view class='list acea-row row-middle'>
				<block v-for="(item,index) in likeInfo" :key="index">
					<navigator class='item' :url='"/pages/goods_details/index?id="+item.id'>
						<view class='pictrue'>
							<image :src='item.image'></image>
							<image v-if="index == 0" src='../../static/images/one.png' class='numPic'></image>
							<image v-else-if="index == 1" src='../../static/images/two.png' class='numPic'></image>
							<image v-else-if="index == 2" src='../../static/images/three.png' class='numPic'></image>
						</view>
						<view class='name line1'>{{item.store_name}}</view>
						<view class='money font-color'>￥<text class='num'>{{item.price}}</text></view>
					</navigator>
				</block>
			</view>
		</view>
		<view class='adver' v-if="newGoodsBananr">
			<block>
				<image :src='newGoodsBananr'></image>
			</block>
		</view>
		<view class='wrapper' v-if="firstList.length">
			<view class='title acea-row row-between-wrapper'>
				<view class='text'>
					<view class='name line1'>首发新品<text class='new font-color'>NEW~</text></view>
					<view class='line1'>{{firstInfo}}</view>
				</view>
				<navigator class='more' hover-class="none" url='/pages/first_new_product/index?type=3'>更多<text class='iconfont icon-jiantou'></text></navigator>
			</view>
			<view class='newProducts'>
				<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
					<block v-for="(item,index) in firstList" :key="index">
						<view hover-class="none" @tap="goDetail(item)" class='item'>
							<view class='img-box'>
								<image :src='item.image'></image>
								<span
                  class="pictrue_log_medium pictrue_log_class"
                  v-if="item.activity && item.activity.type === '1'"
                  >秒杀</span
                >
                <span
                  class="pictrue_log_medium pictrue_log_class"
                  v-if="item.activity && item.activity.type === '2'"
                  >砍价</span
                >
                <span
                  class="pictrue_log_medium pictrue_log_class"
                  v-if="item.activity && item.activity.type === '3'"
                  >拼团</span
                >
							</view>
							<view class='pro-info line1'>{{item.store_name}}</view>
							<view class='money font-color'>￥{{item.price}}</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<view class='wrapper' v-if="benefit.length">
			<view class='title acea-row row-between-wrapper'>
				<view class='text'>
					<view class='name line1'>促销单品</view>
					<view class='line1'>{{salesInfo}}</view>
				</view>
				<navigator class='more' hover-class="none" url='/pages/promotional_items/index'>更多<text class='iconfont icon-jiantou'></text></navigator>
			</view>
			<promotionGood :benefit="benefit"></promotionGood>
		</view>
		<couponWindow :window='window' :couponList='couponList' @onColse='onColse'></couponWindow>
	</view>
</template>
<script>
	let app = getApp();
	import {
		getIndexData,
		getCoupons
	} from '@/api/api.js';
	// #ifdef MP-WEIXIN
	import {
		getTemlIds
	} from '@/api/api.js';
	import {
		SUBSCRIBE_MESSAGE,
		TIPS_KEY
	} from '@/config/cache';
	// #endif
	// #ifdef H5  
	import {
		getShare,
		follow
	} from '@/api/public.js';
	// #endif
	import goodList from '@/components/goodList';
	import promotionGood from '@/components/promotionGood';
	import couponWindow from '@/components/couponWindow';
	import { goShopDetail } from '@/libs/order.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			goodList,
			promotionGood,
			couponWindow
		},
		data() {
			return {
				subscribe: false,
				followUrl: "",
				followHid: true,
				followCode: false,
				logoUrl: "",
				imgUrls: [],
				itemNew: [],
				activityList: [],
				menus: [],
				bastBanner: [],
				bastInfo: '',
				bastList: [],
				fastInfo: '',
				fastList: [],
				firstInfo: '',
				firstList: [],
				salesInfo: '',
				likeInfo: [],
				benefit: [],
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				window: false,
				iShidden: false,
				navH: "",
				newGoodsBananr: '',
				couponList: []
			}
		},
		computed: mapGetters(['isLogin','uid']),
		onLoad(options) {
			this.$util.$L.getLocation();
			// #ifdef MP
			this.navH = app.globalData.navHeight;
			if (options.spid) app.globalData.spid = options.spid;
			if (options.scene) app.globalData.code = decodeURIComponent(options.scene);
			// #endif
			// #ifdef MP-WEIXIN
			if (this.$Cache.get(TIPS_KEY)) this.iShidden = true;
			this.getTemlIds();
			//#endif
		},
		onShow() {
			this.getIndexConfig();
			// #ifdef H5
			this.getFollow();
			// #endif
		},
		onReady() {

		},
		onHide() {
			this.window = false
		},
		methods: {
			// #ifdef MP-WEIXIN
			getTemlIds() {
				let messageTmplIds = this.$Cache.get(SUBSCRIBE_MESSAGE);
				if (!messageTmplIds) {
					getTemlIds().then(res => {
						if (res.data)	
							this.$Cache.set(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
					})
				}
			},
			closeTip: function() {
				this.$Cache.set(TIPS_KEY, true);
				this.iShidden = true;
			},
			// #endif
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					that.$set(that, "imgUrls", res.data.banner);
					that.$set(that, "menus", res.data.menus);
					that.$set(that, "itemNew", res.data.roll);
					that.$set(that, "activityList", res.data.activity);
					that.$set(that, "bastBanner", res.data.info.bastBanner);
					that.$set(that, "bastInfo", res.data.info.bastInfo);
					that.$set(that, "bastList", res.data.info.bastList);
					that.$set(that, "fastInfo", res.data.info.fastInfo);
					that.$set(that, "fastList", res.data.info.fastList);
					that.$set(that, "firstInfo", res.data.info.firstInfo);
					that.$set(that, "firstList", res.data.info.firstList);
					that.$set(that, "salesInfo", res.data.info.salesInfo);
					that.$set(that, "likeInfo", res.data.likeInfo);
					that.$set(that, "benefit", res.data.benefit);
					that.$set(that, "logoUrl", res.data.logoUrl);
					that.$set(that, "couponList", res.data.couponList);
					that.$set(that, "newGoodsBananr", res.data.newGoodsBananr);
					// #ifdef H5
					that.subscribe = res.data.subscribe;
					that.setOpenShare();
					// #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
				})
			},
			onColse: function() {
				this.window = false
			},
			catchTouchMove: function(res) {
				return false
			},
			// 首发新品
			goDetail(item){
				goShopDetail(item,this.uid).then(res=>{
					uni.navigateTo({
						url:`/pages/goods_details/index?id=${item.id}`
					})
				})
			},
			// 微信分享；
			setOpenShare: function() {
				let that = this;
				if (that.$wechat.isWeixin()) {
					getShare().then(res => {
						let data = res.data.data;
						let configAppMessage = {
							desc: data.synopsis,
							title: data.title,
							link: location.href,
							imgUrl: data.img
						};
						that.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"], configAppMessage);
					})
				}
			},
			// #ifdef H5
			closeFollow() {
				this.followHid = false;
			},
			followTap() {
				this.followCode = true;
				this.followHid = false;
			},
			closeFollowCode() {
				this.followCode = false;
				this.followHid = true;
			},
			getFollow() {
				follow().then(res => {
						this.followUrl = res.data.path;
					})
					.catch(() => {});
			},
			// #endif
		}
	}
</script>
<style lang='scss'>
	page{background-color:#fff!important;}
	/* #ifdef MP */
	.navbar {
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;

		.navbarH {
			position: relative;

			.navbarCon {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 97rpx;

				.name {
					color: #000;
					font-size: 36rpx;
					font-weight: bold;
					width: 300rpx;
					text-align: center;

					&.on {
						color: #fff;
					}
				}

				.icon-xiangzuo {
					color: #000;
					position: absolute;
					font-size: 40rpx;
					left: 16rpx;
					width: 100rpx;
					height: 56rpx;
					line-height: 54rpx;
					top: 50%;
					transform: translateY(-50%);

					&.on {
						color: #fff;
					}
				}

				.logo {
					width: 127rpx;
					height: 45rpx;
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);

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

				.search {
					width: 360rpx;
					height: 64rpx;
					background-color: #f7f7f7;
					border-radius: 50rpx;
					padding: 0 28rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #bbb;
					margin-right: 26rpx;

					.icon-xiazai5 {
						font-size: 34rpx;
						margin-right: 16rpx;
					}
				}
			}
		}
	}

	/* #endif */
	/* #ifdef MP-WEIXIN */
	.index .indexTip {
		position: fixed;
		right: 42rpx;
		z-index: 9;

		.tip {
			width: 400rpx;
			border-radius: 6rpx;
			background-color: #fff;
			padding: 15rpx 22rpx;
			position: relative;

			&::before {
				content: "";
				width: 0;
				height: 0;
				border-left: 15rpx solid transparent;
				border-right: 15rpx solid transparent;
				border-bottom: 17rpx solid #fff;
				position: absolute;
				top: -14rpx;
				right: 95rpx;
			}
		}

		.text {
			font-size: 22rpx;
			color: #333;
			width: 320rpx;

			image {
				width: 30rpx;
				height: 16rpx;
				display: inline-block;
			}
		}

		.iconfont {
			color: #cdcdcd;
			font-size: 32rpx;
		}
	}

	/* #endif */
	page {
		background-color: #fff !important;
	}

	.index {

		/* #ifdef H5 */
		.follow {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.36);
			height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			padding: 0 30rpx;
			z-index: 100000;

			.bnt {
				width: 160rpx;
				height: 50rpx;
				background-color: #E93323;
				border-radius: 25rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
			}

			.iconfont {
				font-size: 30rpx;
				margin-left: 29rpx;
			}
		}

		.followCode {
			.pictrue {
				width: 500rpx;
				height: 720rpx;
				border-radius: 12px;
				left: 50%;
				top: 50%;
				margin-left: -250rpx;
				margin-top: -360rpx;
				position: fixed;
				z-index: 99;

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

		/* #endif */
		/* #ifdef H5 || APP-PLUS-NVUE */
		.header {
			height: 98rpx;
			width: 100%;

			.logo {
				width: 127rpx;
				height: 45rpx;
				margin-right: 25rpx;

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

			.search {
				width: 500rpx;
				height: 64rpx;
				background-color: #f7f7f7;
				border-radius: 50rpx;
				padding: 0 28rpx;
				font-size: 28rpx;
				color: #bbb;
				box-sizing: border-box;

				.iconfont {
					font-size: 34rpx;
					margin-right: 16rpx;
				}
			}
		}

		/* #endif */
		.index-bg {
			width: 100%;
			height: 375rpx;
			position: relative;

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

			.slide-navigator {
				width: 100%;
				height: 100%;

				.slide-image {
					width: 100%;
					height: 100%;
				}
			}

			.uni-swiper-dot {
				width: 20rpx !important;
				height: 5rpx !important;
				border-radius: 3rpx;
			}

			.uni-swiper-dots {
				&.uni-swiper-dots-horizontal {
					margin-bottom: 5rpx;
				}
			}
		}

		.nav {
			padding-top: 26rpx;

			.item {
				width: 25%;
				text-align: center;
				font-size: 26rpx;
				margin-bottom: 35rpx;

				.pictrue {
					width: 90rpx;
					height: 90rpx;
					margin: 0 auto 15rpx auto;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}

		.news {
			height: 77rpx;
			border-top: 1rpx solid #f4f4f4;
			padding: 0 30rpx;
			box-shadow: 0 10rpx 30rpx #f5f5f5;

			.pictrue {
				width: 124rpx;
				height: 28rpx;
				border-right: 1rpx solid #ddd;
				padding-right: 23rpx;
				box-sizing: content-box;

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

			.swiperTxt {
				width: 523rpx;
				height: 100%;
				line-height: 77rpx;
				overflow: hidden;

				.text {
					width: 480rpx;

					.label {
						font-size: 20rpx;
						color: #ff4c48;
						width: 64rpx;
						height: 30rpx;
						border-radius: 40rpx;
						text-align: center;
						line-height: 30rpx;
						border: 2rpx solid #ff4947;
					}

					.newsTitle {
						width: 397rpx;
						font-size: 24rpx;
						color: #666;
					}
				}

				.iconfont {
					font-size: 28rpx;
					color: #888;
				}

				swiper {
					height: 100%;
				}
			}
		}

		.specialArea {
			padding: 30rpx;

			.assemble {
				width: 260rpx;
				height: 260rpx;
				position: relative;

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

				.text {
					position: absolute;
					top: 37rpx;
					left: 22rpx;
				}
			}

			.name {
				font-size: 30rpx;
				color: #fff;
			}

			.infor {
				font-size: 22rpx;
				color: rgba(255, 255, 255, 0.8);
				margin-top: 5rpx;
			}

			.list {
				height: 260rpx;
				width: 416rpx;

				.item {
					width: 100%;
					height: 124rpx;
					position: relative;

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

					.text {
						position: absolute;
						top: 23rpx;
						left: 28rpx;
					}
				}
			}
		}

		.wrapper {
			.title {
				border-top: 1rpx solid #eee;
				padding-top: 34rpx;
				margin: 0 30rpx;

				.text {
					font-size: 24rpx;
					color: #999;
					width: 530rpx;

					.name {
						color: #282828;
						font-size: 30rpx;
						font-weight: bold;
						margin-bottom: 5rpx;
						position: relative;

						.new {
							position: absolute;
							top: 2rpx;
							left: 130rpx;
							font-size: 16rpx;
							font-weight: bold;
						}
					}
				}

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

					.iconfont {
						margin-left: 9rpx;
						font-size: 26rpx;
						vertical-align: 3rpx;
					}
				}
			}

			.scroll-product {
				white-space: nowrap;
				margin-top: 38rpx;
				padding: 0 30rpx 37rpx 30rpx;

				.item {
					width: 180rpx;
					display: inline-block;
					margin-right: 19rpx;
					border-bottom: 4rpx solid #47b479;
					box-shadow: 0 40rpx 30rpx -10rpx #eee;

					&:nth-of-type(3n) {
						border-bottom: 4rpx solid #ff6960;
					}

					&:nth-of-type(3n-1) {
						border-bottom: 4rpx solid #579afe;
					}

					&:nth-last-child(1) {
						margin-right: 0;
					}

					.img-box {
						position: relative;
						width: 100%;
						height: 180rpx;

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

					.pro-info {
						font-size: 24rpx;
						color: #282828;
						text-align: center;
						height: 60rpx;
						line-height: 60rpx;
						border: 1rpx solid #f5f5f5;
						border-bottom: 0;
						border-top: 0;
						padding: 0 10rpx;
					}
				}
			}

			.boutique {
				width: 690rpx;
				height: 300rpx;
				margin: 28rpx auto 0 auto;

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

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

				.uni-swiper-dot {
					width: 7rpx !important;
					height: 7rpx !important;
					border-radius: 50%;
				}

				.uni-swiper-dot-active {
					width: 20rpx !important;
					border-radius: 5rpx !important;
				}

				.nui-swiper-dots {
					&.uni-swiper-dots-horizontal {
						margin-bottom: -8rpx;
					}
				}
			}

			.newProducts {
				white-space: nowrap;
				padding: 0 30rpx;
				margin: 35rpx 0 42rpx 0;

				.item {
					display: inline-block;
					width: 240rpx;
					margin-right: 20rpx;
					border: 1rpx solid #eee;
					border-radius: 12rpx;

					&:nth-last-child(1) {
						margin-right: 0;
					}

					.img-box {
						position: relative;
						width: 100%;
						height: 240rpx;

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

					.pro-info {
						font-size: 28rpx;
						color: #333;
						text-align: center;
						padding: 19rpx 10rpx 0 10rpx;
					}

					.money {
						padding: 0 10rpx 18rpx 10rpx;
						text-align: center;
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}
		}

		.hotList {
			.hot-bg {
				width: 100%;
				height: 215rpx;
				background-image: url('data:image/png;base64, ');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				color: #fff;
				margin-top: 15rpx;

				.title {
					height: 87rpx;

					.text {
						width: 575rpx;

						.label {
							font-size: 30rpx;
							font-weight: bold;
							margin-right: 20rpx;
						}
					}

					.more {
						font-size: 26rpx;

						.iconfont {
							font-size: 25rpx;
							vertical-align: 2rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

			.list {
				width: 690rpx;
				height: 330rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: -128rpx auto 0 auto;
				padding: 0 22rpx;
				box-sizing: border-box;
				box-shadow: 0 0 30rpx -10rpx #aaa;

				.item {
					width: 200rpx;

					&~.item {
						margin-left: 22rpx;
					}

					.pictrue {
						width: 100%;
						height: 200rpx;
						position: relative;

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

						.numPic {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							position: absolute;
							top: 7rpx;
							left: 7rpx;
						}
					}

					.name {
						font-size: 26rpx;
						color: #282828;
						margin-top: 12rpx;
					}

					.money {
						font-size: 20rpx;
						font-weight: bold;
						margin-top: 4rpx;

						.num {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.adver {
			width: 100%;
			height: 180rpx;
			margin-top: 37rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
