<template>
	<view id="warpMap">
		<top-nav-bar :config="topNavBar" :isTaskInfo="isTaskInfo" @goBack="goBack"></top-nav-bar>
		<map 
			id="map"
			ref="map"
			style="width: 100vw;height: 100vh;"
			subkey="WANBZ-6C56D-6P34Y-HWNMG-YHAH7-BJFP5"
			layer-style="1"
			:latitude="defauleMap.latitude" 
			:longitude="defauleMap.longitude"
			:scale="scale"
			:max-scale="maxScale"
			:markers="markers" 
			:circles="circles"
			:enable-satellite="enableSatellite"
			:enable-traffic="enableTraffic"
			:enable-poi="enable_poi"
			:enable-building="enable_building"
			show-location
			@callouttap="onSelectCar"
			@tap="onMap"
		>
			<view slot="callout">
				<block v-for="(item,index) in markers" :key="index">
					<block v-if="!isTaskInfo">
						<cover-view class="customCallout" :marker-id="item.id">
							<cover-image 
								class="qipao_img"
								:src="`../../static/images/index/${item.id == selectCarId?'customCallout_select.png':'customCallout.png'}`"
							></cover-image>
							<cover-view class="qipao_title">{{item.vehicleCode}}</cover-view>
						</cover-view>
					</block>
					<block v-if="isTaskInfo">
						<cover-view class="customCallout2" :marker-id="item.id">
							<cover-image 
								class="qipao_img2"
								:src="`../../static/images/index/${item.id == selectCarId?'customCallout_select.png':'customCallout.png'}`"
							></cover-image>
							<cover-view class="qipao_title2">
								<cover-view class="carCode2">{{item.vehicleCode}}</cover-view>
								<cover-view class="carLength2">距目的地:{{distance?distance:0}}</cover-view>
								<cover-view class="carLength2">需{{expectArriveDate?expectArriveDate:0}}</cover-view>
							</cover-view>
						</cover-view>
					</block>
				</block>
			</view>
		</map>
		<!-- 右侧tab -->
		<view class="rig_broadside">
			<view class="nav_right mar_bot">
				<image
					class="toggle_view" 
					@tap="onChangeScale(1)" 
					src="../../static/images/index/big.png"
				></image>
				<image 
					class="toggle_view" 
					@tap="onChangeScale(-1)" 
					src="../../static/images/index/small.png"
				></image>
			</view>
			<view v-if="!isTaskInfo" class="nav_right mar_bot">
				<image 
					class="toggle_view" 
					@tap="prevCar" 
					src="../../static/images/index/prev.png"
				></image>
				<image 
					class="toggle_view" 
					@tap="nextCar" 
					src="../../static/images/index/next.png"
				></image>
			</view>
			<view v-if="!isTaskInfo" class="nav_right">
				<image 
					class="toggle_view" 
					@tap="changeList" 
					:src="`../../static/images/index/${showTopCarList?'carList_y.png':'carList.png'}`"
				></image>
			</view>
		</view>
		<!-- 左侧tab -->
		<view class="lef_broadside">
			<image 
				class="nav_lef" 
				@tap="openTraffic" 
				:src="`../../static/images/index/${enableTraffic?'condition_t.png':'condition_f.png'}`"
			></image>
			<image 
				 v-if="!isTaskInfo"
				class="nav_lef" 
				@tap="openSatellite" 
				:src="`../../static/images/index/${enableSatellite?'wx_1.png':'wx.png'}`"
			></image>
			<image 
				v-if="!isTaskInfo"
				class="nav_lef" 
				@tap="goCurrent" 
				src="../../static/images/index/current.png"
			></image>
			<image 
				 v-if="!isTaskInfo"
				class="nav_lef" 
				@tap="changeCurrent" 
				src="../../static/images/index/changeCarYard.png"
			></image>
		</view>
		<!-- 底部tab -->
		<view v-if="!isTaskInfo" class="bot_tabbar">
			<image 
				class="my" 
				src="../../static/images/index/car_List.png" 
				@tap="goUrlList('/pages/carList/carList')"
			></image>
			<image 
				class="carList" 
				src="../../static/images/index/car_bg2.png" 
				@tap="goUrlList('/pages/dispatch/dispatch')"
			></image>
			<image 
				class="warn" 
				src="../../static/images/index/renwuList.png"
				@tap="goUrlList('/pages/taskList/taskList')"
			></image>
		</view>
		<!-- 车辆详情card-->
		<view v-show="showCarInfo">
			<view class="bot_module">
				<view class="b_m_header">
					<view class="b_m_h_lef">
						<view class="b_m_h_l_top">
							<image src="../../static/images/index/car_info_icon.png"></image>
							<view class="mar_lef font_w">
								{{selectCarInfo.vehicleCode}} {{selectCarInfo.contactPerson}}
							</view>
							<uni-tag 
								class="gps_type" 
								type="primary" 
								:text="selectCarInfo.gpsSignalSource" 
								size="mini" 
								inverted="true"
							></uni-tag>
						</view>
						<view class="b_m_h_l_top mar_top">
							<view 
								class="status" 
								:style="{background:selectCarInfo.bgColor}"
							>{{ selectCarInfo.gpsStateTxt }}</view>
							<view class="mar_lef">{{selectCarInfo.gpsStateText}}</view>
						</view>
					</view>
					<view class="b_m_h_rig">
						<image 
							@tap="callPhone(selectCarInfo.contactPhone,selectCarInfo.id)" 
							src="../../static/images/index/call_phone.png"
						></image>
					</view>
				</view>
				<view class="b_m_cen">
					<view class="row">
						<view class="title">定位时间</view>
						<view>:</view>
						<view class="mar_lef">{{ selectCarInfo.gpsTime }}</view>
					</view>
					<view class="row">
						<view class="title">发动机</view>
						<view>:</view>
						<view class="mar_lef">{{selectCarInfo.acc ? '点火' : '熄火'}}</view>
					</view>
					<view class="row">
						<view class="title">位置</view>
						<view>:</view>
						<view class="mar_lef address"> {{selectCarInfo.address || ''}}</view>
						<view class="seleAddress" @tap="openLoation">导航</view>
					</view>
					
				</view>
				<view class="b_m_footer">
					<navigator 
						class="b_m_f_nav" 
						:url="'/pages/palyBack/palyBack?id='+selectCarId" 
						hover-class="none"
					><text>轨迹</text></navigator>
					<navigator 
						v-if="!isTaskInfo"
						class="b_m_f_nav bor_lef_rig" 
						:url="'/pages/carInfo/carInfo?id='+selectCarId" 
						hover-class="none"
					><text>信息</text></navigator>
					<navigator 
						v-if="!isTaskInfo"
						class="b_m_f_nav" 
						:url="'/pages/carSetting/carSetting?id='+selectCarId" 
						hover-class="none"
					><text>设置</text></navigator>
				</view>
			</view>
		</view>
		<!-- 顶部快捷列表 -->
		<view 
			class="topCarList"
			:style="'position:fixed;top:'+topBarHeight+'px'"
			:class="showTopCarList?'yesLarge':'notLarge'" 
		>
			<scroll-view :class="isIos?'uni-swiper-tab_ios':'uni-swiper-tab'" scroll-y>
				<view v-if="carList.length > 0" class="scrollx_items">
					<block v-for="(item,index) in carList" :key="index">
						<view class="scrollx_items_list">
							<view 
								class="items"  
								:class="item.id == selectCarId?'onItems_bor':'items_bor'"
								@tap="onSelectCarInfo(item.id)"
							>
								<text>{{(item.vehicleCode).substring(0,3)}}</text>  
							</view>
						</view>
						
					</block>
				</view>
				<view v-else class="noCarList">暂无车辆</view>
			</scroll-view>
		</view>		
	</view>
