<template>
	<div class="home-wrapper">
		<div class="home-main">
			<div class="home-main-header">
				<div class="home-main-header-top">
					<div class="header-item">国家科技安全</div>
					<div class="header-item">></div>
					<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
					<div class="header-item">></div>
					<div class="header-item">科技智库</div>
				</div>
				<div class="home-main-header-center">
					<el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
					<div class="search">
						<div class="search-icon">
							<img src="./assets/images/search-icon.png" alt="" />
						</div>
						<div class="search-text">搜索</div>
					</div>
				</div>
				<!-- <div class="home-main-header-footer">
					<div class="home-main-header-footer-item">
						<div class="item-top">128</div>
						<div class="item-footer">追踪智库数量</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">42</div>
						<div class="item-footer">本月新增报告</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">18</div>
						<div class="item-footer">重点政策建议</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">12</div>
						<div class="item-footer">热点科技领域</div>
					</div>
				</div> -->
				<div class="home-main-header-btn-box">
					<div class="btn" @click="scrollToTop('position1')">
						<div class="btn-text">{{ "最新动态" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position2')">
						<div class="btn-text">{{ "资讯要闻" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position3')">
						<div class="btn-text">{{ "统计概览" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position4')">
						<div class="btn-text">{{ "资源库" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
				</div>
				<div class="home-main-header-card-box">
					<div class="card" v-for="(item, index) in cardList" :key="index" @click="handleClick(item)">
						<div class="card-header">
							<div class="icon">
								<img :src="item.logo" alt="" />
							</div>
							<div class="rank" :class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }">
								{{ "No." + item.rank }}
							</div>
						</div>
						<div class="card-title">
							<div class="title-left">{{ item.name }}</div>
							<div class="title-right">{{ item.country }}</div>
						</div>
						<div class="content">{{ item.desc }}</div>
						<div class="tag-box">
							<div
								class="tag"
								:class="{
									tag1: val.status === 1,
									tag2: val.status === 2,
									tag3: val.status === 3,
									tag4: val.status === 4
								}"
								v-for="(val, idx) in item.tagList"
								:key="idx"
							>
								{{ val.name }}
							</div>
						</div>
					</div>
					<div class="card">
						<div class="more">
							{{ "查看全部智库 >" }}
						</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-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>
						<div class="box1-main">
							<div class="box1-main-left">
								<img :src="box1Data.img" alt="" />
							</div>
							<div class="box1-main-right">
								<div class="title">{{ box1Data.title }}</div>
								<div class="tag-box">
									<div class="tag" v-for="(item, index) in box1Data.tagList" :key="index">{{ item }}</div>
								</div>
								<div class="content">{{ box1Data.content }}</div>
								<div class="box1-right-footer">
									<div class="time">{{ box1Data.time }}</div>
									<div class="name">
										<div class="logo">
											<img :src="box1Data.logo" alt="" />
										</div>
										<div class="text">{{ box1Data.from }}</div>
									</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 === '一般风险 ' || item.status === '暂无数值',
										itemLeftStatus2: item.status === '重大风险',
										itemLeftStatus3: 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>
						<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="box5-select-box">
								<el-select v-model="box5selectetedYear" placeholder="选择时间" style="width: 120px">
									<el-option
										v-for="item in box5YearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div>
						</div>
						<div class="box5-main" id="box5Chart"></div>
					</div>
					<div class="box6">
						<div class="box6-header">
							<div class="header-icon">
								<img src="./assets/images/box6-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "政策建议领域分布" }}</div>
							<div class="box6-select-box">
								<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
									<el-option
										v-for="item in box6YearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div>
						</div>
						<div class="box6-main" id="box6Chart"></div>
					</div>
				</div>
				<div class="center-footer1">
					<div class="box7">
						<div class="box7-header">
							<div class="box7-header-left">
								<div class="box7-header-icon">
									<img src="./assets/images/box7-header-icon.png" alt="" />
								</div>
								<div class="box7-header-title">{{ "智库资金流向" }}</div>
							</div>
						</div>
						<div class="box7-main" id="box7Chart"></div>
					</div>
					<div class="box8">
						<div class="box8-header">
							<div class="box8-header-left">
								<div class="box8-header-icon">
									<img src="./assets/images/box8-header-icon.png" alt="" />
								</div>
								<div class="box8-header-title">{{ "智库研究热点" }}</div>
							</div>
							<div class="box8-select-box">
								<el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px">
									<el-option
										v-for="item in box8YearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div>
						</div>
						<div class="box8-main">
							<div class="box8-item" v-for="(item, index) in box8Data" :key="index">
								<div
									class="item-left"
									:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
								>
									{{ index + 1 }}
								</div>
								<div
									class="item-center"
									:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
								>
									{{ item.title }}
								</div>
								<div class="item-right">{{ `${item.report} >` }}</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>
				<div class="home-main-footer-main">
					<div class="left">
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "地区筛选" }}</div>
							</div>
							<div class="select-main">
								<div class="checkbox-group">
									<el-checkbox
										v-for="region in filters.regions"
										:key="region.id"
										v-model="activeFilters.regions"
										:label="region.id"
										class="filter-checkbox"
									>
										{{ region.name }}
									</el-checkbox>
								</div>
							</div>
						</div>
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "智库类型" }}</div>
							</div>
							<div class="select-main select-main1">
								<div class="checkbox-group">
									<el-checkbox
										v-for="type in filters.types"
										:key="type.id"
										v-model="activeFilters.types"
										:label="type.id"
										class="filter-checkbox"
									>
										{{ type.name }}
									</el-checkbox>
								</div>
							</div>
						</div>
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "研究领域" }}</div>
							</div>
							<div class="select-main">
								<div class="checkbox-group">
									<el-checkbox
										v-for="research in filters.researches"
										:key="research.id"
										v-model="activeFilters.researches"
										:label="research.id"
										class="filter-checkbox"
									>
										{{ research.name }}
									</el-checkbox>
								</div>
							</div>
						</div>

						<div class="left-footer-box">
							<div class="header">{{ "动态订阅" }}</div>
							<div class="content">{{ "选择您感兴趣的研究领域，获取最新报告通知" }}</div>
							<div class="btn">{{ "保存订阅设置" }}</div>
						</div>
					</div>
					<div class="right">
						<div class="card-box">
							<div class="footer-card" v-for="(item, index) in curFooterList" :key="index">
								<div class="footer-card-top">
									<img :src="item.img" alt="" />
								</div>
								<div class="footer-card-title">
									{{ item.title }}
								</div>
								<div class="footer-card-footer">
									<div class="time">{{ item.time }}</div>
									<div class="from">{{ item.from }}</div>
								</div>
							</div>
						</div>
						<div class="right-footer">
							<div class="info">
								{{ `共1059篇智库报告` }}
							</div>
							<div class="page-box">
								<el-pagination :page-size="12" background layout="prev, pager, next" :total="120" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

