<template>
	<view class="container">
		<view class="containertop">
			<view class="nav">
				<view @click="goSelectCity()" class="citys" style="margin-right: 5px;">
					<p>{{cityname}}</p>
				</view>
				<view class="search" @tap="goSearch()">
					<image src="@/static/img/home/search.png" mode="aspectFill"></image>
					<input type="text" placeholder="请输入美食, 地点" readonly>
					<view class="button">搜索</view>
				</view>
			</view>

			<view class="banner" style="margin-top: 20px;">
				<view class="home-bgi">
					<swiper class="swiper" autoplay="1500" :indicator-dots="true" :circular='true'
						indicator-active-color="#ffffff" indicator-color="#cccccc">
						<swiper-item class="swiper-wrap" v-for="(item,index) in banners" :key='index'
							@tap="toGoodsInfo(item.url)">
							<image :src="item.imageUrl"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="listbox">
				<view class="list">
					<image src="../../static/img/home/meishi.png" class="imgs">
						<p>美食小吃</p>
				</view>
				<view class="list">
					<image src="../../static/img/home/naicha.png" class="imgs">
						<p>甜点饮品</p>
				</view>
				<view class="list">
					<image src="../../static/img/home/chaoshi.png" class="imgs">
						<p>果蔬超市</p>
				</view>
				<view class="list">
					<image src="../../static/img/home/shaokao.png" class="imgs">
						<p>夜宵烧烤</p>
				</view>
			</view>
			<view class="bill">
				<view @click="gochegnxu(2)">
					<image src="../../static/img/home/guanggao.png"></image>
				</view>
				<view @click="gochegnxu(1)">
					<image src="../../static/img/home/guanggao2.png"></image>
				</view>
			</view>
		</view>
		
		<view class="shoplist">
			<!-- <view class="root" style="margin-top: 10upx;" v-if="filterData.length > 1">
				<ren-dropdown-filter v-if="filterData.length > 1" :filterData='filterData' @click="navClick"
					:defaultIndex='defaultIndex' @ed='ed' @dateChange='dateChange'></ren-dropdown-filter>
			</view> -->
			
			<!-- <view class="card-box" v-if="goodsHomeList.length > 0">
				<task-home-list class="task-home" splitLine @click="clickItem" :list="goodsHomeList"></task-home-list>
			</view> -->
			<view class="select-tabs-box">
				<view class="tabs">
					<view class="tab-item" :class="activeTab == 0 ? 'active': ''" @click="navClick({index1: 0, index: '',idx: 0})">综合</view>
					<view class="tab-item" :class="activeTab == 1 ? 'active': ''" @click="navClick({index1: 0, index: 3,idx: 1})">距离</view>
					<view class="tab-item" :class="activeTab == 2 ? 'active': ''" @click="navClick({index1: 0, index: 1,idx: 2})">佣金</view>
					<view class="tab-item select-box" :class="activeTab == 3 ? 'active': ''" @click="showOption = !showOption">
						<text>{{option == 0 ? '双平台' : option == 1 ? '美团' : '饿了么' }}</text>
						<view class="options" v-if="showOption == true">
							<view class="o-item" @tap.stop="optionClick(0)">双平台</view>
							<view class="o-item" @tap.stop="optionClick(1)">美团</view>
							<view class="o-item" @tap.stop="optionClick(2)">饿了么</view>
						</view>
					</view>
				</view>
			</view>
			<shopList :list="goodsHomeList" @click="clickItem"></shopList>
			<view v-if="goodsHomeList.length > 0">
				<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import taskHomeList from "@/components/mask/task-home-list1.vue"
	import shopList from "@/components/mask/shopList.vue"
	var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
	var qqmapsdk;
	export default {
		components: {
			taskHomeList,
			RenDropdownFilter,
			shopList
		},
		data() {
			return {
				endNum: 0,
				shopname:'',
				keyword: '',
				value1: 1,
				value2: 2,
				cityname:'武汉',
				listbanner: [],
				list: [
					{
						name: '综合'
					}, {
						name: '距离'
					}, {
						name: '佣金',
					},
				],
				current: 0,
				value1: 0,
				shoplist:[],
				localCampus: '未知',
				city: '',
				meituanList: {},
				elemeList: {},
				banners: [],
				latitude: '',
				longitude: '',
				mtelmCheck: '',
				authorize: false,
				weizhinames: '',
				weizhidizhi: '',
				categoryHeight: '320rpx', //菜单默认高度
				currentPageindex: 0, //菜单滚动小点
				navlist: [],
				sortType: 0,
				typeId: 0,
				recommendList: [],
				content: "",
				phone: "",
				isDisable: false,
				tuijianList: [],
				goodsHomeList: [],
				page: 1,
				limit: 10,
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				filterData: [
					[{
						text: '综合分类',
						value: ''
					}, {
						text: '返现最高',
						value: 1
					}, {
						text: '最新发布',
						value: 2
					}, {
						text: '距离最近',
						value: 3
					}]
				],
				defaultIndex: [0, 0],
				arr: [],
				showModal: true,
				
				activeTab: 0,
				showOptions: 0,
				option: 0,
				showOption: false,
				classify: ''
				
			}
		},
		onLoad(e) {
			let that = this;
			if (e.userByinvitationId) {
				this.$queue.setData('userByinvitationId', e.userByinvitationId);
			}
		
			// #ifdef MP-WEIXIN
			if (e.scene) {
				const scene = decodeURIComponent(e.scene);
				this.$queue.setData('userByinvitationId', scene.split(',')[0]);
			}
			// #endif
		
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'J5FBZ-XCUKI-UFEG2-5KOJJ-XD4L3-KNFNG'
			});
			that.authorizationLocation();
			this.getBannerList();
			this.getnavlistClassify();
			this.getClassify();
		
			//美团饿了么优惠券开关
		// 	this.$Request.getT('/common/type/138').then(res => {
		// 		if (res.code == 0) {
		// 			if (res.data && res.data.value) {
		// 				this.mtelmCheck = res.data.value;
		// 			}
		// 		}
		// 	});
		
			this.$Request.getT('/banner/selectBannerList?classify=4&state=1').then(res => {
				if (res.code === 0) {
					// this.meituanList = res.data[0];
					this.meituanList = res.data[0];
				}
			});
		// 	this.$Request.getT('/banner/selectBannerList?classify=4&state=2').then(res => {
		// 		if (res.code === 0) {
		// 			this.elemeList = res.data[0];
		// 		}
		// 	});
			
			
			// 订单审核提醒 202
			// 最新活动通知 204
			// 点评提醒 205
			// 活动反馈推送提醒 209
			
			
			// 会员到期提醒 207
			// 收益到账通知 208
			// 积分变动提醒  206
			// 提现审核提醒  203
			
			// that.$Request.getT('/common/type/209').then(res => { //活动反馈推送提醒
			// 	if (res.code == 0) {
			// 		if (res.data && res.data.value) {
			// 			that.arr.push(res.data.value)
			// 		}
			// 	}
			// })
			// that.$Request.getT('/common/type/208').then(res => { //收益到账通知
			// 	if (res.code == 0) {
			// 		if (res.data && res.data.value) {
			// 			that.arr.push(res.data.value)
			// 		}
			// 	}
			// })
			// that.$Request.getT('/common/type/206').then(res => { //积分变动提醒
			// 	if (res.code == 0) {
			// 		if (res.data && res.data.value) {
			// 			that.arr.push(res.data.value)
			// 		}
			// 	}
			// })
		},
		onShow() {
			let that = this;
			var city = this.$queue.getData('city');
			var localCampus = this.$queue.getData('localCampus');
			if (city && localCampus) {
				console.log(city)
				this.latitude = this.$queue.getData('latitude');
				this.longitude = this.$queue.getData('longitude');
				this.city = city;
				this.localCampus = localCampus;
				this.$queue.remove('localCampus');
				this.page = 1;
				this.getHaoDianTuiJian1();
				this.getHaoDianTuiJian();
			}
			
			let userId = this.$queue.getData('userId');
			if (userId) {
				//订阅
				if (!uni.getStorageSync('sendindexMsg')) {
					// this.openMsg()
				}
			}
		},
		methods: {
			optionClick(idx){
				this.option = idx;
				let d = {index1: 0, index: 4,idx: 3}
				if(idx == 0){
					this.classify = ''
				} else if(idx == 1){
					this.classify = 1
				} else{
					this.classify = 2
				}
				
				this.navClick({index1: 0, index: 4,idx: 3})
				this.showOption = false;
				
			},
			change(index) {
				this.current = index;
			},
			//跳转到选择城市界面
			goSelectCity() {
				uni.navigateTo({
					url: '/pages/index/citys'
				})
			},
			//跳转到任务详情
			totasks() {
				uni.navigateTo({
					url: '/pages/index/tasksdetails',
				})
			},
			openMsg() {
					var that = this
					wx.getSetting({
						withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
						success(ret) {
							// console.log(ret,'------------------')
							// console.log(Object.keys(ret.subscriptionsSetting.itemSettings).length)
							// if (JSON.stringify(ret.subscriptionsSetting.itemSettings).indexOf('accept')!=-1) {
							if (ret.subscriptionsSetting.itemSettings) {
								uni.setStorageSync('sendindexMsg', true)
								uni.openSetting({ // 打开设置页 
									success(rea) {
										console.log(rea.authSetting)
									}
								});
							} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
								uni.setStorageSync('sendindexMsg', false)
								uni.showModal({
									title: '提示',
									content: '为了更好的体验,请绑定消息推送',
									confirmText: '确定',
									cancelText: '取消',
									success: function(res) {
										if (res.confirm) {
											uni.requestSubscribeMessage({
												tmplIds: that.arr,
												success(re) {
													// console.log(re,'**********')
													var datas = JSON.stringify(re);
													if (datas.indexOf("accept") != -1) {
														console.log(re)
													}
												},
												fail: (res) => {
													console.log(res)
												}
											})
											that.showModal = false
										} else if (res.cancel) {
											that.showModal = true
										}
									}
								})
							}
						}
					})
				},
				
				// 点击优惠券跳转小程序
				gochegnxu(classify) {
					let token = this.$queue.getData('token');
					let userId = this.$queue.getData('userId');
					if (token) {
						if (uni.getStorageSync('sendindexMsg')) {
							uni.requestSubscribeMessage({
								tmplIds: this.arr,
								success(re) {
									// console.log(re,'**********')
									var datas = JSON.stringify(re);
									if (datas.indexOf("accept") != -1) {
										console.log(re)
									}
								},
								fail: (res) => {
									console.log(res)
								}
							})
						}
						if (classify == 1) { //美团
							// #ifdef MP-WEIXIN
							uni.navigateToMiniProgram({
								appId: 'wxde8ac0a21135c07d',
								path: this.meituanList.url,
								fail(res) {
									console.error(res)
								}
							})
							// #endif
						} else if (classify == 2) { //饿了么
							// #ifdef MP-WEIXIN
							uni.navigateToMiniProgram({
								appId: 'wxece3a9a4c82f58c9',
								path: this.elemeList.url,
								fail(res) {
									console.error(res)
								}
							})
							// #endif
						}
					} else {
						this.goLogin();
					}
				},
				tuijianClickItem(index) {
					let token = this.$queue.getData('token');
					let userId = this.$queue.getData('userId');
					if (token) {
						if (uni.getStorageSync('sendindexMsg')) {
							uni.requestSubscribeMessage({
								tmplIds: this.arr,
								success(re) {
									// console.log(re,'**********')
									var datas = JSON.stringify(re);
									if (datas.indexOf("accept") != -1) {
										console.log(re)
									}
								},
								fail: (res) => {
									console.log(res)
								}
							})
						}
						uni.navigateTo({
							url: '/pages/index/tuijianList'
						});
					} else {
						this.goLogin();
					}
				},
				ed(res) {
					console.log(res)
				},
				dateChange(d) {
					console.log(d)
				},
				getHaoDianTuiJian() {
					this.loadingType = 1;
					uni.showLoading({
						title: '加载中...',
					});
					let data = {
						page: 1,
						limit: 4,
						longitude: this.longitude,
						latitude: this.latitude,
						city: this.city,
						search: '',
						isGoods: '1'
					}
					this.$Request.getT('/wm/selectHomeGoodsList', data).then(res => {
						if (res.code === 0) {
							this.tuijianList = [];
			
							res.data.list.forEach(d => {
								d.distance = this.setMorKm(d.distance);
								this.tuijianList.push(d)
							});
						}
						uni.hideLoading();
					})
				},
				getHaoDianTuiJian1() {
					this.loadingType = 1;
					uni.showLoading({
						title: '加载中...',
					});
					let data = {
						page: this.page,
						limit: this.limit,
						longitude: this.longitude,
						latitude: this.latitude,
						city: this.city,
						search: '',
						sort: this.sortType,
						typeId: this.typeId,
						classify: this.classify
					}
					this.$Request.getT('/wm/selectHomeGoodsList', data).then(res => {
						if (res.code === 0) {
							if (this.page === 1) {
								this.goodsHomeList = [];
							}
			
							res.data.list.forEach(d => {
								d.distance = this.setMorKm(d.distance);
								this.goodsHomeList.push(d)
							});
							if (res.data.list.length === this.limit) {
								this.loadingType = 0;
							} else {
								this.loadingType = 3;
							}
						} else {
							this.loadingType = 2;
						}
						uni.hideLoading();
					})
				},
				setMorKm(m) {
					var n = ''
					if (m) {
						if (m >= 1000) {
							n = (m / 1000).toFixed(0) + 'km'
						} else {
							n = parseInt(m) + 'm'
						}
					} else {
						n = '0m'
					}
					return n
				},
				getClassify() {
					this.$Request.getT('/helpClassify/selectClassifyList').then(res => {
						if (res.code === 0) {
							this.navlist = res.data;
						}
					});
				},
				getnavlistClassify() {
					this.$Request.getT('/banner/selectBannerList?state=-1&classify=2').then(res => {
						if (res.code === 0) {
							let dataList = [];
							let data = {
								text: '全部品类',
								value: 0
							}
							dataList.push(data);
			
							res.data.forEach(d => {
								let data = {
									text: '',
									value: ''
								}
								data.text = d.name;
								data.value = d.id;
								if (d.state == 1) {
									dataList.push(data);
								}
			
							});
							this.filterData.push(dataList);
						}
					});
				},
				initLocation(latitude, longitude) {
					var that = this;
					console.log('1234')
					qqmapsdk.reverseGeocoder({
						location: latitude + ',' + longitude || '',
						success: function(res) { //成功后的回调
							if (res.status == 0) {
								console.log(res)
								that.authorize = false;
								var res = res.result;
								that.latitude = latitude;
								that.longitude = longitude;
								that.$queue.setData('latitude', latitude)
								that.$queue.setData('longitude', longitude)
								let s = res.ad_info.city.substring(0, res.ad_info.city.length - 1);
								that.city = s;
								that.$queue.setData('city', that.city);
								that.localCampus = res.address_reference.landmark_l2.title;
								that.getHaoDianTuiJian1();
								that.getHaoDianTuiJian();
							}
						},
						fail: function(error) {
							console.error(error);
						},
						complete: function(res) {
							console.log(res);
						}
					})
				},
				startSetting() {
					let that = this;
					// #ifdef APP-PLUS
					permision.gotoAppSetting();
					// #endif
					// #ifdef MP-WEIXIN
					uni.openSetting({
						success(res3) {
							console.log(res3)
							if (res3.authSetting[
									'scope.userLocation'
								]) {
								uni.hideToast();
								that.initMyPosition();
							} else {
								that.authorizationLocation();
							}
							// 已授权-(获取位置信息)
						}
					});
					// #endif
				},
				initMyPosition() {
					let that = this;
					uni.getLocation({
						type: 'gcj02',
						altitude: true,
						success: res => {
							console.log(res,'aaaa')
							that.initLocation(res.latitude, res.longitude);
						}
					});
				},
				authorizationLocation: function() {
					let that = this;
					// #ifdef MP-WEIXIN
					uni.getSetting({
						success(res1) {
							if (!res1.authSetting['scope.userLocation']) {
								// 未授权
								uni.authorize({
									scope: 'scope.userLocation',
									success() { //1.1 允许授权
										that.initMyPosition();
									},
									fail() { //1.2 拒绝授权
										that.authorize = true; //用户是否拒绝了定位授权 true:用户拒绝 false:用户授权
									}
								})
							} else {
								// 已授权-(获取位置信息)
								that.initMyPosition();
							}
						}
					});
					// #endif
					// #ifdef H5
					that.initMyPosition();
					// #endif
				},
				getBannerList() {
					this.$Request.getT('/banner/selectBannerList?state=-1&classify=1').then(res => {
						if (res.code === 0) {
							this.banners = [];
							res.data.forEach(d => {
								if (d.state == 1) {
									this.banners.push(d);
								}
							});
							console.log(this.banners)
						}
					});
				},
				// 轮播图跳转小程序
				toGoodsInfo: function(url) {
					if (uni.getStorageSync('sendindexMsg')) {
						uni.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								// console.log(re,'**********')
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									console.log(re)
								}
							},
							fail: (res) => {
								console.log(res)
							}
						})
					}
					let token = this.$queue.getData('token');
					let userId = this.$queue.getData('userId');
					if (url.indexOf('/pages/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/public/webview?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif
					}
				},
				goSearch() {
					if (uni.getStorageSync('sendindexMsg')) {
						uni.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								// console.log(re,'**********')
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									console.log(re)
								}
							},
							fail: (res) => {
								console.log(res)
							}
						})
					}
					uni.navigateTo({
						url: '/pages/task/search'
					});
				},
				goSelectCity() {
					if (uni.getStorageSync('sendindexMsg')) {
						uni.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								// console.log(re,'**********')
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									console.log(re)
								}
							},
							fail: (res) => {
								console.log(res)
							}
						})
					}
					if (!this.authorize) {
						uni.navigateTo({
							url: '/pages/index/selectCampus?city=' + this.city
						});
					} else {
						this.startSetting();
					}
				},
				goLogin() {
					this.$queue.setData('href', '/pages/index/index');
					uni.navigateTo({
						url: '/pages/public/login'
					});
				},
				navClick: function(res) {
					if (uni.getStorageSync('sendindexMsg')) {
						uni.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								// console.log(re,'**********')
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									console.log(re)
								}
							},
							fail: (res) => {
								console.log(res)
							}
						})
					}
					console.log('点击', res)
					this.activeTab = res.idx
					this.page = 1;
					if (res.index1 == 0) {
						this.sortType = res.index ? res.index : 0;
						this.getHaoDianTuiJian1();
					} else if (res.index1 == 1) {
						this.typeId = res.index ? res.index : 0;
						this.getHaoDianTuiJian1();
					}
				},
				clickItem: function(options) {
					let token = this.$queue.getData('token');
					let userId = this.$queue.getData('userId');
					if (token) {
						if (uni.getStorageSync('sendindexMsg')) {
							uni.requestSubscribeMessage({
								tmplIds: this.arr,
								success(re) {
									// console.log(re,'**********')
									var datas = JSON.stringify(re);
									if (datas.indexOf("accept") != -1) {
										console.log(re)
									}
								},
								fail: (res) => {
									console.log(res)
								}
							})
						}
						uni.navigateTo({
							url: '/pages/index/tasksdetails?goodsId=' + options.item.goodsId + '&latitude=' + this
								.latitude + '&longitude=' + this.longitude
						})
					} else {
						this.goLogin();
					}
				},
				toNavList: function(item) {
					let token = this.$queue.getData('token');
					let userId = this.$queue.getData('userId');
					if (token) {
						if (uni.getStorageSync('sendindexMsg')) {
							uni.requestSubscribeMessage({
								tmplIds: this.arr,
								success(re) {
									// console.log(re,'**********')
									var datas = JSON.stringify(re);
									if (datas.indexOf("accept") != -1) {
										console.log(re)
									}
								},
								fail: (res) => {
									console.log(res)
								}
							})
						}
						uni.navigateTo({
							url: '/pages/task/tasklist?searchValue=&classifyId=' + item.id + '&name=' + item
								.classifyName
						});
					} else {
						this.goLogin();
					}
				},
				// 传进数组和指定个数，进行拆分
				chunk: function(array, size) {
					const length = array.length
					if (!length || !size || size < 1) {
						return []
					}
					let index = 0
					let resIndex = 0
					let result = new Array(Math.ceil(length / size))
					while (index < length) {
						result[resIndex++] = array.slice(index, (index += size))
					}
					return result
				},
				topScrollTap: function() {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}
			},
			onPageScroll: function(e) {
				this.scrollTop = e.scrollTop > 200;
			},
			onReachBottom: function() {
				this.page = this.page + 1;
				this.getHaoDianTuiJian1();
			}
	}

	// 		this.$Request.getT('/banner/selectBannerList?classify=4&state=2').then(res => {
	// 			if (res.code === 0) {
	// 				this.elemeList = res.data[0];
	// 			}
	// 		});