</template>

<script>
	const {urlList,https} = require('@/static/api');
	import {TopNavBar} from '@/components/top-nav-bar/top-nav-bar.vue'
	const menuIconMy = require('../../static/images/index/meIcon.png');
	export default {
		components:{
			TopNavBar
		},
		data() {
			return {
				topNavBar:{
					title:"云车派工", //title
					bgcolor:"#3476FE", //背景颜色
				},
				timer:null,
				defauleMap:{
					latitude:'23.125178',
					longitude:'113.280637',
				},    
				scale:17,              //地图当前缩放级别
				maxScale:20,           //最大缩放
				markers:[],
				circles:[],             //车场
				enable_poi:false,      //是否展示POI点
				enable_building:false,   //是否展示建筑物
				enableSatellite:false,   //是否开启卫星地图
				enableTraffic:false,     //是否开启实时路况
				selectCarId:'',			//当前选择的车辆ID
				selectCarInfo:{},       //当前选择的车辆详情
				showCarInfo:false,      //底部车辆详情显示状态
				carList:[],             //所有的车辆数据
				overspeedCount:0,       //报警数量
				circlesIdx:0,           //当前显示的车场下标
				nowSelectCarIndex:0,    //当前显示的车辆下标
				fd:false,                 //节流状态
				showTopCarList:false,     //顶部快捷列表显示状态
				isTaskInfo:false,         //是否是任务详情过来的
				distance:'',               //距目的地距离
				expectArriveDate:'',		//预计到目的地所需时间
			};
		},
		onLoad(options) {
			let that = this;
			console.log('首页options',options)
			if(options.defauleMap){
				that.defauleMap = JSON.parse(options.defauleMap);
			}else{
				uni.getStorage({
					key:"userCompany",
					success(res) {
						that.defauleMap = {
							latitude:res.data.yardList[0].latitude,
							longitude:res.data.yardList[0].longitude
						};
					}
				});
			};
			if(options.type == 1010){
				console.log('任务详情过来的')
				that.isTaskInfo = true;
				that.topNavBar.title = '查看定位';
				that.selectCarId = options.id;
				let {distance,expectArriveDate} = JSON.parse(options.qiPao);
				that.distance = distance;
				that.expectArriveDate = expectArriveDate;
			}else{
				that.isTaskInfo = false;
			};
			that.getUserInfo();
			setTimeout(()=>{
				that.enable_building = true;  //是否展示建筑物
			},2000)
			setTimeout(()=>{
				that.enable_poi = true;     //是否展示POI点
			},3000)
		},
		onShow() {
			this.getCarYard();
			this.getCarList();
			this.timer = setInterval(() => {
				this.getCarList()
			}, 10*1000);
		},
		computed:{
			isIos(){
				let isIosType = false;
				uni.getSystemInfo({
				    success: function (res) {
				        isIosType = res.platform === 'ios';
				    }
				});
				return isIosType;
			},
			topBarHeight(){
				let marTop = 0;
				uni.getSystemInfo({
				    success: function (res) {
						const {platform,statusBarHeight} = res;
						let height = statusBarHeight +4; //ios 24px
						if (platform.toLowerCase() == "android" ){
							height +=4 //android 28px
						};
						// 胶囊高度 32px 下边框6px height 状态栏高度
						marTop = height+38;
				    }
				});
				return marTop;
			},
		},
		methods:{
			// 回到默认车场
			goCurrent(){ 
				const allLen = this.circles.length;
				this.moveToLocation(this.circles[0]);
				this.circlesIdx = 0;
				this.onMap();
			},
			// 切换车场
			changeCurrent(){
				const allLen = this.circles.length;
				let len = allLen-1;
				let idx = this.circlesIdx;
				if(idx == len){
					this.circlesIdx = 0;
				}else{
					this.circlesIdx +=1;
				};
				this.onMap();
				this.moveToLocation(this.circles[this.circlesIdx]);
			},
			// 点击车辆气泡
			onSelectCar(e){
				let id = e.detail.markerId;
				this.setSelectCar(id);
				this.selectCarId = id;
				if(this.scale == 18){
					this.scale = 17.99;
				}else{
					this.scale = 18;
				};
			},
			// 放大缩小地图
			onChangeScale(type){
				const wxMap = this.enableSatellite;
				const oldScale = this.scale;
				if(type == 1){
					if(wxMap){// 开启了卫星地图
						this.scale = oldScale < 17 ? oldScale + 2 : 17;
					}else{
						this.scale = oldScale < 20 ? oldScale + 2 : 20;
					}	
				}else{
					this.scale = oldScale > 3 ? oldScale - 2 : 3;
				}
			},
			// 点击地图(清除选择的车辆ID和隐藏车辆详情)
			onMap(){
				console.log('点击地图')
				this.showCarInfo = false;
				this.selectCarId = '';
				if(this.scale == 17){
					this.scale = 16.99;
				}else{
					this.scale = 17;
				};
			},
			// 获取所有车辆列表数据
			getCarList(){ 
				https(urlList.getCarList,'GET','','').then(data => {
					let carList = data.data;
					let mapCarList = carList.map(item => {
						switch (item.gpsState) {
							case 0:
								item.gpsStateTxt = '离线';
								item.bgColor = '#999999';
								item.gpsStateText = `${item.offlineTime}`;
								break;
							case 1:
								item.gpsStateTxt = '行驶';
								item.bgColor = '#1AAD19FF';
								item.gpsStateText = `${item.speed}km/h`;
								break;
							case 2:
								item.gpsStateTxt = '静止';
								item.bgColor = '#1B64F8FF';
								item.gpsStateText = `${item.durationTime}`;
								break;
						};
						if (item.contactPerson) {
							item.contactPerson = ` (${item.contactPerson}) `
						};
						return item;
					});
					let newMarkers = [];
					mapCarList.forEach(item => {
						let {id,latitude,longitude,direct,vehicleCode} = item;
						newMarkers.push({
							id,
							vehicleCode,
							latitude,
							longitude,
							iconPath: `../../static/images/index/${ item.gpsState == 0 ? 'stop' : item.gpsState == 1 ? 'road' : 'static'}.png`,
							width: '17px',
							height: '30px',
							rotate: direct,
							anchor: {
								x: .5,
								y: .5
							},
							customCallout: {
								anchorY: .5,
								anchorX: 0,
								display: 'ALWAYS'
							},
						})
					})
					this.markers = newMarkers;
					this.carList = mapCarList;
					if(this.selectCarId){ 
						console.log('selectCarId ')
						this.setSelectCar(this.selectCarId)
					};
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1000
					})
				})
			},
			// 设置气泡置顶显示
			setSelectCar(id){ 
				let oldMarkers = this.markers;
				oldMarkers.forEach(item=>{
					item.zIndex = 1;
				});
				let selectCar = this.carList.find(item => item.id == id);
				this.selectCarInfo = selectCar;
				let markersIdx = oldMarkers.findIndex(item => item.id == id);
				let newCarInfo = oldMarkers.splice(markersIdx, 1)[0];
				newCarInfo.zIndex = 999;
				this.markers.push(newCarInfo);
				this.showCarInfo = true;
				this.moveToLocation(selectCar);
			},
			/*更新当前地图中心位置*/
			moveToLocation(mapInfo) {
				let { latitude, longitude } = mapInfo;
				this.defauleMap = {latitude, longitude};
				setTimeout(()=>{
					this.fd = false;
				},500)
			},
			// 下一辆
			nextCar() {
				this.toggleCar(1)
			},
			// 上一辆
			prevCar() {
				this.toggleCar(-1)
			},
			// 切换车辆
			toggleCar(num) {
				if(this.fd){
					return;
				};
				this.fd = true;
				let carList = this.carList;
				let carListLen = carList.length - 1;
				if (carListLen < 0) {
					uni.showToast({
						title: '暂无车辆信息',
						icon: 'none'
					});
					return
				};
				if(num > 0){
					if(this.nowSelectCarIndex == carListLen){
						this.nowSelectCarIndex = 0;
					}else{
						this.nowSelectCarIndex ++;
					};
				}else{
					if(this.nowSelectCarIndex == 0){
						this.nowSelectCarIndex = carListLen;
					}else{
						this.nowSelectCarIndex --;
					};
				};
				this.selectCarId = carList[this.nowSelectCarIndex].id;
				this.setSelectCar(carList[this.nowSelectCarIndex].id);
				if(this.scale == 18){
					this.scale = 17.99;
				}else{
					this.scale = 18;
				};
			},
			//快捷列表
			changeList(){
				this.showTopCarList = !this.showTopCarList;
			},
			// 快捷列表选择车辆
			onSelectCarInfo(id){
				if(this.fd){
					return;
				};
				this.fd = true;
				this.setSelectCar(id);
				this.selectCarId = id;
				if(this.scale == 18){
					this.scale = 17.99;
				}else{
					this.scale = 18;
				};
			},
			// 开启卫星地图
			openSatellite(){
				this.enableSatellite = !this.enableSatellite;
				if(this.enableSatellite){
					this.scale = 15;
					this.maxScale = 17;
				}else{
					this.scale = 17;
					this.maxScale = 20;
				}
			},
			// 路况
			openTraffic(){ 
				this.enableTraffic = !this.enableTraffic;
			},
			// 导航
			openLoation(){
				const { latitude, longitude, vehiclePlate, vehicleCode} = this.selectCarInfo;
				if(!latitude || !longitude || longitude == 0 || latitude == 0){
					uni.showToast({
						title: '尚未定位',
						icon: 'none'
					});
					return;
				};
				uni.openLocation({
					latitude,
					longitude,
					name:`${vehiclePlate}(${vehicleCode})`
				});
			},
			// 联系司机
			callPhone(phone,id){
				if(!phone){
					uni.showModal({
					    title: '提示',
					    content: '暂未填写车辆联系人',
						confirmText:'去填写',
					    success: function (res) {
					        if (res.confirm) {
					            uni.navigateTo({
					            	url:`/pages/carInfo/carInfo?id=${id}`
					            })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}else{
					uni.makePhoneCall({
					    phoneNumber: phone
					});
				}
			},
			// 查车 / 我的 /报警
			goUrlList(url){
				uni.navigateTo({
					url,
				})
			},
			// 获取车场
			getCarYard(){
				const that = this;
				https(urlList.getUserCompany,'GET','','').then(data => {
					let carYardList = data.data.yardList;
					if(that.selectCarId == ''){
						that.defauleMap = {
							latitude:carYardList[0].latitude,
							longitude:carYardList[0].longitude,
						}
					};
					let circlesList = [];
					carYardList.map(item => {
						let yuan = {
							latitude:item.latitude, 
							longitude:item.longitude, 
							fillColor:'#549FEF4D', 
							radius: 100, 
							color:'#549FEF',
						};
						circlesList.push(yuan);
					});
					
					that.circles = circlesList;
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1000
					})
				})
			},
			// 返回上一页
			goBack(){
				uni.navigateBack()
			},
			getUserInfo(){
				https(urlList.getuserInfo,'GET','','').then(data => {
					console.log('信息',data.data)
					uni.setStorage({
						key:"userinfo",
						data:data.data,
					});
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1000
					})
				})
			},
		},
		onHide() {
			clearInterval(this.timer);
		},
		onUnload(){
			clearInterval(this.timer);
		},
	}