import {
	getThinkTankList,
	getThinkTankRiskSignal,
	getThinkTankPolicyIndustryChange,
	getThinkTankPolicyIndustry,
	getThinkTankDonation
} from "@/api/thinkTank/overview";

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 getSankeyChart from "./utils/sankey";

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

import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
import Img5 from "./assets/images/img5.png";
import Img6 from "./assets/images/img6.png";
import Img7 from "./assets/images/img7.png";
import Img8 from "./assets/images/img8.png";
import Img9 from "./assets/images/img9.png";
import Img10 from "./assets/images/img10.png";
import Img11 from "./assets/images/img11.png";
import Img12 from "./assets/images/img12.png";

import Box1Img from "./assets/images/box1-img.png";
import Box1Logo from "./assets/images/box1-logo.png";

// 智库发布
const box1Data = ref({
	img: Box1Img,
	title: "中美经济竞争：复杂经济和地缘政治关系中的收益和风险",
	tagList: ["外交", "军事", "经济"],
	content: `自2017年以来，美中竞争，包括经济竞争，已成为美国外交政策的定义。这两个经济体是世界上第一和第二大国家经济体，彼此紧密交织。无论多么必要的关系变化，都可能付出高昂代价。因此，美国面临着在双重战略竞争条件下确保其经济满足国家需求的挑战。为应对这一挑战，兰德研究人员对美中竞争进行了经济和制度分析，开展了参与式前瞻性研究，以理解确保美国经济健全发展`,
	time: "2025年9月16日",
	from: "兰德科技智库",
	logo: Box1Logo
});

const handleClick = tank => {
	// router.push({ name: "ThinkTankDetail", params: { id: tank.id } });
	const curRoute = router.resolve({ name: "ThinkTankDetail", params: { id: tank.id } });
	window.open(curRoute.href, "_blank");
};