</script>

<style lang="scss">
	page {
		width: 100%;
		// overflow: hidden;
		background-color: #F6F6F6;
	}
	.home-bgi {
		width: 100%;
		height: 260rpx;
		background: #FFF;

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

			.swiper-wrap {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					display: block;
				}
			}

		}
	}

	.containertop {
		background-color: #FFFFFF;
	}

	.banner {
		padding: 0 32rpx;
	}
	.nav p {
		font-size: 14px;
		margin-top: 5px;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.nav {
		display: flex;
		padding: 0 32rpx;
	}

	.nav .citys {
		width:40px;
		font-size: 14px;
		font-weight: 500;
		font-family: PingFang SC;
	}

	.nav .search {
		flex: 1;
	}

	.imgs {
		width: 48px;
		height: 48px;
	}

	.list p {
		font-size: 12px;
		color: #2E2E2E;
	}

	// .banner {
	// 	width: 344px;
	// 	height: 131px;
	// }

	.listbox {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-around;
		flex-direction: row;
		margin-top: 18px;
	}

	.list {
		width: 48px;
		height: 71px;
	}

	.bill {
		display: flex;
		justify-content: space-between;
		width: 93%;
		margin: 0 auto;
		margin-top: 15px;
	}

	.bill image {
		width: 164px;
		height: 84px;
		float: left;
	}

	.nav2 {
		display: flex;
		font-size: 12px;
		font-family: PingFang SC;
		color: #C1C1C1;
		width: 100%;
		background-color: #FFFFFF;
	}



	.nav2 .tabs {
		flex: 1;
	}

	.nav2 .dropdown {
		width: 24%;
		background-color: #FFFFFF;
		margin-right: 26px;
		color: #C1C1C1;
	}
	.select-tabs-box{
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 22rpx 72rpx 0;
		font-size: 24rpx;
		color: #C1C1C1;
		.tabs{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.tab-item{
				&.active{
					border-bottom: 4rpx solid #FF4848;
					padding-bottom: 10rpx;
					color: #FF4848;
				}
			}
			.select-box{
				width: 74rpx;
				text-align: center;
				position: relative;
				.options{
					width: 158rpx;
					padding: 30rpx 0 0;
					position: absolute;
					top: 47rpx;
					left: -42rpx;
					background: #fff;
					z-index: 99;
					.o-item{
						width: 100%;
						text-align: center;
						font-size: 24rpx;
						color: #2E2E2E;
						margin-bottom: 30rpx;
					}
				}
			}
		}
	}

	.search {
		width: 530rpx;
		height: 58rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		border: 2rpx solid #9F9F9F;
		border-right: none;
		padding-left: 20rpx;
		image{
			width: 25rpx;
			height: 25rpx;
			margin-right: 8rpx;
		}
		input{
			width:82%;
		}
	}
	.search .button {
		width: 84rpx;
		height: 58rpx;
		background: linear-gradient(90deg, #F65646 0%, #FF3B27 100%);
		border-radius: 8rpx;
		text-align: center;
		line-height: 58rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.logo {
		width: 30px;
		height: 100px;
		border-radius: 0 6px 6px 0;
		position: relative;
	}
	
	.logo image{
		width: 24px;
		height: 24px;
		left: 2px;
		position: absolute;
	}
	
	.m{
		background-color: #FED810;
	}
	
	.e{
		background-color: #349CFC;
	}
	
	.logo  .top{
		height: 50px;
		background-color: #349CFC;
		border-radius: 0 6px 0 0;
		position: relative;
	}
	
	.logo .bottom{
		height: 50px;
		background-color: #FED810;
		border-radius: 0  0 6px 0;
		position: relative;
	}
	
	.logo .bottom image{
		bottom:0px;
	}
	
	
</style>
