sisMobilePhone/pages/forecast/Forecast.vue

<template>
	<view class="content">
		 <!-- <third-comp :key="menuKey"></third-comp> -->
		 <view v-if="toggleSwitch==false">
		<view>
			<cu-custom bgColor="bg-blacks" :isBack="false">
				<block slot="right"><image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image></block>
				<block slot="right">
					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
						<view class="cu-tag looknumber" style="margin-top: -2%;">
							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
						</view>
					</view>
				</block>
				<block slot="right"></block>
				<block slot="content">{{ address }}</block>
				<block slot="right"><view class="plus" @tap="showModal" data-target="viewModal">+</view></block>
			</cu-custom>
		</view>
		<!-- 地图组件 -->
		<view>
			<div><drawer ref="drawer" ></drawer></div>
			<div class="plusDrawer" @tap="hideModal"><plusDrawer ref="plusDrawer"></plusDrawer></div>
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map  style="width: 100%; height: 300px;"
					
						:controls="controls"
						:circles="circles"
						:polyline="polyline"
						:scale="scale"
						:latitude="latitude"
						:longitude="longitude"
						:markers="covers"
					></map>
				</view>
			</view>
		</view>
		<!--经纬度组件-->
		<view class="InformationCard">
			<view class="informationCardAll">
				<view class="informationCardTextOne">
					<view class="informationCardText">
						<view class="textSilver">经度:</view>
						<view class="textWhite">{{  mapEnd_1 }}</view>
					</view>
				</view>
				<view class="informationCardTextOne">
					<view class="informationCardText">
						<view class="textSilver">纬度:</view>
						<view class="textWhite">{{ mapEnd_2 }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 个人信息组件 -->
		<view class="Personal_information_W">
				<view class="name">姓名：李占国</view>

				<view class="history"  @click="mapDate"> <span class="navigation"></span> </view>

				<view class="skills">技能：电力类，机械类</view>
		</view>
		<!-- 历史曲线组件 -->
		<view class="curve">
			<view class="curve_l">健康情况</view>
			<view class="curve_r" @tap="common.navTo('/components/bracelet/braceletHistoryCurve?braceletCurve=' + braceletCurve)">历史曲线</view>
			<div class="greater"></div>
		</view>
		<!-- 健康详情组件 -->
		<view class="healthy">
			
			<view class="healthy_H">
				<view class="details_z">心跳频率:<!-- ({{ bracelet[deviceName][targetName_xtpl][targetName_xtpl_size].value }}) --></view>
				<view class="details_m">步数:<!-- ({{ bracelet[deviceName][targetName_bs][targetName_bs_size].value }}) --></view>
				<view class="details_y">收缩频率:<!-- ({{ bracelet[deviceName][targetName_ssxy][targetName_ssxy_size].value }}) --></view>
			</view>
			<view class="healthy_N">
				<view class="details_z">舒张压:<!-- ({{ bracelet[deviceName][targetName_szxy][targetName_szxy_size].value }}) --></view>
				<view class="details_m">疲劳度:<!-- ({{ bracelet[deviceName][targetName_pld][targetName_pld_size].value }}) --></view>
				<view class="details_y">血氧浓度:<!-- ({{ bracelet[deviceName][targetName_xynd][targetName_xynd_size].value }}) --></view>
			</view>
		</view>
		</view>
		<view v-if="toggleSwitch==true">
			<WeatherProphethomepage></WeatherProphethomepage>
		</view>
	</view>
</template>

<script>
import res from '../../common/data.json';
import drawer from '../../components/drawer/forecastThreeLineDrawer.vue';
import plusDrawer from '../../components/drawer/plusDrawer.vue';
import WeatherProphethomepage from '../../components/weatherProphethomepage/WeatherProphethomepage.vue';
var _self;
export default {
	components: {
		drawer: drawer,
		plusDrawer: plusDrawer,
		WeatherProphethomepage:WeatherProphethomepage
	},
	data: function() {
		return {
			toggleSwitch:false,
			menuKey:1,
			pointKey: 'MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0087',
			socketTask_bracelet: '',
			socketTask_close_bracelet: '',
			deviceName: 'Y1-A0BC',
			deviceNamePld: 'Y1-A0BC_PLD',
			deviceNameBs: 'Y1-A0BC_BS',
			deviceNameSsxy: 'Y1-A0BC_SSXY',
			deviceNameXtpl: 'Y1-A0BC_XTPL',
			deviceNameXynd: 'Y1-A0BC_XYND',
			deviceNameSzxy: 'Y1-A0BC_SZXY',
			deviceNameLng: 'Y1-A0BC_LNG',
			deviceNameLat: 'Y1-A0BC_LAT',
			bracelet: {
				deviceName: '',
				deviceNamePld: '',
				deviceNameBs: '',
				deviceNameSsxy: '',
				deviceNameXtpl: '',
				deviceNameXynd: '',
				deviceNameSzxy: '',
			},
			braceletCurve: {},
			mapBegin_1:'',
			mapEnd_1:'',
			mapBegin_2:'',
			mapEnd_2:'',
			points:[
				{
					latitude:'',
					longitude:''
				},
				{
					latitude:'',
					longitude:''
				}
			],
			list:{},
			braceletCurve_SSXY: [],
			braceletCurve_PLD: [],
			braceletCurve_SZXY: [],
			braceletCurve_XTPL: [],
			braceletCurve_BS: [],
			braceletCurve_XYND: [],
			braceletCurve_LNG: [],
			braceletCurve_LAT: [],
			/* targetdetail_visable: { targetdetail_target: true, targetdetail_curve: true, targetdetail_histogram: true},
				targetdetail: { targetdetail_target: '', targetdetail_curve: '', targetdetail_histogram: ''}, */
			targetName: '日发电量',
			targetUnit: '万kwh',
			bool:true,
			pld: '',
			ssxy: '',
			lng: '',
			szxy: '',
			lat: '',
			xtpl: '',
			bs: '',
			xynd: '',
			device_nam: '',
			title: 'map',
			latitude: 39.907,//定位中心
			longitude: 116.39742,//
			covers: [
				{
					
					latitude:39.909 , //纬度坐标点
					longitude:116.39742 , //经度
					iconPath: '../../static/picture/forcast/DingWei.png', //显示的图标
					title: '阿打算', //标注点名
					label: {
						//为标记点旁边增加标签
						content: '', //文本1
						color: '#F76350', //文本颜色
						anchorX: 0, //label的坐标，原点是 marker 对应的经纬度
						anchorY: -80, //label的坐标，原点是 marker 对应的经纬度
						// 					    x:39.909,//这个组件微信在1.2.0以后就废弃了
						// 					    y:116.39742,
						bgColor: '#fff', //背景色
						padding: 5, //文本边缘留白
						borderWidth: 1, //边框宽度
						borderColor: '#D84C29', //边框颜色
						textAlign: 'right' //文本对齐方式。
					},
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '地点1',
						color: '#F76350',
						fontSize: 12,
						borderRadius: 5
					}
					// 					 anchor:{//经纬度在标注图标的锚点，默认底边中点
					// 						 x:5,
					// 						 y:1,
					// 					  }
				} , {
								    latitude:39.90   ,//最后点
								    longitude: 116.399,//
								    iconPath: '../../static/picture/forcast/DingWei.png',
									title:'阿迪达斯',
									x:'',//
									y: '',//116.399
									label:{
									        content:'',
									        color:'#F76350',
									        bgColor:'#fff',
									        padding:5,
									        borderRadius:4,
									 },
									 callout:{
									        content:'地点2',
									        color:'#F76350',
									        fontSize:12
									 }
								} 
			],
			scale: 15, //地图层级
			controls: [
				{
					//在地图上显示控件，控件不随着地图移动
					id: 1, //控件id
					/* iconPath: '../../static/picture/forcast/DingWei.png', *///显示的图标
					position: {
						//控件在地图的位置
						left: 15,
						top: 15,
						width: 40,
						height: 40
					}
				}
			],
			circles: [
				{
					//在地图上显示圆
					latitude: 39.9,
					longitude: 116.39,
					fillColor: '#FFC41F', //填充颜色
					color: '#12A1DD', //描边的颜色
					radius: 0, //半径
					strokeWidth: 2 //描边的宽度
				}
			],
			polyline: [
				{    /* .polyline[0].points */
					points:[{}],
					//指定一系列坐标点，从数组第一项连线至最后一项
					/* points: [{ latitude:this.mapBegin_1, longitude:this.mapBegin_2 }, { latitude: this.mapEnd_1, longitude:this.mapEnd_2 }], */
					/* points: [{ latitude: 0, longitude: 0 }, { latitude: 0, longitude: 0 }], */
					color: '#0000AA', //线的颜色
					width: 2, //线的宽度
					dottedLine: true, //是否虚线
					arrowLine: true //带箭头的线 开发者工具暂不支持该属性
				}
			],

			badge: 22,
			inconList: ['form', 'favor', 'question', 'edit'],
			modalName: null,
			address: '宁夏新能源公司',
			drawerList: [
				{
					name: '气象预测'
				}
				/* 	{
						"name": ""
					},
					{
						"name": ""
					},
					{
						"name": ""
					},
					{
						"name": ""
					}, */
			],
			plusDrawerList: [
				{
					name: '宁夏新能源公司',
					windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
				},
				{
					name: '牛首山风电场',
					windPowerStationId: 'NSS_FDC'
				},
				{
					name: '香山风电场',
					windPowerStationId: 'XS_FDC'
				},
				{
					name: '石板泉风电场',
					windPowerStationId: 'SBQ_FDC'
				},
				{
					name: '青山风电场',
					windPowerStationId: 'QS_FDC'
				},
				{
					name: '麻黄山风电场',
					windPowerStationId: 'MHS_FDC'
				}
			]
		};
	},
	mounted() {
		document.querySelector('body').setAttribute('style', 'background-color:#000000');
	},
	onHide() {
		this.$refs.drawer.closeDrawer();
		this.hideModal();
	},
	onShow() {
		this.windPowerStationId = uni.getStorageSync('windPowerStationId');
		this.address = this.getWindPowerStationNameToSessionStorage();
	},
	onLoad(pointKey) {
		let _this = this;
		this.pointKey = pointKey.pointKey;
		this.targetName = pointKey.callTargetName;
		this.targetUnit = pointKey.callTargetUnit;
		this.braceletData();
		/* console.log(_this.bracelet[_this.deviceName]);
			console.log(_this.bracelet[_this.deviceName][_this.targetName_pld][0]); */
		/* uni.getLocation({//获取当前的位置坐标
							type: 'wgs84',
							success: function (res) {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
							}
						}); */
	},
	onReady() {},

	computed: {
		targetName_xtpl: function() {
			return this.deviceName + '_XTPL';
		},
		targetName_xtpl_size: function() {
			return this.bracelet[this.deviceName][this.targetName_xtpl].length - 1;
		},
		targetName_pld: function() {
			return this.deviceName + '_PLD';
		},
		targetName_pld_size: function() {
			return this.bracelet[this.deviceName][this.targetName_pld].length - 1;
		},

		targetName_bs: function() {
			return this.deviceName + '_BS';
		},
		targetName_bs_size: function() {
			return this.bracelet[this.deviceName][this.targetName_bs].length - 1;
		},

		targetName_ssxy: function() {
			return this.deviceName + '_SSXY';
		},
		targetName_ssxy_size: function() {
			return this.bracelet[this.deviceName][this.targetName_ssxy].length - 1;
		},

		targetName_szxy: function() {
			return this.deviceName + '_SZXY';
		},
		targetName_szxy_size: function() {
			return this.bracelet[this.deviceName][this.targetName_szxy].length - 1;
		},

		targetName_xynd: function() {
			return this.deviceName + '_XYND';
		},
		targetName_xynd_size: function() {
			return this.bracelet[this.deviceName][this.targetName_xynd].length - 1;
		},

		backStageIp: function() {
			return this.$store.state.wholeSituationBackStageIp;
		},
		backStagePort: function() {
			return this.$store.state.wholeSituationBackStagePort;
		},
		windpowerstationNameToId: function() {
			return this.$store.state.windpowerstationNameToId;
		}
	},
	methods: {
		mapDate(){
			
		
			
			
				if(this.bool){
					
					this.$delete(this.polyline[0],'points');
					this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
					this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
					
					this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
					this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
					this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
					this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
					for(let val of this.polyline){
					
						this.$set(val,'points',this.points);					
						this.bool = false;
						console.log("true");
					
				}
					/* 定义地图经纬度中心 */
					 var lat= parseFloat(this.mapBegin_2)+parseFloat(this.mapEnd_2);
					 var lng=  parseFloat(this.mapBegin_1)+parseFloat(this.mapEnd_1);
					 
					 this.latitude = lat/2;
					 this.longitude = lng/2;
				}else{
					/* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
					this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
					
					this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
					this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
					this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
					this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
					 */
					
						this.$delete(this.polyline[0],'points');
						
					  /* this.latitude = this.mapBegin_2+this.mapEnd_2/2;
					   this.longitude = this.mapBegin_1+this.mapEnd_1/2; */
					   
						console.log("false");
						/* 还原定位中心位置 */
						this.latitude = this.mapBegin_2;
						this.longitude = this.mapBegin_1;	
							
						this.bool = true;
						
					
				}
				this.$forceUpdate();
			},
		openDrawer: function() {
			this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
		},
		closeDrawer: function() {
			this.drawerIsShow = false;
		},
		pushWindPowerStationNameToSessionStorage(windpowerstationName) {
			uni.setStorageSync('windpowerstationName', windpowerstationName);
			//sessionStorage.setItem('windpowerstationName', windpowerstationName);
			//alert("v"+ sessionStorage.getItem("windpowerstationName"));
			//this.common.goback('/pages/index/Index');
		},
		getWindPowerStationNameToSessionStorage() {
			uni.getStorageSync('windpowerstationName');
			return uni.getStorageSync('windpowerstationName');
		},
		
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
			this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
		},
		hideModal() {
			this.modalName = null;
			this.$refs.plusDrawer.hideModal(this.modalName);
		},
		braceletData() {
			let _this = this;
			let ip;
			
			
			
			uni.request({
				url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/bracelet?beginDate=2020-04-20 09:26:27&&endDate=2020-04-25 09:26:29',
				success: res => {
					ip = res.data;
				}
			});

			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask_bracelet = uni.connectSocket({
				/* 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】 */
				url: 'ws://' + _this.backStageIp + ':' + _this.backStagePort + '/websocket/pageNumber_9/functionNumber_1',
				success(data) {
					console.log('websocket连接成功');
				}
			});

			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			this.socketTask_bracelet.onOpen(res => {
				console.log('WebSocket连接正常打开中...！');
				_this.is_open_socket = true;

				// 注：只有连接正常打开中 ，才能正常收到消息
				_this.socketTask_bracelet.onMessage(res => {
					//console.log("收到服务器内容：" + res.data);

					_this.bracelet = JSON.parse(res.data)[ip];
					_this.braceletCurve = JSON.stringify(_this.bracelet[_this.deviceName]);
					/* 获取起始经纬度 */
					_this.braceletCurve_LNG = _this.bracelet[_this.deviceName][_this.deviceNameLng];
					_this.braceletCurve_LAT = _this.bracelet[_this.deviceName][_this.deviceNameLat];
					_this.mapBegin_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][0].value);
					_this.mapBegin_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][0].value);
					_this.mapEnd_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][_this.braceletCurve_LNG.length-1].value);
					_this.mapEnd_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][_this.braceletCurve_LAT.length-1].value);
					
						
					
					_this.latitude = _this.mapBegin_2;
					_this.longitude = _this.mapBegin_1;
					
					_this.covers[0].latitude = _this.mapBegin_2;
					_this.covers[0].longitude = _this.mapBegin_1;
					_this.covers[1].latitude = _this.mapEnd_2;
					_this.covers[1].longitude = _this.mapEnd_1;
					
					/* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
					this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
					
					this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
					this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
					this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
					this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value; */
					/* _this.mapDate(); */
					/* _this.polyline[0].points[0].latitude=_this.mapBegin_2;
					_this.polyline[0].points[0].longitude=_this.mapBegin_1;
					_this.polyline[0].points[1].latitude=_this.mapEnd_2;
					_this.polyline[0].points[1].longitude=_this.mapEnd_1; */
					/* _this.braceletCurve_SSXY = _this.bracelet[_this.deviceName][_this.deviceNameSsxy];
						_this.braceletCurve_SZXY = _this.bracelet[_this.deviceName][_this.deviceNameSzxy];
						_this.braceletCurve_XYND = _this.bracelet[_this.deviceName][_this.deviceNameXynd];
						_this.braceletCurve_XTPL = _this.bracelet[_this.deviceName][_this.deviceNameXtpl];
						_this.braceletCurve_BS = _this.bracelet[_this.deviceName][_this.deviceNameBs];
						console.log(_this.braceletCurve_BS[0].value); */
				});
			});
			// 这里仅是事件监听【如果socket关闭了会执行】
			this.socketTask_bracelet.onClose(() => {
				uni.request({
					url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/close_bracelet?pointKey=' + _this.pointKey,
					success: res => {}
				});
			});
		}
	}
};
</script>