const activeFilters = reactive({
	regions: ["north_america"],
	types: ["gov"],
	researches: ["全部领域"]
});

const filters = reactive({
	regions: [
		{ id: "north_america", name: "北美" },
		{ id: "europe", name: "欧洲" },
		{ id: "asia", name: "亚洲" },
		{ id: "other", name: "其他地区" }
	],
	types: [
		{ id: "gov", name: "政府背景" },
		{ id: "university", name: "高校附属" },
		{ id: "independent", name: "独立智库" },
		{ id: "corporate", name: "企业视景" }
	],
	researches: [
		{
			id: "全部领域",
			name: "全部领域"
		},
		{
			id: "人工智能",
			name: "人工智能"
		},
		{
			id: "通信网络",
			name: "通信网络"
		},
		{
			id: "量子科技",
			name: "量子科技"
		},
		{
			id: "能源",
			name: "能源"
		},
		{
			id: "生物技术",
			name: "生物技术"
		},

		{
			id: "新材料",
			name: "新材料"
		},
		{
			id: "海洋",
			name: "海洋"
		}
	]
});

const cardList = ref([
	// {
	// 	id: 1,
	// 	logo: Logo1,
	// 	rank: 1,
	// 	name: "兰德科技智库",
	// 	country: "美国",
	// 	desc: "全球顶尖政策研究机构，专注于国家安全、科技政策、医疗卫生、能源政策、公共安全等领域的研究。 ",
	// 	tagList: [
	// 		{
	// 			name: "国家安全",
	// 			status: 2
	// 		},
	// 		{
	// 			name: "科技政策",
	// 			status: 4
	// 		}
	// 	]
	// },
	// {
	// 	id: 2,
	// 	logo: Logo2,
	// 	rank: 2,
	// 	name: "布鲁金斯学会",
	// 	country: "美国",
	// 	desc: "专注于全球经济与发展、外交政策、都市政策、治理研究等领域，是美国最具影响力的智库之一。",
	// 	tagList: [
	// 		{
	// 			name: "经济政策",
	// 			status: 3
	// 		},
	// 		{
	// 			name: "公共政策",
	// 			status: 1
	// 		}
	// 	]
	// },
	// {
	// 	id: 3,
	// 	logo: Logo3,
	// 	rank: 3,
	// 	name: "麦肯锡全球研究院",
	// 	country: "美国",
	// 	desc: "专注于国际安全、国防、区域研究、能源与气候变化等领域，以其强硬的安全政策立场著称。 ",
	// 	tagList: [
	// 		{
	// 			name: "国际安全",
	// 			status: 2
	// 		},
	// 		{
	// 			name: "国防政策",
	// 			status: 4
	// 		}
	// 	]
	// },
	// {
	// 	id: 4,
	// 	logo: Logo4,
	// 	rank: 4,
	// 	name: "麻省理工学院科技评论",
	// 	country: "美国",
	// 	desc: "全球顶尖政策研究机构，专注于国家安全、科技政策、医疗卫生、能源政策、公共安全等领域的研究。 ",
	// 	tagList: [
	// 		{
	// 			name: "公共政策",
	// 			status: 2
	// 		},
	// 		{
	// 			name: "国际关系",
	// 			status: 4
	// 		}
	// 	]
	// },
	// {
	// 	id: 5,
	// 	logo: Logo5,
	// 	rank: 5,
	// 	name: "信息技术与创新基金会",
	// 	country: "美国",
	// 	desc: "专注于国内外公共政策、国际关系等领域，是美国最具影响力的官方智库之一。 ",
	// 	tagList: [
	// 		{
	// 			name: "公共政策",
	// 			status: 2
	// 		},
	// 		{
	// 			name: "国家安全",
	// 			status: 4
	// 		}
	// 	]
	// }
]);

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

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

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

const categoryList = ref(["智库报告", "政策建议"]);

const activeCate = ref("智库报告");
const activeHylyId = ref("");

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

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

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

