<template>
	<div class="home-wrapper">
		<div class="home-main">
			<div class="home-main-header">
				<div class="home-main-header-top">
					<!-- <span>国家科技安全 </span>> <span>中美博弈概览 </span>>
					<span>市场准入限制</span> -->
					<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">142</div>
						<div class="item-footer">总调查案件数</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">28</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">38%</div>
						<div class="item-footer">胜诉/和解率</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">285</div>
						<div class="item-footer">分析报告</div>
					</div>
				</div>
				<div class="home-main-header-btn-box">
					<div class="btn" @click="scrollToTop('position1')">
						<div class="btn-text">{{ "最新动态" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="scrollToTop('position2')">
						<div class="btn-text">{{ "资讯要闻" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="scrollToTop('position3')">
						<div class="btn-text">{{ "统计概览" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
					<div class="btn" @click="scrollToTop('position4')">
						<div class="btn-text">{{ "资源库" }}</div>
						<div class="btn-icon">{{ ">" }}</div>
					</div>
				</div>
				<div class="home-main-header-card-box">
					<div class="home-main-header-card-box-box1 card" @click="handleClickToDetail('301')">
						<div class="header">
							<div class="header-left">{{ "301调查" }}</div>
							<div class="header-right">{{ "52项" }}</div>
						</div>
						<div class="content-box">
							<div class="item">{{ "可能措施: 加征关税、限制进口" }}</div>
							<div class="item">
								{{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
							</div>
						</div>
					</div>
					<div class="home-main-header-card-box-box2 card" @click="handleClickToDetail('232')">
						<div class="header">
							<div class="header-left">{{ "232调查" }}</div>
							<div class="header-right">{{ "3项" }}</div>
						</div>
						<div class="content-box">
							<div class="item">{{ "可能措施: 加征关税、限制进口" }}</div>
							<div class="item">
								{{ "依据《1962年贸易扩展法》第232条评估进口产品对国家安全影响" }}
							</div>
						</div>
					</div>
					<div class="home-main-header-card-box-box3 card" @click="handleClickToDetail('337')">
						<div class="header">
							<div class="header-left">{{ "337调查" }}</div>
							<div class="header-right">{{ "87项" }}</div>
						</div>
						<div class="content-box">
							<div class="item">{{ "可能措施: 排除令、禁止令" }}</div>
							<div class="item">
								{{ "依据《1930年关税法》第337条针对知识产权侵权行为" }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="home-main-center">
				<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
				<div class="center-top">
					<div class="box1">
						<div class="box1-left">
							<img src="./assets/images/box1-left.png" alt="" />
						</div>
						<div class="box1-right">
							<img src="./assets/images/box1-right.png" alt="" />
						</div>
						<div class="box1-header">
							<div class="box1-header-left">
								<div class="icon">
									<img src="./assets/images/box1-header-icon.png" alt="" />
								</div>
								<div class="title">{{ "调查进展" }}</div>
							</div>
							<div class="box1-header-right">
								{{ "查看详情 >" }}
							</div>
						</div>
						<div class="box1-main">
							<div class="box1-main-header">
								<div class="header-left">
									{{ "美国ITC发布对外国制造的半导体器件及其下游产品和组件的337部分终裁" }}
								</div>
								<div class="header-right">
									<div class="tag1">{{ "337" }}</div>
									<div class="tag2">{{ "半导体" }}</div>
								</div>
							</div>
							<div class="info-box">
								<div class="info-header">
									<div class="icon"></div>
									<div class="time">{{ "2025-08-15" }}</div>
									<div class="title">{{ "部分终裁" }}</div>
								</div>
								<div class="info-content">
									{{
										"对本案行政法官于2025年7月31日作出的初裁（No.36）不予复审，即基于申请方撤回，终止本案对美国注册专利号9,093,473第4项申诉的调查。"
									}}
								</div>
							</div>
							<div class="list-box">
								<div class="list-item">
									<div class="icon"></div>
									<div class="list-left">{{ "调查案号：" }}</div>
									<div class="list-right">{{ "337-TA-1443" }}</div>
								</div>
								<div class="list-item">
									<div class="icon"></div>
									<div class="list-left">{{ "涉及产品：" }}</div>
									<div class="list-right">
										{{
											"对美出口、在美进口及销售的特定外国制造的半导体器件及其下游产品和组件（Certain Foreign-Fabricated ..."
										}}
									</div>
								</div>
								<div class="list-item">
									<div class="icon"></div>
									<div class="list-left">{{ "原告：" }}</div>
									<div class="list-right">
										{{ "爱尔兰Longitude Licensing Ltd.、爱尔兰Marlin Semiconductor Limited" }}
									</div>
								</div>
								<div class="list-item">
									<div class="icon"></div>
									<div class="list-left">{{ "被告：" }}</div>
									<div class="list-right">
										{{
											"中国台湾地区Taiwan Semiconductor Manufacturing Company Limited of Taiwan、美国Apple Inc. of ...."
										}}
									</div>
								</div>
								<div class="list-item">
									<div class="icon"></div>
									<div class="list-left">{{ "涉案专利" }}</div>
									<div class="list-right">
										{{ "美国注册专利号7745847、9093473、9147747、9184292" }}
									</div>
								</div>
							</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">
								<div
									class="item-left"
									:class="{
										itemLeftStatus1: item.status === '一般风险',
										itemLeftStatus2: item.status === '重大风险'
									}"
								>
									{{ item.status }}
								</div>
								<div class="item-right">
									<div class="text">
										{{ item.title }}
									</div>
									<div class="time">{{ item.time }}</div>
								</div>
							</div>
						</div>
						<div class="box2-footer" @click="handleToMoreRiskSignal">
							<div class="icon">
								<img src="./assets/images/box2-footer-icon.png" alt="" />
							</div>
							<div class="text">{{ "查看更多" }}</div>
						</div>
					</div>
				</div>
				<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
				<div class="center-center">
					<div class="box3">
						<div class="box3-header">
							<div class="box3-header-left">
								<div class="box3-header-icon">
									<img src="./assets/images/header-news.png" alt="" />
								</div>
								<div class="box3-header-title">{{ "新闻资讯" }}</div>
								<div 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/header-message.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="divide-header" :titleText="'数据总览'"></DivideHeader>
				<div class="center-footer">
					<div class="box5">
						<div class="box5-header">
							<div class="box5-header-left">
								<div class="box5-header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="box5-header-title">{{ "调查数量" }}</div>
							</div>
							<div class="box-header-right">
								<div class="icon">
									<img src="@/assets/images/icon/header-btn.png" alt="" />
								</div>
								<div class="text">{{ "数据来源：美国商务部" }}</div>
							</div>
						</div>
						<div class="box5-main">
							<div class="box5-main-chart" id="chart1"></div>
							<div class="box5-main-btn-box">
								<div class="right-box rightBoxActive">
									{{ "按月度" }}
								</div>
								<div class="right-box">
									{{ "按年度" }}
								</div>
							</div>
						</div>
					</div>
					<div class="box6">
						<div class="box6-header">
							<div class="header-icon">
								<img src="./assets/images/box6-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "制裁领域分布" }}</div>
							<div class="box-header-right">
								<div class="icon">
									<img src="@/assets/images/icon/header-btn.png" alt="" />
								</div>
								<div class="text">{{ "数据来源：美国商务部" }}</div>
							</div>
						</div>
						<div class="box6-main">
							<div class="box6-main-select-box">
								<el-select v-model="curAreaYear" placeholder="选择发布时间" style="width: 120px">
									<el-option
										v-for="item in areaYearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div>
							<div class="box6-mian-chart" id="chart2"></div>
						</div>
					</div>
				</div>
				<div class="center-footer1">
					<div class="box7">
						<div class="box7-header">
							<div class="box7-header-left">
								<div class="box7-header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="box7-header-title">{{ "受调查企业地域分布" }}</div>
							</div>
							<div class="box-header-right">
								<div class="icon">
									<img src="@/assets/images/icon/header-btn.png" alt="" />
								</div>
								<div class="text">{{ "数据来源：美国商务部" }}</div>
							</div>
						</div>
						<div class="box7-main">
							<div class="box7-main-left" id="box7Chart1"></div>
							<div class="box7-main-right">
								<div class="box7-main-right-top">
									<el-select v-model="curAreaYear" placeholder="选择发布时间" style="width: 120px">
										<el-option
											v-for="item in areaYearList"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
								</div>
								<div class="box7-main-right-main" id="box7Chart2"></div>
							</div>
						</div>
					</div>
					<div class="box8">
						<div class="box8-header">
							<div class="box8-header-left">
								<div class="box8-header-icon">
									<img src="./assets/images/box6-header-icon.png" alt="" />
								</div>
								<div class="box8-header-title">{{ "制裁领域分布" }}</div>
							</div>
							<div class="box-header-right">
								<div class="icon">
									<img src="@/assets/images/icon/header-btn.png" alt="" />
								</div>
								<div class="text">{{ "数据来源：美国商务部" }}</div>
							</div>
						</div>
						<div class="box8-main">
							<div class="box8-main-header">
								<div class="header-1">{{ "企业名称" }}</div>
								<div class="header-2">
									<div class="inner-item">
										{{ "337" }}
									</div>
								</div>
								<div class="header-3">
									<div class="inner-item">
										{{ "301" }}
									</div>
								</div>
								<div class="header-4">
									<div class="inner-item">
										{{ "232" }}
									</div>
								</div>
							</div>
							<div class="box8-main-content">
								<div class="box8-main-item" v-for="(item, index) in box8Data" :key="index">
									<div class="item-1">
										<div class="icon">
											<img :src="item.logo" alt="" />
										</div>
										<div class="text">
											{{ item.name }}
										</div>
									</div>
									<div class="item-2 item-num">{{ item.data337 ? item.data337 : "--" }}</div>
									<div class="item-3 item-num">{{ item.data301 ? item.data301 : "--" }}</div>
									<div class="item-4 item-num">{{ item.data232 ? item.data232 : "--" }}</div>
								</div>
							</div>
						</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 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="left">
						<div class="left-box1">
							<div class="left-box1-header">
								<div class="icon"></div>
								<div class="title">{{ "发布时间" }}</div>
							</div>
							<div class="left-box1-main">
								<div class="time-label" v-for="(item, index) in surveyYearList" :key="index">
									<el-checkbox v-model="item.selected" :label="item.name" size="large" />
								</div>
							</div>
						</div>
						<div class="left-box2">
							<div class="left-box2-header">
								<div class="icon"></div>
								<div class="title">{{ "涉及领域" }}</div>
							</div>
							<div class="left-box2-main">
								<div class="area-label" v-for="(item, index) in surveyAreaList" :key="index">
									<el-checkbox v-model="item.selected" :label="item.name" size="large" />
								</div>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="right-header">
							<div class="header-item1">{{ "调查名称" }}</div>
							<div class="header-item2">{{ "调查案号" }}</div>
							<div class="header-item3">{{ "涉及领域" }}</div>
							<div class="header-item4">{{ "案件状态" }}</div>
							<div class="header-item5">{{ "发布日期" }}</div>
						</div>
						<div class="right-main">
							<div class="item" v-for="(val, idx) in surveyInfoList" :key="idx">
								<div class="item-box1">
									<div
										class="name"
										:class="{
											name1: val.name === '301',
											name2: val.name === '337',
											name3: val.name === '232'
										}"
									>
										{{ val.name }}
									</div>
									<div class="title">{{ val.title }}</div>
								</div>
								<div class="item-box2">{{ val.num }}</div>
								<div class="item-box3">{{ val.area }}</div>
								<div class="item-box4">{{ val.status }}</div>
								<div class="item-box5">{{ val.releaseDate }}</div>
							</div>
						</div>
						<div class="right-footer">
							<div class="footer-left">
								{{ "共105项调查" }}
							</div>
							<div class="footer-right">
								<el-pagination background layout="prev, pager, next" :total="105" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

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

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";

import Logo1 from "./assets/images/logo1.png";
import Logo2 from "./assets/images/logo2.png";
import Logo3 from "./assets/images/logo3.png";
import Logo4 from "./assets/images/logo4.png";
import Logo5 from "./assets/images/logo5.png";

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

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

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

const releaseTime = ref("近一年发布");

const releaseTimeList = ref([
	{
		label: "近半年发布",
		value: "近半年发布"
	},
	{
		label: "近一年发布",
		value: "近一年发布"
	},
	{
		label: "近两年发布",
		value: "近两年发布"
	},
	{
		label: "近三年发布",
		value: "近三年发布"
	},
	{
		label: "近五年发布",
		value: "近五年发布"
	}
]);

const categoryList = ref(["全部调查", "301调查", "232调查", "337调查"]);

const activeCate = ref("全部调查");
const activeHylyId = ref("");

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

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

// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

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

const areaYearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	},
	{
		label: "2021",
		value: "2021"
	},
	{
		label: "2020",
		value: "2020"
	}
]);

const curAreaYear = ref("2025");

const surveyYearList = ref([
	{
		name: "全部时间",
		selected: false
	},
	{
		name: "2025年",
		selected: false
	},
	{
		name: "2024年",
		selected: false
	},
	{
		name: "2023年",
		selected: false
	},
	{
		name: "2022年",
		selected: false
	},
	{
		name: "2021年",
		selected: false
	}
]);
const surveyAreaList = ref([
	{
		name: "人工智能",
		selected: false
	},
	{
		name: "半导体/芯片",
		selected: false
	},
	{
		name: "电子设备",
		selected: false
	},
	{
		name: "显示技术",
		selected: false
	},
	{
		name: "新能源",
		selected: false
	},
	{
		name: "通信设备",
		selected: false
	}
]);

const surveyInfoList = ref([
	{
		name: "301",
		title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备和组件12",
		num: "337-TA-1393",
		area: "半导体",
		status: "正在调查",
		releaseDate: "2025年9月1日"
	},
	{
		name: "337",
		title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
		num: "337-TA-1392",
		area: "制造业",
		status: "正在调查",
		releaseDate: "2025年8月15日"
	},
	{
		name: "301",
		title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
		num: "337-TA-1422和337-TA-1425(合并)",
		area: "半导体",
		status: "正在调查",
		releaseDate: "2025年8月10日"
	},
	{
		name: "337",
		title: "某些光伏干线总线电缆组件及其组件",
		num: "337-TA-1438",
		area: "光伏",
		status: "正在调查",
		releaseDate: "2025年7月29日"
	},
	{
		name: "337",
		title: "某些外国制造的半导体器件、包含相同产品及其组件的组件",
		num: "337-TA-1443",
		area: "半导体",
		status: "正在调查",
		releaseDate: "2025年7月18日"
	},
	{
		name: "301",
		title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备及其组件",
		num: "337-TA-1441",
		area: "半导体",
		status: "终止调查",
		releaseDate: "2025年7月1日"
	},
	{
		name: "337",
		title: "某些包含相同功能的无线前端模块和设备",
		num: "337-TA-1435",
		area: "半导体",
		status: "正在调查",
		releaseDate: "2025年6月14日"
	},
	{
		name: "337",
		title: "用于液晶显示器的某些玻璃基板,含有相同产品的产品以及制造相同方法的玻璃基板",
		num: "337-TA-1433",
		area: "显示技术",
		status: "正在调查",
		releaseDate: "2025年6月5日"
	},
	{
		name: "337",
		title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
		num: "337-TA-1422和337-TA-1425(合并)",
		area: "光伏",
		status: "终止调查",
		releaseDate: "2025年8月10日"
	},
	{
		name: "232",
		title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
		num: "337-TA-1392",
		area: "制造业",
		status: "终止调查",
		releaseDate: "2025年8月15日"
	}
]);

// 新闻资讯
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 handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};

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

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

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

const box8Data = ref([
	{
		logo: Logo1,
		name: "华为技术有限公司",
		data337: 12,
		data301: 2,
		data232: 1
	},
	{
		logo: Logo2,
		name: "大疆创新科技有限公司",
		data337: 7,
		data301: 1,
		data232: null
	},
	{
		logo: Logo3,
		name: "TCL科技集团股份有限公司",
		data337: 6,
		data301: 1,
		data232: null
	},
	{
		logo: Logo4,
		name: "中兴通讯股份有限公司",
		data337: 6,
		data301: null,
		data232: null
	},
	{
		logo: Logo5,
		name: "联想集团",
		data337: 6,
		data301: null,
		data232: null
	}
]);

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

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

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

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

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
	box-shadow: none;
}
.home-wrapper {
	.home-main {
		// width: 1400px;
		width: 100%;
		margin: 0 auto;
		background: url("./assets/images/background.png");
		background-size: 100% 100%;
		.home-main-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			.home-main-header-top {
				box-sizing: border-box;
				width: 100%;
				height: 64px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 64px;
				background: url("./assets/images/header-bg.png");
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 700;
				color: #fff;
				padding-left: 160px;
				display: flex;
				.header-item {
					margin: 0 3px;
				}
				.back-item {
					cursor: pointer;
					&:hover {
						color: #ccc;
					}
				}
			}
			.home-main-header-center {
				margin-top: 48px;
				width: 960px;
				height: 48px;
				border-radius: 10px;
				box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
				background: rgba(255, 255, 255, 1);
				box-sizing: border-box;
				padding: 1px;
				position: relative;
				border: 1px solid transparent;
				&:hover {
					border: 1px solid var(--color-main-active);
				}
				.search {
					position: absolute;
					right: -1px;
					top: 0px;
					width: 120px;
					height: 46px;
					border-radius: 10px;
					background: var(--color-main-active);
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					.search-icon {
						width: 18px;
						height: 18px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.search-text {
						margin-left: 8px;
						height: 22px;
						color: #fff;
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}
			.home-main-header-footer {
				margin-top: 38px;
				width: 688px;
				height: 64px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				.home-main-header-footer-item {
					padding: 0 10px;
					text-align: center;
					.item-top {
						height: 22px;
						color: rgba(20, 89, 187, 1);
						font-family: Microsoft YaHei;
						font-size: 36px;
						font-weight: 700;
						line-height: 22px;
					}
					.item-footer {
						margin-top: 10px;
						height: 30px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
					}
				}
			}
			.home-main-header-btn-box {
				width: 688px;
				margin: 0 auto;
				margin-top: 39px;
				display: flex;
				justify-content: space-between;
				.btn {
					display: flex;
					width: 140px;
					height: 36px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 18px;
					justify-content: center;
					background: #e7f3ff;
					position: relative;
					cursor: pointer;
					&:hover {
						background: #cae3fc;
					}
					.btn-text {
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 34px;
						margin-left: 5px;
					}
					.btn-icon {
						height: 20px;
						line-height: 20px;
						position: absolute;
						top: 6px;
						right: 8px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
					}
				}
			}
			.home-main-header-card-box {
				width: 1600px;
				margin: 0 auto;
				height: 142px;
				margin-top: 64px;
				display: flex;
				justify-content: space-between;
				.card {
					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);
					}
				}
				.home-main-header-card-box-box1 {
					width: 520px;
					height: 142px;
					background: #fff;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					position: relative;
					cursor: pointer;

					&::before {
						content: "";
						position: absolute;
						z-index: 99;
						left: 0;
						top: 15px;
						width: 4px;
						height: 111px;
						background: rgba(250, 140, 22, 1);
					}
					.header {
						height: 56px;
						display: flex;
						justify-content: space-between;
						.header-left {
							margin-left: 30px;
							margin-top: 26px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
						.header-right {
							margin-top: 28px;
							margin-right: 35px;
							height: 24px;
							color: rgba(250, 140, 22, 1);
							font-family: Microsoft YaHei;
							font-size: 30px;
							font-weight: 700;
							line-height: 24px;
						}
					}
					.content-box {
						margin-left: 30px;
						.item {
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							margin-top: 8px;
						}
					}
				}
				.home-main-header-card-box-box2 {
					width: 520px;
					height: 142px;
					background: #fff;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					position: relative;
					cursor: pointer;
					// &:hover {
					// 	margin-top: -2px;
					// }
					&::before {
						content: "";
						position: absolute;
						z-index: 99;
						left: 0;
						top: 15px;
						width: 4px;
						height: 111px;
						background: rgba(114, 46, 209, 1);
					}
					.header {
						height: 56px;
						display: flex;
						justify-content: space-between;
						.header-left {
							margin-left: 30px;
							margin-top: 26px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
						.header-right {
							margin-top: 28px;
							margin-right: 35px;
							height: 24px;
							color: rgba(114, 46, 209, 1);
							font-family: Microsoft YaHei;
							font-size: 30px;
							font-weight: 700;
							line-height: 24px;
						}
					}
					.content-box {
						margin-left: 30px;
						.item {
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							margin-top: 8px;
						}
					}
				}
				.home-main-header-card-box-box3 {
					width: 520px;
					height: 142px;
					background: #fff;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					position: relative;
					cursor: pointer;
					// &:hover {
					// 	margin-top: -3px;
					// 	box-shadow: 0 0 5px 5px rgba(10, 87, 166, 0.1);
					// }
					&::before {
						content: "";
						position: absolute;
						z-index: 99;
						left: 0;
						top: 15px;
						width: 4px;
						height: 111px;
						background: rgba(10, 87, 166, 1);
					}
					.header {
						height: 56px;
						display: flex;
						justify-content: space-between;
						.header-left {
							margin-left: 30px;
							margin-top: 26px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
						.header-right {
							margin-top: 28px;
							margin-right: 35px;
							height: 24px;
							color: rgba(10, 87, 166, 1);
							font-family: Microsoft YaHei;
							font-size: 30px;
							font-weight: 700;
							line-height: 24px;
						}
					}
					.content-box {
						margin-left: 30px;
						.item {
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							margin-top: 8px;
						}
					}
				}
			}
		}

		.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: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 53px;
								text-align: center;
							}
						}
						.box1-header-right {
							margin-top: 19px;
							height: 16px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}
					.box1-main {
						width: 1064px;
						height: 354px;
						margin-top: 22px;
						margin-left: 31px;
						.box1-main-header {
							width: 990px;
							height: 54px;
							display: flex;
							justify-content: space-between;
							.header-left {
								padding-left: 22px;
								color: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
							.header-right {
								display: flex;
								width: 200px;
								justify-content: flex-end;
								.tag1 {
									height: 24px;
									line-height: 24px;
									padding: 0 8px;
									box-sizing: border-box;
									color: rgba(10, 87, 166, 1);
									border: 1px solid rgba(145, 202, 255, 1);
									border-radius: 4px;
									background: rgba(230, 244, 255, 1);
								}
								.tag2 {
									margin-left: 8px;
									height: 24px;
									line-height: 24px;
									padding: 0 8px;
									box-sizing: border-box;
									color: rgba(19, 168, 168, 1);
									border: 1px solid rgba(135, 232, 222, 1);
									border-radius: 4px;
									background: rgba(230, 255, 251, 1);
								}
							}
						}
						.info-box {
							margin-left: 6px;
							width: 989px;
							height: 108px;
							box-sizing: border-box;
							border: 1px solid rgba(231, 243, 255, 1);
							border-radius: 4px;
							background: rgba(246, 250, 255, 1);
							.info-header {
								height: 38px;
								display: flex;
								.icon {
									width: 4px;
									height: 4px;
									border-radius: 2px;
									background: rgba(59, 65, 75, 1);
									margin-left: 24px;
									margin-top: 20px;
								}
								.time {
									width: 98px;
									height: 24px;
									margin-top: 10px;
									margin-left: 12px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
								}
								.title {
									margin-left: 11px;
									margin-top: 10px;
									height: 24px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
								}
							}
							.info-content {
								width: 909px;
								height: 60px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								margin-left: 41px;
								margin-top: 4px;
							}
						}
						.list-box {
							margin-top: 18px;
							margin-left: 28px;
							width: 940px;
							height: 185px;
							.list-item {
								height: 37px;
								display: flex;
								.icon {
									width: 4px;
									height: 4px;
									border-radius: 2px;
									background: rgba(59, 65, 75, 1);
									margin-top: 16px;
								}
								.list-left {
									margin-left: 18px;
									line-height: 37px;
									width: 100px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
								}
								.list-right {
									line-height: 37px;
									margin-left: 17px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
								}
							}
						}
					}
				}
				.box2 {
					width: 521px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					position: relative;
					.box2-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						.icon {
							width: 24px;
							height: 22px;
							margin-left: 33px;
							margin-top: 13px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.title {
							display: flex;
							width: 148px;
							height: 48px;
							background: rgba(206, 79, 81, 1);
							margin-left: 25px;
							.text {
								margin-left: 15px;
								margin-top: 13px;
								height: 22px;
								color: #fff;
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}
							.num {
								width: 24px;
								height: 20px;
								line-height: 20px;
								text-align: center;
								color: rgba(255, 255, 255, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								margin-left: 15px;
								margin-top: 14px;
								border-radius: 100px;
								background: rgba(255, 255, 255, 0.3);
							}
						}
						.more {
							margin-top: 16px;
							margin-left: 200px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}
					.box2-main {
						margin-top: 2px;
						height: 330px;
						overflow-y: auto;
						.box2-main-item {
							margin-left: 23px;
							height: 47px;
							width: 464px;
							display: flex;
							cursor: pointer;
							&:hover {
								background: var(--color-bg-hover);
							}
							.itemLeftStatus1 {
								color: rgba(82, 196, 26, 1) !important;
								background: rgba(246, 255, 237, 1) !important;
							}
							.itemLeftStatus2 {
								color: rgba(250, 140, 22, 1) !important;
								background: rgba(255, 247, 230, 1) !important;
							}
							.item-left {
								margin-top: 4px;
								margin-left: 2px;
								width: 40px;
								height: 40px;
								border-radius: 20px;
								background: rgba(255, 241, 240);
								color: rgba(245, 34, 45, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								font-weight: 400;
								line-height: 14px;
								box-sizing: border-box;
								padding: 6px 4px;
								text-align: center;
							}
							.item-right {
								margin-left: 13px;
								width: 408px;
								height: 47px;
								border-bottom: 1px solid rgba(240, 242, 244, 1);
								display: flex;
								.text {
									width: 348px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 47px;
								}
								.time {
									margin-left: 10px;
									line-height: 47px;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
						}
					}
					.box2-footer {
						position: absolute;
						left: 30px;
						bottom: 20px;
						width: 460px;
						height: 42px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						border-radius: 6px;
						background: var(--color-main-active);
						gap: 8px;
						cursor: pointer;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
			}
			.center-center {
				margin-top: 21px;
				height: 450px;
				display: flex;
				justify-content: center;
				.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-footer {
				margin-top: 21px;
				height: 460px;
				display: flex;
				justify-content: center;
				gap: 15px;
				.box5 {
					width: 1064px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box5-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;
						.box5-header-left {
							display: flex;
							.box5-header-icon {
								margin-top: 15px;
								margin-left: 2px;
								width: 19px;
								height: 19px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.box5-header-title {
								margin-top: 12px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}
						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;
							.icon {
								width: 14px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
					.box5-main {
						height: 397px;
						position: relative;
						z-index: 0;
						.box5-main-chart {
							height: 397px;
						}
						.box5-main-btn-box {
							z-index: 99;
							position: absolute;
							top: 10px;
							right: 5%;
							display: flex;
							justify-content: flex-end;
							gap: 8px;
							width: 178px;
							height: 28px;
							.right-box {
								height: 28px;
								padding: 0 8px;
								text-align: center;
								box-sizing: border-box;
								border: 1px solid rgba(230, 231, 232, 1);
								border-radius: 4px;
								background: rgba(255, 255, 255, 1);
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 28px;
								cursor: pointer;
							}
							.rightBoxActive {
								color: var(--color-main-active);
								border: 1px solid var(--color-main-active);
								border-radius: 4px;
								background: rgba(231, 243, 255, 1);
							}
						}
					}
				}
				.box6 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box6-header {
						width: 521px;
						height: 53px;
						box-sizing: border-box;
						padding: 0 20px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						position: relative;
						.header-icon {
							margin-top: 18px;
							width: 19px;
							height: 19px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.header-title {
							margin-top: 16px;
							margin-left: 15px;
							height: 22px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 22px;
						}
						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;
							.icon {
								width: 14px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
					.box6-main {
						height: 360px;
						position: relative;
						.box6-main-select-box {
							position: absolute;
							top: 10px;
							right: 20px;
						}
						.box6-mian-chart {
							height: 360px;
						}
					}
				}
			}
			.center-footer1 {
				margin-top: 16px;
				display: flex;
				justify-content: center;
				gap: 15px;
				.box7 {
					width: 1064px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box7-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;
						.box7-header-left {
							display: flex;
							.box7-header-icon {
								margin-top: 15px;
								margin-left: 2px;
								width: 19px;
								height: 19px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.box7-header-title {
								margin-top: 12px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}
						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;
							.icon {
								width: 14px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
					.box7-main {
						height: 412px;
						display: flex;
						.box7-main-left {
							width: 640px;
						}
						.box7-main-right {
							width: 424px;

							.box7-main-right-top {
								height: 50px;
								margin-right: 30px;
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}
							.box7-main-right-main {
								height: 340px;
							}
						}
					}
				}
				.box8 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box8-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;
						.box8-header-left {
							display: flex;
							.box8-header-icon {
								margin-top: 15px;
								margin-left: 2px;
								width: 19px;
								height: 19px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.box8-header-title {
								margin-top: 12px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}
						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;
							.icon {
								width: 14px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
					.box8-main {
						width: 469px;
						height: 360px;
						margin: 20px auto;
						.box8-main-header {
							height: 60px;
							display: flex;
							// border-top: 1px solid rgba(230, 231, 232, 1);
							border-bottom: 1px solid rgba(230, 231, 232, 1);
							.header-1 {
								width: 250px;
								height: 60px;
								line-height: 60px;
								box-sizing: border-box;
								padding-left: 49px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
							}
							.header-2 {
								width: 64px;
								display: flex;
								justify-content: center;
								align-items: center;
								.inner-item {
									width: 48px;
									height: 24px;
									box-sizing: border-box;
									border: 1px solid rgba(186, 224, 255, 1);
									border-radius: 4px;
									background: rgba(230, 244, 255, 1);
									line-height: 24px;
									text-align: center;
									color: rgba(22, 119, 255, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
							.header-3 {
								width: 64px;
								display: flex;
								justify-content: center;
								align-items: center;
								.inner-item {
									width: 48px;
									height: 24px;
									box-sizing: border-box;
									border: 1px solid rgba(255, 213, 145, 1);
									border-radius: 4px;
									background: rgba(255, 247, 230, 1);
									line-height: 24px;
									text-align: center;
									color: rgba(250, 140, 22, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
							.header-4 {
								width: 64px;
								display: flex;
								justify-content: center;
								align-items: center;
								.inner-item {
									width: 48px;
									height: 24px;
									box-sizing: border-box;
									border: 1px solid rgba(211, 173, 247, 1);
									border-radius: 4px;
									background: rgba(249, 240, 255, 1);
									line-height: 24px;
									text-align: center;
									color: rgba(114, 46, 209, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
						}
						.box8-main-content {
							height: 300px;
							overflow: hidden;
							overflow-y: auto;
							.box8-main-item {
								display: flex;
								height: 60px;
								align-items: center;

								.item-1 {
									width: 250px;
									display: flex;
									.icon {
										width: 24px;
										height: 24px;
										margin-left: 13px;
										img {
											width: 100%;
											height: 100%;
										}
									}
									.text {
										width: 200px;
										margin-left: 13px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: left;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
								.item-num {
									width: 64px;
									line-height: 64px;
									text-align: center;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}
							.box8-main-item:nth-child(2n-1) {
								border-radius: 4px;
								background: rgba(247, 248, 249, 1);
							}
						}
					}
				}
			}
		}
		.home-main-footer {
			// width: 100%;
			height: 1149px;
			background: rgba(248, 249, 250, 1);
			overflow: hidden;
			.home-main-footer-header {
				width: 1600px;
				height: 42px;
				margin: 36px auto;
				// background: orange;
				display: flex;
				justify-content: space-between;
				.btn-box {
					width: 1000px;
					display: flex;
					.btn {
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 42px;
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 0);
						margin-right: 20px;
						cursor: pointer;
						&:hover {
							background: rgba(20, 89, 187, 0.1);
						}
					}
					.btnActive {
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 1);
						color: #fff;
						&:hover {
							color: #fff;
							background: rgba(20, 89, 187, 1);
						}
					}
				}
				.select-box {
					height: 42px;
					box-sizing: border-box;
					padding: 5px 0;
				}
			}
			.home-main-footer-main {
				width: 1600px;
				margin-bottom: 20px;
				height: 985px;
				// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				// background: rgba(255, 255, 255, 1);
				margin: 0 auto;
				box-sizing: border-box;
				// padding: 20px;
				display: flex;
				.left {
					width: 300px;
					height: 560px;
					border-radius: 4px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);
					.left-box1 {
						margin-top: 17px;
						height: 260px;
						.left-box1-header {
							display: flex;
							.icon {
								width: 8px;
								height: 16px;
								margin-top: 4px;
								border-radius: 2px 2px 0 0;
								background: rgba(10, 87, 166, 1);
							}
							.title {
								height: 2px;
								margin-left: 17px;
								color: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
							}
						}
						.left-box1-main {
							margin-top: 10px;
							.time-label {
								height: 35px;
								margin-left: 25px;
							}
						}
					}
					.left-box2 {
						margin-top: 17px;
						height: 260px;
						.left-box2-header {
							display: flex;
							.icon {
								width: 8px;
								height: 16px;
								margin-top: 4px;
								border-radius: 2px 2px 0 0;
								background: rgba(10, 87, 166, 1);
							}
							.title {
								height: 2px;
								margin-left: 17px;
								color: rgba(10, 87, 166, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
							}
						}
						.left-box2-main {
							margin-top: 10px;
							.area-label {
								height: 35px;
								margin-left: 25px;
							}
						}
					}
				}
				.right {
					margin-left: 16px;
					width: 1284px;
					height: 899px;
					border-radius: 4px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);
					.right-header {
						height: 54px;
						background: rgba(59, 65, 75, 1);
						display: flex;
						.header-item1 {
							width: 500px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 80px;
							box-sizing: border-box;
						}
						.header-item2 {
							width: 196px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 20px;
							box-sizing: border-box;
						}
						.header-item3 {
							width: 196px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 20px;
							box-sizing: border-box;
						}
						.header-item4 {
							width: 196px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 20px;
							box-sizing: border-box;
						}
						.header-item5 {
							width: 196px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 54px;
							padding-left: 20px;
							box-sizing: border-box;
						}
					}
					.right-main {
						height: 780px;
						// background: orange;
						.item {
							display: flex;
							padding: 16px 0;
							// height: 56px;
							&:nth-child(2n) {
								background: rgba(247, 248, 249, 1);
							}
							.item-box1 {
								width: 500px;
								display: flex;
								.name {
									height: 22px;
									padding: 0 8px;
									box-sizing: border-box;
									border-radius: 4px;
									margin-left: 32px;
									margin-top: 10px;
									// display: flex;
									// align-items: center;
								}
								.name1 {
									color: rgba(250, 140, 22, 1);
									border: 1px solid rgba(255, 213, 145, 1);
									background: rgba(255, 247, 230, 1);
								}
								.name2 {
									color: rgba(10, 87, 166, 1);
									border: 1px solid rgba(145, 202, 255, 1);
									background: rgba(230, 244, 255, 1);
								}
								.name3 {
									color: rgba(114, 46, 209, 1);
									border: 1px solid rgba(211, 173, 247, 1);
									background: rgba(249, 240, 255, 1);
								}
								.title {
									margin-left: 12px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									display: flex;
									align-items: center;
								}
							}
							.item-box2 {
								width: 196px;
								padding-left: 20px;
								box-sizing: border-box;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								display: flex;
								align-items: center;
							}
							.item-box3 {
								width: 196px;
								padding-left: 20px;
								box-sizing: border-box;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								display: flex;
								align-items: center;
							}
							.item-box4 {
								width: 196px;
								padding-left: 20px;
								box-sizing: border-box;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								display: flex;
								align-items: center;
							}
							.item-box5 {
								width: 196px;
								padding-left: 20px;
								box-sizing: border-box;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								display: flex;
								align-items: center;
							}
						}
					}
					.right-footer {
						display: flex;
						// height: 60px;
						// background: orange;
						justify-content: space-between;
						.footer-left {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							margin-left: 24px;
							margin-top: 6px;
						}
						.footer-right {
							margin-right: 24px;
						}
					}
				}
			}
		}
	}
}
.divide-header {
	margin: 0 auto;
	margin-top: 52px;
	margin-bottom: 36px;
}
:deep(.el-input__wrapper) {
	box-shadow: none;
	border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

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