<template>
	<div class="Screen cm-layout">
		<div class="a_0">
			<div id="cesiumContainer" class="cesium-ctn"></div>
			<div class="a0_">
				<header id="header">
					<div class="b1_bg">
						<h2>威海高新区科技企业孵化信息平台</h2>
					</div>
					<!-- <div class="a0a_" id="a0a_">
						<ul>
							<li data-id="5" :class="{'active':navActive === 5}">风险分析管控</li>
							<li data-id="6" :class="{'active':navActive === 6}">隐患排查治理</li>
							<li data-id="7" :class="{'active':navActive === 7}">安全教育培训</li>
							<li data-id="8" :class="{'active':navActive === 8}">数据统计分析</li>
						</ul>
						<ul>
							<li data-id="1" :class="{'active':navActive === 1}">行业信息预警</li>
							<li data-id="2" :class="{'active':navActive === 2}">危险作业备案</li>
							<li data-id="3" :class="{'active':navActive === 3}">企业安全档案</li>
							<li data-id="4" :class="{'active':navActive === 4}">分类分级管理</li>
						</ul>
					</div>
					<div class="more">
						<ul>
							<li data-id="0" :class="{'active':navActive === 0}"></li>
							<li class="sys"><a href="javascript:void(0)"></a></li>
						</ul>
					</div> -->
					<div class="go-back">
						<a href="/business/incubator">进入后台</a>
					</div>
				</header>
			</div>
			<div class="map-mask"></div>
		</div>
		<div class="b_0">
			<section class="b0_" id="b0_">
				<div class="b0_a" :class="{'active':navActive === 0}">
					<div class="side b0_left" :class="{'show':view0.show}">
						<div class="a-md31" id="amd31">
							<div class="abs-full">
								<div class="m-tt">
									<h4>孵化数据总览</h4>
								</div>
								<div class="ct-box">
									<div class="wrap"><ul>
										<li  v-for="(item, i) in view0.md1">
											<font>{{item.num}}</font><h6>{{item.name}}</h6>
										</li>
									</ul></div>
								</div>
							</div>
						</div>
						<div class="a-md32" id="amd32">
							<div class="abs-full">
								<div class="m-tt">
									<h4>孵化总收入排行榜</h4>
								</div>
								<div class="ct-box">
									<div class="wrap">
									</div>
								</div>
							</div>
						</div>
						<div class="a-md33" id="amd33">
							<div class="abs-full">
								<div class="m-tt">
									<h4>产品展示</h4>
								</div>
								<div class="ct-box">
									<Carousel class="cu-slider" indicator-position="none" height="100%" :interval="6000">
										<Carousel-item v-for="item in view0.md3">
											<div class="rel-fixd">
												<div class="wrap">
													<p>{{item.companyName + '-' + item.productName}}</p>
													<img :src="item.image" :alt="item.productName">
												</div>
											</div>
										</Carousel-item>
									</Carousel>
								</div>
							</div>
						</div>
					</div>
					<div class="side b0_right" :class="{'show':view0.show}">
						<div class="a-md34" id="amd34">
							<div class="abs-full">
								<div class="m-tt">
									<h4>企业创新创业数据分析</h4>
								</div>
								<div class="ct-box">
									<div class="wrap">
									</div>
								</div>
							</div>
						</div>
						<div class="a-md35" id="amd35">
							<div class="abs-full">
								<div class="m-tt">
									<h4>孵化器孵化企业数据分析</h4>
								</div>
								<div class="ct-box">
									<div class="wrap">
									</div>
								</div>
							</div>
						</div>
						<div class="a-md36" id="amd36">
							<div class="abs-full">
								<div class="m-tt">
									<h4>孵化企业年度上缴税费变化趋势</h4>
								</div>
								<div class="ct-box">
									<div class="wrap">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
import { Tools } from '@/assets/js/common.js';
import { reqApi } from '@/assets/js/httpApi.js';
import { Highchart } from '@/assets/js/chartTemplates.js';
import { CoordTransform } from '@/assets/js/CoordTransform.js';
import { getToken, setToken, removeToken } from '@/utils/auth';
import { encrypt } from '@/utils/rsaEncrypt';
import {Carousel, CarouselItem} from 'element-ui';