const curFooterList = ref([
	{
		title: "中国对AI的转型产业政策",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img1
	},
	{
		title: "中美对抗、竞争和合作跨越人工智能通用领域...",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img2
	},
	{
		title: "中国、智慧城市和中东：地区和美国的选择",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img3
	},
	{
		title: "中国对AI的转型产业政策",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img4
	},
	{
		title: "中美经济竞争：复杂经济和地缘政治关系中的...",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img5
	},
	{
		title: "中国、智慧城市和中东：留给地区和美国的选择",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img6
	},
	{
		title: "中国对AI的转型产业政策",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img7
	},
	{
		title: "中美对抗、竞争和合作跨越人工智能通用领域...",
		time: "2025年6月26日",
		from: "",
		img: Img8
	},
	{
		title: "中国、智慧城市和中东：地区和美国的选择",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img9
	},
	{
		title: "中国对AI的转型产业政策",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img10
	},
	{
		title: "中美对抗、竞争和合作跨越人工智能通用领域...",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img11
	},
	{
		title: "中国、智慧城市和中东：地区和美国的选择",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img12
	}
]);

const box5Data = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{
			name: "人工智能",
			value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87]
		},
		{
			name: "集成电路",
			value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
		},
		{
			name: "量子科技",
			value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
		}
	]
});

const box5selectetedYear = ref("近十年");
const box5YearList = ref([
	{
		label: "近十年",
		value: "近十年"
	},
	{
		label: "近五年",
		value: "近五年"
	},
	{
		label: "近三年",
		value: "近三年"
	}
]);

const box6Data = ref([
	{
		name: "半导体",
		value: 50,
		color: "#4096FF"
	},
	{
		name: "电子设备",
		value: 46,
		color: "#FFA39E"
	},
	{
		name: "显示技术",
		value: 40,
		color: "#ADC6FF"
	},
	{
		name: "新能源",
		value: 32,
		color: "#FFC069"
	},
	{
		name: "通信设备",
		value: 31,
		color: "#B5F5EC"
	},
	{
		name: "汽车",
		value: 30,
		color: "#B37FEB"
	},
	{
		name: "其他",
		value: 24,
		color: "#D6E4FF"
	}
]);

const box6selectetedYear = ref("2025");
const box6YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	}
]);

// 智库资金流向
const box7Data = ref({
	nodes: [
		{ name: "美国", itemStyle: { color: "#1f5cb8" } },
		{ name: "英国", itemStyle: { color: "#6f42c1" } },
		{ name: "加拿大", itemStyle: { color: "#d9534f" } },
		// 中间层
		{ name: "美国能源部", itemStyle: { color: "#a4c639" } },
		{ name: "美国财政部", itemStyle: { color: "#f06292" } },
		{ name: "美国国务院", itemStyle: { color: "#b08d55" } },
		{ name: "美国国际开发署", itemStyle: { color: "#4285f4" } },
		{ name: "美国内政部", itemStyle: { color: "#8cae9e" } },
		{ name: "美国国家民主基金会", itemStyle: { color: "#a1887f" } },
		// 右侧层 (部分)
		{ name: "麻省理工学院科技评论", itemStyle: { color: "#7cb342" } },
		{ name: "麦肯锡全球研究院", itemStyle: { color: "#cddc39" } },
		{ name: "卡内基国际和平研究院", itemStyle: { color: "#afb42b" } },
		{ name: "战略与国际研究中心", itemStyle: { color: "#827717" } },
		{ name: "兰德公司", itemStyle: { color: "#689f38" } }
	],

	links: [
		{ source: "美国", target: "美国能源部", value: 50 },
		{ source: "美国", target: "美国财政部", value: 40 },
		{ source: "美国", target: "美国国务院", value: 60 },
		{ source: "美国", target: "美国国际开发署", value: 20 },
		{ source: "美国", target: "美国内政部", value: 15 },
		{ source: "英国", target: "美国国务院", value: 10 },
		{ source: "加拿大", target: "美国能源部", value: 5 },

		// Flow to right
		{ source: "美国能源部", target: "麻省理工学院科技评论", value: 20 },
		{ source: "美国能源部", target: "麦肯锡全球研究院", value: 25 },
		{ source: "美国财政部", target: "卡内基国际和平研究院", value: 30 },
		{ source: "美国国务院", target: "战略与国际研究中心", value: 40 },
		{ source: "美国国务院", target: "兰德公司", value: 15 }
	]
});

