<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">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position2')">
						<div class="btn-text">{{ "资讯要闻" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position3')">
						<div class="btn-text">{{ "统计概览" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position4')">
						<div class="btn-text">{{ "资源库" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</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/TechnologyFigures-icon4.png" alt="" />
								</div>
								<div class="title">{{ "人物新闻动态" }}</div>
							</div>
							<div class="box1-header-right" @click="handleClickToDetail('337')">
								{{ "查看详情 >" }}
							</div>
						</div>
						<div class="box1-main">
							<PersonNewsCard />
						</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/TechnologyFigures-icon3.png" alt="" />
								</div>
								<!-- <div class="box3-header-title">{{ "人物动向" }}</div> -->
								<div class="header-title"
									style="width: 1560px; display: flex; justify-content: space-between; margin-top: 10px">
									<div class="box3-header-title">
										{{ "人物动向" }}
									</div>
									<div style="display: flex; gap: 8px; margin-right: 12px">
										<div v-for="value in peoDateList"
											:class="peoDate !== value ? 'btn-box-samll' : 'btn-box-select-samll'">
											{{ value }}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box3-main">
							<TimelineMap />
						</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"
								style="width: 1595px; display: flex; justify-content: space-between; margin-top: 10px">
								<div>
									{{ "重要人物言论及立场" }}
								</div>
								<div style="display: flex; gap: 8px; margin-right: 12px">
									<div v-for="value in fields"
										:class="fieldSelect !== value ? 'btn-box-samll' : 'btn-box-select-samll'">
										{{ value }}
									</div>
								</div>
							</div>
						</div>
						<div class="box4-main">
							<SpeechStance />
						</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/TechnologyFigures-icon1.png" alt=""
										style="margin: 13px 21px 13px 21px; height: 22px" />
									<div class="box5-header-title">{{ "科技人物观点词云" }}</div>
								</div>
								<div>
									<div style="height: 45px; display: flex; align-items: center">
										<el-select v-model="wordCloudvalue" style="width: 120px; height: 28px">
											<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
										</el-select>
										<el-select v-model="wordCloudfield" style="width: 120px; height: 28px; margin: 10px 24px 10px 5px">
											<el-option v-for="item in fieldSelect" :key="item.value" :label="item.label"
												:value="item.value" />
										</el-select>
									</div>
								</div>
							</div>
						</div>
						<div class="box5-main" id="box5Chart"></div>
					</div>
					<div class="box6">
						<div class="box6-header" style="width: 790px">
							<div class="header-icon">
								<img src="./assets/images/box3-header-icon.png" alt="" />
							</div>
							<div class="header-title"
								style="display: flex; width: 740px; justify-content: space-between; align-items: center">
								<div>
									{{ "科技人物观点涉及领域变化趋势" }}
								</div>


								<el-select v-model="areaSelect" style="width: 120px; height: 28px">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>

							</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/TechnologyFigures-icon2.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/TechnologyFigures-icon2.png" alt="" />
								</div>
								<div style="display: flex; width: 730px; justify-content: space-between; align-items: center">
									<div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div>
									<div style="gap: 8px;display: flex;">
										<div v-for="value in viewOption"
											:class="viewSelect !== value ? 'btn-box-samll' : 'btn-box-select-samll'">
											{{ value }}
										</div>
										<el-select v-model="wordCloudvalue" style="width: 120px; height: 28px;    margin-top: -5px;">
											<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
										</el-select>
									</div>

								</div>
							</div>
						</div>
						<div class="box8-main">
							<PersonTable />
						</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">
					<SourceLibrary />
				</div>
			</div>
		</div>
	</div>
</template>

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

// 图表工具函数（仅保留用到的）
import getWordCloudChart from "./utils/worldCloudChart";
import getMultiLineChart from "./utils/multiLineChart";
import getDonutChart from "./utils/donutChart.js";

// 组件
import TimelineMap from "./component/TimelineMap.vue";
import PersonNewsCard from "./component/PersonNewsCard.vue";
import SpeechStance from "./component/speechStance.vue";
import PersonTable from "./component/PersonTable.vue";
import SourceLibrary from "./component/SourceLibrary.vue";

const router = useRouter();

// 搜索输入
const input = ref("");

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

// 查看详情
const handleClickToDetail = id => {
	const route = router.resolve({
		path: "/marketAccessLayout",
		query: { 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 peoDate = ref("今天");
const peoDateList = ["今天", "昨天", "近三天", "本周", "本月"];
//重要人物言论及立场选择按钮
const fieldSelect = ref("全部领域");
const fields = [
	"全部领域",
	"集成电路",
	"能源",
	"生物科技",
	"量子科技",
	"人工智能",
	"通信网络",
	"航空航天",
	"海洋",
	"新材料",
	"先进制造"
];
const yearList = ref(["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"]);
// 资源库分类
const categoryList = ref(["全部人物", "国会议员", "行政主官", "科技领袖", "顶尖科学家"]);
const activeCate = ref("全部人物");

const handleClickCate = cate => {
	activeCate.value = cate;
};

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

// === 图表数据 ===

// 词云数据
const wordCloudData = ref([
	{ name: "人工智能 (AI)", value: 100 },
	{ name: "进行可再生能源税收减免", value: 85 },
	{ name: "减少燃料对外依赖", value: 80 },
	{ name: "评估中美现代化技术", value: 75 },
	{ name: "应对中国制造2025战略", value: 70 },
	{ name: "加强供应链风险管理", value: 68 },
	{ name: "补贴和税收抵免", value: 65 },
	{ name: "评估中美能源技术", value: 60 },
	{ name: "实施能源税收延期", value: 58 },
	{ name: "投资基础设施", value: 55 },
	{ name: "禁止资助中国能源项目", value: 53 },
	{ name: "限制采购中国产电池", value: 50 },
	{ name: "加强美国在核能领域得到领导力", value: 48 },
	{ name: "技术出口限制", value: 45 },
	{ name: "出口管制与投资审查", value: 42 },
	{ name: "供应链调整", value: 40 },
	{ name: "左岸外包", value: 38 },
	{ name: "空域主权与安全", value: 36 },
	{ name: "抵制外国人才争夺", value: 34 },
	{ name: "无人机先进空中交通", value: 32 },
	{ name: "能源与基础设施", value: 30 }
]);
const wordCloudfield = ref("全部领域");
const wordCloudvalue = ref("2025");
const areaSelect = ref("近十年");
const options = [
	{
		value: "近十年",
		label: "近十年"
	},
	{
		value: "近五年",
		label: "近五年"
	}
];
// 领域趋势数据
const box6Chart = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{ name: "人工智能", value: [150, 70, 80, 90, 75, 85, 100, 140, 130, 150, 190, 170] },
		{ name: "集成电路", value: [70, 85, 120, 115, 100, 120, 160, 160, 160, 160, 165, 175] },
		{ name: "量子科技", value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 15] },
		{ name: "生物科技", value: [5, 0, 10, 15, 18, 20, 25, 30, 30, 35, 40, 45] },
		{ name: "通信网络", value: [40, 35, 45, 48, 45, 45, 50, 55, 50, 50, 55, 50] },
		{ name: "能源", value: [90, 70, 75, 70, 65, 75, 80, 80, 75, 85, 80, 70] }
	]
});

const viewOption = ref(["行政主管", "国会议员", "科技领袖", "顶尖科学家"]);
const viewSelect = ref("行政主管");
// 科技人物类型
const chart7Data = ref({
	name: ["国会议员", "行政主官", "科技领袖", "顶尖科学家", "其他"],
	value: [482, 41, 83, 201, 25]
});

onMounted(() => {
	// 词云
	const wordCloudChart = getWordCloudChart(wordCloudData.value);
	setChart(wordCloudChart, "box5Chart");

	// 领域趋势
	const chart6 = getMultiLineChart(box6Chart.value.title, ...box6Chart.value.data.map(d => d.value));
	setChart(chart6, "box6Chart");

	// 人物类型
	const chart7 = getDonutChart(chart7Data.value.name, chart7Data.value.value, true);
	setChart(chart7, "box7Chart");
});
</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-repeat: no-repeat;
		background-color: #fff;
		background-size: contain;

		.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;
					align-items: center;
					gap: 9px;
					width: 160px;
					height: 48px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 24px;
					background: #e7f3ff;
					cursor: pointer;
					position: relative;

					&:hover {
						background: #cae3fc;
					}

					.btn-text {
						width: 83px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 48px;
						margin-left: 36px;
						text-align: center;
					}

					.btn-icon {
						position: absolute;
						top: 16px;
						right: 19px;
						width: 6px;
						height: 12px;

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

		.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: 1009px;
						height: 354px;
						margin-top: 28px;
						margin-left: 40px;
					}
				}

				.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);
							}
						}
					}

					.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: 16px;
									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: 3px;
								margin-left: 20px;
								height: 22px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}
						}
					}

					.box3-main {
						height: 590px;
						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: 1595px;
						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;
						}
					}

					.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: 792px;
					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 {
						width: 792px;
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;

						position: relative;

						.box5-header-left {
							display: flex;
							width: 792px;
							justify-content: space-between;

							.box5-header-icon {
								display: flex;
							}

							.box5-header-title {
								width: 190px;
								color: rgba(5, 95, 194, 1);

								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								letter-spacing: 0px;
								text-align: left;
								line-height: 48px;
							}
						}
					}

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

				.box6 {
					width: 792px;
					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;
						}
					}

					.box6-main {
						margin-top: 15px;
						height: 360px;
					}
				}
			}

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

				.box7 {
					width: 792px;
					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;
							}
						}
					}

					.box7-main {
						height: 405px;
						margin: 0 59px 0 59px;
					}
				}

				.box8 {
					width: 792px;
					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: 18px;
								margin-left: 2px;
								width: 19px;
								height: 19px;

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

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

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

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

			.home-main-footer-header {
				width: 1600px;
				height: 42px;
				margin: 36px auto;
				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: 18px;
						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;
						font-weight: 700;

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

			.home-main-footer-main {
				width: 1600px;
				margin-bottom: 20px;
				height: 985px;
				margin: 0 160px;
				box-sizing: border-box;
				display: flex;
			}
		}
	}
}

.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),
:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}

:deep(.el-select__placeholder) {
	color: rgba(59, 65, 75, 1);

	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0px;
}

.btn-box-samll {
	height: 28px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	color: rgba(59, 65, 75, 1);
	box-sizing: border-box;
	border: 1px solid rgba(230, 231, 232, 1);
	border-radius: 4px;
	background: rgba(255, 255, 255, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
}

.btn-box-select-samll {
	height: 28px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	color: rgba(5, 95, 194, 1);
	box-sizing: border-box;
	border: 1px solid rgba(5, 95, 194, 1);
	border-radius: 4px;
	background: rgba(231, 243, 255, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
}
</style>