export default {
	data() {
		return {
			navActive:null,
			view0:{
				md1:[],
				md2:[],
				md3:[],
			},
		}
	},
	components: { Carousel, CarouselItem },
	mounted() {
		var that = this;
		this.$nextTick(() => {
			var views = that.$el.querySelectorAll("#b0_>div");
			var header = that.$el.querySelector("#header");

			// header 事件控制
			qf.funchain(function(start, t, f){
				var m = this;
				t.models = {}, m.setTagModel = function(id, prevId){
					m.prevModel = t.models[prevId]; m.prevModel && m.prevModel.unload && m.prevModel.unload();
					m.tagModel = t.models[id];m.tagModel.reload && m.tagModel.reload();
				};

				// LOCAL_API
				t.LOCAL_API = process.env.VUE_APP_LOCAL_API;
				
				m.login = function(param){
					return reqApi.common.requst('post', t.LOCAL_API + '/auth/login', param);
				};

				m.setToken = function(key){
					var tokenExpires = new Date(new Date()*1 + 43200000);		// 12小时
					//that.$route.query.key && setToken(that.$route.query.key, true, tokenExpires);
					key && setToken(key, true, tokenExpires);
				};

				m.getCodeImg = function(){
					return reqApi.common.requst('get', t.LOCAL_API + '/auth/code');
				};

				m.init = function(){
					setTimeout(() => {
						// 加载地图
						that.createCesium(m, t, f);

						that.navActive = 0;
	
						/* m.first(); */ f(that.navActive), setTimeout(() => {m.tagModel = t.models[that.navActive];},50);

						// Event
						header.onclick = function(e){
							var tag = e.target || e.srcElement;
							if(tag.dataset.id){
								var id = ~~tag.dataset.id;
								if(id === that.navActive){
									if(id === 4){
										that.navActive = void 0;
										t.models[id].unload()
									}else{
										views[id] && views[id].classList.add('close');
										setTimeout(() => {that.navActive = void 0;}, 50);
									};
								}else{
									var prevId = that.navActive;
									that.navActive = id;
									t.models[id] ? m.setTagModel(id, prevId) : setTimeout(() => {start(id);m.setTagModel(id, prevId);}, 100);
								};
							};
						};
						
						// 计时刷新
						var timerA = new qf.Async.intervalLoop(60000, function(){
							(m.tagModel && m.tagModel.timerUpdate || function(){})()
						}, function(){
							(m.tagModel && m.tagModel.timerUpdate || function(){})()
						});

						// resize
						qf.resize(function(){
							setTimeout(() => {
								(m.tagModel && m.tagModel.resize || function(){})()
							}, 380);
						});

						// map Evnet
						var mEvent = fg3d.Event.leftClick(function(e){
							var pick = that.viewer.scene.pick(e.position);
							if(pick && pick.id){
								m.tagModel.mapClick && m.tagModel.mapClick(pick)
							};
						});
					}, 500);
				};

				// 登录权限获取
				(t.getInfo = function(){

					var url = t.LOCAL_API + '/auth/info';
					return reqApi.common.requst.call(that.$route, 'get', url).then((res)=>{
						if(!res.error && res.user){
							m.init();
						}else{
							m.loginView = qf.UI.popWindow({
								cover:true,
								coverFull: true,
								className:'login-ctn',
								//container:b0_e,		// id || Element对象
								//backgroundColor:'rgba(0,0,0,.4);backdrop-filter:blur(15px);',
								closeEvent:true,
								html:'<div class="liner"></div>',
								onload: function(v){
									m.loginView = v;
									var el = v.el;
									v.setStyle(v.Wrap, {height:'5.04rem', width:'9.12rem', zIndex:10, borderRadius:'.06rem',overflow:'hidden'});

									el.innerHTML = `<div class="l-left"><h3>Welcome!</h3><h4>高区应急综合管理平台</h4></div><div class="pop-login" ><div class="inbox-range"><div class="ctn-fix"><form class="el-form login-form el-form--label-left"><h3 class="title">登录</h3><div class="el-form-item is-required el-form-item--small"><div class="el-form-item__content" style=""><div class="el-input el-input--small el-input--prefix"><input type="text" autocomplete="off" placeholder="账号" class="el-input__inner"><span class="el-input__prefix el-icon-s-custom"></span></div></div><div class="el-form-item__error">用户名不能为空</div></div>
									<div class="el-form-item is-required el-form-item--small"><div class="el-form-item__content" style=""><div class="el-input el-input--small el-input--prefix"><input type="password" autocomplete="off" placeholder="密码" class="el-input__inner"><span class="el-input__prefix el-icon-key"></span></div></div><div class="el-form-item__error">密码不能为空</div></div>
									<div class="el-form-item is-required el-form-item--small">
									<div class="el-form-item__content" style="display:flex;justify-content:space-between;">
									<div class="el-input el-input--small el-input--prefix" style="width:50%;">
									<input type="text" autocomplete="off" placeholder="验证码" class="el-input__inner">
									<span class="el-input__prefix el-icon-circle-check"></span></div>
									<div class="login-code"><img src=""></div>
									</div><div class="el-form-item__error">验证码不能为空</div></div>
									<div class="el-form-item el-form-item--small" style="width: 100%;"><div class="el-form-item__content" style="margin-left: 0px;"><button type="button" class="el-button el-button--primary el-button--medium" style="width: 100%;">登 录</button></div></div></form></div></div></div>`;
									
									// 校验
									m.loginView.check = function(el){
										var itemContent = el.parentNode.parentNode;
										if(qf.trim(el.value)){
											return itemContent.nextElementSibling.classList.remove('open'), 1;
										}else{
											itemContent.nextElementSibling.classList.add('open');
											el.focus()
										};
									};

									m.loginView.inputs = el.querySelectorAll("input");
									for(var input of m.loginView.inputs){
										input.onblur = function(e){
											var tag = e.target || e.srcElement;
											m.loginView.check(tag);
										}
									};

									// 验证码
									(m.loginView.refreshCodeImg = function(){
										m.getCodeImg().then((res)=>{
											var img = el.querySelector(".login-code>img");
											img.src = res.img;
											m.loginView.uuid = res.uuid;
										});
									})();

									m.loginView.loginCheck = function(){
										var inputs = m.loginView.inputs;
										var username = inputs[0], password = inputs[1], captcha = inputs[2];
										if(m.loginView.check(username) && m.loginView.check(password) && m.loginView.check(captcha)){
											var param = {
												username: username.value, password: encrypt(password.value),
												code:captcha.value, uuid: m.loginView.uuid,
											};
											var l1 = qf.UI.loading({zIndex:2051, timer:10000});
											m.login(param).then((res)=>{
												l1.close();
												if(res.token && res.user){
													m.init();
													m.setToken(res.token);
													m.loginView.remove();
												}else{
													new qf.UI.Notify({
														zIndex:2050,
														type: 'warning',
														duration: 3000,
														autoOpen:true,
														message: res.message || res.msg || '',
													});
													m.loginView.refreshCodeImg();
												};
											}).catch(function(e){
												console.log('catch ________________ ', e);
											});
										};
									};

									// 回车事件
									m.loginView.keyup = function(e){
										if(e.keyCode === 13){
											m.loginView.loginCheck();
										};
									};
									window.addEventListener('keyup', m.loginView.keyup);
								},
								click: function(tag){
									if(tag.nodeName === 'BUTTON'){
										m.loginView.loginCheck();
									}else if(tag.nodeName === 'IMG'){
										m.loginView.refreshCodeImg();
									};
								},
								close: function(e){
									window.removeEventListener('keyup', m.loginView.keyup);
									delete m.loginView
								},
							});
						};
					});
				})();

				t.VueDateWidget = function(ctn, change){
					var toDay = new Date();
					var toMonth = new Date(toDay.getFullYear(), toDay.getMonth()-1, 1).getTime();
					var month = qf.Utils.Dates(toMonth).format('yyyy-MM-dd');
					var toDay = qf.Utils.Dates().format('yyyy-MM-dd');
					var daterange = [month, toDay];
					//var query = {daterange:daterange.join(','), sort:'date,desc'};

					// 时间渲染
					var dateObj = qf.Vue.renderTo.call(that, {
						el:ctn,
						name:'el-date-picker',
						//style: "width:380px",
						data:{
							'timeSpace':daterange,
						},
						attrs: {
							type: "daterange",
							"value-format": "yyyy-MM-dd",
							"range-separator": "至",
							"start-placeholder": "开始日期",
							"end-placeholder": "结束日期",
							clearable: ""
						},
						'value':'timeSpace',
						change: function(e) {
							if(e){
								// 刷新行业信息预警
								change && change(e)
							}else{
								setTimeout(() => {
									dateObj.timeSpace = daterange
								}, 500);
							};
						}
					});

					return dateObj;
				};
			}, (function(){
				var arr = [];
				for(var item of views){
					arr.push(function(t, f, i){
						f('init').models[i] = that['module'+i](this, t, f, i, views[i]);
					});
				}; return arr
			})());

			return ;

			// 禁右键
			document.addEventListener('contextmenu', function(e){
				if(e.button == 2){
					e.preventDefault();
					return false
				}
			});
		});
	},
	methods: {

		// 首页
		module0(m, t, f, dmIndex, view){
			var self = this, viewData = self['view'+dmIndex], fm = f('init'), thisApi = fm.models[dmIndex];

			var wrap32 = view.querySelector("#amd32 .wrap");
			var wrap34 = view.querySelector("#amd34 .wrap");
			var wrap35 = view.querySelector("#amd35 .wrap");
			var wrap36 = view.querySelector("#amd36 .wrap");
		
			// 孵化数据总览
			m.sjzl = function(){
				var param = {
					size:9,
				};
				return reqApi.common.requstEdge('get', '/api/homePage/incubatorOverview', param).then((res)=>{
					return res.body || []
				});
			};

			// 孵化总收入排行榜
			m.srph = function(){
				var param = {};
				return reqApi.common.requstEdge('get', '/api/homePage/incubatorLeaderboard', param).then((res)=>{
					return res.body || []
				});
			};

			// 孵化器地图标记
			m.markers = function(){
				var param = {};
				return reqApi.common.requstEdge('get', '/api/homePage/incubatorLocation', param).then((res)=>{
					return res.body || []
				});
			};

			// 产品展示
			m.products = function(){
				var param = {};
				return reqApi.common.requstEdge('get', '/api/homePage/carouselProduct', param).then((res)=>{
					var list = res.body || [];
					for(var item of list){
						item.image = fm.LOCAL_API + '/file/' + item.image
					};
					viewData.md3 = list;
				});
			};

			//企业创新创业数据分析
			m.md4 = function(){
				var param = {};
				return reqApi.common.requstEdge('get', '/api/homePage/enterpriseInnovationAnalysis', param).then((res)=>{
					return res.body || []
				});
			};

			//孵化器孵化企业数据分析
			m.md5 = function(){
				var param = {};
				return reqApi.common.requstEdge('get', '/api/homePage/incubatorEnterpriseNumber', param).then((res)=>{
					return res.body || []
				});
			};

			//孵化企业年度上缴税费变化趋势
			m.md6 = function(){
				var param = {};
				return reqApi.common.requstEdge('get', '/api/homePage/incubatorTaxTrend', param).then((res)=>{
					return res.body || []
				});
			};

			return (function(){
				// 监管指标
				(m.reqSjzl = function(){
					m.sjzl().then(function(list){
						viewData.md1 = list;
					});
				})();

				// 孵化总收入排行榜
				(m.reqSrph = function(){
					m.srph().then(function(list){
						var colors = ['#ff8371', '#08b2c0', '#427fff', '#8dbffa', '#b2e2fe'];
						var chartData = Highchart.formatSeriesList(list, {value:'value', colors:colors});
						var opts = {
							chartConfig:{
								chart:{
									type:'bar',
									marginBottom:10,
								},
								xAxis: {
									type: 'category',
									lineWidth:1,
									labels:{
										x:-5,
									},
								},
								yAxis:{
									visible:false,
								},
								series: [{
									name: '',
									data: chartData.seriesData,
									dataLabels: {
										enabled: true,
										color: '#FFFFFF',
										align: 'right',
										format: '{point.y:.1f}', // :.1f 为保留 1 位小数
									}
								}],
							},
							isSeriesData:true,
						};
						Highchart.template.rich(wrap32, list, opts);
					});
				})();
				
				// md4
				m.md4Chart = function(){
					m.md4().then(function(list){
						var colors = ['#0b50f5', '#00d1e6', '#0ce2a6', '#fdbe17'];
						var seriesFormat = Highchart.formatSeriesList(list, {value:'num', colors:colors});
						var seriesData = seriesFormat.seriesData;
						var opts = {
							chartConfig:{
								chart: {
									backgroundColor:'transparent',
									//spacing:[0, 0 , 0, 0]
								},
								title: {
									floating:true,
									text: '',
									verticalAlign: 'middle',
									y:22,
									floating: true,
									style:{
										color:'#00f6ff',
									}
								},
								tooltip: {
									pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
								},
								credits: {
									enabled: false
								},
								legend:{
									itemStyle:{color:'#fff',"textOverflow": "ellipsis"},
									layout: 'horizontal',
								},
								plotOptions: {
									pie: {
										allowPointSelect: true,
										cursor: 'pointer',
										showInLegend: true,
										dataLabels: {
											format: '<b>{point.name}</b>: {point.percentage:.1f} %',
										},
									}
								},
								series: [{
									type: 'pie',
									innerSize: '70%',
									name: '设备数量',
									data: seriesData
								}]
							},
							isSeriesData:true,
						};
						Highchart.template.pie(wrap34, list, opts);
					});
				};

				// md5
				m.md5Chart = function(){
					m.md5().then(function(list){
						var opts = {
							chartConfig:{
								chart:{
									type:'column',
									marginBottom:50,
								},
								xAxis: {
									type: 'category',
									labels: {
										rotation: -25  // 设置轴标签旋转角度
									}
								},
							},
						};
						Highchart.template.rich(wrap35, list, opts);
					});
				};

				// md6
				m.md6Chart = function(){
					m.md6().then(function(list){
						var chartData = Highchart.seriesDataFormat(list, {datekey:'date', dataReverse:true,});
						var categories = chartData.categories;
						var series = chartData.series;
						var opts = {
							chartConfig:{
								chart:{
									marginTop:20,
									marginLeft:40,
									marginBottom:35,
								},
								xAxis: {
									type: 'category',
									categories:categories,
									labels: {
										rotation: -20,  // 设置轴标签旋转角度
										align: 'center',
									}
								},
								yAxis: {
									title: {
										text: '(万元)',
										margin:0,
										style:{
											color:'#eee',
											fontSize:'10px',
										},
										rotation:0,
										align:'high',
										y:-10,
										x:25,
									}
								},
								plotOptions: {
								},
								series: [{
									type: 'area',
									keys: ['y', 'rotation'], // rotation is not used here
									data: series[0].data,
									color: '#19c4fa',
									fillColor: {
										linearGradient: {x1:0, x2:0, y1:0, y2:1},
										stops: [
											[0, '#2aadf3'],
											[1, 'rgba(25,201,255,0)']
										]
									},
								}]
							},
							isSeriesData:true,
						};
						Highchart.template.rich(wrap36, list, opts);
					});
				};

				// 首次加载
				(m.init = function(){
					
					// 获取孵化器信息
					m.markers().then(function(list){
						// 添加标记点
						self.Entities.addMarkers(list);
					});
					
					// 产品展示
					m.products();

					// 企业创新创业数据分析
					m.md4Chart();

					// 
					m.md5Chart();

					// 
					m.md6Chart();
				})();

				// 栏目数据加载
				m.loadData = function(){
					m.reqSjzl();
				};

				return {
					reload: function(o){
					},
					timerUpdate: function(){
						m.loadData()
					},
					mapClick: function(pick){
						var entity = pick.id;
						var id = pick.id, entity = pick.primitive;
						var position = entity.position;
						var item = self.Entities.getBbdCollection()[id].data;
						var amd8View = qf.UI.popWindow({
							pointer:{
								point:'bottom',
								show:true,
								x:80,
							},
							closeButton:{},
							close: function(){
								fg3d.Entity.remove(entity);
							},
							container:document.createElement('div'),		// id || Element对象
							html:'<div class="popupBgImage" style="color:#fff;width:3.21rem;height:2.69rem;font-size:12px;padding:10px;"><h4>详细信息</h4><dl><dd><font>孵化器名称：</font><span>'+item.incubatorName+'</span></dd><dd><font>运营机构：</font><span>'+item.operatingAgency+'</span></dd><dd><font>在孵企业：</font><span>'+(item.incubatorCount || 0)+'家</span></dd><dd><font>毕业企业：</font><span>'+(item.graduationCount || 0)+'家</span></dd><dd><font>使用总面积：</font><span>'+(item.totalArea || 0)+'(㎡)</span></dd><dd><font>总收入：</font><span>'+(item.totalIncome || 0)+'万元</span></dd></dl></div>',
							onload: function(md){
								var el = md.el;
							},
						});
						
						// 创建窗口
						var map8View = new fg3d.Plugins.View(position, amd8View.Wrap, {
							render: function(){
								return {
									position:position,
									y:-45,
									x:-90,
								};
							},
						});
					},
					unload: function(){
						//t.unload();

						// 隐藏所有标记
						self.Entities.setMarkers({});
					},
					resize: function(){
						m.percarCountChart && m.percarCountChart.reflow();
					},
				};
			})();
		},

		// Cesium
		createCesium: function(m, t, f){
			var that = this, fm = f('init');

			fg3d.ImageryProvider = (function(){
				var Baidu = function(options){
					this._errorEvent = new Cesium.Event();
					this._tileWidth = 256;
					this._tileHeight = 256;
					this._maximumLevel = 18;
					this._minimumLevel = 1;
					let southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
					let northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
					this._tilingScheme = new Cesium.WebMercatorTilingScheme({
						rectangleSouthwestInMeters: southwestInMeters,
						rectangleNortheastInMeters: northeastInMeters
					});
					this._rectangle = this._tilingScheme.rectangle;
					this._resource = Cesium.Resource.createIfNeeded(options.url);
					this._tileDiscardPolicy = undefined;
					this._credit = undefined;
					this._readyPromise = undefined;

					this.requestImage = function (x, y, level, request) {
						let xTileCount = this._tilingScheme.getNumberOfXTilesAtLevel(level);
						let yTileCount = this._tilingScheme.getNumberOfYTilesAtLevel(level);
						let url = this.url.replace("{x}", x - xTileCount / 2).replace("{y}", yTileCount / 2 - y - 1).replace("{z}", level).replace("{s}", Math.floor(10 * Math.random()));
						return Cesium.ImageryProvider.loadImage(this, url);
					};
				};

				Object.defineProperties(Baidu.prototype, {
					url: {
						get: function () {
							return this._resource.url;
						}
					},
					proxy: {
						get: function () {
							return this._resource.proxy;
						}
					},
					tileWidth: {
						get: function () {
							if (!this.ready) {
								throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');
							}
							return this._tileWidth;
						}
					},
					tileHeight: {
						get: function () {
							if (!this.ready) {
								throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');
							}
							return this._tileHeight;
						}
					},
					maximumLevel: {
						get: function () {
							if (!this.ready) {
								throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
							}
							return this._maximumLevel;
						}
					},
					minimumLevel: {
						get: function () {
							if (!this.ready) {
								throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
							}
							return this._minimumLevel;
						}
					},
					tilingScheme: {
						get: function () {
							if (!this.ready) {
								throw new Cesium.DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
							}
							return this._tilingScheme;
						}
					},
					tileDiscardPolicy: {
						get: function () {
							if (!this.ready) {
								throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
							}
							return this._tileDiscardPolicy;
						}
					},
					rectangle: {
						get: function () {
							if (!this.ready) {
								throw new Cesium.DeveloperError('rectangle must not be called before the imagery provider is ready.');
							}
							return this._rectangle;
						}
					},
					errorEvent: {
						get: function () {
							return this._errorEvent;
						}
					},
					ready: {
						get: function () {
							return this._resource;
						}
					},
					readyPromise: {
						get: function () {
							return this._readyPromise;
						}
					},
					credit: {
						get: function () {
							if (!this.ready) {
								throw new Cesium.DeveloperError('credit must not be called before the imagery provider is ready.');
							}
							return this._credit;
						}
					},
				});
				return {Baidu:Baidu};
			})();

			fg3d.init({
				createViewer: function(){
					return {
						el:'cesiumContainer',
						options:{
							//sceneMode : Cesium.SceneMode.COLUMBUS_VIEW,
							infoBox: false,
							selectionIndicator: false,
							navigation: false,
							animation: false,
							timeline: false,
							baseLayerPicker: false,
							geocoder: false,
							homeButton: false,
							sceneModePicker: false,
							navigationHelpButton: false,
							shouldAnimate: true,
							//skyAtmosphere: true, // 大气
							fullscreenButton:false,		// 全屏按钮
							imageryProvider:false,
							
							orderIndependentTranslucency: false,
							contextOptions: {
								webgl: {
									alpha: true
								}
							},

							//sceneMode: Cesium.SceneMode.SCENE2D,
							//mapMode2D: Cesium.MapMode2D.ROTATE,		// Ctrl + 鼠标左键旋转
						}
					};
				}, 
				mounted: async function(viewer){
					var self = this
					this.viewer = that.viewer = viewer;

					this.viewer.cesiumWidget.creditContainer.style.display = "none";
					this.viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
					//抗锯齿
					this.viewer.scene.fxaa = true;
					this.viewer.scene.postProcessStages.fxaa.enabled = true;
					this.viewer.scene.sun.show = false; //在Cesium1.6(不确定)之后的版本会显示太阳和月亮，不关闭会影响展示
					this.viewer.scene.skyBox.show = false;//关闭天空盒，否则会显示天空颜色
					this.viewer.scene.undergroundMode = true; //重要，开启地下模式，设置基色透明，这样就看不见黑色地球了
					//this.viewer.scene.globe.show = false;

					// 缩放限制
					viewer.scene.screenSpaceCameraController.minimumZoomDistance = 380;
					viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000000;

					this.addMapLayer(viewer);

					this.setView(viewer);

					// Create a billboard collection  
					this.bbdCollection = viewer.scene.primitives.add(new Cesium.BillboardCollection());
					this.billboardDict = {}; 

					// assets
					that.Entities = {
						setMarkers: function(dict){
							self.setMarkersAttr(dict);
						},
						addMarkers: function(list){
							if(Object.prototype.toString.call(list) === '[object Array]'){
								//self.billboardDict = {};
								for(var item of list){
									var bbdid = item.type > 1 ? item.type + '_' + item.id : item.id;
									var billbd = self.billboardDict[bbdid];
									if(!billbd){
										self.billboardDict[bbdid] = self.createMarker(item);
									}else{
									};
								};
							};
						},
						addMarker: this.createMarker.bind(this),
						remove: this.remove,
						removes: this.removes,
						removeWidget: this.removeWidget,
						removeAll: function(){
							self.removeEntities();
							self.removeWidget();
						},
						getBbdCollection: function(){
							return self.billboardDict
						},
					};
				},

				// setView
				setView: function(viewer){
					// 视角-环翠
					this.viewer.scene.camera.setView({
						duration: 1,
						destination: {
							x: -2709847.741326086,
							y: 4323242.75656055,
							z: 3892115.513473075
						},
						orientation: {
							heading: 0.04161544663387229,
							pitch: -1.548357582905937,
							roll: 0,
						}
					});

					viewer.scene.mode = 2;
					
					let centerResult = viewer.camera.pickEllipsoid(
						new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2,),
					);

					var rotateCamera = function(options,num) {
					  var position = options;
					  // 给定切换所需时间，比如0.5s
					  var flytime = 0.5;
					  var initialPitch = viewer.camera.pitch;
					  var pitch3d=Cesium.Math.toRadians(num);
					  var angle = (pitch3d-initialPitch)/flytime;//每秒转动的度数
					  // 获取相机和视点距离
					  var distance = Cesium.Cartesian3.distance(options, viewer.scene.camera.positionWC);
					  var startTime = Cesium.JulianDate.fromDate(new Date());
				 
					  var stopTime = Cesium.JulianDate.addSeconds(startTime, flytime, new Cesium.JulianDate());
				 
					  viewer.clock.startTime = startTime.clone();  // 开始时间
					  viewer.clock.stopTime = stopTime.clone();     // 结速时间
					  viewer.clock.currentTime = startTime.clone(); // 当前时间
					  viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
					  viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
					  // 相机的当前heading
					  var initialHeading = viewer.camera.heading;
				 
					  var Exection = function TimeExecution() {
						// 当前已经过去的时间，单位s
						var delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
						// 根据过去的时间，计算偏航角的变化
						var heading = initialHeading;
						// 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值，这里取-30度
						var pitch = delTime * angle + initialPitch;
				 
						viewer.camera.lookAt(position, new Cesium.HeadingPitchRange(heading, pitch, distance));
						//解除目标锁定
						viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
						if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
						  viewer.clock.onTick.removeEventListener(Exection);
						}
					  };
					  viewer.clock.onTick.addEventListener(Exection);
					};

					//rotateCamera(centerResult,-89);
				},

				addMapLayer: function(viewer){
					// var localMap = new fg3d.ImageryProvider.Baidu({
					// 	// 百度电子
					// 	url: // 'https://maponline1.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2&udt=&fro// m=jsapi2_0',
					// });
					// localMap = new Cesium.WebMapTileServiceImageryProvider({
					// 	url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=d2bd55b7fa31f99ced2205fb6aa4cc5e",
					// 	layer: "vec",
					// 	style: "default",
					// 	format: "tiles",
					// 	tileMatrixSetID: "w",
					// 	maximumLevel: 18,
					// })

					var localMap =  new Cesium.UrlTemplateImageryProvider({
						url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
					});
					viewer.scene.imageryLayers.addImageryProvider(localMap);
				},

				setMarkersAttr: function(dict){
					var list = this.bbdCollection._billboards;
					for(var i=0, len=list.length; i<len; i++){
						var bbd = list[i];
						if(dict[bbd.id]){
							bbd.show = true, dict[bbd.id] = bbd;
						}else{
							bbd.show = false
						};
					};
				},
				createMarker: function(item){
					item.position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, 0);
					var bbd = this.bbdCollection.add({
						position: item.position,
						image: '/static/images/marker1.png',
						verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
						scale: 1,
						width: 25, // default: undefined
						height: 35,
						id:item.id,
						//show:false,
					});
					return bbd.data = item, bbd;
				},
				removeWidget(){
					var widgetContainer = that.viewer.cesiumWidget.container;
					var popmds = widgetContainer.querySelectorAll(".kmb-popmd-e3d8");
					for(var item of popmds){
						//item.remove();
					};
				},
				remove(obj){
					that.viewer.entities.remove(obj);
				},
				removes(list){
					for(var item of list){
						that.viewer.entities.remove(item);
					};
				},
				removeEntities(){
					var entitys = that.viewer.entities._entities._array;
					var len = entitys.length;
					for(var i=0; i<len; i++){
						var obj = entitys[i];
						if(!obj.wall){
							that.viewer.entities.remove(obj);
							i--;len--;
						};
					};
				},
			});
		},
	},
}
</script>