// 智库研究热点
const box8Data = ref([
	{
		title: "人工智能领域竞争发展",
		report: "11份报告"
	},
	{
		title: "美元未来与能源出口挂钩",
		report: "7份报告"
	},
	{
		title: "量子领域国家合作",
		report: "5份报告"
	},
	{
		title: "限制中国产燃油进口",
		report: "5份报告"
	},
	{
		title: "禁止政府部门采购受控半导体或服务",
		report: "4份报告"
	},
	{
		title: "禁止向部分中国实体提供资金",
		report: "3份报告"
	},
	{
		title: "中国生产电池",
		report: "2份报告"
	},
	{
		title: "重视新兴中国技术公司威胁",
		report: "2份报告"
	},
	{
		title: "禁止卫星出口至中国",
		report: "1份报告"
	},
	{
		title: "华为设备",
		report: "1份报告"
	}
]);

const box8selectetedYear = ref("近一年");
const box8YearList = ref([
	{
		label: "近一年",
		value: "近一年"
	},
	{
		label: "近两年",
		value: "近两年"
	},
	{
		label: "近三年",
		value: "近三年"
	}
]);

// 获取智库列表
const handleGetThinkTankList = async () => {
	try {
		const res = await getThinkTankList();
		console.log("智库列表", res);
		if (res.code === 200 && res.data) {
			cardList.value = res.data.map(item => {
				return {
					id: item.id,
					logo: item.imageUrl,
					name: item.name,
					tagList: item.tags,
					country: item.country,
					desc: item.describe,
					rank: item.id
				};
			});
		}
	} catch (error) {
		console.error("获取智库列表error", error);
	}
};

// 获取智库风险信号
const handleGetThinkTankRiskSignal = async () => {
	try {
		const res = await getThinkTankRiskSignal();
		console.log("智库风险信号", res);
		if (res.code === 200) {
			warningList.value = res.data.map(item => {
				return {
					title: item.name,
					time: item.times,
					id: item.reportId,
					status: item.riskLevel || "暂无数值"
				};
			});
		}
	} catch (error) {
		console.error("获取智库风险信号error", error);
	}
};

// 政策建议趋势分布
const handleGetThinkTankPolicyIndustryChange = async () => {
	try {
		const res = await getThinkTankPolicyIndustryChange();
		console.log("政策建议趋势分布", res);
		if (res.code === 200 && res.data) {
		} else {
			box5Data.value = [];
		}
	} catch (error) {
		console.error("获取政策建议趋势分布error", error);
	}
};

const handleBox5 = async () => {
	await handleGetThinkTankPolicyIndustryChange();
	let box5Chart = getMultiLineChart(
		box5Data.value.title,
		box5Data.value.data[0].value,
		box5Data.value.data[1].value,
		box5Data.value.data[2].value
	);
	setChart(box5Chart, "box5Chart");
};

// 政策建议趋势分布
const handleGetThinkTankPolicyIndustry = async () => {
	const params = {
		apply: 1,
		yaer: box6selectetedYear.value
	};
	try {
		const res = await getThinkTankPolicyIndustry(params);
		console.log("政策建议领域分布", res);
		if (res.code === 200 && res.data) {
		} else {
			box6Data.value = [];
		}
	} catch (error) {
		console.error("获取政策建议领域分布error", error);
	}
};

const handleBox6 = async () => {
	await handleGetThinkTankPolicyIndustry();
	const box6Chart = getPieChart(box6Data.value);
	setChart(box6Chart, "box6Chart");
};

function transformThinkTankData(data) {
	const nodes = [];
	const links = [];
	const nodeSet = new Set(); // 用于去重

	// 遍历每个智库
	data.forEach(thinkTank => {
		const thinkTankName = thinkTank.thinkTankName;

		// 添加智库节点
		if (!nodeSet.has(thinkTankName)) {
			nodes.push({ name: thinkTankName });
			nodeSet.add(thinkTankName);
		}

		// 遍历每个资金来源
		thinkTank.thinkTankDonationSourceVOList.forEach(source => {
			const { amount, institution, secondInstitution } = source;

			// 处理机构节点
			if (institution && !nodeSet.has(institution)) {
				nodes.push({ name: institution });
				nodeSet.add(institution);
			}

			// 处理二级机构节点
			if (secondInstitution && !nodeSet.has(secondInstitution)) {
				nodes.push({ name: secondInstitution });
				nodeSet.add(secondInstitution);
			}

			// 构建链接
			if (institution && secondInstitution) {
				// 情况1: institution → secondInstitution → thinkTankName
				links.push({
					source: institution,
					target: secondInstitution,
					value: amount
				});

				links.push({
					source: secondInstitution,
					target: thinkTankName,
					value: amount
				});
			} else if (institution && !secondInstitution) {
				// 情况2: institution → thinkTankName
				links.push({
					source: institution,
					target: thinkTankName,
					value: amount
				});
			} else if (!institution && !secondInstitution) {
				// 情况3: 只有智库节点
				links.push({
					source: thinkTankName,
					value: amount
				});
			}
		});
	});

	return { nodes, links };
}