<style>
body {
	font-family: '方正兰亭细黑_GBK';
	font-size: 15px;
	color: silver;
	background: #000;
}

@font-face {
	font-family: '方正兰亭细黑_GBK';
	src: url(../../static/fzltxh.TTF);
}
.content{
	background-color: #000000;
}
page {
	background-color: #1f1f1f;
	font-family: '方正兰亭细黑_GBK';
	overflow-x: hidden;
}
.top {
	width: 100%;
	height: 130upx;
	padding-top: 5upx;
	background-color: #1f1f1f;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;
}

.threeLine {
	width: 50px;
	height: 45px;
	float: left;
}

.text {
	width: calc(100% - 100px);
	height: 45px;
	float: left;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	line-height: 45px;
	margin-top: 11px;
	font-size: 18px;
}

.notice {
	width: 50px;
	height: 45px;
	float: left;
}

.plus {
	width: 30px;
	height: 45px;
	float: right;
	color: white;
	font-size: 35px;
	line-height: 45px;
	text-align: right;
	margin-right: 2.5%;
}

.textWindpowerstation {
	width: 180px;
	height: 45px;
	float: left;
	text-align: center;
	margin-left: 18px;
}
.InformationCard {
	position: absolute;
	top: 50px;
	left: 0px;
	margin-top: 0px;
	width: 50%;
	height: 8%;
	background: rgba(0, 0, 0, 0);
	float: left;
}
.informationCardAll {
	width: 95%;
	margin-left: 2.5%;
	margin-top: 10px;
	height: 60px;
	float: left;
}
.informationCardTextOne {
	width: 100%;
	height: 35px;
	float: left;
	margin-top: -10px;
}
.informationCardText {
	/* margin-left: 2%; */
	width: 65px;
	height: 35px;
	line-height: 35px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 10px;
	transform: scale(0.975);
	float: left;
	font-weight: 1000;
}
.textSilver {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: black;
	float: left;
}
.textWhite {
	color: black;
	float: right;
	width: 24px;
	font-size: 10px;
	margin-right: 13%;
	transform: scale(0.975);
	/* text-align: right; */
}
.Personal_information_W {
	position: relative;
	margin-top: 3%;
	width: 90%;
	height: 80px;/* 
	background-color: #242424; */
	border-bottom: #BDBDBD solid 0.5px;
	transform: translateX(-50%);
	left: 50%;
	color: #B8B7B7;
}

