high-mini/pages/tabBar/home/home.vue

<template>
	<view>
		<!-- 状态栏 -->
		<view v-if="showHeader && !isdisplay" class="status"
			:style="{ position: headerPosition,top:statusTop,opacity: afterHeaderOpacity}"></view>
		<!-- 顶部导航栏 -->
		<view v-if="showHeader && !isdisplay" class="header"
			:style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
			<!-- 定位城市 -->
			<view class="addr" @click="goPostion">
				<!-- <view class="icon location"></view> -->
				{{ city }}
				<image mode="widthFix" style="width: 15px;" :src="imagewxUrl+imgadres2"></image>
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<input placeholder="搜索门店" placeholder-style="color:#c0c0c0;" @tap="toSearch()" />
				<view class="icon search"></view>
			</view>

			<!-- 右侧图标按钮 -->
			<view class="icon-btn">
				<!-- #ifdef MP-->
				<button open-type="contact" style="background-color: transparent;padding: 0px;">
					<image src="../../../static/img/home/cusser.png" mode="widthFix" class="icon30"></image>
				</button>
				<!-- #endif -->
				<!-- #ifdef H5-->
				<image :src="imagewxUrl+imgadres4" mode="widthFix" style="background-color: transparent;padding: 0px;"
					class="h5xfimg" @click="playPhone"></image>
				<!-- #endif -->
			</view>
		</view>
		<view v-if="isdisplay">
			<image :src="imagewxUrl+imgadres5" class="widthw30 mart110" mode="widthFix"></image>
		</view>

		<!-- 顶部菜单 -->
		<view v-for="(item,index) in homeCateList" :key="index" style="margin-top: -2px;">
			<view class="height90 backcorltop mart50" v-if="item.type == 1">
				<view class="category-list">
					<view class="category" style="width: 25%;" v-for="(row, indexs) in item.childCategory" :key="indexs"
						@click="toCategory(row)">
						<view class="img">
							<image :src="imageUrl+row.imgData"></image>
						</view>
						<view class="text fcorfff">{{ row.title }}</view>
					</view>
				</view>
			</view>
			<!-- 顶部活动图片 -->
			<image class="width100" mode="widthFix" :src="imagewxUrl+imgadres" v-if="item.type == 8"></image>

			<!-- 顶部菜单 -->
			<view class="category-list backcorfff" style="margin-top: -7px;" v-if="item.type == 7">
				<view class="category" style="width: 20%;" v-for="(row, indexc) in item.childCategory" :key="indexc"
					@click="toCategory(row)">
					<view class="img">
						<image :src="imageUrl+row.imgData"></image>
					</view>
					<view class="text fcor333">{{ row.title }}</view>
				</view>
			</view>
			<!-- 消息 -->
			<view class="height120 backcorfff" v-if="item.type == 3">
				<view class="height20 width100"></view>
				<view class="width92 message alijus">
					<view class="width100 alijus" style="margin-top: -20px;" @click="test(0)"
						v-if="item.childDate.length == 1">
						<view class="width80p paddleft10 alijusstart">
							<view class="stus"></view>
							<view class="paddleft10 font14 fcor666 text1 width70">
								{{item.childDate[0].title}}
							</view>
							<view class="width25 font13 fcor999">{{item.childDate[0].timeData}}</view>
						</view>
						<view class="width20 alijus">
							<image class="icon15" mode="widthFix" src="../../../static/img/jt.png"></image>
						</view>
					</view>
					<swiper v-else circular="true" autoplay="true" display-multiple-items="2" :vertical="true">
						<swiper-item class="alijus" v-for="(swipers,index) in item.childDate" :key="swipers.id"
							@click="test(index)">
							<view class="width80p paddleft10 alijusstart">
								<view class="stus"></view>
								<view class="paddleft10 font14 fcor666 text1 width70">
									{{swipers.title}}
								</view>
								<view class="width25 font13 fcor999">{{swipers.timeData}}</view>
							</view>
							<view class="width20 alijus">
								<image class="icon15" mode="widthFix" src="../../../static/img/jt.png"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 轮播图 -->
			<view class="swiper mart20" v-if="item.type == 2">
				<view class="swiper-box">
					<swiper circular="true" autoplay="true" @change="swiperChange">
						<swiper-item v-for="swiper in item.childCategory" :key="swiper.id">
							<image :src="imageUrl+swiper.imgData" @click="jumplottery(swiper)"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 加油专区 ,天天好券-->
			<view class="width90 mart20 alijusstart" v-if="item.type == 6 || item.type == 9"
				@click="goGoodsList(item.jumpUrl)">
				<view class="width70 font18 fcor333">
					{{item.name}}
				</view>
				<view class="width30 font14 fotrt fcor666">更多</view>
			</view>
			<view class="width94 alijusnostart mart20" v-if="item.type == 6 ">
				<view class="backcorfff spcarea border-r" v-for="(goods,index1) in item.childDate" :key="index1"
					@click="toGoods(item.detailJumpUrl,goods.id)">
					<image mode="widthFix" class="width100" style="border-radius: 5px; 5px 0 0"
						:src="imageUrl+goods.couponImg"></image>
					<view class="width96 fcor333 font15 fontwig6">{{goods.couponName}}</view>
					<!-- <view class="width96 fcor999 font11">{{goods.salesEndTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}
					</view> -->
					<view class="width94 fcoreb5 font15 fontwig6">¥{{goods.salesPrice}}</view>
				</view>
			</view>
			<view class="width94 alijusnostart mart20" v-if="item.type == 9 ">
				<view class="backcorfff spcarea border-r" v-for="(goods,index2) in item.childDate" :key="index2"
					@click="toGoods(item.detailJumpUrl,goods.id)">
					<image mode="widthFix" class="width100" style="border-radius: 5px; 5px 0 0"
						:src="imageUrl+goods.listImg"></image>
					<view class="width96 fcor333 font15 fontwig6">{{goods.title}}</view>
					<!-- <view class="width96 fcor999 font11" v-if="goods.effectiveTiem">
						{{goods.effectiveTiem | timeFormat('yyyy-mm-dd hh:mm:ss')}}
					</view> -->
					<view class="width94 fcoreb5 font15 fontwig6">¥{{goods.price}}</view>
				</view>
			</view>
			<!-- 惠享生活 -->
			<view class="width90 mart20 alijusstart" v-if="item.type == 5">
				<view class="width70 font18 fcor333">
					惠享生活
				</view>
			</view>
			<image class="width90 mart10" mode="widthFix" v-if="item.type == 5"
				:src="imageUrl+item.childCategory[0].imgData" @click="goGoodsList(item.childCategory[0].jumpUrl)">
			</image>
			<view class="width90 alijusstart mart10" v-if="item.type == 5">
				<image :src="imageUrl+item.childCategory[1].imgData" mode="widthFix" class="width31"
					@click="goGoodsList(item.childCategory[1].jumpUrl)"></image>
				<image :src="imageUrl+item.childCategory[2].imgData" mode="widthFix" class="width31"
					@click="goGoodsList(item.childCategory[2].jumpUrl)"></image>
				<image :src="imageUrl+item.childCategory[3].imgData" mode="widthFix" class="width31"
					@click="goGoodsList(item.childCategory[3].jumpUrl)"></image>
			</view>
		</view>
		<!-- 弹窗 -->
		<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
			<image class="popImg" :src="imageUrl+imgadres3" @click="jumpWeb"></image>
		</wybPopup>
		<view class="height40"></view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		HandleCode,
		getH5AccessToken,
		getCmsContent,
		findByLatAndLng
	} from "../../../Utils/Api.js"; //您的api路径
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
	let app = getApp();
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				showHeader: true,
				isShowAuth: false,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				headerTop: null,
				statusTop: null,
				nVueTitle: null,
				city: '',
				currentSwiper: 0,
				imageUrl: app.globalData.imgUrl,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: '/home/home1.png',
				imgadres1: '/home/home2.png',
				imgadres2: 'jt.png',
				// imgadres5: 'unionarea.png',
				imgadres3: '',
				imgadres4: 'cusservice.png',
				imgadres5: 'loading.gif',
				webUrl: '',
				loadingText: '正在加载...',
				pageNum: 1,
				pageSize: 6,
				// 分类菜单
				homeCateList: [],
				//切换状态
				jumpType: '',
				locationRef: null, // 用于接收定位对象
				isdisplay: true //是否展示
			};
		},

		onShow() {
			this.homeCateList = [];
			if (app.globalData.cityName != '') {
				this.city = app.globalData.qianzhuCityName;
				this.getCmsContentcmsContent();
			}
			// #ifdef H5
			// uni.getStorage({
			// 	key: 'accountId',
			// 	success(e) {
			// 		if (e.data) {
			// 			app.globalData.accountId = e.data;
			// 		}
			// 	}
			// })
			// uni.getStorage({
			// 	key: 'gasKey',
			// 	success(e) {
			// 		if (e.data) {
			// 			app.globalData.gasKey = e.data;
			// 		}
			// 	}
			// })
			// uni.getStorage({
			// 	key: 'staffCode',
			// 	success(e) {
			// 		if (e.data) {
			// 			if (app.globalData.accountId == '000001&key' || app.globalData.accountId ==
			// 				'000000&gasKey' || app.globalData.accountId == '000009&key' || app.globalData
			// 				.accountId == '0000010&key') {
			// 				app.globalData.staffCode = e.data;
			// 			} else {
			// 				app.globalData.mchId = e.data;
			// 			}
			// 		}
			// 	}
			// })
			// #endif
		},
		onLoad(options) {
			let that = this;
			// #ifdef MP
			// 1.wx获取登录用户code
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					app.globalData.code = loginRes.code;
					// 请求接口
					let params = {
						code: app.globalData.code
					}
					HandleCode(params).then(res => {
						if (res.return_code == '000000') {
							app.globalData.openId = res.return_data.openId;
						}
					})
				},
			})
			//定位
			that.postionIng();
			// #endif
			// #ifdef H5
			// if (app.globalData.h5code) {
			// 	that.getH5AccessToken();
			// }
			uni.showLoading({
				title: '加载中'
			})
			var geolocation = new qq.maps.Geolocation('7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB', "嗨森逛");
			// 回调的第一次参数为成功后具体的位置信息
			geolocation.getLocation(
				res => {
					uni.hideLoading();
					app.globalData.latitude = res.lat;
					app.globalData.longitude = res.lng;

					uni.setStorage({
						key: "latitude",
						data: res.lat
					})

					uni.setStorage({
						key: "longitude",
						data: res.lng
					})
					that.findByLatAndLng(res.lng, res.lat);
				},
				err => {
					uni.hideLoading();
					uni.showModal({
						title: '获取定位权限失败,默认城市重庆市',
						content: '请确定手机定位已打开，并且当前浏览器允许获取定位，都开启后请刷新页面。'
					})
					that.city = '重庆市';
					app.globalData.cityName = '重庆市';
					app.globalData.cityId = '500000';
					that.getCmsContentcmsContent();
					that.getCmsAactibity();
				}
			);
			// #endif
			uni.getStorage({
				key: "user",
				success(e) {
					app.globalData.userInfo = e.data //这就是你想要取的token
					uni.getStorage({
						key: 'token',
						success(e) {
							app.globalData.token = e.data;
						}
					})
				},
				fail: res => {}
			})
			if (JSON.stringify(options.id)) {
				app.globalData.identificationCode = options.id;
				return;
			}
			var arr1mp = decodeURIComponent(options.q);
			if (arr1mp) {
				var arr2mp = arr1mp.split('=');
				if (arr2mp) {
					app.globalData.identificationCode = arr2mp[2];
				}
			}

		},
		methods: {
			jumpcdx() {
				location.href =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa075e8509802f826&redirect_uri=https%3A%2F%2Fhsg.dctpay.com%2FhsgH5%2Findex.html%23%2F&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
			},
			//获取首页功能
			getCmsContentcmsContent() {
				let code;
				// #ifdef H5
				code = '2'
				// #endif
				// #ifdef MP
				code = '1'
				// #endif
				let params = {
					companyId: app.globalData.companyId,
					platform: code,
					categoryCode: 'CMS_HOME'
				}
				getCmsContent(params).then(res => {
					this.isdisplay = false;
					if (res.return_code == '000000') {
						this.homeCateList = res.return_data;
					}
				});
			},
			//弹窗
			getCmsAactibity() {
				let code;
				// #ifdef H5
				code = '2'
				// #endif
				// #ifdef MP
				code = '1'
				// #endif
				let params = {
					companyId: app.globalData.companyId,
					platform: code,
					categoryCode: 'CMS_HOME_POPOVER'
				}
				getCmsContent(params).then(res => {
					if (res.return_code == '000000' && res.return_data.childCategory.length != 0) {
						//弹窗首页广告
						this.showPopup();
						this.imgadres3 = res.return_data.childCategory[0].imgData;
						this.webUrl = res.return_data.childCategory[0].jumpUrl;
						this.jumpType = res.return_data.childCategory[0].jumpType;
					}
				});
			},
			//显示弹出
			showPopup() {
				this.$refs.popup.show();
			},
			close() {
				this.isShowAuth = false;
			},
			//关闭弹窗
			closePopup() {
				this.$refs.popup.hide();
			},

			/**
			 * 跳转外链
			 */
			jumpWeb() {
				if (this.jumpType == 1) {
					if (this.webUrl) {
						uni.navigateTo({
							url: '../order/webUrl/webUrl?url=' + this.webUrl
						})
					}
				} else {
					uni.navigateTo({
						url: this.webUrl
					})
				}

				this.closePopup();
			},
			/**
			 * 定位
			 */
			postionIng() {
				uni.showLoading({
					title: '加载中'
				})
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						app.globalData.latitude = res.latitude;
						app.globalData.longitude = res.longitude;
						uni.hideLoading();
						that.findByLatAndLng(res.longitude, res.latitude);
					},
					fail: (err) => {
						if (err.errCode == 2) {
							uni.showToast({
								title: '请开启系统定位',
								duration: 3000,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '定位失败,请重新进入小程序',
								duration: 3000,
								icon: 'none'
							})
						}
					}
				})
			},
			// 获取精准定位
			getLocation() {
				uni.showLoading({
					title: '加载中'
				})
				let that = this;
				that.locationRef.getLocation() // 调用 getLocation 方法获取精准定位
					.then(res => {
						uni.hideLoading();
						// res 就是返回的数据
						app.globalData.latitude = res.lat;
						app.globalData.longitude = res.lng;
						that.findByLatAndLng(res.lng, res.lat);
					})
			},
			//经纬度转换
			findByLatAndLng(item, item1) {
				let that = this;
				let datas = {
					lng: item,
					lat: item1
				}
				findByLatAndLng(datas).then(res => {
					if (res.return_code == '000000') {
						that.city = res.return_data.provinceName;
						app.globalData.cityName = res.return_data.provinceName;
						app.globalData.qianzhuCityName = res.return_data.cityName;
						app.globalData.cityId = res.return_data.regionId;
						app.globalData.companyId = res.return_data.companyId;
						uni.setStorage({
							key: "cityId",
							data: res.return_data.regionId
						})
						uni.setStorage({
							key: "cityName",
							data: res.return_data.provinceName
						})
						uni.setStorage({
							key: "qianzhuCityName",
							data: res.return_data.cityName
						})
						uni.setStorage({
							key: "companyId",
							data: res.return_data.companyId
						})
						// app.globalData.cityId = '500103';
						if (res.return_data.regionId) {
							that.getCmsAactibity();
							that.getCmsContentcmsContent();
						}
						uni.getStorage({
							key: 'accountType',
							success(e) {
								if (e.data) {
									app.globalData.accountType = e.data;

									// 000000#/  一健加油
									// 000000&gasKey  加油员
									// 000001&key 领取优惠券
									// 002  积分专区
									// 003  星巴克
									// 004  肯德基
									// 005  会员充值
									// 006  话费充值
									// 007  在线加油
									// 008  工会卡卡券
									// 009  分销推广优选商品
									// 0010 只跳首页
									// 0011 扫码领取优惠券
									// 0012 分享领取优惠券
									// 0013 分享界面

									if (e.data == '000000#/' && app.globalData.h5code) {
										uni.navigateTo({
											url: '../../goods/refuel-details/refuel-details'
										})
									}
									if (e.data == '000000&gasKey' && app.globalData.h5code) {
										uni.navigateTo({
											url: '../../goods/refuel-details/refuel-details'
										})
									}
									if (e.data == '000001&key') {
										uni.navigateTo({
											url: '/subPages/scancodeCoupons/scancodeCoupons'
										})
									}

									if (e.data == '000002&key' && app.globalData.h5code) {
										uni.navigateTo({
											url: '/pages/goods/goods-list/goods-list?id=2'
										})
									}
									if (e.data == '000003&key' && app.globalData.h5code) {
										uni.navigateTo({
											url: '/qianzhu-Starbucks/home/home'
										})
									}
									if (e.data == '000004&key' && app.globalData.h5code) {
										uni.navigateTo({
											url: '../../../qianzhu-KFC/home/home'
										})
									}
									if (e.data == '000005&key' && app.globalData.h5code) {
										uni.navigateTo({
											url: '/member-Recharge/choicepage/choicepage'
										})
									}
									if (e.data == '000006&key' && app.globalData.h5code) {
										uni.navigateTo({
											url: '../../../subPages/recharge/recharge'
										})
									}
									if (e.data == '000007&key' && app.globalData.h5code) {
										uni.navigateTo({
											url: '../../goods/refuel/refuel'
										})
									}
									if (e.data == '000008&key' && app.globalData.h5code) {
										uni.navigateTo({
											url: '../../goods/goods-list/goods-list?id=5'
										})
									}
									if (e.data == '000009&key' && app.globalData.h5code) {
										uni.navigateTo({
											url: '/subPages/selectEntry/selectEntry'
										})
									}
									// if (e.data == '0000011&key' && app.globalData.h5code) {
									// 	uni.navigateTo({
									// 		url: '../../goods/externalCoupon/externalCoupon'
									// 	})
									// }
									// if (e.data == '0000012&key' && app.globalData.h5code) {
									// 	uni.navigateTo({
									// 		url: '/subPages/shareCounpon/shareCounpon'
									// 	})
									// }
									// if (e.data == '0000013&key' && app.globalData.h5code) {
									// 	uni.navigateTo({
									// 		url: '/subPages/shareImgage/shareImgage'
									// 	})
									// }
								}
							}
						})
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			//H5 获取openId
			getH5AccessToken() {
				let params = {
					code: app.globalData.h5code
				}
				getH5AccessToken(params).then(res => {
					if (res.return_code == '000000' && res.return_data.openid) {
						app.globalData.openId = res.return_data.openid;
						uni.setStorage({
							key: "openId",
							data: res.return_data.openid
						})
					} else {
						this.jumpcdx();
					}
				});
			},
			//搜索跳转
			toSearch() {
				uni.navigateTo({
					url: '../../goods/HM-search/HM-search'
				})
			},
			//跳转位置
			goPostion() {
				uni.navigateTo({
					url: '/pages/user/positioning/positioning'
				})
			},
			//商品跳转
			toGoods(e, id) {
				uni.navigateTo({
					url: e + id
				});
			},

			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			test(item) {
				let datas = [];
				for (var i = 0; i < this.homeCateList.length; i++) {
					if (this.homeCateList[i].type == 3) {
						datas.push(this.homeCateList[i])
					}
				}
				let jumpid = datas[0].childDate[item].type;
				uni.navigateTo({
					url: '../../user/news/news?id=' + jumpid
				})
			},

			eheckStu(item) {
				this.cpStuats = item;
			},
			//获取登陆信息
			getuserinfos() {
				let that = this;
				// 获取微信用户信息
				uni.getUserProfile({
					desc: '登录中...',
					success: function(res) {
						let params = {
							openId: app.globalData.openId,
							iv: res.iv,
							encryptedData: res.encryptedData
						}
						getUserInfo(params).then(res => {
							if (res.return_code == '000000') {
								uni.hideLoading();
								uni.showToast({
									title: '获取信息成功',
									icon: 'none',
									duration: 2000
								})
								app.globalData.userInfo = res
									.return_data
									.object
									.highUser;
								app.globalData.token = res
									.return_data.uniqueCode;
								uni.setStorage({
									key: "user",
									data: res.return_data
										.object
										.highUser
								})
								uni.setStorage({
									key: "token",
									data: res.return_data
										.uniqueCode
								})
							} else {
								uni.hideLoading();
								uni.showToast({
									title: res.return_msg,
									icon: 'none',
									duration: 2000
								})
							}
						});
					},
					fail: res => {
						uni.hideLoading();
						uni.showToast({
							title: "微信登录授权失败",
							icon: "none"
						});
					}
				})
			},
			//跳转菜单
			toCategory(item) {
				uni.navigateTo({
					url: item.jumpUrl
				})
			},
			//轮播跳转活动
			jumplottery(item) {
				if (item.jumpUrl) {
					uni.navigateTo({
						url: item.jumpUrl
					})
				}

			},
			//跳转商品列表
			goGoodsList(item) {
				uni.navigateTo({
					url: item
					// '/pages/goods/goods-list/goods-list?id=' + item
				})
			},
			//拨打客服电话
			playPhone() {
				uni.showModal({
					title: '客服',
					content: '4006780738',
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: '4006780738', //电话号码
								success: function(e) {
									console.log(e);
								},
								fail: function(e) {
									console.log(e);

								}
							})
						}
					}
				})
			}
		},

	};