// 智库资金流向
const handleGetThinkTankDonation = async () => {
	try {
		const res = await getThinkTankDonation();
		console.log("智库资金流向", res);
		if (res.code === 200 && res.data) {
			box7Data.value = transformThinkTankData(res.data);
		}
	} catch (error) {
		console.error("获取智库资金流向error", error);
	}
};
const handleBox7 = async () => {
	await handleGetThinkTankDonation();
	const box7Chart = getSankeyChart(box7Data.value.nodes, box7Data.value.links);
	setChart(box7Chart, "box7Chart");
};

onMounted(async () => {
	handleGetThinkTankList();
	handleGetThinkTankRiskSignal();
	handleBox5();
	handleBox6();
	handleBox7();
});
</script>

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

					.card-header {
						display: flex;
						height: 32px;
						margin-top: 19px;
						margin-left: 20px;
						justify-content: space-between;
						.icon {
							width: 32px;
							height: 32px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.rank {
							width: 100px;
							height: 32px;
							line-height: 32px;
							text-align: center;
							background: linear-gradient(270deg, rgba(10, 87, 166, 0.3), rgba(10, 87, 166, 0) 100%);
							color: rgba(5, 95, 194, 1);
							font-family: YouSheBiaoTiHei;
							font-size: 24px;
							font-weight: 400;
							line-height: 32px;
							letter-spacing: 0px;
						}
						.rank1 {
							background: linear-gradient(270deg, rgba(206, 79, 81, 0.3), rgba(206, 79, 81, 0) 100%);
							color: rgba(206, 79, 81, 1);
						}
						.rank2 {
							background: linear-gradient(270deg, rgba(255, 172, 77, 0.3), rgba(255, 172, 77, 0) 100%);
							color: rgba(255, 149, 77, 1);
						}
						.rank3 {
							background: linear-gradient(270deg, rgba(255, 197, 61, 0.3), rgba(255, 197, 61, 0) 100%);
							color: rgba(255, 197, 61, 1);
						}
					}
					.card-title {
						margin-top: 13px;
						display: flex;
						margin-left: 20px;
						margin-right: 21px;
						justify-content: space-between;
						.title-left {
							width: 175px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
						.title-right {
							height: 22px;
							color: rgba(132, 136, 142, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: right;
						}
					}
					.content {
						margin: 13px auto 19px;
						width: 212px;
						height: 66px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: justify;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.tag-box {
						margin: 0 20px;
						display: flex;
						gap: 8px;
						.tag {
							height: 22px;
							padding: 0 8px;
							box-sizing: border-box;
							border-radius: 4px;
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
						}
						.tag1 {
							box-sizing: border-box;
							border: 1px solid rgba(135, 232, 222, 1);
							border-radius: 4px;
							background: rgba(230, 255, 251, 1);
							color: rgba(19, 168, 168, 1);
						}
						.tag2 {
							box-sizing: border-box;
							border: 1px solid rgba(186, 224, 255, 1);
							border-radius: 4px;
							background: rgba(230, 244, 255, 1);
							color: rgba(22, 119, 255, 1);
						}
						.tag3 {
							box-sizing: border-box;
							border: 1px solid rgba(255, 229, 143, 1);
							border-radius: 4px;
							background: rgba(255, 251, 230, 1);
							color: rgba(250, 173, 20, 1);
						}
						.tag4 {
							box-sizing: border-box;
							border: 1px solid rgba(255, 163, 158, 1);
							border-radius: 4px;
							background: rgba(255, 241, 240, 1);
							color: rgba(245, 34, 45, 1);
						}
					}
					.more {
						margin: 103px auto;
						height: 22px;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: center;
						cursor: pointer;
					}
				}
			}
		}

		.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;
					border-radius: 10px;
					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: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						justify-content: space-between;
						.box1-header-left {
							display: flex;
							.icon {
								width: 18px;
								height: 18px;
								margin-left: 19px;
								margin-top: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.title {
								width: 112px;
								height: 48px;
								margin-left: 25px;
								color: #fff;
								background: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 48px;
								text-align: center;
							}
						}
					}
					.box1-main {
						margin: 24px auto;
						width: 948px;
						height: 353px;
						display: flex;
						gap: 28px;
						.box1-main-left {
							width: 458px;
							height: 353px;
							border-radius: 4px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.box1-main-right {
							width: 462px;
							.title {
								width: 462px;
								max-height: 52px;
								overflow: hidden;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
								letter-spacing: 0px;
								text-align: left;
							}
							.tag-box {
								width: 462px;
								height: 26px;
								overflow: hidden;
								margin-top: 16px;
								display: flex;
								gap: 8px;
								.tag {
									height: 26px;
									padding: 0 8px;
									box-sizing: border-box;
									border: 1px solid rgba(231, 243, 255, 1);
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}
							}
							.content {
								margin-top: 17px;
								width: 462px;
								height: 183px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								display: -webkit-box;
								-webkit-line-clamp: 6; /* 限制行数为5 */
								-webkit-box-orient: vertical;
								overflow: hidden;
							}
							.box1-right-footer {
								margin-top: 31px;
								display: flex;
								justify-content: space-between;
								.time {
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}
								.name {
									display: flex;
									justify-content: flex-end;
									gap: 6px;
									.logo {
										margin-top: 5px;
										width: 16px;
										height: 16px;
										img {
											width: 100%;
											height: 100%;
										}
									}
									.text {
										height: 24px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: right;
									}
								}
							}
						}
					}
				}
				.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;
					border-radius: 10px;
					.box2-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						.icon {
							width: 24px;
							height: 22px;
							margin-left: 18px;
							margin-top: 14px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.title {
							display: flex;
							width: 148px;
							height: 48px;
							background: rgba(206, 79, 81, 1);
							margin-left: 18px;
							.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);
							}

							.item-left {
								margin-top: 4px;
								margin-left: 2px;
								width: 40px;
								height: 40px;
								border-radius: 20px;
								font-family: Microsoft YaHei;
								font-size: 12px;
								font-weight: 400;
								line-height: 14px;
								box-sizing: border-box;
								padding: 6px 4px;
								text-align: center;
							}
							.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;
							}
							.itemLeftStatus3 {
								color: rgba(245, 34, 45, 1);
								background: rgba(255, 241, 240);
							}
							.item-right {
								margin-left: 13px;
								width: 408px;
								height: 47px;
								border-bottom: 1px solid rgba(240, 242, 244, 1);
								display: flex;
								.text {
									width: 315px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 47px;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
								.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;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
					background: rgba(255, 255, 255, 1);
					.box3-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;
						.box3-header-left {
							display: flex;
							.box3-header-icon {
								margin-top: 16px;
								width: 19px;
								height: 19px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.box3-header-title {
								margin-top: 16px;
								margin-left: 19px;
								height: 22px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}
							.more {
								width: 49px;
								height: 24px;
								position: absolute;
								top: 14px;
								right: 27px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								cursor: pointer;
							}
						}
					}
					.box3-main {
						height: 402px;
						overflow-y: auto;
						overflow-x: hidden;
						padding-top: 6px;
						.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;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
					background: rgba(255, 255, 255, 1);
					.box4-header {
						width: 792px;
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						box-sizing: border-box;
						padding-left: 22px;
						position: relative;
						.header-icon {
							margin-top: 15px;
							width: 20px;
							height: 20px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.header-title {
							margin-top: 16px;
							margin-left: 18px;
							height: 22px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 22px;
						}
						.more {
							width: 49px;
							height: 24px;
							position: absolute;
							top: 14px;
							right: 27px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							cursor: pointer;
						}
					}
					.box4-main {
						height: 402px;
						overflow-y: auto;
						box-sizing: border-box;
						padding-top: 8px;
						.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;
							}
						}
						.box5-select-box {
							width: 120px;
							height: 28px;
							position: absolute;
							top: 12px;
							right: 25px;
						}
					}
					.box5-main {
						height: 397px;
					}
				}
				.box6 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box6-header {
						width: 521px;
						height: 53px;
						box-sizing: border-box;
						padding: 0 20px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						position: relative;
						.header-icon {
							margin-top: 18px;
							width: 19px;
							height: 19px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.header-title {
							margin-top: 16px;
							margin-left: 15px;
							height: 22px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 22px;
						}
						.box6-select-box {
							width: 120px;
							height: 28px;
							position: absolute;
							top: 12px;
							right: 25px;
						}
					}
					.box6-main {
						height: 360px;
					}
				}
			}
			.center-footer1 {
				margin-top: 16px;
				display: flex;
				justify-content: center;
				gap: 15px;
				.box7 {
					width: 1064px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box7-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;
						.box7-header-left {
							display: flex;
							.box7-header-icon {
								margin-top: 15px;
								margin-left: 2px;
								width: 19px;
								height: 19px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.box7-header-title {
								margin-top: 12px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}
						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;
							.icon {
								width: 14px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
					.box7-main {
						height: 412px;
					}
				}
				.box8 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box8-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;
						.box8-header-left {
							display: flex;
							.box8-header-icon {
								margin-top: 15px;
								margin-left: 2px;
								width: 19px;
								height: 19px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.box8-header-title {
								margin-top: 12px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}
						.box8-select-box {
							width: 120px;
							height: 28px;
							position: absolute;
							top: 12px;
							right: 25px;
						}
					}
					.box8-main {
						margin: 0 auto;
						margin-top: 5px;
						width: 452px;
						height: 382px;
						overflow: hidden;
						.box8-item {
							margin-top: 14px;
							width: 452px;
							height: 24px;
							display: flex;
							.item-left {
								width: 20px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: center;
							}

							.item-center {
								margin-left: 20px;
								width: 315px;
								height: 24px;
								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;
							}
							.itemBold1 {
								color: rgba(206, 79, 81, 1);
								font-weight: 700;
							}
							.itemBold2 {
								color: rgba(255, 169, 64, 1);
								font-weight: 700;
							}
							.itemBold3 {
								color: rgba(255, 197, 61, 1);
								font-weight: 700;
							}
							.item-right {
								width: 92px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: right;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
		.home-main-footer {
			overflow: hidden;
			background: rgba(247, 248, 249, 1);
			.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: 20px;
						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: var(--color-main-active);
						color: #fff;
						font-weight: 700;
						&:hover {
							color: #fff;
							background: var(--color-main-active);
						}
					}
				}
				.select-box {
					height: 42px;
					box-sizing: border-box;
					padding: 5px 0;
				}
			}
			.home-main-footer-main {
				margin: 0 auto;
				margin-top: 36px;
				width: 1600px;
				display: flex;
				gap: 16px;
				.left {
					width: 300px;
					height: 806px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
					background: rgba(255, 255, 255, 1);
					position: relative;
					.select-box {
						margin-top: 21px;
						.header {
							display: flex;
							gap: 17px;
							.icon {
								margin-top: 4px;
								width: 8px;
								height: 16px;
								background: var(--color-main-active);
								border-radius: 0 4px 4px 0;
							}
							.title {
								height: 24px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 1px;
								text-align: left;
							}
						}
						.select-main {
							margin-left: 25px;
						}
						.select-main1 {
							width: 100px;
						}
					}
					.left-footer-box {
						left: 25px;
						bottom: 20px;
						position: absolute;
						width: 250px;
						height: 149px;
						border-radius: 4px;
						background: rgba(246, 250, 255, 1);
						.header {
							margin-top: 8px;
							margin-left: 21px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
						.content {
							margin: 0 auto;
							margin-top: 11px;
							width: 210px;
							height: 44px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: left;
						}
						.btn {
							margin: 0 auto;
							margin-top: 13px;
							width: 210px;
							height: 36px;
							line-height: 36px;
							text-align: center;
							border-radius: 6px;
							background: var(--color-main-active);
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							letter-spacing: 0px;
						}
					}
				}
				.right {
					width: 1284px;
					height: 1377px;
					.card-box {
						width: 1284px;
						height: 1248px;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						.footer-card {
							width: 418px;
							height: 300px;
							border-radius: 10px;
							box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
							background: rgba(255, 255, 255, 1);
							.footer-card-top {
								width: 384px;
								height: 206px;
								margin: 0 auto;
								margin-top: 15px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.footer-card-title {
								margin: 0 auto;
								margin-top: 13px;
								width: 376px;
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
							}
							.footer-card-footer {
								margin: 0 auto;
								margin-top: 5px;
								width: 376px;
								height: 22px;
								display: flex;
								justify-content: space-between;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
					.right-footer {
						margin-top: 43px;
						display: flex;
						justify-content: space-between;
						.info {
							height: 19px;
							color: rgba(132, 136, 142, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
				}
			}
		}
	}
}
.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>
