<template>
	<div class="home-wrapper">
		<div class="search-header" v-show="isShow">
			<div class="home-main-header-center">
				<el-input v-model="input" style="width: 680px; 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-btn-box">
				<div class="btn" @click="handleToPosi('position1')">
					<div class="btn-text">{{ "最新动态" }}</div>
					<div class="btn-icon">{{ ">" }}</div>
				</div>
				<div class="btn" @click="handleToPosi('position2')">
					<div class="btn-text">{{ "资讯要闻" }}</div>
					<div class="btn-icon">{{ ">" }}</div>
				</div>
				<div class="btn" @click="handleToPosi('position3')">
					<div class="btn-text">{{ "数据总览" }}</div>
					<div class="btn-icon">{{ ">" }}</div>
				</div>
				<div class="btn" @click="handleToPosi('position4')">
					<div class="btn-text">{{ "资源库" }}</div>
					<div class="btn-icon">{{ ">" }}</div>
				</div>
			</div>
		</div>
		<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
			<div class="home-main-header">
				<div class="home-main-header-top" v-show="!isShow">
					<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" v-show="!isShow">
					<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" v-show="!isShow">
					<div class="home-main-header-footer-item">
						<div class="item-top">142</div>
						<div class="item-footer">创新主体数量</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">328</div>
						<div class="item-footer">专利授权数量</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">326</div>
						<div class="item-footer">论文发表数量</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">156</div>
						<div class="item-footer">高被引论文数量</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">84</div>
						<div class="item-footer">重要技术进展数量</div>
					</div>
				</div>
				<div class="home-main-header-btn-box" v-show="!isShow">
					<div class="btn" @click="handleToPosi('position1')">
						<div class="btn-text">{{ "最新动态" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="handleToPosi('position2')">
						<div class="btn-text">{{ "资讯要闻" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="handleToPosi('position3')">
						<div class="btn-text">{{ "数据总览" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="handleToPosi('position4')">
						<div class="btn-text">{{ "资源库" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
				</div>
				
			</div>
			<DivideHeader id="position1" class="divide" :titleText="'最新动态'" style="margin-top: 50px;"></DivideHeader>
			<div class="home-main-center">
				<div class="center-top">
					<div class="box1">
						<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">
								{{ "查看详情 >" }}
							</div>
						</div>
						<div class="box1-main">
							<div class="box1-main-left">
								<div class="box1-main-left-top">
									<div class="box1-main-left-top-item" v-for="item in distributionList" :key="item.name" >
										<div class="box1-main-left-top-item-text1">研究型大学</div>
										<div class="box1-main-left-top-item-text2">142</div>
									</div>
								</div>
							</div>
							<div class="box1-main-right">
								
							</div>
						</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"
								@click="handleClickToDetail()"
							>
								<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="divide2" :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/box3-header-icon.png" alt="" />
								</div>
								<div class="box3-header-title">{{ "新闻资讯" }}</div>
								<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
							</div>
						</div>
						<div class="box3-main">
							<div class="box3-item" v-for="(news, index) in newsList" :key="index">
								<div class="left">
									<img :src="news.img" alt="" />
								</div>
								<div class="right">
									<div class="right-top">
										<div class="title">{{ news.title }}</div>
										<div class="time">{{ news.from }}</div>
									</div>
									<div class="right-footer">{{ news.content }}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="box4">
						<div class="box4-header">
							<div class="header-icon">
								<img src="./assets/images/box4-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "社交媒体" }}</div>
							<div class="more">{{ "更多 +" }}</div>
						</div>
						<div class="box4-main">
							<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
								<div class="left">
									<img :src="item.img" alt="" />
								</div>
								<div class="right">
									<div class="right-top">
										<div class="name">{{ item.name }}</div>
										<div class="time">{{ item.time }}</div>
									</div>
									<div class="content">{{ item.content }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
				<div class="center-footer">
					<div class="box3">
						<div class="box3-header">
							<div class="box3-header-left">
								<div class="box3-header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="box3-header-title">{{ "政令发布频度" }}</div>
							</div>
							<div class="box3-header-right">
								<img src="./assets/images/header-more.png" alt="" />
							</div>
						</div>
						<div class="box3-main" id="chart1"></div>
					</div>
					<div class="box4">
						<div class="box4-header">
							<div class="header-icon">
								<img src="./assets/images/box4-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "政令涉及领域" }}</div>
							<div class="header-right">
								<img src="./assets/images/header-more.png" alt="" />
							</div>
						</div>
						<div class="box4-main" id="chart2"></div>
					</div>
				</div>
				<div class="center-footer1">
					<div class="box5">
						<div class="box5-header">
							<div class="header-icon">
								<img src="./assets/images/box5-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "关键政令及举措" }}</div>
						</div>
						<div class="box5-main">
							<div class="box5-item" v-for="(item, index) in keyDecreeList" :key="index">
								<div class="icon">
									<img src="./assets/images/warning.png" alt="" />
								</div>
								<div class="info">
									<div class="info-header">
										<div class="title">{{ item.title }}</div>
										<div class="time">{{ item.time }}</div>
									</div>
									<div class="info-content">{{ item.content }}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="box6">
						<div class="box6-header">
							<div class="header-icon">
								<img src="./assets/images/box5-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "政令重点条款" }}</div>
						</div>
						<div class="box6-main">
							<WordCloudMap :data="wordCloudData" :shape="circle" />
						</div>
					</div>
				</div>
			</div>
			<div class="home-main-footer">
				<DivideHeader id="position4" class="divide4" :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 class="select-box">
						<el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px">
							<el-option
								v-for="item in releaseTimeList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						<!-- <el-select
              v-model="releaseTime"
              placeholder="选择发布时间"
              style="width: 120px"
            >
              <el-option
                v-for="item in releaseTimeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
					</div>
				</div>
				<div class="home-main-footer-main">
					<div class="content-header">
						<div class="icon">
							<img src="./assets/images/box1-header-icon.png" alt="" />
						</div>
						<div class="title">{{ "政令库" }}</div>
					</div>
					<div class="content-box">
						<div class="main-item" v-for="(decree, index) in curDecreeList" :key="index" @click="handleClickToDetail">
							<div class="main-item-left">
								<div
									class="left-box"
									:class="{
										type1: decree.status === 1,
										type2: decree.status === 2,
										type3: decree.status === 3
									}"
								>
									{{ decree.type }}
								</div>
							</div>
							<div class="main-item-center">
								<div class="main-item-center-box1">{{ decree.title }}</div>
								<div class="main-item-center-box2">{{ decree.time }}</div>
							</div>
							<div class="main-item-right">
								<div class="main-item-right-text">{{ "查看官网政令原文" }}</div>
								<div class="main-item-right-icon">
									<img src="./assets/images/open-icon.png" alt="" />
								</div>
							</div>
						</div>
					</div>
					<div class="footer-box">
						<div class="footer-left">
							{{ `共${decreeList.length}项调查` }}
						</div>
						<div class="footer-right">
							<el-pagination
								@current-change="handleCurrentChange"
								:pageSize="10"
								:current-page="currentPage"
								background
								layout="prev, pager, next"
								:total="decreeList.length"
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getCalendarHeatChart from "./utils/cleandarHeat";

import setChart from "@/utils/setChart";



import News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
import News3 from "./assets/images/news3.png";
import News4 from "./assets/images/news4.png";
import News5 from "./assets/images/news5.png";

import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";

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

const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);
const currentPage = ref(1);
const pageSize = ref(10);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};

// 页面 header
const distributionList = ref([
	{
		name: "研究型大学",
		num: 142,
		color: "rgba(231, 243, 255, 1)",
		textcolor: "rgba(22, 119, 255, 1)"
	},
	{
		name: "国家实验室",
		num: 28,
		color: "rgba(255, 247, 230, 1)",
		textcolor: "rgba(255, 169, 64, 1)"
	},
	{
		name: "科技企业",
		num: 326,
		color: "rgba(230, 255, 251, 1)",
		textcolor: "rgba(19, 168, 168, 1)"
	},
	{
		name: "国防承包商",
		num: 38,
		color: "rgba(249, 240, 255, 1)",
		textcolor: "rgba(114, 46, 209, 1)"
	}
]);

// 最新科技政令
const tagList = ref([
	{
		name: "互联网",
		status: 2
	},
	{
		name: "人工智能",
		status: 4
	}
]);
// 点击查看详情
const handleClickToDetail = () => {
	// router.push("/decreeLayout");
	const route = router.resolve("/decreeLayout");
	window.open(route.href, "_blank");
};

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

// 查看更多新闻资讯
const handleToMoreNews = () => {
	const route = router.resolve("/newsBrief");
	window.open(route.href, "_blank");
};

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

// 新闻资讯
const newsList = ref([
	{
		img: News1,
		title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
		content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
		from: "11-4 · 华盛顿邮报"
	},
	{
		img: News2,
		title: "美参议院通过决议，要求终止特朗普全球关税政策",
		content: `参议院以51票赞成、47票反对通过一项决议，旨在终止特朗普实施的全面关税政策，四名......`,
		from: "11-4 · 纽约时报"
	},
	{
		img: News3,
		title: "美众院通过950亿美元对外援助法案，包含对台军援",
		content: `国会众议院在4月通过了大规模对外援助法案，其中包括为“印太安全”提供资金的条款，......`,
		from: "11-3 · 洛杉矶时报"
	},
	{
		img: News4,
		title: "“大而美”法案在激烈争议中通过",
		content: `特朗普力推的大规模税收与支出法案在国会以微弱优势通过。该法案因大幅削减医疗补助和......`,
		from: "11-3 · 今日美国"
	},
	{
		img: News5,
		title: "美政府“停摆”追平历史最长纪录，民生多领域受重创",
		content: `联邦政府“停摆”进入第35天，追平历史纪录。食品救济项目资金中断，数百万低收入民......`,
		from: "11-2 ·  ​福克斯新闻网"
	}
]);

// 社交媒体
const messageList = ref([
	{
		img: Message1,
		name: "唐纳德·特朗普",
		time: "15:23 · 发布于真实社交",
		content: `埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。`
	},
	{
		img: Message2,
		name: "埃隆·马斯克",
		time: "14:49 · 发布于X",
		content: `如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。`
	},
	{
		img: Message3,
		name: "塞巴斯蒂安·马拉比",
		time: "11:05 · 发布于X",
		content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
	}
]);

// 政令发布频度
const chart1Data = ref({
	dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	dataY: [219, 228, 129, 159, 152, 157, 78]
});

// 政令涉及领域
const chart2Data = ref([
	{
		name: "集成电路",
		value: 50
	},
	{
		name: "人工智能",
		value: 46
	},
	{
		name: "通信网络",
		value: 40
	},
	{
		name: "量子科技",
		value: 32
	},
	{
		name: "能源",
		value: 31
	},
	{
		name: "生物科技",
		value: 30
	},
	{
		name: "航空航天",
		value: 24
	}
]);
const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB", "#4096FF"];

// 关键政令及举措
const keyDecreeList = ref([
	{
		title: "关于“对等关税”的行政令",
		time: "2025年4月",
		content: `对所有贸易伙伴设立10%的“最低基准关税”，并对中国商品加征高达34%​​ 的额外关税，使针对中国的总关税水平大幅提升。`
	},
	{
		title: "《美国优先投资政策》备忘录",
		time: "2025年2月",
		content: `将中国列为“外国对手”，系统性收紧中美在半导体、人工智能、量子技术等前沿科技领域的双向投资，构建对华科技封锁体系。`
	},
	{
		title: "针对TikTok的行政令",
		time: "2025年2月",
		content: `以所谓“信息安全”为由，要求字节跳动剥离TikTok在美业务，并禁止通过微信、支付宝等中国应用程序进行交易。`
	},
	{
		title: "签署《外国投资风险审查现代化法》",
		time: "2025年2月",
		content: `极大加强了美国外国投资委员会（CFIUS）的权限，重点关注来自中国的投资。`
	}
]);

// 政令重点条款
const wordCloudData = [
	{ name: "与马斯克公开冲突", value: 100 },
	{ name: "传统能源", value: 5 },
	{ name: "共和党财政鹰派", value: 77 },
	{ name: "未实现赤字控制目标", value: 35 },
	{ name: "得克萨斯州", value: 88 },
	{ name: "选举压力", value: 57 },
	{ name: "主张财政紧缩", value: 72 },
	{ name: "财政保守", value: 18 },
	{ name: "共和党", value: 34 },
	{ name: "扩大军费", value: 16 },
	{ name: "参议院多数党", value: 72 },
	{ name: "地方利益捍卫者", value: 58 },
	{ name: "众议院预算委员会", value: 24 },
	{ name: "债务与赤字警告", value: 33 },
	{ name: "抗议医疗补助条款", value: 47 },
	{ name: "深红州", value: 32 },
	{ name: "温和派选区", value: 62 },
	{ name: "高压游说", value: 51 }
];

// 资源库
const decreeList = ref([
	{
		type: "总统政令",
		status: 1,
		title: "关于进一步延长TikTok执法宽限期的行政令",
		time: "2025年9月16日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "为国家安全部署先进核反应堆技术",
		time: "2025年9月16日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令",
		time: "2025年9月15日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "调整互惠关税范围,并制定实施贸易和安全协议的程序",
		time: "2025年9月15日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令",
		time: "2025年9月14日"
	},
	{
		type: "总统备忘录",
		status: 3,
		title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性",
		time: "2025年9月14日"
	},
	{
		type: "提名与任命",
		status: 2,
		title: "终止对不可靠、非受控能源的市场扭曲补贴",
		time: "2025年9月11日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	},
	{
		type: "总统政令",
		status: 1,
		title: "对所有国家暂停免关税待遇",
		time: "2025年9月6日"
	}
]);
const curDecreeList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return decreeList.value.slice(startIndex, endIndex);
});
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
	{
		label: "近半年发布",
		value: "近半年发布"
	},
	{
		label: "近一年发布",
		value: "近一年发布"
	},
	{
		label: "近两年发布",
		value: "近两年发布"
	},
	{
		label: "近三年发布",
		value: "近三年发布"
	},
	{
		label: "近五年发布",
		value: "近五年发布"
	}
]);
const categoryList = ref(["全部分类", "总统政令", "提名与任命", "总统备忘录", "声明"]);
const activeCate = ref("全部分类");

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

const calendarData = ref([
	["2025-01-01", 20],
	["2025-01-05", 120],
	["2025-01-09", 220],
	["2025-01-15", 320],
	["2025-01-20", 120],
	["2025-01-24", 420],
	["2025-02-05", 80],
	["2025-02-08", 280],
	["2025-02-18", 480],
	["2025-02-11", 420],
	["2025-02-21", 320],
	["2025-03-05", 160],
	["2025-03-09", 260],
	["2025-03-19", 460],
	["2025-03-26", 430],
	["2025-04-01", 70],
	["2025-04-05", 170],
	["2025-04-11", 270],
	["2025-04-18", 370],
	["2025-05-05", 210],
	["2025-05-09", 210],
	["2025-05-15", 410],
	["2025-05-22", 480],
	["2025-06-06", 45],
	["2025-06-09", 415],
	["2025-06-16", 245],
	["2025-06-19", 332],
	["2025-07-04", 127],
	["2025-07-09", 327],
	["2025-07-24", 427],
	["2025-08-08", 150],
	["2025-08-11", 250],
	["2025-08-15", 350],
	["2025-08-22", 460],
	["2025-09-10", 480],
	["2025-09-18", 312],
	["2025-10-15", 60],
	["2025-10-19", 80],
	["2025-10-21", 190]
]);

const handleToPosi = id => {
	// 0 618 1240 2350
	switch (id) {
		case "position2":
			// containerRef.value.scrollTop = isShow.value ? 744 : 1090;
			containerRef.value.scrollTop = isShow.value ? 844 : 1190;
			break;
		case "position3":
			containerRef.value.scrollTop = isShow.value ? 1480 : 1826;
			break;
		case "position4":
			containerRef.value.scrollTop = isShow.value ? 2554 : 2900;
			break;
		default:
			containerRef.value.scrollTop = 0;
	}
};

onMounted(async () => {
	let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
	setChart(chart1, "chart1");

	let chart2 = getPieChart(chart2Data.value, colorList);
	setChart(chart2, "chart2");

	let chartCalendar = getCalendarHeatChart(calendarData.value);
	setChart(chartCalendar, "chartCalendar");
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
	box-shadow: none;
}
.home-wrapper {
	width: 100%;
	height: calc(100vh - 96px);
	position: relative;
	overflow-y: hidden;
	.search-header {
		width: 100%;
		height: 144px;
		background: #fff;
		overflow: hidden;
		.home-main-header-center {
			margin-top: 20px;
			margin-left: 200px;
			width: 800px;
			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-btn-box {
			margin-top: 20px;
			margin-left: 200px;
			display: flex;
			gap: 16px;
			.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: 36px;
					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;
				}
			}
		}
	}
	.scrollHomeMain {
		width: 100%;
		height: calc(100% - 144px);
		overflow-y: auto;
	}
	.home-main {
		width: 100%;
		height: 100%;
		overflow-y: 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 {
				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;
				box-sizing: border-box;
				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: 960px;
				height: 64px;
				box-sizing: border-box;
				padding: 0 108px;
				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 {
				margin-top: 36px;
				display: flex;
				.btn {
					display: flex;
					width: 160px;
					height: 48px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 24px;
					justify-content: center;
					margin: 0 16px;
					background: #e7f3ff;
					cursor: pointer;
					&:hover {
						background: #cae3fc;
					}
					.btn-text {
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 44px;
						margin-left: 5px;
					}
					.btn-icon {
						margin-left: 20px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 44px;
					}
				}
			}
			.home-main-header-item-box {
				margin-top: 48px;
				margin-bottom: 64px;
				width: 1600px;
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 254px;
					height: 72px;
					display: flex;
					box-sizing: border-box;
					border: 1px solid rgba(255, 255, 255, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 0.65);
					align-items: center;
					margin: 0 6px 16px 6px;
					cursor: pointer;
					transition: transform 0.3s ease, box-shadow 0.3s ease;
					&:hover {
						transform: translateY(-3px);
						box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
					}
					.item-left {
						width: 48px;
						height: 48px;
						margin-left: 24px;
						margin-top: 12px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.item-right {
						margin-left: 17px;
						width: 140px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 24px;
					}
				}
			}
		}
		.home-main-center {
			margin-top: 34px;
			.center-top {
				height: 450px;
				display: flex;
				justify-content: center;
				gap: 20px;
				.box1 {
					width: 1064px;
					height: 460px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: #fff;
					box-sizing: border-box;
					position: relative;
					.box1-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						justify-content: space-between;
						.box1-header-left {
							display: flex;
							margin-left: 18px;
							.icon {
								width: 20px;
								height: 20px;
								margin-top: 15px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.title {
								width: 112px;
								height: 48px;
								margin-left: 18px;
								color: #fff;
								background: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 46px;
								text-align: center;
							}
						}
						.box1-header-right {
							margin-top: 16px;
							height: 16px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
							margin-right: 39px;
						}
					}
					.box1-main {
						display: flex;
						margin-top: 33px;
						padding-left: 36px;
						padding-right: 27px;
						box-sizing: border-box;
						
						.box1-main-left {
							display: flex;
							width: 458px;
							height: 353px;
							flex-direction: column;
							gap: 20px;
							.box1-main-left-top{
								/* 容器 546 */
								width: 456px;
								height: 80px;
								/* 自动布局 */
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								align-items: flex-start;
								gap: 8;
								.box1-main-left-top-item{
									display: flex;
									align-items: center;
									flex-direction: column;
									justify-content: center;
									width: 108px;
									height: 80px;
									border-radius: 4px;
									background: rgba(231, 243, 255, 1);
									.box1-main-left-top-item-text1{
										color: rgba(22, 119, 255, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: center;
									}
									.box1-main-left-top-item-text2{
										color: rgba(22, 119, 255, 1);
										font-family: Microsoft YaHei;
										font-size: 24px;
										font-weight: 700;
										line-height: 32px;
										letter-spacing: 0px;
										text-align: center;
									}
								}
							}
						}
						.box1-main-right {
							margin-left: 28px;
							flex: 1;
							.box1-main-right-title {
								height: 26px;
								color: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
							.box1-main-right-info {
								margin-top: 14px;
								display: flex;
								height: 24px;
								.tag {
									height: 24px;
									line-height: 24px;
									padding: 1px 8px;
									box-sizing: border-box;
									border-radius: 4px;
									margin-right: 5px;
								}
								.tag1 {
								}
								.tag2 {
									border: 1px solid rgba(186, 224, 255, 1);
									background: rgba(230, 244, 255, 1);
									color: rgba(22, 119, 255, 1);
								}
								.tag4 {
									border: 1px solid rgba(255, 163, 158, 1);
									color: rgba(245, 34, 45, 1);
									background: rgba(255, 241, 240, 1);
								}
							}
							.box1-main-right-center {
								margin-top: 10px;
								height: 200px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
							}
							.box1-main-right-footer {
								margin-top: 50px;
								height: 24px;
								display: flex;
								justify-content: space-between;
								.footer-left {
									height: 24px;
									line-height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
								.footer-right {
									display: flex;
									.footer-right-item1 {
										height: 24px;
										color: rgba(10, 87, 166, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
									}
									.footer-right-item2 {
										width: 16px;
										height: 16px;
										margin-top: 4px;
										margin-left: 11px;
										img {
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						}
					}
				}
				.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: 54px;
						display: flex;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						.icon {
							width: 24px;
							height: 22px;
							margin-left: 33px;
							margin-top: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.title {
							display: flex;
							width: 148px;
							background: rgba(206, 79, 81, 1);
							margin-left: 25px;
							.text {
								margin-left: 15px;
								margin-top: 16px;
								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: 18px;
								border-radius: 100px;
								background: rgba(255, 255, 255, 0.3);
							}
						}
						.more {
							margin-top: 19px;
							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 {
						box-sizing: border-box;
						padding-right: 20px;
						height: 282px;
						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: 45px;
						bottom: 20px;
						width: 430px;
						height: 42px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						border-radius: 6px;
						background: var(--color-main-active);
						cursor: pointer;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-left: 8px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
			}
			.divide2 {
				width: 1600px;
				margin: 0 auto;
				margin-top: 68px;
				margin-bottom: 36px;
			}
			.center-center {
				width: 1600px;
				margin: 0 auto;
				margin-top: 21px;
				height: 450px;
				display: flex;
				.box3 {
					width: 792px;
					height: 450px;
					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;
						.box3-item {
							display: flex;
							height: 77px;
							width: 749px;
							margin-left: 21px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							.left {
								width: 72px;
								height: 48px;
								margin-top: 15px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.right {
								width: 657px;
								margin-left: 20px;
								.right-top {
									width: 657px;
									display: flex;
									justify-content: space-between;
									.title {
										margin-top: 13px;
										width: 520px;
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
									.time {
										flex: 1;
										text-align: right;
										height: 22px;
										margin-top: 19px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 22px;
									}
								}
								.right-footer {
									width: 657px;
									height: 24px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}
					}
				}
				.box4 {
					margin-left: 20px;
					width: 792px;
					height: 450px;
					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;
						.box4-main-item {
							margin-top: 16px;
							display: flex;
							margin-left: 21px;
							.left {
								margin-top: 5px;
								width: 36px;
								height: 36px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.right {
								margin-left: 10px;
								width: 690px;
								box-sizing: border-box;
								border: 1px solid rgba(231, 243, 255, 1);
								background: rgba(246, 250, 255, 1);
								padding: 10px 15px;
								.right-top {
									display: flex;
									justify-content: space-between;
									.name {
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
									}
									.time {
										height: 30px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 30px;
									}
								}
								.content {
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}
						}
					}
				}
			}
			.center-center1 {
				margin: 0 auto;
				margin-top: 24px;
				height: 100px;
				width: 1600px;
				border-radius: 50px;
				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				background: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 4px 5px;
				.center1-item {
					width: 351px;
					height: 92px;
					border-radius: 48px;
					display: flex;
					cursor: pointer;
					&:hover {
						background: rgba(231, 243, 255, 1);
					}
					.left {
						margin-top: 15px;
						margin-left: 39px;
						width: 60px;
						height: 60px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.right {
						margin-left: 8px;
						.name {
							height: 31px;
							margin-top: 16px;

							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 24px;
							font-weight: 700;
							line-height: 31px;
						}
						.nameActive {
							color: rgba(10, 87, 166, 1);
						}
						.time {
							margin-top: 1px;
							height: 30px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
						}
						.timeActive {
							color: rgba(10, 87, 166, 1);
						}
					}
				}
				.center1ItemActive {
					background: rgba(231, 243, 255, 1);
				}
			}
			.center-center2 {
				margin: 0 auto;
				margin-top: 24px;
				width: 1600px;
				height: 960px;
				border-radius: 4px;
				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				background: rgba(255, 255, 255, 1);
				.center2-header {
					display: flex;
					justify-content: space-between;
					.center2-header-left {
						margin-left: 62px;
						display: flex;
						.left {
							width: 140px;
							height: 175px;
							border-radius: 0px 0px 70px 70px;
							background: rgba(231, 243, 255, 1);
							overflow: hidden;

							.icon {
								width: 128px;
								height: 128px;
								border-radius: 75px;
								margin-top: 41px;
								margin-left: 6px;
								img {
									width: 100%;
									height: 100%;
								}
							}
						}
						.right {
							margin-left: 29px;
							.right-item1 {
								margin-top: 41px;
								height: 31px;
								color: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 24px;
								font-weight: 700;
								line-height: 32px;
							}
							.right-item2 {
								display: flex;
								margin-top: 7px;
								.icon {
									width: 24px;
									height: 24px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.text {
									margin-left: 8px;
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 18px;
									font-weight: 400;
									line-height: 24px;
								}
							}
							.right-item3 {
								margin-top: 10px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 400;
								line-height: 24px;
							}
							.right-item4 {
								margin-top: 8px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 400;
								line-height: 24px;
							}
						}
					}
					.center2-header-right {
						margin-right: 59px;
						margin-top: 47px;
						.top {
							display: flex;
							.top-box {
								width: 180px;
								height: 72px;
								margin-left: 50px;
								.item1 {
									height: 26px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 26px;
									text-align: right;
								}
								.item2 {
									margin-top: 4px;
									font-family: Microsoft YaHei;
									font-weight: 700;
									display: flex;
									justify-content: flex-end;
									.item2-3 {
										height: 42px;
										color: rgba(10, 87, 166, 1);
										font-size: 32px;
										line-height: 42px;
									}
									.item2-2 {
										height: 24px;
										margin-top: 9px;
										margin-left: 5px;
										margin-right: 5px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 18px;
										font-weight: 700;
										line-height: 24px;
									}
									.item2-1 {
										height: 42px;
										color: rgba(206, 79, 81, 1);
										font-size: 32px;
										line-height: 42px;
									}
								}
							}
						}
						.bottom {
							height: 22px;
							margin-top: 29px;
							display: flex;
							justify-content: flex-end;
							.icon {
								margin-top: 4px;
								width: 14px;
								height: 14px;
								margin-right: 8px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 22px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 24px;
							}
						}
					}
				}
				.center2-mid {
					width: 1479px;
					height: 189px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					margin: 40px auto 0;
				}
				.center2-footer {
					display: flex;
					.center2-footer-left {
						width: 732px;
						margin-left: 58px;
						margin-top: 21px;
						.header {
							display: flex;
							height: 48px;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							.icon {
								margin-top: 15px;
								margin-left: 20px;
								width: 20px;
								height: 20px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								margin-left: 20px;
								color: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 48px;
							}
						}
						.main {
							width: 732px;
							height: 470px;
							overflow-y: auto;
							overflow-x: hidden;
							display: flex;
							flex-wrap: wrap;
							box-sizing: border-box;
							padding-top: 9px;
							.item {
								width: 50%;
								height: 80px;
								display: flex;
								margin-top: 8px;
								.item-left {
									width: 60px;
									height: 60px;
									margin-top: 10px;
									margin-left: 16px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.item-right {
									margin-left: 13px;
									.item-right-box1 {
										margin-top: 15px;
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 18px;
										font-weight: 700;
										line-height: 24px;
									}
									.item-right-box2 {
										margin-top: 1px;
										height: 24px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
									}
								}
							}
						}
					}
					.center2-footer-right {
						margin-left: 21px;
						margin-top: 16px;
						width: 730px;
						.header {
							height: 54px;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							display: flex;
							.icon {
								width: 24px;
								height: 24px;
								margin-left: 16px;
								margin-top: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.tab-box {
								margin-left: 20px;
								width: 500px;
								display: flex;
								.tab {
									height: 54px;
									margin-right: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 400;
									line-height: 54px;
									padding: 0 2px;
									box-sizing: border-box;
								}
								.tabActive {
									font-weight: 700;
									color: var(--color-main-active);
									border-bottom: 3px solid var(--color-main-active);
								}
							}
							.right {
								width: 80px;
								margin-left: 90px;
								display: flex;
								justify-content: space-between;
								.btn {
									width: 28px;
									height: 28px;
									margin-top: 13px;
									img {
										width: 100%;
										height: 100%;
									}
								}
							}
						}
						.main {
							height: 475px;
							margin-top: 5px;
							overflow-y: hidden;
							.main-item {
								display: flex;
								margin-top: 20px;
								.id {
									margin-top: 3px;
									margin-left: 2px;
									width: 36px;
									height: 36px;
									border-radius: 18px;
									background: #e7f3ff;
									line-height: 36px;
									text-align: center;
									color: var(--color-main-active);
								}
								.info {
									margin-left: 13px;
									width: 672px;
									.info-header {
										display: flex;
										justify-content: space-between;
										height: 24px;
										.title {
											height: 24px;
											margin-top: 1px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-size: 18px;
											font-weight: 700;
											line-height: 24px;
										}
										.tag {
											height: 24px;
											line-height: 24px;
											border-radius: 4px;
											padding: 0 8px;
											background: var(--tag-btn2-bg-color);
											color: var(--tag-btn2-text-color);
											font-family: Microsoft YaHei;
											font-size: 14px;
											font-weight: 400;
										}
									}
									.info-content {
										margin-top: 3px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 30px;
									}
								}
							}
						}
					}
				}
			}
			.divide3 {
				width: 1600px;
				margin: 0 auto;
				margin-top: 68px;
				margin-bottom: 36px;
			}
			.center-footer {
				margin-top: 21px;
				height: 452px;
				display: flex;
				justify-content: center;
				.box3 {
					width: 792px;
					height: 452px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					border-radius: 4px;
					.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;
						.box3-header-left {
							display: flex;
							.box3-header-icon {
								margin-top: 14px;
								margin-left: 4px;
								width: 17px;
								height: 17px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.box3-header-title {
								margin-top: 11px;
								margin-left: 19px;
								height: 26px;
								color: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}
						.box3-header-right {
							width: 49px;
							height: 24px;
							margin-top: 12px;
							margin-right: 7px;
							cursor: pointer;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
					.box3-main {
						height: 397px;
					}
				}
				.box4 {
					margin-left: 16px;
					width: 792px;
					height: 452px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					border-radius: 4px;
					.box4-header {
						margin: 0 auto;
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						.header-icon {
							margin-top: 16px;
							margin-left: 22px;
							width: 20px;
							height: 20px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.header-title {
							margin-top: 12px;
							margin-left: 18px;
							height: 26px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
						.header-right {
							margin-left: 550px;
							width: 49px;
							height: 24px;
							margin-top: 12px;
							cursor: pointer;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
					.box4-main {
						margin-top: 8px;
						height: 390px;
					}
				}
			}
			.center-footer1 {
				margin-top: 21px;
				height: 450px;
				display: flex;
				justify-content: center;
				.box5 {
					width: 792px;
					height: 450px;
					border-radius: 4px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);
					.box5-header {
						width: 792px;
						height: 48px;
						display: flex;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						.header-icon {
							width: 22px;
							height: 20px;
							margin-left: 25px;
							margin-top: 15px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.header-title {
							height: 26px;
							margin-top: 11px;
							margin-left: 13px;
							color: rgba(10, 87, 166, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
					}
					.box5-main {
						height: 400px;
						box-sizing: border-box;
						.box5-item {
							width: 730px;
							margin-top: 16px;
							margin-left: 25px;
							display: flex;
							.icon {
								margin-top: 6px;
								width: 24px;
								height: 22px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.info {
								margin-left: 13px;
								width: 100%;
								.info-header {
									display: flex;
									margin-top: 4px;
									justify-content: space-between;
									.title {
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 18px;
										font-weight: 700;
										line-height: 24px;
									}
									.time {
										height: 24px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
									}
								}
								.info-content {
									margin-top: 6px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}
						}
					}
				}
				.box6 {
					margin-left: 16px;
					width: 792px;
					height: 450px;
					border-radius: 4px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);
					.box6-header {
						width: 792px;
						height: 48px;
						display: flex;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						.header-icon {
							width: 22px;
							height: 20px;
							margin-left: 25px;
							margin-top: 15px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.header-title {
							height: 26px;
							margin-top: 11px;
							margin-left: 13px;
							color: rgba(10, 87, 166, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
					}
					.box6-main {
						height: 401px;
					}
				}
			}
		}
		.home-main-footer {
			margin-top: 34px;
			height: 1379px;
			background: rgba(248, 249, 250, 1);
			overflow: hidden;
			.divide4 {
				margin: 0 auto;
				margin-top: 52px;
				margin-bottom: 36px;
			}
			.home-main-footer-header {
				width: 1600px;
				height: 42px;
				margin: 36px auto;
				// background: orange;
				display: flex;
				justify-content: space-between;
				.btn-box {
					margin-top: 10px;
					width: 1000px;
					display: flex;
					.btn {
						height: 42px;
						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 {
					margin-top: 10px;
					height: 42px;
					box-sizing: border-box;
					padding: 5px 0;
				}
			}
			.home-main-footer-main {
				width: 1600px;
				height: 999px;
				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;
				border-radius: 10px;
				.content-header {
					height: 48px;
					display: flex;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					.icon {
						width: 20px;
						height: 20px;
						margin-top: 14px;
						margin-left: 19px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.title {
						height: 48px;
						margin-left: 21px;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 48px;
					}
				}
				.content-box {
					height: 850px;
					margin: 0 30px;
					.main-item {
						display: flex;
						height: 84px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						cursor: pointer;
						&:hover{
							background: var(--color-bg-hover);
						}
						.main-item-left {
							width: 105px;
							.left-box {
								margin-top: 17px;
								height: 24px;
								width: 95px;
								text-align: center;
								// color: rgba(22, 119, 255, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 24px;
								box-sizing: border-box;
								border-radius: 4px;
								// border: 1px solid rgba(186, 224, 255, 1);
								// background: rgba(230, 244, 255, 1);
							}
							.type1 {
								color: rgba(22, 119, 255, 1);
								border: 1px solid rgba(186, 224, 255, 1);
								background: rgba(230, 244, 255, 1);
							}
							.type2 {
								color: rgba(19, 168, 168, 1);
								border: 1px solid rgba(135, 232, 222, 1);
								background: rgba(230, 255, 251, 1);
							}
							.type3 {
								color: rgba(250, 140, 22, 1);
								border: 1px solid rgba(255, 213, 145, 1);
								background: rgba(255, 247, 230, 1);
							}
						}
						.main-item-center {
							width: 1300px;
							.main-item-center-box1 {
								margin-top: 15px;
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
							}
							.main-item-center-box2 {
								margin-top: 4px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
							}
						}
						.main-item-right {
							display: flex;
							.main-item-right-text {
								margin-top: 18px;
								width: 128px;
								height: 24px;
								color: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
							}
							.main-item-right-icon {
								margin-top: 22px;
								margin-left: 9px;
								width: 16px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
				.footer-box {
					margin: 0 30px;
					height: 32px;
					margin-top: 30px;
					display: flex;
					justify-content: space-between;
					.footer-left {
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 32px;
					}
				}
			}
		}
	}
}

.divide {
	margin: 0 auto;
}

: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>