</script>
<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.popImg {
		width: 100%;
		height: 100%;
		min-height: 430px;
	}

	.h5xfimg {
		width: 80rpx;
		bottom: 140rpx;
		position: fixed;
		right: 40rpx;
	}

	.xfimg {
		width: 80rpx;
		bottom: 60rpx;
		position: fixed;
		right: 40rpx;
	}

	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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
	}

	button::after {
		border: none
	}

	.pullDown-effects {
		position: fixed;
		//top: calc(100upx - 36vw);
		top: 0;
		z-index: 9;
		width: 100%;
		height: 36vw;
		/*  #ifdef  APP-PLUS  */
		padding-top: var(--status-bar-height);

		/*  #endif  */
		image {
			width: 100%;
			height: 36vw;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		background-color: #3da7e7;
		top: 0;
		z-index: 10;

		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */

		.addr {
			width: 120upx;
			height: 45rpx;
			flex-shrink: 0;
			display: flex;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			align-items: center;
			font-size: 28upx;
			color: #FFFFFF;

			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}

		.input-box {
			width: 100%;
			height: 70rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			position: relative;
			display: flex;
			align-items: center;

			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}

			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
				width: 100%;
			}
		}

		.icon-btn {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			margin-left: 5px;
			display: flex;

			.icon {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 42upx;
				background-color: transparent;
			}
		}
	}

	//弹窗
	button::after {
		border: none
	}

	.category-list {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.category {
			margin-top: 40upx;
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 9vw;
					height: 9vw;
				}
			}

			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
			}
		}
	}


	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 92%;
			height: 100px;
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

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

				swiper-item {
					image {
						width: 100%;
						height: 100px;
					}
				}
			}
		}
	}

	.spcarea {
		width: 31%;
		margin-left: 2%;
		padding-bottom: 10px;
	}

	.message {
		border: 1px solid #f1f1f1;
		height: 60px;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		z-index: 1;
		padding-top: 5px;
		padding-bottom: 5px;

		swiper {
			width: 100%;
			height: 60px;

			swiper-item {
				view {
					height: 20px;
				}
			}
		}

		.stus {
			width: 5px;
			height: 5px;
			background-color: red;
			border-radius: 50%;
		}
	}
</style>