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

<template>
	<view class="map-container">
		<!-- #ifdef H5 -->
		<map id="myMap" style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude"
			:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
			<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
				<cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image>
			</cover-view>
			<!-- 一级分类 -->
			<cover-view class="width100 cover-views  mart15">
				<scroll-view class="width90 cover-view-cont" scroll-x="true">
					<cover-view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
						v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
					</cover-view>
				</scroll-view>
				<!-- 二级分类 -->
				<cover-view class="width100 mart15 backcorfff cover-viewchage alijus fotct"
					style="border-radius: 22px;">
					<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
					<cover-view class="font14 width30w fotct onchange text1"
						@click="changeChilerType()">{{selectFirstName}}
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
					</cover-view>
					<cover-view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
					</cover-view>
					<cover-view class="font14 width30w">
						<!-- 全部
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
					</cover-view>
				</cover-view>
			</cover-view>
			<!-- //模态框 -->
			<cover-view class="change-cont" v-if="selectChiler == 1 || selectChilerdistance == 1">
				<cover-view class="width100 backcorfff"></cover-view>
			</cover-view>
			<!-- //显示内容 -->
			<cover-view class="change-optiac paddbotm20" v-if="selectChiler == 1">
				<scroll-view scroll-y="true" class="width100 height260">
					<cover-view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
						v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
						<cover-view class="width90w font14"
							:class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}</cover-view>
						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
							v-if="selectFirst == item.id"></image>
					</cover-view>
				</scroll-view>
			</cover-view>
			<!-- 二级距离 -->
			<cover-view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
				<scroll-view scroll-y="true" class="width100 height260">
					<cover-view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
						v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
						<cover-view class="width90w font14"
							:class="[ distance== item.id? 'onchange' : '']">{{item.title}}</cover-view>
						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
							v-if="distance == item.id"></image>
					</cover-view>
				</scroll-view>
			</cover-view>

			<!-- 未打开筛选前 -->
			<cover-view class="cover-view-foot" v-if="isSelected == 1">
				<cover-view class="line-view" @click="updateSelected(2)"></cover-view>
				<cover-view class="paddtop10 fcor666 font13 width100" @click="updateSelected(2)">点击发现更多商户</cover-view>
				<cover-view class="input-box">
					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
						@click="updateSelected(2)" />
				</cover-view>
			</cover-view>

			<!-- 打开筛选后 -->
			<cover-view class="cover-view-foot-behind" v-if="isSelected == 2">
				<cover-view class="line-view" @click="updateSelected(1)"></cover-view>
				<cover-view class="paddtop10 fcor666 font13 width100" @click="updateSelected(1)">点击发现更多商户</cover-view>
				<cover-view class="input-box">
					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
						@input="getMapStore()" />
				</cover-view>
				<scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
					<cover-view v-if="marker.length == 0 " class="mart30 fotct font14 fcor666 fotct width100">
						<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
					</cover-view>
					<cover-view class="width96 height80 bor-botm1 alijusstart" v-for="(box,i) in marker" :key="i"
						@click="seeloaction(box)">
						<template v-if="box.id != 0">
						<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r" 
						@error="imgerror($event, i )"	style="width: 50px;flex-shrink: 0;">
						</image>
						<cover-view class="fotlt paddleft5 flex-1">
							<cover-view class="text2 width100 font16 fontwig6">
								{{box.callout.content}}
							</cover-view>
							<cover-view class="height22">
								<cover-view class="width70 flleft text1 font13 fcor999">
									{{box.callout.address}}
								</cover-view>
								<cover-view class="width30 flright font13 fcor666 fotrt">
									<image mode="aspectFit" :src="imagewxUrl+imgadres4" class="marglerig" style="width: 10px;height:10px"></image>
									{{box.distance}}km
								</cover-view>
							</cover-view>
						</cover-view>
						</template>
					</cover-view>
				</scroll-view>
			</cover-view>
		</map>
		<!-- #endif -->

		<!-- #ifdef MP -->
		<map id="myMap" style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude"
			:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
			<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
				<cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image>
			</cover-view>
			<!-- 一级分类 -->
			<view class="width100 cover-views  mart15">
				<scroll-view class="width90 cover-view-cont" scroll-x="true">
					<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
						v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
					</view>
				</scroll-view>
				<!-- 二级分类 -->
				<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
					<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
					<view class="font14 width30w fotct onchange text1" @click="changeChilerType()">{{selectFirstName}}
						<image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image>
					</view>
					<view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
						<image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image>
					</view>
					<view class="font14 width30w">
						<!-- 全部
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
					</view>
				</view>
			</view>
			<!-- //模态框 -->
			<view class="change-cont" v-if="selectChiler == 1 || selectChilerdistance == 1">
				<view class="width100 backcorfff"></view>
			</view>
			<!-- //显示内容 -->
			<view class="change-optiac paddbotm20" v-if="selectChiler == 1">
				<scroll-view scroll-y="true" class="width100 height260">
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
						v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
						<view class="width90w font14" :class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}
						</view>
						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
							v-if="selectFirst == item.id"></image>
					</view>
				</scroll-view>
			</view>
			<!-- 二级距离 -->
			<view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
				<scroll-view scroll-y="true" class="width100 height260">
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
						v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
						<view class="width90w font14" :class="[ distance== item.id? 'onchange' : '']">{{item.title}}
						</view>
						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
							v-if="distance == item.id"></image>
					</view>
				</scroll-view>
			</view>

			<!-- 未打开筛选前 -->
			<view class="cover-view-foot" v-if="isSelected == 1">
				<view class="line-view" @click="updateSelected(2)"></view>
				<view class="paddtop10 fcor666 font13 width100" @click="updateSelected(2)">点击发现更多商户</view>
				<view class="input-box">
					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
						@click="updateSelected(2)" />
				</view>
			</view>

			<!-- 打开筛选后 -->
			<view class="cover-view-foot-behind" v-if="isSelected == 2">
				<view class="line-view" @click="updateSelected(1)"></view>
				<view class="paddtop10 fcor666 font13 width100" @click="updateSelected(1)">点击发现更多商户</view>
				<view class="input-box">
					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
						@input="getMapStore()" />
				</view>
				<scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
					<view v-if="marker.length == 0 " class="mart30 fotct font14 fcor666 fotct width100">
						<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
					</view>
					<view class="width96 height80 bor-botm1 alijusstart" v-for="(box,i) in marker" :key="i"
						@click="seeloaction(box)">
						<template v-if="box.id != 0">
						<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r"
						@error="imgerror($event, i )"	style="width: 50px;flex-shrink: 0;">
						</image>
						<view class="fotlt paddleft5 flex-1">
							<view class="text2 width100 font16 fontwig6">
								{{box.callout.content}}
							</view>
							<view class="height22">
								<view class="width70 flleft text1 font13 fcor999">
									{{box.callout.address}}
								</view>
								<view class="width30 flright font13 fcor666 fotrt">
									<image mode="aspectFit" :src="imagewxUrl+imgadres4" class="marglerig" style="width: 10px;height: 10px;"></image>
									{{box.distance}}km
								</view>
							</view>
						</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</map>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		getIndustry,
		getMapStore
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				latitude: '', //纬度
				longitude: '', //经度
				mapContext: null,
				scale: 13, //缩放级别
				bottomData: false,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres2: 'xiala.png',
				imgadres3: 'noorder.png',
				imgadres4: 'dh.png',
				marker: [], //商户
				typeid: 99999999, //选择分类
				isSelected: 1, //是否选择下拉
				selectFirst: '99999999', //筛选是否有值
				selectFirstName: '全部', //筛选值名字
				selectChiler: 2, // 一级子菜单筛选
				selectChilerdistance: 2, // 二级子菜单筛选
				goodsFirstClassList: [{
					"childIndustry": null,
					"createTime": 1640252815000,
					"name": "全部",
					"id": 99999999,
					"wechatCompanyCode": "716",
					"wechatName": "全部",
					"ext3": null,
					"parentId": 1,
					"wechatSelfEmployedCode": "719",
					"ext2": null,
					"status": 1,
					"ext1": "650"
				}], //商品一级分类
				goodsSendotClassList: [{
					"childIndustry": null,
					"createTime": 1640252998000,
					"name": "全部",
					"id": 99999999,
					"wechatCompanyCode": "716",
					"wechatName": "全部",
					"ext3": null,
					"parentId": 13,
					"wechatSelfEmployedCode": "719",
					"ext2": null,
					"status": 1,
					"ext1": "642"
				}], //商品一级分类
				distanceList: [{
						id: 1,
						title: '1km'
					},
					{
						id: 3,
						title: '3km'
					},
					{
						id: 5,
						title: '5km'
					},
				], //距离
				distance: '3',
				distanceName: '3km',
				searchName: '', //搜索名称
				typeplat: 1 //手机类型
			}
		},
		onLoad() {
			this.onControltap();
		},
		onReady() {
				this.mapContext = uni.createMapContext('myMap');
				console.log(this.mapContext)
		},
		onShow() {
			// this.latitude = app.globalData.latitude;
			// this.longitude = app.globalData.longitude;
			/* this.onControltap(); */
		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '100vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '200rpx'
				}
				return data
			}
		},

		methods: {
			//查询商户列表
			getIndustry() {
				getIndustry().then(res => {
					 
					this.goodsFirstClassList=[{
						"childIndustry": null,
						"createTime": 1640252815000,
						"name": "全部",
						"id": 99999999,
						"wechatCompanyCode": "716",
						"wechatName": "全部",
						"ext3": null,
						"parentId": 1,
						"wechatSelfEmployedCode": "719",
						"ext2": null,
						"status": 1,
						"ext1": "650"
					}];
					
					if (res.return_code == '000000') {
						for (var i = 0; i < res.return_data.length; i++) {
							this.goodsFirstClassList.push(res.return_data[i]);
						}
						// this.typeid = res.return_data[0].id;
						// this.goodsSendotClassList = res.return_data[0].childIndustry;
						// this.selectFirst = res.return_data[0].childIndustry[0].id;
						// this.selectFirstName = res.return_data[0].childIndustry[0].name;
						let platform = uni.getSystemInfoSync().platform;
						if (platform == 'android') {
							this.typeplat = 2;
							this.getMapStore();
						}
						if (platform == 'ios' || platform == 'devtools') {
							this.typeplat = 1;
							this.getMapStore();
						}
					}
				})
			},
			//查询商户
			getMapStore() {
				uni.showLoading({
					title: '加载中...'
				})
				let childId = '';
				if (this.selectFirst == 99999999) {
					childId = '';
				} else {
					childId = this.selectFirst
				}
				let datas = {
					distance: this.distance,
					name: this.searchName,
					type: this.typeplat,
					childId: childId,
					longitude: this.longitude,
					latitude: this.latitude
				}
				getMapStore(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.marker = res.return_data;
						// console.log(this.marker,"marker")
					} else {
						this.marker = [];
					}

					this.marker.push({
						id: 0,
						latitude: this.latitude,
						longitude: this.longitude,
						iconPath: '/static/img/location.png',
						rotate: 1,
						alpha: 1,
						width: 40,
						height: 40,
						callout:{},

					})

				})
			},
			//选择二级分类数据
			changeFirstcont(item) {
				this.selectFirst = item.id;
				this.selectFirstName = item.name;
				this.selectChiler = 2;
				this.getMapStore();
			},
			//选择距离
			changeDistance(item) {
				this.distance = item.id;
				this.distanceName = item.title;
				this.selectChilerdistance = 2;
				this.getMapStore();
			},
			//地图点击事件,点击标记点时触发
			markertap(e) {
				// console.log(e,"点击标记点时触发");
				let markerId = e.detail.markerId;
				if(markerId == 0) return; /* 点击当前自己定位的标记点*/
				for (var i = 0; i < this.marker.length; i++) {
					if (markerId == this.marker[i].id) {
						this.seeloaction(this.marker[i]);
					}
				}
			},
			//地图点击事件,点击标记点对应的气泡时触发，
			callouttap(e) {
				// console.log(e, "点击标记点对应的气泡")
				let markerId = e.detail.markerId;
				if(markerId == 0) return;
				for (var i = 0; i < this.marker.length; i++) {
					if (markerId == this.marker[i].id) {
						this.seeloaction(this.marker[i]);
					}
				}
			},

			postionIng() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						app.globalData.latitude = res.latitude;
						app.globalData.longitude = res.longitude;
						that.findByLatAndLng(res.longitude, res.latitude);
						// uni.request({
						// 	url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude +
						// 		',' + res.longitude + '&key=7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB',
						// 	data: {},
						// 	success: function(res) {
						// 		that.city = res.data.result.address_component.city.replace(/市/g,
						// 			'');
						// 		app.globalData.cityId = res.data.result.ad_info.adcode;
						// 		// app.globalData.cityId =  '500100';
						// 		that.getMerchantList();
						// 	}
						// })
					}
				})
			},
			//金纬度转
			findByLatAndLng(item, item1) {
				let datas = {
					lng: item,
					lat: item1
				}
				findByLatAndLng(datas).then(res => {
					if (res.return_code == '000000') {
						this.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.cityId = '500100';
						if (res.return_data.result.addressComponent.adcode) {
							this.getMerchantList();
						}
					}
				});
			},
			// 商户列表
			getMerchantList() {
				let params = {
					regionId: app.globalData.cityId
				}
				getMerchantList(params).then(res => {
					if (res.return_code == '000000' && res.return_data != '') {
						this.MerchantList = res.return_data;
						this.showCategoryIndex = res.return_data[0].merchantName;
						this.showCategoryIndexId = res.return_data[0].id;
						this.pageNum = 1;
						this.pageSize = 10;
						this.isNoMoreData = false;
						this.categoryList = [];
						this.getStoreListByMerchant();

					} else {
						this.MerchantList = [];
						uni.showToast({
							title: '暂无数据',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//跳转位置
			goPostion() {
				uni.navigateTo({
					url: '/pages/user/positioning/positioning'
				})
			},
			//门店列表
			getStoreListByMerchant() {
				console.log(222);
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					return false;
				}
				let pagenum = this.pageNum;
				let params = {
					merchantId: this.showCategoryIndexId,
					longitude: app.globalData.longitude,
					latitude: app.globalData.latitude,
					pageNum: pagenum,
					pageSize: this.pageSize

				}
				getStoreListByMerchant(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						uni.hideLoading();
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						this.categoryList = this.categoryList.concat(res.return_data.list);
						if (res.return_data.total == (this.pageNum * this.pageSize)) {
							this.isNoMoreData = true;
						}
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.categoryList = [];
					}
				})
			},
			// 定位点击事件
			onControltap() {
				uni.showLoading({
					title: '定位中'
				})
				uni.getLocation({
					geocode: true,
					type: 'wgs84',
					success: (res) => {
						uni.hideLoading();
						// console.log(res, '获取当前位置')
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						
						if(this.mapContext){
						this.mapContext.moveToLocation({
							latitude: this.latitude,
							longitude: this.longitude,
							success(res){
								// console.log(res,"成功")
							}
						})
						}

						console.log(this.longitude, this.latitude, "this.longitude,this.latitude")
						this.getIndustry();
					},
					fail() {
						uni.hideLoading();
					},
					address: (res) => {
						console.log('address', res)
					}
				});
			},
			//选择类型
			changeType(item) {
				this.typeid = item.id;
				if (item.id == 99999999) {
					this.goodsSendotClassList = [{
						"childIndustry": null,
						"createTime": 1640252998000,
						"name": "全部",
						"id": 99999999,
						"wechatCompanyCode": "716",
						"wechatName": "全部",
						"ext3": null,
						"parentId": 13,
						"wechatSelfEmployedCode": "719",
						"ext2": null,
						"status": 1,
						"ext1": "642"
					}];
					this.selectFirst = '99999999';
					this.selectFirstName = '全部';
				} else {
					this.goodsSendotClassList = item.childIndustry;
					this.selectFirst = item.childIndustry[0].id;
					this.selectFirstName = item.childIndustry[0].name;
				}

				this.getMapStore();
			},
			//子菜单显示
			changeChilerType() {
				if (this.selectChiler == 1) {
					this.selectChiler = 2;
				} else {
					this.selectChilerdistance = 2;
					this.selectChiler = 1;
				}
			},
			//距离显示
			changeChilerdistance() {
				if (this.selectChilerdistance == 1) {
					this.selectChilerdistance = 2;
				} else {
					this.selectChiler = 2;
					this.selectChilerdistance = 1;
				}

			},
			// 是否选择下拉
			updateSelected(item) {
				this.isSelected = item;
			},
			seeloaction(item) {
				console.log(item,"item");
				uni.openLocation({
					latitude: parseFloat(item.latitude), //目的地的定位
					longitude: parseFloat(item.longitude), //目的地的定位
					name: item.callout.content,
					address: item.callout.address
				})
				

				/* 
				window.location.href =
					`http://apis.map.qq.com/uri/v1/marker?marker=coord:(${item.latitude},${item.longitude})&addr:${item.address}`;
				uni.openLocation({
					latitude: Number(item.latitude), //目的地的定位
					longitude: Number(item.longitude), //目的地的定位
					name: item.store_name,
					address: item.address
				})
				 */

			},
			// 图片出错
			imgerror(e,index){
				console.log(e,index,"图片出错")
				this.marker[index].logo = this.imagewxUrl+this.imgadres3;
			}
		}
	}
</script>
<style lang='less' scoped>
	
	image{will-change: transform}
	
	.map-container {
		position: relative;
		overflow: hidden;

		.cover-views {
			position: absolute;
			z-index: 99999;
		}

		.cover-view-cont {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			white-space: nowrap;
		}

		.cover-view-head {
			height: 35px;
			line-height: 35px;
			background-color: #fff;
			display: inline-table;
			flex-direction: column;
			text-align: center;
			position: relative;
			margin-right: 15px;
			border-radius: 22px;
			padding: 0 10px;
		}

		.cover-viewchage {
			height: 35px;
		}

		.onchange {
			color: #089bf5;
		}

		.onclick {
			background-color: #089bf5;
			color: #fff;
		}

		.cover-view-loca {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			color: #484848;
			background-color: #fff;
			background-size: 60px 60px;
			background-position: center center;
			position: absolute;
			bottom: 100px;
			right: 16px;
		}

		.cover-image {
			display: inline-block;
			width: 20px;
			height: 20px;
		}

		.cover-view-foot {
			text-align: center;
			height: 200rpx;
			background-color: #fff;
			position: absolute;
			bottom: 0px;
			width: 100%;
			border-radius: 18px 18px 0 0;
		}

		.change-cont {
			position: absolute;
			z-index: 99999999;
			top: 100px;
			background-color: #333;
			width: 100%;
			opacity: 0.8;
			height: calc(100% - 100px);
		}

		.change-optiac {
			position: absolute;
			z-index: 99999999;
			top: 100px;
			width: 100%;
			background-color: #fff;
			height: 260px;
		}

		.cover-view-foot-behind {
			text-align: center;
			height: calc(100% - 110px);
			background-color: #fff;
			position: absolute;
			z-index: 999999;
			bottom: 0px;
			width: 100%;
			border-radius: 18px 18px 0 0;
		}
	}

	.scoroll-cont {
		height: calc(100% - 80px);
	}

	.line-view {
		width: 10%;
		margin-left: 45%;
		height: 5px;
		border-radius: 12px;
		margin-top: 10px;
		background-color: #f0f0f0;
	}

	.input-box {
		width: 90%;
		margin-left: 5%;
		margin-top: 5px;
		text-align: left;
		height: 70rpx;
		background-color: #f0f0f0;
		border-radius: 22px;
		position: relative;
		align-items: center;
		display: flex;

		input {
			padding-left: 12px;
			padding-right: 12px;
			height: 30px;
			color: #666;
			font-size: 14px;
			width: 100%;
		}
	}

	.onclick {
		background-color: #089bf5;
		color: #fff;
	}

	.recontleft {
		margin-left: 10px;
	}
</style>