</script>

<style lang="scss" scoped>
	.mar_lef{
		margin-left: 10rpx;
	}
	.mar_top{
		margin-top: 10rpx;
	}
	.mar_bot{
		margin-bottom: 30rpx;
	}
	.bor_lef_rig{
		border-left: 1rpx solid #e7e6ea;
		border-right: 1rpx solid #e7e6ea;
	}
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	} 
	#warpMap{
		height: 100vh;
		width: 750rpx;
		.customCallout {
			box-sizing: border-box;
			width: 128rpx;
			height: 70rpx;
			position: relative;
			color: #1B64F8;
			.qipao_title{
				width: 100%;
				text-align: center;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				margin-top: 12rpx;
				font-size: 28rpx;
			}
			.qipao_img{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
		.customCallout2 {
			box-sizing: border-box;
			width: 330rpx;
			height: 180rpx;
			position: relative;
			.qipao_title2{
				width: 100%;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.carCode2{
					height: 50rpx;
					width: 300rpx;
					font-weight: bold;
					line-height: 50rpx;
				}
				.carLength2{
					width: 300rpx;
					margin-top:5rpx;
					color: #5f5f5f;
				}
			}
			.qipao_img2{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
		.topBar{
			.top_left_text{
				width: 100%;
				height: 100%;
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.top_left_my{
				width: 55rpx;
				height: 55rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.top_left_my_icon{
					width: 63rpx;
					height: 55rpx;
				}
			}
		}
		.bot_tabbar{
			width: 700rpx;
			background: rgba(255 , 255, 255,.42);
			position: fixed;
			bottom: 24rpx;
			left: 25rpx;
			border-radius: 16rpx;
			padding: 25rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			.my{
				width: 95rpx;
				height: 95rpx;
			}
			.carList{
				width: 354rpx;
				height: 100rpx;
			}
			.warn{
				width: 95rpx;
				height: 95rpx;
			}
		}
		.bot_module{
			width: 710rpx;
			background: white;
			position: fixed;
			box-sizing: border-box;
			bottom: 27rpx;
			left: 20rpx;
			z-index: 9999;
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;
			font-size: 28rpx;
			color: #353535;
			display: flex;
			flex-direction: column;
			.b_m_header{
				width: 100%;
				height: 135rpx;
				border-bottom: 1rpx solid #e7e6ea;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.b_m_h_lef{
					height: 100%;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.b_m_h_l_top{
						display: flex;
						flex-direction: row;
						align-items:center;
						image{
							width: 40rpx;
							height: 32rpx;
						}
						.font_w{
							font-size: 31rpx;
							font-weight: bold;
							margin-top: 2rpx;
						}
						.gps_type{
							margin-left: 20rpx;
							margin-bottom:5rpx;
						}
						.status{
							padding: 2rpx 20rpx;
							background: #1B64F8FF;
							color: white;
							border-radius: 8rpx;
							margin-right: 16rpx;
						}
					}
				}
				.b_m_h_rig{
					height: 100%;
					margin-right: 30rpx;
					display: flex;
					align-items: center;
					image{
						width: 65rpx;
						height: 65rpx;
					}
				}
			}
			.b_m_cen{
				width: 100%;
				padding:0rpx 26rpx;
				border-bottom: 1rpx solid #e7e6ea;
				display: flex;
				flex-direction: column;
				.row{
					width: 100%;
					margin-top:8rpx;
					margin-bottom: 7rpx;
					display: flex;
					flex-direction: row;
					align-items:flex-start;
					.title{
						width: 120rpx;
						text-align: justify;
						text-align-last:justify;
						flex-shrink: 0;
						height: 34rpx;
					}
					.title::after{
						width: 100%;
						display: inline-block;
						content: ''; 
						height: 1rpx;
						flex-shrink: 0;
					}
					.address{
						width: 420rpx;
						height: 80rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.seleAddress{
						color: #1B64F8FF; 
						padding-left: 30rpx;
					}
				}
			}
			.b_m_footer{
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: #1B64F8FF;
				.b_m_f_nav{
					width: 33%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.yesLarge{
			transform: scaleY(1);
			-ms-transform:scaleY(1);
			-moz-transform:scaleY(1);
			-webkit-transform:scaleY(1);
			-o-transform:scaleY(1);
			transition: transform 0.5s;
		}
		.notLarge{
			transform: scaleY(0);
			-ms-transform:scaleY(0);
			-moz-transform:scaleY(0);
			-webkit-transform:scaleY(0);
			-o-transform:scaleY(0);
			transition: transform 0.5s;
		}
		.topCarList{
			width: 100%;
			border-bottom: 1rpx solid #eeeeee;
			border-top: 1rpx solid #eeeeee;
			background: white;
			z-index: 9999;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			.uni-swiper-tab_ios{
				width: 100%;
				max-height:212rpx;
			}
			.uni-swiper-tab{
				width: 100%;
				max-height:216rpx;
			}
			.noCarList{
				width: 100%;
				height:216rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #5b5b5b;
			}
			.scrollx_items{
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
				.scrollx_items_list{
					width: 125rpx;
					height: 98rpx;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					.items{
						height:70rpx;
						width: 70rpx;   //750 420+42  330 7  140+16+60 125
						overflow: hidden;
						// margin: 20rpx 0rpx 0rpx 41.14rpx;
						font-size: 24rpx;
						border-radius: 50%;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: center;
					}
					.onItems_bor{
						color:#1B64F8FF;
						border:4rpx solid #1B64F8FF;
					}
					.items_bor{
						color:#999999;
						border:4rpx solid #999999;
					}
				}
				
			}
		}
		/* 侧边栏 */
		.rig_broadside{
			width: 75rpx;
			position: fixed;
			bottom:520rpx;
			right: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.lef_broadside{
			width: 70rpx;
			position: fixed;
			bottom:500rpx;
			left: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.nav_lef{
				height: 116rpx;
				width: 116rpx;
			}
		}
		.nav_right{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.toggle_view{
				width: 100%;
				height: 75rpx;
			}
		}
	}
</style>