<style lang="scss" scope>
	@font-face {font-family:"diget year";src: url("~@/assets/fonts/DS-Digital.ttf");};
	@font-face {font-family:"ShuHei";src: url("~@/assets/fonts/AlimamaShuHeiTi-Bold.ttf");};
	.font_digit{font-family:diget year;}
	.font_ShuHei{font-family:ShuHei;}

	
	.Screen {
		position:relative;height:100%;width:100%;overflow:hidden;

		.a_0, .b_0{position:absolute;}
		>.actv{display:block;}
		.a_0{
			top:0;left:0;height:100%;width:100%;
			.cesium-ctn{
				height:100%;width:100%;position:relative;z-index:1;
				.kmb-popmd-e3d8.alarm{
					&>i:nth-child(2){border-color:#ff0000 transparent transparent #ff0000 !important;}
					&>i:nth-child(3){border-color:#ff0000 !important;color:#ff0000 !important;}
				}
				.close{
					right:5px !important;top:5px !important;border-width:0 !important;color:#fff !important;background:transparent !important;
				}
				h4{
					margin-top:.05rem;position:relative;
					height:.38rem;line-height:.38rem;text-align:center;font-weight:normal;font-size:.18rem;
					background-image:linear-gradient(to right, transparent 15%, #25affa 50%, transparent 85%);
					&:before, &:after{content:"";position:absolute;left:0;height:1px;width:100%;}
					&:before{
						top:0;
						background-image:linear-gradient(to right, transparent 15%, #4de4ff 50%, transparent 85%);
					}
					&:after{
						bottom:0;
						background-image:linear-gradient(to right, transparent 15%, #4de4ff 50%, transparent 85%);
					}
				}
				dl{
					font-size:.16rem;margin-top:.10rem;
					dd{line-height:.30rem;color:#7ae2ff;margin:0 .30rem;}
				}
			}
			.a0_{
				position:absolute;top:0;left:0;height:auto;width:100%;z-index:3;
				header{
					position:absolute;top:0;left:0;height:0;width:100%;z-index:5;
					display:flex;user-select:none;
					.b1_bg{
						position:relative;height:.98rem;width:100%;
						margin: 0 auto;
						background:no-repeat top center url('~@/assets/images/layout/s_hd_m.png');
						background-size:auto .98rem;
						display:flex;justify-content:center;pointer-events:none;
						h2{
							font-size:.40rem;line-height:1;margin:.23rem 0 0 .0rem;font-weight:bold;
							font-family:'element-icons';color:#fff;
							background-image:-webkit-linear-gradient(top,#fff,#c6dafb,#90b6f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.06rem;
						}
					}
					.go-back{
						position:absolute;top:.3rem;;left:.1rem;height:.40rem;width:1.17rem;
						background:no-repeat top center url('~@/assets/images/layout/h_btn_2.png');
						background-size:100%;
						display:flex;justify-content:center;align-items:center;
						a{color:#fff;text-decoration:none;font-size:.168rem;}
					}

					.a0a_{
						position:absolute;top:0;left:0;height:0;width:100%;
						display:flex;justify-content:space-between;
						ul{
							height:0;display:flex;margin-top:.42rem;width:5.15rem;
							li{
								width:1.17rem;height:.40rem;cursor:pointer;border-radius:.05rem;
								background-repeat:no-repeat;background-position:top center;background-size:100% 100%; 
								display:flex;justify-content:center;align-items:center;font-size:.16rem;
								&:hover{
									box-shadow:inset 0 0 0.08rem 0.03rem rgba(42,248,251, .8);
								}
							}
							li.active{}
							li:last-child{
								margin-right:0;
							}
						}
						ul:first-child{
							margin-left:.14rem;
							li{margin-right:.13rem;}
						}
						ul:last-child{
							margin-right:.14rem;
							li{margin-left:.13rem;}
						}
					}

					.more{
						position:absolute;top:.07rem;right:.30rem;
						ul{display:flex;}
						li{
							height:.31rem;width:.31rem;margin-left:.20rem;cursor:pointer;
							background-repeat:no-repeat;background-position:center center;background-size:.29rem .29rem;border-radius:.29rem;
							&:hover{
								box-shadow:inset 0 0 0.04rem 0.02rem rgba(42,248,251, .8);
							}
						}
						li:first-child{

						}
						li:last-child{
						}
					}
				}
			}

			.map-mask{
				position:absolute;top:0;left:0;height:100%;width:100%;z-index:2;
				pointer-events:none;
				background:no-repeat center center url('~@/assets/images/map_mask.png');
				background-size:100% 100%;

			}
		}
		.b_0{
			display:flex;top:0.96rem;left:0;bottom:0;width:0;background-color:rgba(0,0,0,.15);z-index:2;
			
			.b0_{
				display:flex;flex-direction:column;justify-content:center;height:100%;width:0;

				.kmb-checkbox{
					dd{line-height:.35rem;}
				}
				
				.side{
					// display:none;

					width:4.60rem;height:0;
					display:flex;flex-direction:column;justify-content:center;user-select:none;color:#fff;
					
					.abs-full{
						display:flex;flex-direction:column;
						//padding:.08rem .10rem;
						//background:no-repeat center center url('~@/assets/images/layout/side_l_md.png');background-size:100% 100%;
						background-color:rgba(29,57,110,.65);

						.chart{position:relative;}
					}
					.m-tt{
						height:.42rem;width:100%;
						background:no-repeat center center url('~@/assets/images/layout/md_hd_l.png');
						background-size:100% 100%;
						h4{
							height:100%;line-height:.40rem;font-size:.18rem;letter-spacing:.01rem;
							padding-left:.40rem;
							//background-image:linear-gradient(to bottom,#fff,#f3fffc,#e4fff9);
							//-webkit-background-clip:text;-webkit-text-fill-color:transparent;
						}
					}

					.ct-box{
						flex:1;display:flex;position:relative;font-size:.13rem;

						.tab2{
							margin-top:.10rem;
							ul{
								display:flex;height:.24rem;margin:0 .10rem;
							}
							li{
								flex:1;text-align:center;line-height:.20rem;margin:0 .15rem;max-width:.99rem;
								border-radius:.05rem;font-size:.15rem;color:#37b5b4;
								border:1px solid #1e527a;cursor:pointer;
								box-shadow:inset 0 0 0.10rem 0.03rem rgba(16, 88, 148, .8);
							}
							li.actv{
								border:1px solid #01b0ff;
								color:#34fcfa;
							}
						}
						.wrap{
							position:absolute;top:0;left:0;height:100%;width:100%;
						}
						.flex1{position:relative;}
					}

					.shadow1{
						box-shadow:inset 0 0 0.15rem 0.05rem rgba(1, 95, 121, .8);
						background-color:rgba(0,0,0,.4);
					}

					.a-md31{
						height:3.20rem;
						ul{
							position:absolute;top:0;left:0;height:100%;width:100%;
							display:grid;grid-template-columns:33.33% 33.33% 33.33%;
							li{
								position:relative;line-height:1;
								display:flex;justify-content:center;flex-direction:column;align-items:center;
								&:before{
									content:"";height:.40rem;width:.40rem;
									background-repeat:no-repeat;background-position:center center;background-size:100% auto;
									//background-image:url('~@/assets/images/layout/md31_i1.png');
								}
								h6{
									font-size:.14rem;color:#dcebff;margin-top:.10rem;
								}
								font{
									font-size:.32rem;font-family:diget year;margin-top:.15rem;
									line-height:.23rem;
									background-image:-webkit-linear-gradient(top, #fff, #fff, #ffea98);
									-webkit-background-clip:text;
									-webkit-text-fill-color:transparent;
								}
							}
							li:nth-child(1){
								&:before{
									background-image:url('~@/assets/images/layout/md31_i1.png');
								}
							}
							li:nth-child(2){
								&:before{
									background-image:url('~@/assets/images/layout/md31_i2.png');
								}
							}
							li:nth-child(3){
								&:before{
									background-image:url('~@/assets/images/layout/md31_i3.png');
								}
							}
							li:nth-child(4){
								&:before{
									background-image:url('~@/assets/images/layout/md31_i4.png');
								}
							}
							li:nth-child(5){
								&:before{
									background-image:url('~@/assets/images/layout/md31_i5.png');
								}
							}
							li:nth-child(6){
								&:before{
									background-image:url('~@/assets/images/layout/md31_i6.png');
								}
							}
						}
					}
					.a-md32{
						height:3.70rem;
					}
					.a-md33{
						height:2.80rem;
						.cu-slider{
							position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;
							.el-carousel{
								width:100%;height:100%;
							}
							.el-carousel__container{
								.el-carousel__item{
									display:flex;flex-direction:column;
									.rel-fixd{
										flex:1;position:relative;margin:.10rem;
									}
									.wrap{
										display:flex;justify-content:center;
										p{
											position:absolute;top:0;left:0;font-size:.16rem;
											padding:.05rem .10rem;background-color:rgba(0,0,0, .6);
											border-radius:0 .05rem .05rem 0;
										}
										img{height:100%;}
									}
								}
							}
							.el-carousel__arrow{display:none;}
						}
					}

					.a-md34{
						height:3.20rem;
					}
					.a-md35{
						height:3.70rem;
					}
					.a-md36{
						height:2.80rem;
					}
				}
				>div{
					display:none;
					//display:flex;
					width:19.2rem;height:0;justify-content:space-between;
					.b0_left{
						margin-left:.10rem;
						
						/* .ct-box{
							margin-top:.06rem;
							background-image:linear-gradient(to right, rgba(21, 59, 85, .5), rgba(21, 59, 85, .1));
						} */	
					}
					.b0_right{
						margin-right:.10rem;
					}
				};
				div.active{
					display:flex;
					//.side{display:flex;}
				}

				.b0_a{

					.side{
						&>div{
							flex:none;position:relative;margin-bottom:.10rem;
							min-height:2.60rem;max-height:28.5vh;
						}
					}
				}
				div.el-date-editor{
					border-color:#2F8DC2;background:rgba(0,0,0,.5);
					input{background-color:transparent;color:#eee;}
					span{color:#aaa;width:20px;}
				}

				.b0_b{
					.l-panel{
						width:5.00rem;height:0;
						display:flex;flex-direction:column;justify-content:center;
					}
				}

				.b0_e{
					.side{
					}
				}
				
				.b0_i{

				
				}
			}

			.num_blue1{
				font-family:diget year;
				text-shadow:#00aef7 0px 0px .10rem;
			}
			.num_orange{
				font-family:diget year;
				text-shadow:#d9fa03 0px 0px 0.1rem;
			}
			.num_liuhuang{
				font-family:diget year;
				text-shadow:#C1FA00 0px 0px 0.1rem;
			}
			.num_qingse{
				font-family:diget year;
				text-shadow:#03CEE0 0px 0px 0.1rem;
			}
		}

		.scrolling4{position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;}

		// 进度条
		.progress{position:relative;
			height:4px;overflow:visible;border-radius:.15rem;
			background-color:rgba(0, 28, 64, .8);
		}
		.progress-bar{
			position:relative;border-radius:.15rem;
			background-image:linear-gradient(to right, rgba(0, 77, 225, .80), #01bbff);
			width:100%;height:100%;color:#fff;transition:width .6s ease;font-size:.13rem;
			display:flex;align-items:center;
			&:before{
				content:"";position:absolute;right:-3px;height:6px;width:6px;
				border-radius:6px;background-color:#01bbff;
			}
			&:after{
				content:"";position:absolute;right:-8px;height:16px;width:16px;
				border-radius:16px;background-color:rgba(1,187,255, .4);
			}
		}
		@keyframes progress-bar-stripes{
			from{
				background-position:40px 0
			}
			to{
				background-position:0 0
			}
		}
		@keyframes animate-positive{0%{width:0;}}

		.half{
			flex:1;/* height:50%;width:100%; */display:flex;align-items:center;font-size:.15rem;
			.info{
				flex:1;display:flex;height:.73rem;margin:0 .20rem;border-radius:.73rem;
				background-image:linear-gradient(to right, transparent, rgba(2,93,148, .5), rgba(2,93,148, 1));
				li{
					flex:1;display:flex;flex-direction:column;justify-content:center;color:#fff;padding-left:.12rem;position:relative;
					font{margin-bottom:.05rem;font-size:.34rem;}
					em{font-style:normal;color:#a4f5f6;margin-left:.08rem;}
				}
				li:first-child{
					display:flex;align-items:center;
				}
				li:last-child:before{
					content:"";position:absolute;top:0;left:0;height:100%;
					border-width:0 0 0 2px;border-style:solid;
					border-image:linear-gradient(to bottom, transparent 15%, #286793 50%, transparent 85%) 1;
				}
				.chart-ctn{
					position:absolute;height:1.14rem;width:1.14rem;
				}
				.chart1{
					color:#3097fc;
				}
			}
		}
		.half.reverse{
			.info{
				flex-direction:row-reverse;
				background-image:linear-gradient(to right, rgba(60, 216, 216, .6), rgba(74, 216, 216, .3), transparent);
				li{padding-left:0.18rem;}
				li:last-child:before{
					left:auto;right:0;
					border-image:linear-gradient(to bottom, transparent 15%, #54909a 50%, transparent 85%) 1;
				}
			}
		}

		/* 弹窗背景图  */
		.popupBgImage{
			background-image:url('/static/images/frame1.png');
			background-repeat:no-repeat;background-position:center center;background-size:100% 100%;
		}

		/* 加载动画 */
		.loader {
			position:absolute;top:0;left:0;height:100%;width:100%;
			display:flex;justify-content:center;align-items:center;
			&:before{
				content:"";position:absolute;height:60px;width:60px;
				border: 4px solid #1276E3;
				border-left-color: transparent;
				border-bottom: 0;
				border-radius: 50%;
				animation:loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
			}
			&:after{
				content:"";position:absolute;height:40px;width:40px;
				border-radius: 50%;
				border: 4px solid #1276E3;
				border-right: 0;
				border-top-color: transparent;
				animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
			}
		};

		video:before{content:"";position:absolute;top:0;left:0;height:100%;width:auto;border:1px solid red;}

		.weather{
			flex:1;display:flex;font-size:.14rem;
			.mleft{display:none;}
			.wtpath{display:none;}
			.mright{flex:1;text-align:center;}
			img{display:block;width:2vw !important;height:auto !important;margin:0 auto;}
			ul{margin:5px 0;color:#d0d2ff;}
			#mobile05{
				flex:1;display:flex;flex-direction:column;position:relative;margin:0 .05rem;
				.today{
					height:.60rem;display:flex;
					background-image:linear-gradient(to right, rgba(0,28,53,.7), rgba(0,28,53,.4), transparent);
					>div{
						flex:1;display:flex;
						>a{
							display:flex;align-items:center;
							font{margin-left:.15rem;color:#eee;}
						}
						.wt{
							display:flex;align-items:center;
							margin-left:.15rem;
							font{margin-left:.10rem;}
						}
						.zl{
							display:flex;align-items:center;margin-left:.20rem;
							a{color:#eee;}
						}
					}
				}
				.more{
					flex:1;display:flex;margin-top:.08rem;
					>div{
						margin-right:.07rem;
						background-image:linear-gradient(to bottom, rgba(24,69,99,.8), rgba(24,69,99,.5), transparent);
					}
					>div:nth-child(4){margin-right:0;}
					.mright:last-child{display:none;}
					.wt{
						margin-top:.25rem;
						li{margin-top:.15rem;}
					}
				}
			}
			//#mobile05>div:last-child{display:none;}
			/* #mright_1{
				top:0;left:0;height:auto;width:100%;display:flex;
				ul{margin:0;color:#03d3fe;}
				.wt{display:flex;align-items:center;margin-left:140px;}
				.day{display:none;}
				span:last-child{display:block;
					position:absolute;top:4px;left:0px;height:auto;
					font-size:26px;
				}
				font{margin:6px 0 0 10px;color:#35ecfa}
			} */

			//a{text-decoration:none;}
		}
	}

	/* 登录 */
	.login-ctn{
		user-select:none;
		background:no-repeat top left url('/static/images/login-min.jpg');background-size:100% 100%;

		.liner{
			height:100%;width:100%;display:flex;
			.l-left{
				flex:1;display:flex;flex-direction:column;justify-content:center;width:50%;padding-left:.30rem;
				background-color:rgba(9,119,198,.55);
				h3,h4{line-height:1;color:#fff;text-shadow:rgba(0,0,0,.4) -.01rem .07rem .07rem;}
				h3{font-size:.30rem;margin-top:-.10rem;}
				h4{font-size:.37rem;margin-top:.15rem;letter-spacing:.03rem;}
			}
		}
		
		.pop-login{
			position:relative;display:flex;align-items:center;justify-content:center;
			width:50%;background-color:rgba(255,255,255,.90);
			.inbox-range{
				position:absolute;flex:1;width:75%;max-width:260px;min-width:190px;
				.el-form{
					.title{
						position:relative;color:#000;letter-spacing:.04rem;text-indent:.04rem;font-size:.28rem;
						line-height:1;padding-bottom:.13rem;margin-bottom:.60rem;
						display:flex;justify-content:center;
						&:after{
							content:"";position:absolute;bottom:0;height:.04rem;width:.76rem;
							background-color:#1890ff;border-radius:20%;
						}
					}
					.el-form-item{margin-bottom:20px;position:relative;}
					.el-form-item:last-child{margin-bottom:0;}
					//>div:last-child{margin-top:45px;}
					.el-input__prefix{
						width:30px;left:0;font-size:20px;
						display:flex;align-items:center;justify-content:center;
					}
					.el-form-item__error{display:none;}
					.el-form-item__error.open{display:block}

					.login-code{
						img{width:100px;display:flex;cursor:pointer;}
					}
					.el-form-item__content{
						&:after, &:before{content:none}
					}
					.el-button--medium{margin-top:5px;}
				}
			}
		}
	}


	@keyframes rotate{
		0%{
			transform: rotate(0)
		}
		100%{
			transform: rotate(360deg)
		}
	}

	@keyframes loader-1-outter {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes loader-1-inner {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}
</style>