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

<template>
	<view>
		<!-- 状态栏 -->

		<view v-if="!isdisplay" :style="{height:StatusBar,backgroundColor: bgColor}" class="status">

		</view>


		<view class="" :style="{paddingTop:StatusBar,position:'relative',}">

			<!-- 定位城市 position:'relative' ,top:StatusBar,-->
			<view  v-if="!isdisplay" class="city-con dis-flex padleft15" :style="{ height:CustomBar+'px', }">
				<view class="addr" @click="goPostion">
					{{ city }}
					<image mode="aspectFit" style="width: 15px;height: 15px;" :src="imagewxUrl+imgadres2"></image>
				</view>
			</view>

			<!-- 顶部导航栏 -->
			<view  v-if="!isdisplay"  class="header"
				:style="{ position: 'sticky',top:StatusBar,height:Number(CustomBar + 5) +'px',backgroundColor: bgColor,}">

				<view :style="{width:width}" class="header-chid">
					<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="aspectFit" class="icon30"
								style="height: 30px;"></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>


			<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="">
				<!-- 顶部菜单 -->
				<view class=" backcorltop " v-if="item.type == 1">
					<view class="category-list ">
						<view class="category margb40upx" style="width: 25%;" v-for="(row, indexs) in item.childCategory"
							:key="indexs" @click="toCategory(row)">
							<view class="img">
								<image class="verc" :src="imageUrl+row.imgData"></image>
							</view>
							<view class="text fcorfff">{{ row.title }}</view>
						</view>
					</view>
				</view>
				<!-- 顶部活动图片 -->
				<image class="width100 verc backcolorfff" style="min-height: 90px;" mode="widthFix" :src="imagewxUrl+imgadres" v-if="item.type == 8"></image>

				<!-- 中间菜单 -->
				<view class="category-list pdb40upx  backcorfff" style="" 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 class="verc" mode="aspectFit" :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">更多<text class="icon-ymt to-right fcor666 font14"></text>
					</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="aspectFill" class="width100" style="border-radius: 5px 5px 0 0;height: 100px;"
							:src="imageUrl+goods.couponImg"></image>
						<view class="width96 fcor333 font15 fontwig6">{{goods.couponName}}</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="width94 fcoreb5 font15 fontwig6">¥{{goods.price}}</view>
					</view>
				</view>
				<!-- 大图 -->
				<view class="width90 mart10 alijusstart" v-if="item.type == 4" @click="goGoodsList(item.jumpUrl)">
					<view class="width70 font18 fcor333">
						{{item.name || ''}}
					</view>
				</view>
				<image class="width90 mart10" mode="widthFix" style="min-height: 123px;border-radius: 15rpx;" v-if="item.type == 4"
					:src="imageUrl+item.childCategory[0].imgData" @click="goGoodsList(item.childCategory[0].jumpUrl)">
				</image>
				<!-- 惠享生活 -->
				<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" style="min-height: 100px;" class="width31"
						@click="goGoodsList(item.childCategory[1].jumpUrl)"></image>
					<image :src="imageUrl+item.childCategory[2].imgData" mode="widthFix" style="min-height: 100px;" class="width31"
						@click="goGoodsList(item.childCategory[2].jumpUrl)"></image>
					<image :src="imageUrl+item.childCategory[3].imgData" mode="widthFix" style="min-height: 100px;" 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>
	</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,



				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, //是否展示

				StatusBar: this.StatusBar + 'px',
				Custom: this.Custom,
				width: '100%',
				CustomBar: this.CustomBar,
				bgColor: '#3da7e7',
				// dhTop:Number(this.StatusBar+this.CustomBar)+'px' 


			};
		},

		onShow() {
			// this.homeCateList = [];
			if (app.globalData.cityName != '') {
				this.city = app.globalData.qianzhuCityName;
				if (app.globalData.isSelect) {
					this.getCmsContentcmsContent();
				}
			}
		},
		onPageScroll(obj) {
			// console.log(obj,"obj")
			if (obj.scrollTop >= this.CustomBar) {
				this.width = this.Custom.left + 'px';
				this.bgColor = "#089bf5";
			} else {
				this.width = "100%";
				this.bgColor = "#3da7e7";
			}
		},
		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;
						}
					})
				},
			})
			// #endif
			//定位
			that.postionIng();

			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') {
						app.globalData.isSelect = false;
						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
	}
	
	.bgLinear{
		background: linear-gradient(to bottom, #ffffff, #F5F5F5) no-repeat;
	}
	
	.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%;
		position: fixed;
		z-index: 10;
		transition: 0.2s all linear;
		top: 0;

	}


	.addr {
		// width: 120upx;
		height: inherit;
		flex-shrink: 0;
		display: flex;
		// overflow: hidden;
		// -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;
		}
	}

	.city-con {
		background-color: #3da7e7;
	}

	.header {
		box-sizing: border-box;
		z-index: 999;
		transition: 0.2s all linear;

		.header-chid {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 4px 10px 4px 10px;
			box-sizing: border-box;
			transition: 0.2s all linear;
		}



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

			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				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
	}

	.margb40upx{
		margin-bottom:40upx;
	}
	.pdb40upx{
		padding-bottom: 40upx;
	}
	.category-list {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		
		
		.category {
			margin-top: 40upx;
			// margin-bottom: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>