.name{
	position: absolute;
	height: 30px;
	width: 130px;
	left: 3%;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
	text-align: left;
	line-height: 30px;
	margin-top: 1%;
	font-weight: 1000;
	
}
.history {
	position: absolute;
	margin-top: 6%;
	right: 3%;
	height: 30px;
	height: 20px;
	text-align: center;
	line-height: 30px;
}

.skills {
	position: absolute;
	top: 56%;
	left: 3%;
	height: 25px;
	width: 180px;/* 
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
	text-align: left;
	line-height: 30px;
}
.curve{
	position: relative;
	width: 90%;
	transform: translateX(-50%);
	left: 50%;
	height: 30px;
	margin-top: 3%;
	color: #B8B7B7;
	font-weight: 1000;
}
.curve_l{
	position: absolute;
	left: 3%;
}
.curve_r{
	position: absolute;
	right: 3%;
}
.healthy {
	/* margin-top: 6%; */
	margin-left: 3%;
	height: 180px;
	width: 95%;
	margin-bottom: 100px;
	text-align: center;
	color: #B8B7B7;
	font-size: 12px;
	line-height:65px ;
	font-weight: 1000;
	
}
.healthy_H,
.healthy_N,
.healthy_W {
	background-color:#242424;
	position: relative;
	width: 100%;
	height: 42%;
	text-align: center;
	/* padding-bottom: 1%; */
}


