<template>
	<screenHeader :currentKey="currentKey">
		<div class="breadcrumb">
			<div class="left">
				{{ $i18n.locale === 'zh-CN'?'当前位置':'Current position'}}：
				<!-- <el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item >财务主题</el-breadcrumb-item>
				</el-breadcrumb> -->
				<div class="crumb-item-active">
					<span>
						{{ $i18n.locale === 'zh-CN'?'财务主题':'Financial Theme'}}
					</span>
				</div>
			</div>
			<el-cascader popper-class="cascader" :options="allList" v-model="poolCode" :props='propsData'
				placeholder="请选择企业" style="width: 250px;" @change="getData(1)" :show-all-levels="false">
				<template slot-scope="{ node, data }">
					<span v-if="data.id"> {{ data.code }} </span>
					<span v-else>{{ data.continent }}</span>
				</template>
			</el-cascader>
		</div>
		<div class="screen-body">
			<div class="screen-body-col col-side">
				<div class="side-echarts" v-for="(e,ex) in leftList">
					<echartsTitle :orderData="e" :hierarchy="hierarchy" :lowerType="lowerType">
						{{ $i18n.locale === 'zh-CN'?e.targetName:e.targetNameEn}}({{e.targetUnit}})
					</echartsTitle>
					<div :id="'pieChart'+ex" class="full" refs=""></div>
				</div>
			</div>
			<div class="screen-body-col col-center">
				<div class="screen-body-col col-center-top" style="height:30%">
					<div class="top-item" v-for="(one,onex) in dataList.slice(0,4)" :key="onex" @click="toPage(one)">
						<div class="item-label" :title=" $i18n.locale === 'zh-CN'?one.targetName:one.targetNameEn">
							{{ $i18n.locale === 'zh-CN'?one.targetName:one.targetNameEn}} </div>
						<div> {{typeof(one.showValue)=='number'?one.showValue:'-'}}({{one.targetUnit}})</div>
					</div>
				</div>
				<div class="screen-body-col col-center-cont">

					<div class="cont-top">
						<div class="top-lr">
							<div class="lr-left" v-for="(lr,lrx) in leftData" @click="toPage(lr)">
								<div class="label" style="padding-right: 35px;"
									:title="$i18n.locale === 'zh-CN'?lr.targetName:lr.targetNameEn">
									{{ $i18n.locale === 'zh-CN'?lr.targetName:lr.targetNameEn}}</div>
								<div class="value">
									{{typeof(lr.showValue)=='number'?lr.showValue:'-'}}<span>({{lr.targetUnit}})</span>
								</div>
							</div>
						</div>
						<div class="top-center">
							<div class="bottom-circle">
								<div class="centralCircle">
								</div>
							</div>
							<div class="bottom-itemBox">
								<div class="short-item">
									<img src="~@/assets/img/layer3.png" alt="">
									<img src="~@/assets/img/layer7.png" alt="">
								</div>
								<div class="long-item">
									<img src="~@/assets/img/layer2.png" alt="">
									<img src="~@/assets/img/layer6.png" alt="">
								</div>
								<div class="short-item">
									<img src="~@/assets/img/layer4.png" alt="">
									<img src="~@/assets/img/layer5.png" alt="">
								</div>
							</div>
							<div class="light-spot">

							</div>
							<div :class="[$i18n.locale === 'zh-CN'?'center-text':'mini-text']">
								{{$i18n.locale === 'zh-CN'?'一利五率':'One profit and five percentage'}}
							</div>
						</div>
						<div class="top-lr">
							<div class="lr-right" v-for="(lr,lrx) in rightData" @click="toPage(lr)">
								<div class="label" style="padding-left: 35px;"
									:title="$i18n.locale === 'zh-CN'?lr.targetName:lr.targetNameEn">
									{{ $i18n.locale === 'zh-CN'?lr.targetName:lr.targetNameEn}}</div>
								<div class="value">
									{{typeof(lr.showValue)=='number'?lr.showValue:'-'}}<span>({{lr.targetUnit}})</span>
								</div>
							</div>

						</div>
					</div>
					<div class="deadline">
						{{ $i18n.locale === 'zh-CN'?'数据截止日期':'Data deadline'}}
						
						：{{deadline}}
					</div>
				</div>
			</div>
			<div class="screen-body-col col-side">
				<div class="side-echarts" v-for="(e,ex) in rightList">
					<echartsTitle :orderData="e" :hierarchy="hierarchy" :lowerType="lowerType">
						{{ $i18n.locale === 'zh-CN'?e.targetName:e.targetNameEn}}({{e.targetUnit}})
					</echartsTitle>
					<div :id="'pieChart'+(3+ex)" class="full" refs=""></div>
				</div>
			</div>
		</div>
		<echartsDialog ref="echartsDialog"></echartsDialog>
	</screenHeader>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import * as echarts from 'echarts'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import financialTheme from '@/api/bigScrenn/financialTheme.js'
	import screenHeader from '@/views/BigScrenn/components/screenHeader.vue'
	import echartsTitle from '@/views/BigScrenn/components/echartsTitle.vue'
	import echartsDialog from '@/views/BigScrenn/components/echartsDialog.vue'

	export default {
		components: {
			screenHeader,
			echartsTitle,
			echartsDialog
		},
		data() {
			return {
				currentKey: 'financialTheme',
				hierarchy: 1, //页面层级
				pageName: '财务主题',
				oneList: [{
						name: '资本保值率',
						value: '85.32%'
					},
					{
						name: '国有资产回报率',
						value: '85.32%'
					},
					{
						name: '盈余现金保障倍数',
						value: '10倍'
					},
					{
						name: '资产现金回收率',
						value: '75.22%'
					},
				],
				tabActive: 1,
				bottomTab: [{
					name: '集团驾驶舱',
					value: 2
				}, {
					name: '企业驾驶舱',
					value: 1
				}],
				dateEchart: null,
				dateEchart1: null,
				dateEchart2: null,
				dateEchart3: null,
				dateEchart4: null,
				dateEchart5: null,
				echartsList: [], //所有echarts数据
				dataList: [],
				staLatList: [{
						name: '实际值',
						value: 1
					},
					{
						name: '预算值',
						value: 2
					}
				],
				leftList: [], //左边echarts
				rightList: [], //右边echarts
				leftData: [], //左边
				rightData: [], //右边
				rateData: {},
				options: [{
					value: '选项1',
					label: '1'
				}],
				value: '',
				options1: [{
					value: '选项1',
					label: '2'
				}],
				value1: '',
				params: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
					querys: []
				},
				zbList: [],
				dpzbList: [],
				allList: [],
				poolCode: '',
				propsData: {
					children: 'list',
					label: 'code',
					value: 'code',
					expandTrigger: 'hover'
				},
				isActive: false,
				tjwdList: [],
				lowerType: true,
				deadline: null
			}
		},
		created() {
			window.localStorage.setItem("pageName", '财务主题');

			this.tjwdList = this.$i18n.locale === 'zh-CN' ? dictUtils.getDictItemsFromCache('tjwd') : dictUtils
				.getDictItemsFromCache('tjwd_en')
			this.zbList = dictUtils.getDictItemsFromCache('zb_en')
			this.dpzbList = dictUtils.getDictItemsFromCache('dpzb')
			this.getAreaTree()
		},
		mounted() {
			this.$nextTick(() => {})
			this.$root.$on('resize', () => {
				this.resize(500)
			})
		},
		methods: {
			toPage(val) {
				window.localStorage.setItem("indexData", JSON.stringify(val));
				if (this.hierarchy == 1) {
					window.localStorage.setItem("firstPageName", JSON.stringify(val));
					this.$router.push({
						name: 'firstLevelPage',
						params: {
							targerId: val.targerId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 2) {
					window.localStorage.setItem("secondPageName", JSON.stringify(val));
					this.$router.push({
						name: 'secondLevelPage',
						params: {
							targerId: val.targerId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 3) {
					window.localStorage.setItem("thirdPageName", JSON.stringify(val));
					this.$router.push({
						name: 'thirdLevelPage',
						params: {
							targerId: val.targerId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 4) {
					window.localStorage.setItem("fourthPageName", JSON.stringify(val));
					this.$router.push({
						name: 'fourthLevelPage',
						params: {
							targerId: val.targerId,
							name: val.targetName
						}
					})
				}
			},
			//获取企业
			getAreaTree() {
				this.params.querys[{
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "pool_type_",
					relation: "AND",
					value: 1
				}, {
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "run_status_",
					relation: "AND",
					value: 1
				}]
				financialTheme.getAreaTree(this.params, res => {
					if (res) {
						res.value.forEach(e => {
							this.dpzbList.forEach(s => {
								if (e.continent == s.name) {
									e.code = s.value
								}
							})
						})
						this.allList = res.value
						let enterpriseCode = window.localStorage.getItem('enterpriseCode')
						if (enterpriseCode) {
							this.poolCode = enterpriseCode.split(',')
						} else {
							this.poolCode = [res.value[0].code, res.value[0].list[0].code]
						}
						this.getData(2)
					}
				})
			},
			arraySort(property) {
				return function(a, b) {
					var value1 = a[property]
					var value2 = b[property]
					return value1 - value2
				}
			},

			getData(val) {
				this.dataList = []
				this.echartsList = []
				this.leftList = []
				this.rightList = []
				let params = {
					type: 1
				}
				params.enterpriseCode = this.poolCode[1]
				window.localStorage.setItem("enterpriseCode", this.poolCode);
				financialTheme.oneLevelData(params, res => {
					if (res.value.length > 0) {
						res.value.forEach(e => {
							if (e.type == 13) {
								this.dataList.push(e)
							} else if (e.type == 5) {
								this.echartsList.push(e)
							}
						})
					}
					this.deadline = this.dataList[0].asDate
					this.dataList.sort(this.arraySort('sn'))
					this.echartsList.sort(this.arraySort('sn'))
					this.dataList.slice(0, 4).forEach(d => {
						this.echartsList.forEach(e => {
							if (d.targetName == e.targetName) {
								this.echartsList.splice(e, 1)
							}
						})
					})
					this.leftList = this.echartsList.slice(0, 3)
					this.rightList = this.echartsList.slice(3, 6)
					this.leftData = this.dataList.slice(4, 7)
					this.rightData = this.dataList.slice(7, 10)
					this.$nextTick(() => {
						this.echartsList.forEach((c, cx) => {
							this.dateEcharts(c, cx)
						})
					})

				})
			},
			// 动态计算高度，自适应当前容器
			resize(delay) {
				setTimeout(() => {}, delay || 0)
			},
			dateEcharts(c, cx) {
				let chartDom = echarts.init(document.getElementById(`pieChart${cx}`))
				let arr = []
				let xLabel = [];
				c.resultData.forEach(r => {
					xLabel.push(r.year)
				})
				if (c.staLat.split(',').length > 1) {
					this.tjwdList.forEach(s => {
						c.staLat.split(',').forEach(t => {
							if (s.value == t) {
								let datalist = []
								if (t == 1) {
									c.resultData.forEach(r => {
										datalist.push(r.actual)
									})
								} else if (t == 2) {
									c.resultData.forEach(r => {
										datalist.push(r.budget)
									})
								} else if (t == 3) {
									c.resultData.forEach(r => {
										datalist.push(r.actual)
									})
								} else if (t == 4) {
									c.resultData.forEach(r => {
										datalist.push(r.budget)
									})
								} else if (t == 5) {
									c.resultData.forEach(r => {
										datalist.push(r.actual)
									})
								} else if (t == 6) {
									c.resultData.forEach(r => {
										datalist.push(r.actual)
									})
								}
								if (t == 3) {
									arr.push({
										name: s.name,
										type: 'bar',
										symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
										smooth: true,
										lineStyle: {
											normal: {
												width: 3,
											},
										},
										itemStyle: {
											normal: {
												label: {
													show: false, //开启显示
													color: '#fff',
													position: 'top', //在上方显示
													formatter: function(res) {
														if (res.value) {
															return res.value
														} else {
															return 0
														}
													},
												},
											},

										},
										symbolSize: 8, //设定实心点的大小
										data: datalist

									}, )
								} else {
									arr.push({
										name: s.name,
										type: 'line',
										symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
										smooth: true,
										lineStyle: {
											normal: {
												width: 3,
												// color: '#518EF5', // 线条颜色
											},
										},
										itemStyle: {
											normal: {
												// color: '#518EF5', //拐点颜色
												// borderColor: '#fff600',//拐点边框颜色
												// borderWidth: 13//拐点边框大小
												label: {
													show: false, //开启显示
													color: '#fff',
													position: 'top', //在上方显示
													formatter: function(res) {
														if (res.value) {
															return res.value
														} else {
															return 0
														}
													},
												},
											},

										},
										symbolSize: 8, //设定实心点的大小
										data: datalist
										// c.resultData.forEach(r => {
										// 	if (t == 1) {
										// 		console.log(r);
										// 		return [...r.actual]
										// 	} else {
										// 		// arrData.push()
										// 		return [...r.budget]
										// 	}
										// }),
									}, )
								}

							}
						})
					})
				} else {
					this.tjwdList.forEach(s => {
						let data1list = []
						if (c.staLat == 1) {
							c.resultData.forEach(r => {
								data1list.push(r.actual)
							})
						} else if (c.staLat == 2) {
							c.resultData.forEach(r => {
								data1list.push(r.budget)
							})
						}
						if (s.value == c.staLat) {
							arr.push({
								name: s.name,
								type: 'line',
								symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
								smooth: true,
								lineStyle: {
									normal: {
										width: 3,
										// color: '#518EF5', // 线条颜色
									},
								},
								itemStyle: {
									normal: {
										// color: '#518EF5', //拐点颜色
										// borderColor: '#fff600',//拐点边框颜色
										// borderWidth: 13//拐点边框大小
										label: {
											show: false, //开启显示
											color: '#fff',
											position: 'top', //在上方显示
											formatter: function(res) {
												if (res.value) {
													return res.value
												} else {
													return 0
												}
											},
										},
									},

								},
								symbolSize: 8, //设定实心点的大小
								data: data1list
							}, )
						}
					})
				}
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',
						// 自定义tooltip内容
						formatter: (item) => {
							let str =
								`<div style="text-align:center;font-weight:700;font-size:16px">${item[0].name}</div>`
							let index = 0 // 命名一个索引，用于匹配增减值、增减率
							let leftClass =
								`<span style="display: inline-block; width: ${this.$i18n.locale === 'zh-CN'?'100px':'150px'}; text-align: left;">`
							let rightClass =
								'<span style="display: inline-block; width: 80px; text-align: right;">'
							item.forEach(it => {
								str +=
									`${ leftClass + it.seriesName}:</span>${ rightClass + it.value}</span></br>`
								index = it.dataIndex
							})
							if (c.resultData[index].differenceValue !== undefined) {
								str = str +
									`${leftClass}${this.$i18n.locale === 'zh-CN'?'增减值':'Value of increase or decrease'}:</span>${rightClass + c.resultData[index].differenceValue}</span></br>`
								if (c.resultData[index].differenceRate !== undefined) {
									str = str +
										`${leftClass}${this.$i18n.locale === 'zh-CN'?'增减率':'Rate of increase and decrease'}:</span>${rightClass + c.resultData[index].differenceRate}</span>`
								}
							}
							return str

						}
					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '14%',
						right: '5%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						// name: c.targetUnit,
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed',

							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];

							},
							textStyle: {
								color: '#fff',
								fontSize: 12
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: arr
				}
				option && chartDom.setOption(option)

			},

		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'YouSheBiaoTiHei';
		src: url(~@/assets/fonts/YouSheBiaoTiHei-2.ttf);
	}

	@keyframes rotateImage {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	@keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	@-webkit-keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	.full {

		margin-top: 10px;
		height: calc(100% - 42px);
	}

	.full2 {
		margin-top: 10px;
		height: calc(100% - 42px);
	}


	.screen-body {
		display: flex;
		width: 100%;
		height: calc(100% - 45px);
		padding: 0 20px;
		box-sizing: border-box;

		.screen-body-col {
			width: 100%;
		}

		.col-side {
			width: 24%;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.side-echarts {
				position: relative;
				width: 100%;
				height: 32%;
				background-color: #091d3d;
				border: 1px solid #10408c;
			}

			.side-echarts1 {
				position: relative;
				width: 100%;
				height: 48%;
				background-color: #091d3d;
				border: 1px solid #10408c;
			}

			// .more {
			// 	position: absolute;
			// 	align: right;
			// 	top: 23px;
			// 	right: 10px;
			// 	width: 113px;
			// 	height: 31px;
			// 	cursor: pointer;
			// 	line-height: 30px;
			// 	text-align: center;
			// 	font-size: 14px;
			// 	font-family: Microsoft YaHei;
			// 	font-weight: 300;
			// 	color: #FFFFFF;
			// 	background: url('~@/assets/img/more.png') center / 100% 100% no-repeat;
			// }

			// .more2 {
			// 	position: absolute;
			// 	align: right;
			// 	top: 36px;
			// 	right: 10px;
			// 	width: 113px;
			// 	height: 31px;
			// 	line-height: 30px;
			// 	text-align: center;
			// 	font-size: 14px;
			// 	font-family: Microsoft YaHei;
			// 	font-weight: 300;
			// 	color: #FFFFFF;
			// 	background: url('~@/assets/img/more.png') center / 100% 100% no-repeat;
			// }

			.active {
				color: #CCCCCC;
			}

			.side-echart2 {
				position: relative;
				// background: url('~@/assets/img/echarts-bg2.png') center / 100% 100% no-repeat;

				.title2 {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 38px;
					position: relative;
					display: flex;

					div:nth-child(1) {
						font-size: 22px !important;
						width: 150px;
						position: absolute;
						left: 60px;
						text-align: center;
					}

					div:nth-child(2) {
						font-size: 22px !important;
						position: absolute;
						width: 110px;
						right: 100px;
						text-align: center;
					}
				}
			}
		}

		.col-center {
			width: 50%;
			height: 100%;
			padding: 0 20px;

			// padding: 0 10px;
			// border: 1px solid #fff;
			// box-sizing: border-box;
			.search {
				width: 100%;
				// margin-top: 10px;
				color: rgba(255, 255, 255, 1);
				font-size: 18px;
				height: 45px;
				margin: 5px 0;
				background: linear-gradient(180deg, rgba(6, 22, 55, 1) 0%, rgba(8, 27, 47, 1) 100%);
				border: 1px solid #0F3662;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20px;
				box-sizing: border-box;

				.switch {
					width: 117px;
					height: 33px;
					line-height: 33px;
					border-radius: 15px;
					background: linear-gradient(180deg, rgba(27, 150, 179, 1) 0%, rgba(17, 85, 129, 1) 100%);
					text-align: center;
					border: 1px solid #0F3662;
					color: rgba(255, 255, 255, 1);
					font-size: 16px;

				}
			}

			.col-center-top {
				display: flex;
				flex-wrap: wrap;
				// padding-top: 20px;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
				// height: 30%;


				.top-item {
					width: 451px;
					height: 81px;
					text-align: center;
					background: url('~@/assets/img/tab-bg.png') center / 100% 100% no-repeat;

					div:nth-child(1) {
						font-size: 30px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: #FFFFFF;
						position: relative;
						top: -20px;
					}

					div:nth-child(2) {
						font-size: 35px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: #57FFFD;
						position: relative;
						top: -20px;
					}
				}

				.top-item:hover {
					background: url('~@/assets/img/tab-bg-active.png') center / 100% 100% no-repeat;

					div:nth-child(2) {
						color: #FF8E58;
					}
				}
			}

			.item-label {
				padding: 0 62px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.col-center-cont {
				height: 70%;
				padding-top: 20px;
				box-sizing: border-box;
				background: url('~@/assets/img/layer1.png') center / 60% no-repeat;
				background-position: bottom center;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// align-items: center;

				.cont-top {
					display: flex;
					justify-content: space-between;

					.top-lr {
						width: calc(50% - 200px);
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						text-align: center;
						padding-top: 20px;
						box-sizing: border-box;

						.label {
							font-size: 22px;
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							// width 设置一定的宽度
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;

						}

						.value {
							font-size: 18px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #FF8E58;

							span {
								font-size: 14px;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #FF8E58;
							}
						}

						.lr-left {
							width: 246px;
							height: 65px;
							color: #cfdfec;
							cursor: pointer;
							background: url('~@/assets/img/lr-left.png') center / 100% 100% no-repeat;
							padding-right: 30px;
							box-sizing: border-box;
						}

						.lr-left:nth-child(1) {
							margin-left: 40px;
						}

						.lr-left:nth-child(3) {
							margin-left: 40px;
						}

						.lr-left:hover .label {
							color: #ffffff;
						}

						.lr-right {
							width: 246px;
							height: 65px;
							cursor: pointer;
							color: #cfdfec;
							background: url('~@/assets/img/lr-right.png') center / 100% 100% no-repeat;
							padding-left: 30px;
							box-sizing: border-box;
						}

						.lr-right:hover {
							color: #fff;
						}

						.lr-right:nth-child(2) {
							margin-left: 40px;
						}


					}

					.top-center {
						margin-top: 20px;
						width: 400px;
						height: 400px;
						position: relative;

						.bottom-circle {
							position: absolute;
							top: 0;
							width: 400px;
							height: 400px;
							animation: rotateImage 1.5s linear infinite;
							background: url('~@/assets/img/circle.png') center / 100% 100% no-repeat;
							display: flex;
							align-items: center;
							justify-content: space-evenly;

							.centralCircle {
								width: 244px;
								height: 244px;
								background: url('~@/assets/img/centralCircle.png') center / 100% 100% no-repeat;
							}

						}

						.bottom-itemBox {
							position: absolute;
							top: 0;
							padding: 50px;
							width: 400px;
							height: 400px;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							align-items: center;
							animation: rotateImage 8s linear infinite;

							img {
								width: 95px;
								height: 87px;
							}

							.short-item {
								height: 195px;
								display: flex;
								flex-direction: column;
								justify-content: space-between;


							}

							.long-item {
								height: 310px;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
							}
						}

						.light-spot {
							width: 77px;
							height: 66px;
							position: relative;
							top: 99px;
							left: 160px;
							background: url('~@/assets/img/light-spot.png') center / 100% 100% no-repeat;
							animation-name: breath;
							/*关键帧名称*/
							animation-timing-function: ease-in-out;
							/*动画的速度曲线*/
							animation-iteration-count: infinite;
							/*动画播放的次数*/
							animation-duration: 1.5s;
							/*动画所花费的时间*/
						}

						.center-text {
							position: relative;
							top: 95px;
							left: 170px;
							width: 65px;
							font-size: 28px;
							font-family: Alimama ShuHeiTi;
							font-weight: bold;
							color: #F6F9FE;
							line-height: 36px;
						}

						.mini-text {
							position: relative;
							top: 95px;
							left: 160px;
							width: 90px;
							font-size: 16px;
							font-family: Alimama ShuHeiTi;
							font-weight: bold;
							color: #F6F9FE;
						}
					}
				}

				.deadline {
					line-height: 28px;
					text-align: right;
					font-weight: bold;
					color: red;
				}

				.cont-footer {
					width: 450px;
					height: 60px;
					padding: 12px;
					box-sizing: border-box;
					margin: 0 auto;
					display: flex;
					text-align: center;
					color: #FFFFFF;
					line-height: 59px;


					.footer-tab {
						cursor: pointer;
						font-size: 24px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						width: 167px;
						height: 40px;
						line-height: 40px;
						background: url('~@/assets/img/tab.png') center / 100% 100% no-repeat;
					}

					.footer-tab-active {
						width: 167px;
						height: 40px;
						font-size: 24px;
						width: 167px;
						line-height: 40px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						background: url('~@/assets/img/tab-active.png') center / 100% 100% no-repeat;
					}

				}
			}
		}
	}

	.axis-tip {
		display: none;
		position: absolute;
		padding: 5px 5px;
		font-size: 12px;
		line-height: 18px;
		color: #575757;
		background: #ffffff;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
		border-radius: 4px;
	}

	.title-icon {
		width: 42px;
		height: 42px;
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
		background: url('~@/assets/img/titlle-icon.png') center / 100% 100% no-repeat;

		.more {
			top: 40px;
			left: -40px;
			width: 81px;
			height: 44px;
			background: #1E75B9;
			opacity: 0.61;
			border-radius: 5px;
			display: none;
		}

		.moreActive {
			font-size: 14px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #fff;
			text-align: center;
			position: absolute;
			top: 40px;
			padding: 10px;
			box-sizing: border-box;
			left: -40px;
			width: 81px;
			height: 44px;
			background: rgba(29, 112, 178, 0.42);
			// opacity: 0.61;
			border-radius: 5px;

			span:hover {
				color: aqua;
			}
		}


	}

	.breadcrumb {
		width: 100%;
		height: 45px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 30px;
		padding: 0 20px;
		box-sizing: border-box;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		// border: 1px solid #fff;
		.left {
			height: 30px;
			display: flex;
			align-items: center;

			.crumb-item {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ADC9E9;
				margin-left: 5px;
				transform: skew(-25deg);
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb.png') center / 100% 100% no-repeat;

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}

			.crumb-item:hover {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;
			}

			.crumb-item-active {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				transform: skew(-25deg);
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}
		}

	}


	//下拉框
	/deep/.el-select-dropdown {
		border: none;
		background-color: rgba(1, 28, 82, 0.8);
	}

	//输入框
	/deep/ .el-input {
		height: 35px !important;
	}

	/deep/ .el-input__inner {
		height: 35px !important;
		color: #eee;
		border-color: #0F3662;
		background-color: rgba(1, 28, 82, 0.8);
	}

	//聚焦时的样式
	.el-select .el-input.is-focus .el-input__inner {
		border-color: #0B61AA;
		background-color: rgba(1, 28, 82, 0.8);
		color: #00D3E9;
	}

	//下拉框选中
	.el-select-dropdown__item {
		color: #eee;
	}

	//鼠标经过下拉框
	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		color: #00D3E9;
		background-color: #0F3360;
	}

	.cascader {

		//下拉框
		/deep/.el-select-dropdown {
			border: none !important;
			background-color: rgba(1, 28, 82, 0.8) !important;
		}

		//输入框
		/deep/ .el-input {
			height: 35px !important;
		}

		/deep/ .el-input__inner {
			height: 35px !important;
			color: #eee !important;
			border-color: #0F3662 !important;
			background-color: rgba(1, 28, 82, 0.8) !important;
		}

		//聚焦时的样式
		.el-select .el-input.is-focus .el-input__inner {
			border-color: #0B61AA !important;
			background-color: rgba(1, 28, 82, 0.8) !important;
			color: #00D3E9 !important;
		}

		//下拉框选中
		.el-select-dropdown__item {
			color: #eee !important;
		}

		//鼠标经过下拉框
		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			color: #00D3E9 !important;
			background-color: #0F3360 !important;
		}

	}

	/deep/ .el-breadcrumb__inner {
		color: #fff;
	}

	/deep/.el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
		color: #0DB2F4;
	}
</style>
<style>
	.cascader .el-cascader-panel {
		background-color: #0F3360;
		border: none !important;
	}

	.cascader .el-cascader-menu {
		color: #fff !important;
		border: none !important;
	}

	.cascader .el-scrollbar__wrap {
		overflow: hidden
	}

	.el-popper[x-placement^="bottom"] {
		border: 1px solid #0B61AA;
	}

	.cascader .el-cascader-menu .el-cascader-node:hover {
		background-color: #0B61AA;
	}
</style>