<template>
	<div class="home-wrapper">
		<div class="home-main">
			<div class="home-main-header">
				<div class="home-main-header-top">
					<div class="header-item">国家科技安全</div>
					<div class="header-item">></div>
					<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
					<div class="header-item">></div>
					<div class="header-item">市场准入限制</div>
				</div>
				<div class="home-main-header-center">
					<el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
					<div class="search">
						<div class="search-icon">
							<img src="./assets/images/search-icon.png" alt="" />
						</div>
						<div class="search-text">搜索</div>
					</div>
				</div>
				<div class="home-main-header-footer">
					<div class="home-main-header-footer-item">
						<div class="item-top">843</div>
						<div class="item-footer">政府官员</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">131</div>
						<div class="item-footer">科技企业领袖</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">633</div>
						<div class="item-footer">顶级科学家</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">312</div>
						<div class="item-footer">国会议员</div>
					</div>
				</div>
				<div class="home-main-header-btn-box">
					<div class="btn" @click="scrollToTop('position1')">
						<div class="btn-text">{{ "最新动态" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="scrollToTop('position2')">
						<div class="btn-text">{{ "资讯要闻" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="scrollToTop('position3')">
						<div class="btn-text">{{ "统计概览" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="scrollToTop('position4')">
						<div class="btn-text">{{ "资源库" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
				</div>
			</div>
			<div class="home-main-center">
				<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
				<div class="center-top">
					<div class="box1">
						<div class="box1-left">
							<img src="./assets/images/box1-left.png" alt="" />
						</div>
						<div class="box1-right">
							<img src="./assets/images/box1-right.png" alt="" />
						</div>
						<div class="box1-header">
							<div class="box1-header-left">
								<div class="icon">
									<img src="./assets/images/box1-header-icon.png" alt="" />
								</div>
								<div class="title">{{ "人物新闻动态" }}</div>
							</div>
							<div class="box1-header-right" @click="handleClickToDetail('337')">
								{{ "查看详情 >" }}
							</div>
						</div>
						<div class="box1-main"></div>
					</div>
					<div class="box2">
						<div class="box2-header">
							<div class="icon">
								<img src="./assets/images/box2-header-icon.png" alt="" />
							</div>
							<div class="title">
								<div class="text">{{ "风险信号" }}</div>
								<div class="num">{{ warningList.length }}</div>
							</div>
						</div>
						<div class="box2-main">
							<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
								<div class="item-left" :class="{
									itemLeftStatus1: item.status === '一般风险',
									itemLeftStatus2: item.status === '重大风险'
								}">
									{{ item.status }}
								</div>
								<div class="item-right">
									<div class="text">
										{{ item.title }}
									</div>
									<div class="time">{{ item.time }}</div>
								</div>
							</div>
						</div>
						<div class="box2-footer" @click="handleToMoreRiskSignal">
							<div class="icon">
								<img src="./assets/images/box2-footer-icon.png" alt="" />
							</div>
							<div class="text">{{ "查看更多" }}</div>
						</div>
					</div>
				</div>
				<DivideHeader id="position2" class="divide-header" :titleText="'言论动态'"></DivideHeader>
				<div class="center-center">
					<div class="box3">
						<div class="box3-header">
							<div class="box3-header-left">
								<div class="box3-header-icon">
									<img src="./assets/images/header-news.png" alt="" />
								</div>
								<div class="box3-header-title">{{ "人物动向" }}</div>
							</div>
						</div>
						<div class="box3-main"></div>
					</div>
					<div class="box4">
						<div class="box4-header">
							<div class="header-icon">
								<img src="./assets/images/header-message.png" alt="" />
							</div>
							<div class="header-title">{{ "重要人物言论及立场" }}</div>
						</div>
						<div class="box4-main"></div>
					</div>
				</div>
				<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
				<div class="center-footer">
					<div class="box5">
						<div class="box5-header">
							<div class="box5-header-left">
								<div class="box5-header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="box5-header-title">{{ "科技人物观点词云" }}</div>
							</div>
						</div>
						<div class="box5-main" id="box5Chart"></div>
					</div>
					<div class="box6">
						<div class="box6-header">
							<div class="header-icon">
								<img src="./assets/images/box6-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "科技人物观点涉及领域变化趋势" }}</div>
						</div>
						<div class="box6-main" id="box6Chart"></div>
					</div>
				</div>
				<div class="center-footer1">
					<div class="box7">
						<div class="box7-header">
							<div class="box7-header-left">
								<div class="box7-header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="box7-header-title">{{ "科技人物类型" }}</div>
							</div>
						</div>
						<div class="box7-main" id="box7Chart"></div>
					</div>
					<div class="box8">
						<div class="box8-header">
							<div class="box8-header-left">
								<div class="box8-header-icon">
									<img src="./assets/images/box6-header-icon.png" alt="" />
								</div>
								<div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div>
							</div>
						</div>
						<div class="box8-main"></div>
					</div>
				</div>
			</div>

			<div class="home-main-footer">
				<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
				<div class="home-main-footer-header">
					<div class="btn-box">
						<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
							:key="index" @click="handleClickCate(cate)">
							{{ cate }}
						</div>
					</div>
				</div>
				<div class="home-main-footer-main"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
import setChart from "@/utils/setChart";

import getMultiLineChart from "./utils/multiLineChart";
import getPieChart from "./utils/piechart";
import getRadarChart from "./utils/radarChart";
import getMapChart from "./utils/mapChart";
import getBarChart from "./utils/barChart";

// 返回首页
const handleBackHome = () => {
	router.push({
		path: "/overview"
	});
};

const handleClickToDetail = id => {
	const route = router.resolve({
		path: "/marketAccessLayout",
		query: {
			id: id
		}
	});
	window.open(route.href, "_blank");
};

// 风险信号
const warningList = ref([
	{
		title: "关于对中华人民共和国合成阿片类药物供应链...",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "关于调整汽车及汽车零部件进口的公告",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "关于调整钢铁进口的公告",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "关于使用互惠关税规范进口以纠正导致大规模...",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "关于修订对中华人民共和国低价值进口商品适...",
		time: "一天前",
		status: "一般风险"
	}
]);

const categoryList = ref(["全部人物", "国会议员", "行政主官", "科技领袖", "顶尖科学家"]);

const activeCate = ref("全部人物");
const activeHylyId = ref("");

const handleClickCate = cate => {
	console.log(cate);

	activeCate.value = cate.hylymc;
	activeHylyId.value = cate.hylyid;
	handleGetBillsByType();
};

const chart1Data = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{
			name: "337调查",
			value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87]
		},
		{
			name: "301调查",
			value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
		},
		{
			name: "232调查",
			value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
		}
	]
});

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};

const box7Chart1Data = ref([
	{
		name: "337调查",
		data: [
			{ name: "北京", value: 10, coord: [115.46, 39.92] },
			{ name: "上海", value: 9, coord: [120.48, 31.22] },
			{ name: "广东", value: 15, coord: [114.23, 23.16] },
			{ name: "江苏", value: 30, coord: [117.78, 32.04] },
			{ name: "浙江", value: 20, coord: [121.19, 30.26] },
			{ name: "四川", value: 4, coord: [105.06, 30.67] },
			{ name: "陕西", value: 1, coord: [106.95, 34.27] },
			{ name: "辽宁", value: 3, coord: [122.38, 41.8] }
		]
	},
	{
		name: "301调查",
		data: [
			{ name: "北京", value: 10, coord: [112.48, 38.95] },
			{ name: "上海", value: 9, coord: [121.5, 33.25] },
			{ name: "广东", value: 15, coord: [118.25, 21.18] },
			{ name: "江苏", value: 30, coord: [115.8, 34.06] },
			{ name: "浙江", value: 20, coord: [124.21, 31.28] },
			{ name: "四川", value: 4, coord: [114.08, 32.69] },
			{ name: "陕西", value: 1, coord: [109.97, 30.29] },
			{ name: "辽宁", value: 3, coord: [113.4, 40.82] }
		]
	},
	{
		name: "232调查",
		data: [
			{ name: "北京", value: 10, coord: [116.44, 39.9] },
			{ name: "上海", value: 9, coord: [121.46, 31.2] },
			{ name: "广东", value: 15, coord: [113.21, 23.14] },
			{ name: "江苏", value: 30, coord: [118.76, 32.02] },
			{ name: "浙江", value: 20, coord: [120.19, 30.24] },
			{ name: "四川", value: 4, coord: [104.04, 30.67] },
			{ name: "陕西", value: 1, coord: [108.95, 34.25] },
			{ name: "辽宁", value: 3, coord: [123.36, 41.8] }
		]
	}
]);

const box7Chart2Data = ref([
	{
		name: "广东省",
		value: 42
	},
	{
		name: "上海市",
		value: 35
	},
	{
		name: "浙江省",
		value: 28
	},
	{
		name: "江苏省",
		value: 19
	},
	{
		name: "北京市",
		value: 15
	},
	{
		name: "四川省",
		value: 12
	},
	{
		name: "山东省",
		value: 11
	},
	{
		name: "福建省",
		value: 8
	}
]);

onMounted(async () => {
	let chart1 = getMultiLineChart(
		chart1Data.value.title,
		chart1Data.value.data[0].value,
		chart1Data.value.data[1].value,
		chart1Data.value.data[2].value
	);
	setChart(chart1, "chart1");

	let chart2 = getRadarChart();
	setChart(chart2, "chart2");

	let box7Chart1 = getMapChart(box7Chart1Data.value);
	setChart(box7Chart1, "box7Chart1");

	let box7Chart2 = getBarChart(box7Chart2Data.value);
	setChart(box7Chart2, "box7Chart2");
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
	box-shadow: none;
}

.home-wrapper {
	.home-main {
		width: 1920px;
		margin: 0 auto;
		background: url("./assets/images/background.png");
		background-size: 100% 100%;

		.home-main-header {
			display: flex;
			flex-direction: column;
			align-items: center;

			.home-main-header-top {
				box-sizing: border-box;
				width: 100%;
				height: 64px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 64px;
				background: url("./assets/images/header-bg.png");
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 700;
				color: #fff;
				padding-left: 160px;
				display: flex;

				.header-item {
					margin: 0 3px;
				}

				.back-item {
					cursor: pointer;

					&:hover {
						color: #ccc;
					}
				}
			}

			.home-main-header-center {
				margin-top: 48px;
				width: 960px;
				height: 48px;
				border-radius: 10px;
				box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
				background: rgba(255, 255, 255, 1);
				box-sizing: border-box;
				padding: 1px;
				position: relative;
				border: 1px solid transparent;

				&:hover {
					border: 1px solid var(--color-main-active);
				}

				.search {
					position: absolute;
					right: -1px;
					top: 0px;
					width: 120px;
					height: 46px;
					border-radius: 10px;
					background: var(--color-main-active);
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;

					.search-icon {
						width: 18px;
						height: 18px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.search-text {
						margin-left: 8px;
						height: 22px;
						color: #fff;
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}

			.home-main-header-footer {
				margin-top: 38px;
				width: 688px;
				height: 64px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.home-main-header-footer-item {
					padding: 0 10px;
					text-align: center;

					.item-top {
						height: 22px;
						color: rgba(20, 89, 187, 1);
						font-family: Microsoft YaHei;
						font-size: 36px;
						font-weight: 700;
						line-height: 22px;
					}

					.item-footer {
						margin-top: 10px;
						height: 30px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
					}
				}
			}

			.home-main-header-btn-box {
				width: 688px;
				margin: 0 auto;
				margin-top: 39px;
				display: flex;
				justify-content: space-between;

				.btn {
					display: flex;
					width: 140px;
					height: 36px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 18px;
					justify-content: center;
					background: #e7f3ff;
					position: relative;
					cursor: pointer;

					&:hover {
						background: #cae3fc;
					}

					.btn-text {
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 34px;
						margin-left: 5px;
					}

					.btn-icon {
						height: 20px;
						line-height: 20px;
						position: absolute;
						top: 6px;
						right: 8px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
					}
				}
			}
		}

		.home-main-center {
			margin-top: 34px;

			.center-top {
				height: 450px;
				display: flex;
				justify-content: center;
				gap: 20px;

				.box1 {
					width: 1064px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: #fff;
					box-sizing: border-box;
					position: relative;

					.box1-left {
						position: absolute;
						left: 0;
						top: 220px;
						width: 24px;
						height: 48px;
						cursor: pointer;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.box1-right {
						position: absolute;
						right: 0;
						top: 220px;
						width: 24px;
						height: 48px;
						cursor: pointer;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.box1-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						justify-content: space-between;
						padding-left: 31px;
						padding-right: 41px;

						.box1-header-left {
							display: flex;

							.icon {
								width: 18px;
								height: 18px;
								margin-top: 19px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.title {
								width: 152px;
								height: 53px;
								margin-left: 18px;
								color: #fff;
								background: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 53px;
								text-align: center;
							}
						}

						.box1-header-right {
							margin-top: 19px;
							height: 16px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}

					.box1-main {
						width: 1064px;
						height: 354px;
						margin-top: 22px;
						margin-left: 31px;
					}
				}

				.box2 {
					width: 521px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					position: relative;

					.box2-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;

						.icon {
							width: 24px;
							height: 22px;
							margin-left: 33px;
							margin-top: 13px;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.title {
							display: flex;
							width: 148px;
							height: 48px;
							background: rgba(206, 79, 81, 1);
							margin-left: 25px;

							.text {
								margin-left: 15px;
								margin-top: 13px;
								height: 22px;
								color: #fff;
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}

							.num {
								width: 24px;
								height: 20px;
								line-height: 20px;
								text-align: center;
								color: rgba(255, 255, 255, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								margin-left: 15px;
								margin-top: 14px;
								border-radius: 100px;
								background: rgba(255, 255, 255, 0.3);
							}
						}

						.more {
							margin-top: 16px;
							margin-left: 200px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}

					.box2-main {
						margin-top: 2px;
						height: 330px;
						overflow-y: auto;

						.box2-main-item {
							margin-left: 23px;
							height: 47px;
							width: 464px;
							display: flex;
							cursor: pointer;

							&:hover {
								background: var(--color-bg-hover);
							}

							.itemLeftStatus1 {
								color: rgba(82, 196, 26, 1) !important;
								background: rgba(246, 255, 237, 1) !important;
							}

							.itemLeftStatus2 {
								color: rgba(250, 140, 22, 1) !important;
								background: rgba(255, 247, 230, 1) !important;
							}

							.item-left {
								margin-top: 4px;
								margin-left: 2px;
								width: 40px;
								height: 40px;
								border-radius: 20px;
								background: rgba(255, 241, 240);
								color: rgba(245, 34, 45, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								font-weight: 400;
								line-height: 14px;
								box-sizing: border-box;
								padding: 6px 4px;
								text-align: center;
							}

							.item-right {
								margin-left: 13px;
								width: 408px;
								height: 47px;
								border-bottom: 1px solid rgba(240, 242, 244, 1);
								display: flex;

								.text {
									width: 348px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 47px;
								}

								.time {
									margin-left: 10px;
									line-height: 47px;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
						}
					}

					.box2-footer {
						position: absolute;
						left: 30px;
						bottom: 20px;
						width: 460px;
						height: 42px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						border-radius: 6px;
						background: var(--color-main-active);
						gap: 8px;
						cursor: pointer;

						.icon {
							width: 16px;
							height: 16px;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
			}

			.center-center {
				width: 1600px;
				margin: 0 auto;
				margin-top: 21px;

				.box3 {
					width: 1600px;
					height: 640px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
					background: rgba(255, 255, 255, 1);

					.box3-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;

						.box3-header-left {
							display: flex;

							.box3-header-icon {
								margin-top: 16px;
								width: 19px;
								height: 19px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.box3-header-title {
								margin-top: 16px;
								margin-left: 19px;
								height: 22px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}

							.more {
								width: 49px;
								height: 24px;
								position: absolute;
								top: 14px;
								right: 27px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								cursor: pointer;
							}
						}
					}

					.box3-main {
						height: 402px;
						overflow-y: auto;
						overflow-x: hidden;
						padding-top: 6px;
					}
				}

				.box4 {
					margin-top: 16px;
					width: 1600px;
					height: 460px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
					background: rgba(255, 255, 255, 1);

					.box4-header {
						width: 792px;
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						box-sizing: border-box;
						padding-left: 22px;
						position: relative;

						.header-icon {
							margin-top: 15px;
							width: 20px;
							height: 20px;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.header-title {
							margin-top: 16px;
							margin-left: 18px;
							height: 22px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 22px;
						}

						.more {
							width: 49px;
							height: 24px;
							position: absolute;
							top: 14px;
							right: 27px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							cursor: pointer;
						}
					}

					.box4-main {
						height: 402px;
						overflow-y: auto;
						box-sizing: border-box;
						padding-top: 8px;
					}
				}
			}

			.center-footer {
				margin-top: 21px;
				height: 460px;
				display: flex;
				justify-content: center;
				gap: 15px;

				.box5 {
					width: 1064px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box5-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;

						.box5-header-left {
							display: flex;

							.box5-header-icon {
								margin-top: 15px;
								margin-left: 2px;
								width: 19px;
								height: 19px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.box5-header-title {
								margin-top: 12px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}

						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;

							.icon {
								width: 14px;
								height: 16px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.box5-main {
						height: 397px;
					}
				}

				.box6 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box6-header {
						width: 521px;
						height: 53px;
						box-sizing: border-box;
						padding: 0 20px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						position: relative;

						.header-icon {
							margin-top: 18px;
							width: 19px;
							height: 19px;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.header-title {
							margin-top: 16px;
							margin-left: 15px;
							height: 22px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 22px;
						}

						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;

							.icon {
								width: 14px;
								height: 16px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.box6-main {
						height: 360px;
					}
				}
			}

			.center-footer1 {
				margin-top: 16px;
				display: flex;
				justify-content: center;
				gap: 15px;

				.box7 {
					width: 1064px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box7-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;

						.box7-header-left {
							display: flex;

							.box7-header-icon {
								margin-top: 15px;
								margin-left: 2px;
								width: 19px;
								height: 19px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.box7-header-title {
								margin-top: 12px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}

						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;

							.icon {
								width: 14px;
								height: 16px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.box7-main {
						height: 412px;
					}
				}

				.box8 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box8-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;

						.box8-header-left {
							display: flex;

							.box8-header-icon {
								margin-top: 15px;
								margin-left: 2px;
								width: 19px;
								height: 19px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.box8-header-title {
								margin-top: 12px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}

						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;

							.icon {
								width: 14px;
								height: 16px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.box8-main {
						width: 469px;
						height: 360px;
					}
				}
			}
		}

		.home-main-footer {
			height: 1149px;
			overflow: hidden;

			.home-main-footer-header {
				width: 1600px;
				height: 42px;
				margin: 36px auto;
				// background: orange;
				display: flex;
				justify-content: space-between;

				.btn-box {
					width: 1000px;
					display: flex;

					.btn {
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 42px;
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 0);
						margin-right: 20px;
						cursor: pointer;

						&:hover {
							background: rgba(20, 89, 187, 0.1);
						}
					}

					.btnActive {
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 1);
						color: #fff;

						&:hover {
							color: #fff;
							background: rgba(20, 89, 187, 1);
						}
					}
				}

				.select-box {
					height: 42px;
					box-sizing: border-box;
					padding: 5px 0;
				}
			}

			.home-main-footer-main {
				width: 1600px;
				margin-bottom: 20px;
				height: 985px;
				// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				// background: rgba(255, 255, 255, 1);
				margin: 0 auto;
				box-sizing: border-box;
				// padding: 20px;
				display: flex;

				.left {
					width: 300px;
					height: 560px;
					border-radius: 4px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);

					.left-box1 {
						margin-top: 17px;
						height: 260px;

						.left-box1-header {
							display: flex;

							.icon {
								width: 8px;
								height: 16px;
								margin-top: 4px;
								border-radius: 2px 2px 0 0;
								background: var(--color-main-active);
							}

							.title {
								height: 2px;
								margin-left: 17px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
							}
						}

						.left-box1-main {
							margin-top: 10px;

							.time-label {
								height: 35px;
								margin-left: 25px;
							}
						}
					}

					.left-box2 {
						margin-top: 17px;
						height: 260px;

						.left-box2-header {
							display: flex;

							.icon {
								width: 8px;
								height: 16px;
								margin-top: 4px;
								border-radius: 2px 2px 0 0;
								background: var(--color-main-active);
							}

							.title {
								height: 2px;
								margin-left: 17px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
							}
						}

						.left-box2-main {
							margin-top: 10px;

							.area-label {
								height: 35px;
								margin-left: 25px;
							}
						}
					}
				}

				.right {
					margin-left: 16px;
					width: 1284px;
					height: 899px;
					border-radius: 4px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);

					.right-header {
						height: 54px;
						background: rgba(59, 65, 75, 1);
						display: flex;

						.header-item1 {
							width: 500px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 80px;
							box-sizing: border-box;
						}

						.header-item2 {
							width: 196px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 20px;
							box-sizing: border-box;
						}

						.header-item3 {
							width: 196px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 20px;
							box-sizing: border-box;
						}

						.header-item4 {
							width: 196px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 20px;
							box-sizing: border-box;
						}

						.header-item5 {
							width: 196px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 20px;
							box-sizing: border-box;
						}
					}

					.right-main {
						height: 780px;

						// background: orange;
						.item {
							display: flex;
							padding: 16px 0;

							// height: 56px;
							&:nth-child(2n) {
								background: rgba(247, 248, 249, 1);
							}

							.item-box1 {
								width: 500px;
								display: flex;

								.name {
									height: 22px;
									padding: 0 8px;
									box-sizing: border-box;
									border-radius: 4px;
									margin-left: 32px;
									margin-top: 10px;
									// display: flex;
									// align-items: center;
								}

								.name1 {
									color: rgba(250, 140, 22, 1);
									border: 1px solid rgba(255, 213, 145, 1);
									background: rgba(255, 247, 230, 1);
								}

								.name2 {
									color: var(--color-main-active);
									border: 1px solid rgba(145, 202, 255, 1);
									background: rgba(230, 244, 255, 1);
								}

								.name3 {
									color: rgba(114, 46, 209, 1);
									border: 1px solid rgba(211, 173, 247, 1);
									background: rgba(249, 240, 255, 1);
								}

								.title {
									margin-left: 12px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									display: flex;
									align-items: center;
								}
							}

							.item-box2 {
								width: 196px;
								padding-left: 20px;
								box-sizing: border-box;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								display: flex;
								align-items: center;
							}

							.item-box3 {
								width: 196px;
								padding-left: 20px;
								box-sizing: border-box;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								display: flex;
								align-items: center;
							}

							.item-box4 {
								width: 196px;
								padding-left: 20px;
								box-sizing: border-box;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								display: flex;
								align-items: center;
							}

							.item-box5 {
								width: 196px;
								padding-left: 20px;
								box-sizing: border-box;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								display: flex;
								align-items: center;
							}
						}
					}

					.right-footer {
						display: flex;
						// height: 60px;
						// background: orange;
						justify-content: space-between;

						.footer-left {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							margin-left: 24px;
							margin-top: 6px;
						}

						.footer-right {
							margin-right: 24px;
						}
					}
				}
			}
		}
	}
}

.divide-header {
	margin: 0 auto;
	margin-top: 52px;
	margin-bottom: 36px;
}

:deep(.el-input__wrapper) {
	box-shadow: none;
	border-radius: 10px;
}

:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}
</style>