.details_z {
	position: absolute;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);	
	width: 30%;	
	
	/* height: 93%; */
	left:3%;
	height: 60px;
	top: 3%;
	margin-top: 2%;
	
	padding-bottom: 3%;
}
.details_m {
	position: absolute;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);	
	width: 30%;
	left: 35.5%;
	height: 60px;
	top: 3%;
	margin-top: 2%;
	
	padding-bottom: 3%;
}
.details_y {
	position: absolute;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	width: 30%;
	left: 68%;
	height: 60px;
	top: 3%;
	margin-top: 2%;
	padding-bottom: 3%;
	/* margin-bottom: 0.6%;
	margin-top: 0.6%;
	float: right;
	margin-left: 0.2%;
	margin-right: 1.2%;
	width: 31%;
	height: 100%;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
		color: silver;
		 text-align: center;
		padding-top: 10px;
	background-color: #ffffff;
	font-size: 12px;
	padding-bottom: 4px;
	line-height: 13px;

	border-radius: 5px;
	padding-top: 8px; */
}

.navigation::after {
	content: url(../../static/picture/forcast/position.png);
}
	/* .greater {
	           position: relative;
	            width: 249px;
	            height: 35px;
	            border: 1px solid #000;
	        } */
    .greater{
		float: right;
            content: "";
			margin-top: 0.8%;
			margin-right: 0.8%;
           /* position: absolute; */
            /* top: 8px;
            right: 15px; */
            width: 8px;
            height: 8px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg);
			
        }
</style>