anmo-master/package/pages/zysc/index/index.vue

<template>
	<view class="index-content">
		<view style="position: relative;top: 0;">

			<!-- #ifdef H5 -->
			<view class="content-div"
				style="position: fixed;width: 100%;height: 104upx;background-color: #05C25C;z-index: 999999;">
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="content-div"
					style="position: fixed;width: 100%;height: 154upx;background-color: #05C25C;z-index: 999999;padding-top: 50upx;">
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="content-div"
						style="position: fixed;width: 100%;height: 105upx;background-color: #05C25C;z-index: 999999;">
						<!-- #endif -->
					<view class="icon_header" @tap='goSearch'>
						<image class="header-imgsuo" src="/static/image/icon_search.png"></image>
						<input type="text" placeholder="输入关键字或者粘贴宝贝标题" class="icon-headerI" style="width: 100%;" />
						<view class="zy_search">搜索</view>
					</view>
				</view>
			</view>
			<!-- <view class="tar"></view> -->
			<view class="red_bg">
				<view>
					<swiper class="swiper-container" :autoplay="true" :interval="4000" :circular="true"
						:indicator-dots="false" style="height: 240upx;">
						<swiper-item class="swiper-wrapper" style="" v-for="(item, index3) in bannerList" :key="index3"
							@tap='toNavList(item.linkUrl,item.title)'>
							<image lazy-load='true' fade-show='true' :src="item.imgUrl" v-if="item"
								style="width: 100%;height: 240upx;overflow: hidden;border-radius: 32upx;"
								mode="scaleToFill"></image>
						</swiper-item>
					</swiper>
				</view>

			</view>
			<!-- #ifdef H5 -->
			<view style="width:100%;height:12upx;"></view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view style="width:100%;height:57upx;"></view>
			<!-- #endif -->
			<!--首页菜单开始-->
			<view class="category" v-if="navlist.length>0">
				<view class="box">
					<swiper class="swiper" duration="300" :style="{ height: categoryHeight }" @change="categoryChange">
						<swiper-item v-for="(nav, index5) in navlist" :key="index5">
							<view class="category-list">
								<view class="icon" v-for="(item,ind) in nav" :key="ind"
									@tap="toNavList(item.url, item.title)">
									<image mode="widthFix" :src="item.image_url" style="height: 90upx;width: 90upx">
									</image>
									<view>{{ item.title }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="dots">
						<view v-for="(page, pageindex) in navlist" :key="pageindex"
							:class="{ active: pageindex == currentPageindex }"></view>
					</view>
				</view>
			</view>

			<view class="index-views" style="margin-top: 5upx;border-radius: 15upx;">
				<view class="jx" @tap="goCommondityList('精选好物')">
					<view class="jx_row1">
						<text class="jx_tit">精选好物</text>
						<text class="note">精选畅销品</text>
					</view>
					<view class="jx_img_wrap">
						<image :src="jximg1" lazy-load="true"></image>
					</view>
				</view>
				<view class="rm" @tap="goCommondityList('热卖榜单')">
					<text class="jx_tit">热卖榜单</text>
					<text class="note">全球惊喜爆款</text>
					<image :src="rmimg1" lazy-load="true"></image>
				</view>
				<view class="sx" @tap="goCommondityList('每日上新')">
					<text class="jx_tit">每日上新</text>
					<text class="note">每日活动福利</text>
					<image :src="newsimg1" lazy-load="true"></image>
				</view>

			</view>

			<view class="header-wus" v-if="mrscList.length>0">
				<view @tap="goCommondityList('推荐商品')" style="display: flex;margin-bottom: 20upx;">
					<view style="color:#333333;width: 86%; font-size: 32upx;font-weight: bold;">
						为你推荐
					</view>
					<view class="sale">超级折扣价</view>
					<view class="fr-jutext" style="width: 86%;text-align: right;color: #999999;">查看更多<text
							class="cuIcon-right" style="margin-left: 2px"></text></view>
				</view>
				<view style="display: flex;justify-content: space-around;margin-left: 20upx;" v-if="mrscList.length>0">
					<view v-for="(g, index) in mrscList" :key="index" class="box-float" @tap='goDetail(g.id)'>
						<image lazy-load='true' fade-show='true'
							style="border-radius: 16upx;width: 214upx;height: 214upx;margin-right: 20upx;" class="image"
							:src="g.coverImg" mode="scaleToFill"></image>
						<!-- <view class="index-conts">{{g.title}}</view> -->
						<view>
							<view v-if="relation" class="index-conts2"><text
									style="font-size: 30upx;">￥</text>{{ g.memberPrice }}
								<text
									style="font-size: 24upx;color: #999999;text-decoration:line-through;margin-left: 4upx">￥{{g.originalPrice}}</text>
							</view>
							<view v-if='!relation' class="index-conts2">
								<text style="font-size: 30upx;">￥</text>{{ g.price }}
								<text
									style="font-size: 20upx;color: #999999;text-decoration:line-through;margin-left: 4upx;font-weight:400;">￥{{g.originalPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="homegoodsList.length>0"
				style="text-align: center;margin-top: 20upx;margin-bottom: 16upx;padding-top: 16upx;">
				<!-- <text class="news_title">一一一</text> -->
				<image class="arrow_img" src="/static/image/title_left.png"></image>
				<text class="zy_jx_tit">精选好物</text>
				<!-- <text class="news_title">一一一</text> -->
				<image class="arrow_img" src="/static/image/title_right.png"></image>
			</view>
			<!-- #ifdef H5 -->
			<view style="display: flex;flex-wrap: wrap;margin-bottom: 0upx;padding: 20upx;"
				v-if="homegoodsList.length>0">
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view style="display: flex;flex-wrap: wrap;margin-bottom: 0upx;padding: 20upx;"
					v-if="homegoodsList.length>0">
					<!-- #endif -->
					<view
						style="width: 100%; background-color: #FFFFFF; border-radius: 20upx;overflow: hidden;box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;margin-bottom: 20upx;display: flex;"
						@tap='goDetail(item.id)' v-for="(item,index) in homegoodsList" :key='index'
						v-if="homegoodsList.length > 0">
						<image :src="item.coverImg" lazy-load="true"
							style="width: 250upx;height: 250upx;flex-shrink: 0;"></image>
						<view style="padding: 16upx 16upx 16upx 20upx;flex: 1;">
							<view style="margin: 5upx 2upx 20upx;">
								<view style="width: 100%;height:  60upx;">
									<text class="limapboxqing2"><text class="indexr"
											style=""><text>自营</text></text>{{ item.title }}</text>
								</view>
							</view>
							<!-- <view class="reverse">
								<view class="" v-if="item.descrition&&isEnable == '是'">预估返￥{{ item.descrition }}</view>
							</view> -->
							<view style="display: flex;flex-direction: column;justify-content: space-between;">
								<view
									style="padding: 0rpx 0;display: flex;justify-content: space-between;margin:50upx 0 12upx;">
									<view style="display: flex;justify-content: space-between;width: 94%;">
										<view v-if="relation"
											style="font-size: 38upx;color: #05C25C;font-weight: 700;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
											<text style="font-size:20upx;">¥</text> {{item.memberPrice}}
										</view>
										<view v-if='!relation'
											style="font-size: 38upx;color: #05C25C;font-weight: 700;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
											<text style="font-size:20upx;margin-right: 10upx">¥</text> {{item.price}}
										</view>
										<view
											style="margin-left:10px;font-size: 24upx;color: #999999;margin-top: 10upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: left;">
											已售{{item.sales}}件</view>
									</view>
									<!-- <view v-if="item.descrition&&isEnable == '是'" style="color: rgb(254, 108, 0);font-size: 24upx;padding: 8upx 0;">预估返￥ {{item.descrition}}</view> -->
								</view>

								<view
									style="display: flex;align-items: center;font-size: 24upx;color: rgb(153, 153, 153);">
									<image style="height: 30upx;width:30upx;margin-right: 4upx;"
										src="/static/image/icon_store.png"></image>
									<view>上门服务自营店铺</view>
								</view>


							</view>

						</view>
					</view>
					<!-- 悬浮上拉 -->
					<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '','']"
						style="bottom: 56px;">
						<text class="iconfont icon-shangla"></text>
					</view>
					<!-- 加载更多提示 -->
					<view class="s-col is-col-24" v-if="homegoodsList.length > 0">
						<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				day: 1,
				hour: 2,
				page: 0,
				size: 10,
				minute: 30,
				money: 0,
				relation: false,
				jximg1: '',
				isEnable: '否',
				rmimg1: '',
				newsimg1: '',
				homegoodsList: [],
				bannerList: [],
				mrscList: [],
				navlist: [],
				relation_id: '',
				navlists: [],
				loadingType: 0,
				scrollTop: false,

				categoryHeight: '300rpx',
				currentPageindex: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onShow() {
			let relation_id = this.$queue.getData('relation_id');
			this.relation_id = relation_id;
			if (relation_id && relation_id !== 'undefined') {
				this.relation = true;
			} else {
				this.relation = false;
			}
			let a = this.$queue.getData("isEnable")
			if (a === '是') {
				let b = this.$queue.getData('isLieBiaoEnable');
				if (b) {
					this.isEnable = b;
				} else {
					this.isEnable = a;
				}
			} else {
				this.isEnable = a;
			}
			this.getmrsc();
			this.getHomeGoods();

		},
		onLoad() {
			this.getBannerList();
			this.loadMenuList();
		},
		methods: {
			//更新分类指示器
			categoryChange(event) {
				this.currentPageindex = event.detail.current;
			},
			/**
			 * 登录检测
			 */
			loginS() {
				//#ifdef H5
				uni.navigateTo({
					url: '/pages/public/login'
				});
				//#endif
				//#ifndef H5
				uni.navigateTo({
					url: '/pages/public/login'
				});
				//#endif
			},
			/**
			 * 会员授权界面
			 */
			goPublisherInfo() {
				let token = this.$queue.getData('token');
				let userId = this.$queue.getData('userId');
				if (token) {
					uni.navigateTo({
						url: '/pages/member/publisher?uid=' + userId + '&token=' + token
					});
				} else {
					this.loginS();
				}
			},
			getmrsc() {
				this.$Request.getT('/app/goods/recommend?page=0&size=3&sort=createAt').then(res => {
					if (res.status === 0) {
						this.mrscList = res.data.content;
					}
				});
			},
			getNews() {
				this.$Request.getT('/app/goods/news?page=0&size=1&sort=createAt').then(res => {
					if (res.status === 0) {
						this.newsimg1 = res.data.content[0].coverImg;
					}
				});
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			getSelectGoods() {
				this.$Request.getT('/app/goods/selectGoods?page=0&size=1&sort=createAt ').then(res => {
					if (res.status === 0) {
						this.jximg1 = res.data.content[0].coverImg;
					}
				});
			},
			getSellingList() {
				this.$Request.getT('/app/goods/selling?page=0&size=1&sort=sales').then(res => {
					if (res.status === 0) {
						this.rmimg1 = res.data.content[0].coverImg;
					}
				});
			},
			getHomeGoods(type) {
				this.loadingType = 1;
				this.$Request.getT('/app/goods/homeGoods?page=' + this.page + '&size=' + this.size).then(res => {
					if (res.status === 0) {
						if (this.page === 0 || res.status) {
							this.homegoodsList = [];
						}
						let grade = this.$queue.getData('grade');
						res.data.content.forEach(d => {
							d.descrition = '';
							// if (d.commissionPrice != 0) {
							// 	if (grade) {
							// 		if (this.relation) {
							// 			d.descrition = ((parseFloat(d.memberPrice) * parseFloat(d
							// 				.commissionPrice)) * parseFloat(grade)).toFixed(
							// 				2);
							// 		} else {
							// 			d.descrition = ((parseFloat(d.price) * parseFloat(d
							// 				.commissionPrice)) * parseFloat(grade)).toFixed(2);
							// 		}
							// 	} else {
							// 		if (this.relation) {
							// 			d.descrition = ((parseFloat(d.memberPrice) * parseFloat(d
							// 						.commissionPrice)) * parseFloat(this.$queue
							// 				.minMoney()))
							// 				.toFixed(2);
							// 		} else {
							// 			d.descrition = ((parseFloat(d.price) * parseFloat(d
							// 						.commissionPrice)) * parseFloat(this.$queue
							// 				.minMoney()))
							// 				.toFixed(2);
							// 		}
							// 	}
							// }
							d.sales = d.sales > 10000 ? (d.sales / 10000).toFixed(1) + '万' : d.sales;
							this.homegoodsList.push(d);
							console.log(this.homegoodsList)
						});
						if (res.data.content.length === this.size) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					if (type === "Refresh") {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			goSearch() {
				uni.navigateTo({
					url: '/package/pages/zysc/index/search'
				});
			},
			goCommondityList(name) {
				uni.navigateTo({
					url: '/package/pages/zysc/index/commodityList?name=' + name
				});
			},
			// 传进数组和指定个数，进行拆分
			chunk: function(array, size) {
				//获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
				const length = array.length
				//判断不是数组，或者size没有设置，size小于1，就返回空数组
				if (!length || !size || size < 1) {
					return []
				}
				//核心部分
				let index = 0 //用来表示切割元素的范围start
				let resIndex = 0 //用来递增表示输出数组的下标

				//根据length和size算出输出数组的长度，并且创建它。
				let result = new Array(Math.ceil(length / size))
				//进行循环
				while (index < length) {
					//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
					result[resIndex++] = array.slice(index, (index += size))
				}
				//输出新数组
				return result
			},
			loadMenuList: function() {
				this.$Request.getT('/selfActivity/state?state=1').then(res => {
					if (res.status === 0) {
						if (res.data.length > 0) {
							var datanew = this.chunk(res.data, 10)
							this.navlist = datanew;
							if (res.data.length > 5) {
								this.categoryHeight = "300rpx"
							} else {
								this.categoryHeight = "150rpx"
							}
						}
					}
				});
				this.$Request.getT('/selfActivity/state?state=3').then(res => {
					if (res.status === 0) {
						if (res.data.length > 0) {
							this.jximg1 = res.data[0].image_url;
						}
					}
				});
				this.$Request.getT('/selfActivity/state?state=4').then(res => {
					if (res.status === 0) {
						if (res.data.length > 0) {
							this.rmimg1 = res.data[0].image_url;
						}
					}
				});
				this.$Request.getT('/selfActivity/state?state=5').then(res => {
					if (res.status === 0) {
						if (res.data.length > 0) {
							this.newsimg1 = res.data[0].image_url;
						}
					}
				});
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/package/pages/zysc/index/commoditydetail?ordersId=' + id
				});
			},
			/**
			 * @param {Object} url
			 */
			toNavList: function(url, title) {
				let token = this.$queue.getData('token');
				if (token) {
					if (url.indexOf('/pages/') !== -1 || url.indexOf('/package/') !== -1 || url.indexOf('/my/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/member/webview?url=' + url
						});
						//#endif
						//#ifdef H5
						if (url.indexOf('http://') !== -1 && url.indexOf('https://') !== -1) {
							window.location.href = url;
						} else {
							window.location.href = 'http://' + url;

						}
						//#endif
					}
				} else {
					this.goLoginInfo();
				}
			},
			getBannerList() {
				this.$Request.getT('/advert/list').then(res => {
					if (res.status === 0) {
						this.bannerList = [];
						res.data.forEach(d => {
							this.bannerList.push(d)
						});
					}
				});
			},
			goMyList() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '/package/pages/zysc/my/myList'
					});
				} else {
					this.goLoginInfo();
				}
			},
			//统一登录跳转
			goLoginInfo() {
				this.$queue.setData('href', '/pages/zysc/index/index');
				//#ifdef H5
				uni.navigateTo({
					url: '/pages/public/login'
				});
				//#endif
				//#ifndef H5
				uni.navigateTo({
					url: '/pages/public/login'
				});
				//#endif
			},
			tabSlect(item, index) {
				this.TabCur = index;
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getHomeGoods('');
		},
		onPullDownRefresh: function() {
			this.page = 0;
			this.min_id = 1;
			this.getHomeGoods("Refresh");
		}
	}
</script>

<style lang="scss">
	@import '../../../../static/css/index.css';

	page {
		background: #F5F0F0;
	}

	.index-views {
		// display: flex;
		// position: relative;
		background: #fefeff;
		margin: -12upx 20upx 0;
		// border-radius: 10upx; 
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		.jx {
			width: 342rpx;
			position: relative;
			align-items: center;
			background: url('/static/image/zysc_jxhw_bg.png');
			background-size: cover;

			.jx_row1 {
				padding-left: 27rpx;
				position: relative;
				top: -18rpx;

				.jx_tit {
					margin-right: 13rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 32rpx;
				}

				.note {

					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FC5AA5;
					line-height: 32rpx;
				}
			}

			.jx_img_wrap {
				position: relative;
				top: 4rpx;
				text-align: center;

				image {
					width: 90rpx;
					height: 105rpx;
					margin-top: 30rpx;
				}
			}
		}

		.rm {
			width: 167rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			text-align: center;
			align-items: center;
			padding-top: 20rpx;
			background: url('/static/image/zysc_rmbd_bg.png');

			.jx_tit {
				margin-left: 27rpx;
				margin-right: 13rpx;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 32rpx;
			}

			.note {

				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #F3B398;
				line-height: 32rpx;
			}

			image {
				width: 90rpx;
				height: 105rpx;
				margin-top: 30rpx;
			}
		}

		.sx {
			background: url('/static/image/zysc_mrsx_bg.png');
			width: 167rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			text-align: center;
			align-items: center;
			padding-top: 20rpx;

			.jx_tit {
				margin-left: 27rpx;
				margin-right: 13rpx;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 32rpx;
			}

			.note {

				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #5988FA;
				line-height: 32rpx;
			}

			image {
				width: 90rpx;
				height: 105rpx;
				margin-top: 30rpx;
			}
		}
	}

	.sale {
		background: url('/static/image/zysc_btn_bg.png');
		background-size: cover;
		font-size: 20upx;
		width: 320rpx;
		height: 32rpx;
		text-align: center;
		color: #fff;
		position: relative;
		left: -108rpx;
		top: 8rpx;
	}

	.arrow_img {
		width: 78rpx;
		height: 23rpx;

	}

	.zy_jx_tit {

		font-size: 42rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #FF0000;
		margin: 0 10rpx;
	}

	.reverse {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		margin-top: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		/* font-weight: bold; */
		color: #FFFFFF;
		line-height: 32rpx;
	}

	.reverse>view:nth-child(1) {
		padding: 4rpx 10rpx;
		background: #05C25C;
		border-radius: 5px;
		color: #ffffff;
		margin-right: 20rpx;
		position: relative;
		top: 10rpx;
	}


	.index-conts {
		width: 200upx;
		margin-bottom: 7px;
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.indexr {
		color: #FFFFFF;
		background: #05C25C;
		font-size: 22upx;
		padding-left: 12upx;
		display: inline-block;
		padding-right: 13upx;
		border-radius: 8upx;
		margin-right: 8upx;
		padding-top: 2upx;
		padding-bottom: 2upx;
	}

	.index-conts2 {
		font-size: 30upx;
		font-weight: bold;
		position: absolute;
		float: left;
		color: #FF2638;
		width: 80%;
		text-align: left;
	}

	.header-imgsuo {
		width: 37rpx;
		height: 31rpx;
		margin-right: 10upx;
		align-items: center;
		display: block;
	}

	.limapboxqing2 {

		font-size: 28upx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.icon_header {
		width: 700upx;
		display: flex;
		height: 77upx;
		align-items: center;
		line-height: 40upx;
		padding: 10upx 20upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		margin-top: 14upx;
		// margin-left: -20upx;
	}

	.swiper-container {
		width: 690upx;
		height: 300upx;
		border-radius: 4upx;
		transform: translateY(0);
		overflow: hidden;
		overflow: hidden !important;
		/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
		transform: translateY(0) !important;

		position: relative;
		/* #ifdef APP-PLUS */
		top: 120upx;
		/* #endif */
		/* #ifdef H5 */
		top: 130upx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 80upx;
		/* #endif */
		right: 0upx;
		left: 0;
		margin: auto;
	}

	.content-div {

		width: 100%;
		display: flex;
		justify-content: space-around;
		z-index: 999;
	}

	.icon-headerI {
		font-size: 24upx;
		color: #999999;
	}

	.news_title {
		font-weight: bold;
		color: #FF2638;
		margin-right: 32upx;
		margin-left: 32upx;
		width: 12upx;
	}

	.header-wus {
		background-color: #FFFFFF;
		position: relative;
		margin: 27upx 20upx 0upx 20upx;
		border-radius: 10upx;
		padding: 28upx 28upx 50upx;
	}

	.header-wus2 {
		color: #333333;
		font-size: 32upx;
		margin-bottom: 10upx;
		font-weight: bold;
	}

	.header-wus3 {
		color: #333333;
		font-size: 30upx;
		margin-bottom: 10upx;
	}

	.home-bg {
		background: #FF2222;
		height: 350upx;
		border-bottom-right-radius: 32upx;
		border-bottom-left-radius: 32upx;

	}


	.box-float {
		width: 235upx;
		position: relative;
		border-radius: 10upx;
		padding: 6upx 0;
	}


	.icon_search {
		background: #f6f6f6;
		border-radius: 22px;
		height: 69upx;
		line-height: 66upx;
		font-size: 28upx;
		color: #dcdcdc;
		text-align: left;
		text-indent: 17px;
	}

	.index_header {
		background: #FF332F;
		/* #ifdef H5 */
		height: 110upx;
		/* #endif */
		/* #ifdef  APP-PLUS */
		height: 170upx;
		padding-top: 50upx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 110upx;
		/* #endif */
		background-size: 100%;
		position: fixed;
		z-index: 999;
		width: 100%;
		background: #05C25C
	}

	.category {
		width: 100%;
		/* #ifdef APP-PLUS */
		padding: 20upx;
		/* #endif */
		/* #ifndef APP-PLUS */
		padding: 20upx;
		/* #endif */
		
		.box {
			width: 100%;
			border-radius: 20upx;
			background-color: #ffffff;

			.dots {
				display: flex;
				justify-content: center;
				height: 15upx;
				width: 100%;

				view {
					width: 30upx;
					height: 5upx;
					background-color: rgba(0, 0, 0, 0.2);

					&.active {
						background-color: #05C25C;
					}
				}
			}

			.swiper {
				width: 100%;
				padding: 10upx 0;

				.uni-swiper-dot {
					width: 20upx;
				}

				.category-list {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: flex-start;
					padding: 10upx 0 0;
					flex-flow: wrap;

					.icon {
						width: 20%;
						display: flex;
						flex-flow: wrap;
						justify-content: center;
						font-size: 22upx;
						color: #666;
						margin-bottom: 20upx;

						image {
							width: 70%;
							height: 13.3vw;
						}

						view {
							width: 100%;
							display: flex;
							justify-content: center;
						}
					}
				}
			}
		}
	}

	.zy_search {
		width: 108rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		background: #05C25C;
		color: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		right: -20rpx;
	}

	.red_bg {
		width: 750rpx;
		/* #ifdef MP-WEIXIN */
		height: 300rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		height: 360rpx;
		/* #endif */
		border-radius: 0 0 34% 34%;
		background-color: #05C25C;
		padding-top: var(--status-bar-height);

	}
</style>