<template>
	<div class="home-wrapper">
		<div class="home-main" ref="containerRef">
			<div class="home-top-bg"></div>
			<div class="home-main-header">
				<div class="home-main-header-center">
					<SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="containerRef"
						placeholder="搜索政令" :containerRef="containerRef" areaName="政令" />
					<!-- <el-input v-model="searchDecreeText" @keyup.enter="handleSearch" 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" @click="handleSearch">搜索</div>
					</div> -->
				</div>
				<!-- <div class="home-main-header-footer" v-show="!isShow">
					<div class="home-main-header-footer-item">
						<div class="item-top">3.8T</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">341</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" v-show="!isShow">
					<div class="btn" @click="handleToPosi('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="handleToPosi('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="handleToPosi('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="handleToPosi('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-item-box">
					<div class="item" v-for="(item, index) in govInsList" :key="index" @click="handleToInstitution(item)">
						<div class="item-left">
							<img :src="item.img ? item.img : DefaultIcon2" alt="" />
						</div>
						<div class="item-right">{{ item.name }}</div>
					</div>
				</div>
			</div>
			<DivideHeader id="position1" class="divide" :titleText="'最新动态'"></DivideHeader>
			<div class="home-main-center">
				<div class="center-top">
					<div class="box1">
						<div class="box1-left" @click="handleSwithCurDecree('left')">
							<div class="icon">
								<img src="./assets/images/box1-left.svg" alt="" />
							</div>
						</div>
						<div class="box1-right" @click="handleSwithCurDecree('right')">
							<div class="icon">
								<img src="./assets/images/box1-right.svg" alt="" />
							</div>
						</div>
						<div class="box1-header">
							<div class="box1-header-left">
								<div class="icon">
									<img src="./assets/images/box1-header-icon.png" alt="" />
								</div>
								<div class="title">{{ "最新科技政令" }}</div>
							</div>
							<div class="box1-header-right" @click="handleClickToDetail">
								{{ "查看详情 >" }}
							</div>
						</div>
						<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
							indicator-position="none">
							<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
								<div class="box1-main">
									<div class="box1-main-left">
										<img v-if="item.imageUrl" :src="item.imageUrl" alt="" />
										<div v-else class="box1-main-left-img-mock">
											<img class="img-mock-badge-img" src="./assets/images/badge.png" />
											<p class="img-mock-badge-title">行政令</p>
											<p class="img-mock-badge-title">{{ item.name }}</p>
											<!-- <p class="img-mock-badge-org">The White House</p> -->
										</div>
									</div>
									<div class="box1-main-right">
										<div class="box1-main-right-title">
											{{ item.name }}
										</div>
										<div class="box1-main-right-info">
											<div class="tag" :class="{
												tag1: tag.status == 1,
												tag2: tag.status == 2,
												tag3: tag.status == 3
											}" v-for="(tag, index) in item.industryList" :key="index">
												{{ tag.industryName }}
											</div>
										</div>
										<div class="box1-main-right-center">
											{{ item.describe }}
										</div>
										<div class="box1-main-right-footer">
											<div class="footer-left">{{ item.postDate }}</div>
											<div class="footer-right">
												<div class="footer-right-item1">
													{{ item.officialUrl }}
												</div>
												<div class="footer-right-item2">
													<img src="./assets/images/open-icon.png" alt="" />
												</div>
											</div>
										</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
					<!-- <div class="box2">
						<div class="box2-header">
							<div class="icon">
								<img src="./assets/images/box2-header-icon.png" alt="" />
							</div>
							<div class="title">
								<div class="text">{{ "风险信号" }}</div>
								<div class="num">{{ warningList.length }}</div>
							</div>
						</div>
						<div class="box2-main">
							<div
								class="box2-main-item"
								v-for="(item, index) in warningList"
								:key="index"
								@click="handleClickToDetail()"
							>
								<div
									class="item-left"
									:class="{
										itemLeftStatus3: item.riskLevel === '特别重大',
										itemLeftStatus2: item.riskLevel === '重大风险'
									}"
								>
									{{ item.riskLevel ? item.riskLevel : "暂无数据" }}
								</div>
								<div class="item-right">
									<div class="text">
										{{ item.name }}
									</div>
									<div class="time">{{ item.postDate }}</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> -->
					<RiskSignal :list="warningList" @item-click="handleClickToDetail" @more-click="handleToMoreRiskSignal">
					</RiskSignal>
				</div>
				<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
				<div class="center-center">
					<!-- <NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews" /> -->
					<NewsList :list="newsList" />
					<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @info-click="handleGetMessage"
						imageUrl="img" @more-click="handleToSocialDetail" />
				</div>
				<DivideHeader id="position3" class="divide3" :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-selectbox">
								<el-select @change="handleBox5YearChange" v-model="box5SelectedYear" 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">
							<div class="box5-chart" id="chart1"></div>
						</div>
					</div>
					<div class="box6">
						<div class="box6-header">
							<div class="header-icon">
								<img src="./assets/images/box4-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "政令涉及领域" }}</div>
							<div class="box6-selectbox">
								<el-select @change="handleBox6YearChange" v-model="box6SelectedYear" 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="chart2"></div>
					</div>
				</div>
				<div class="center-footer1">
					<div class="box7">
						<div class="box7-header">
							<div class="header-icon">
								<img src="./assets/images/box5-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "关键行政令" }}</div>
						</div>
						<div class="box7-main">
							<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="handleKeyDecree(item)">
								<div class="icon">
									<img src="./assets/images/warning.png" alt="" />
								</div>
								<div class="info">
									<div class="info-header">
										<div class="title">{{ item.title }}</div>
										<div class="time">{{ item.time }}</div>
									</div>
									<div class="info-content">{{ item.content ? item.content : "暂无数据" }}</div>
									<!-- <el-popover effect="dark" :width="800" :content="item.content" placement="top-start">
										<template #reference>
											<div class="info-content">{{ item.content ? item.content : "暂无数据" }}</div>
										</template>
</el-popover> -->
								</div>
							</div>
						</div>
					</div>
					<div class="box8">
						<div class="box8-header">
							<div class="header-icon">
								<img src="./assets/images/box5-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "政令重点条款" }}</div>
						</div>
						<div class="box8-main" id="wordCloudChart"></div>
					</div>
				</div>
			</div>
			<div class="home-main-footer">
				<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
				<div class="home-main-footer-header">
					<div class="select-box">
						<div class="paixu-btn" @click="handleSwithSort">
							<div class="icon1">
								<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
								<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
							</div>
							<div class="text">{{ "发布时间" }}</div>
							<div class="icon2">
								<img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
								<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
							</div>
						</div>
					</div>
				</div>
				<div class="home-main-footer-main">
					<div class="left">
						<div class="select-box">
							<div class="select-box-header">
								<div class="icon"></div>
								<div class="title">{{ "政令类型" }}</div>
							</div>
							<div class="select-main">
								<div class="checkbox-group">
									<el-checkbox v-for="type in decreeTypeList" :key="type.id" v-model="checkedDecreeType"
										:label="type.typeId" style="width: 180px" class="filter-checkbox"
										@change="handleChangeCheckedDecreeType">
										{{ type.typeName }}
									</el-checkbox>
								</div>
							</div>
						</div>
						<div class="select-box">
							<div class="select-box-header">
								<div class="icon"></div>
								<div class="title">{{ "发布机构" }}</div>
							</div>
							<div class="select-main">
								<div class="checkbox-group">
									<el-checkbox v-for="cate in govInsList" :key="cate.id" v-model="checkedGovIns" :label="cate.id"
										style="width: 180px" class="filter-checkbox" @change="handleChangeCheckedGovIns">
										{{ cate.name }}
									</el-checkbox>
								</div>
							</div>
						</div>
						<div class="select-box">
							<div class="select-box-header">
								<div class="icon"></div>
								<div class="title">{{ "发布时间" }}</div>
							</div>
							<div class="select-main">
								<div class="checkbox-group">
									<el-checkbox v-for="time in pubTime" :key="time.id" v-model="activePubTime" :label="time.id"
										style="width: 100px" class="filter-checkbox"
										@change="checked => handlePubTimeChange(time.id, checked)">
										{{ time.name }}
									</el-checkbox>
								</div>
							</div>
						</div>
						<div class="select-box">
							<div class="select-box-header">
								<div class="icon"></div>
								<div class="title">{{ "涉及领域" }}</div>
							</div>
							<div class="select-main select-main1">
								<div class="checkbox-group">
									<el-checkbox v-for="area in areaList" :key="area.id" v-model="activeAreaList" :label="area.id"
										style="width: 100px" @change="checked => handleAreaChange(area.id, checked)">
										{{ area.name }}
									</el-checkbox>
								</div>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="content-header">
							<div class="icon">
								<img src="./assets/images/footer-header-icon.png" alt="" />
							</div>
							<div class="title">{{ "政令库" }}</div>
						</div>
						<div class="content-box" v-show="decreeList">
							<div class="main-item" v-for="(item, index) in decreeList" :key="index" @click="handleClickDecree(item)">
								<div class="main-item-left">
									<div class="left-left">
										{{ item.time.split("-")[0] }}<br />{{ item.time.split("-")[1] }}月{{
											item.time.split("-")[2]
										}}日
									</div>
									<div class="left-right">
										<div class="icon">
											<img :src="item.orgImage ? item.orgImage : DefaultIcon2" alt="" />
										</div>
										<div class="line" v-if="index !== 9 && index !== totalDecreesNum - 1"></div>
									</div>
								</div>
								<div class="main-item-center">
									<div class="center-header">
										<div class="title">{{ item.title }}</div>
										<!-- <div
											class="type-box"
											:class="{
												type1: item.status === 1,
												type2: item.status === 2,
												type3: item.status === 3
											}"
										>
											{{ item.type }}
										</div> -->
									</div>
									<div class="desc">{{ item.desc }}</div>
									<div class="tag-box">
										<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">
											{{ val.industryName }}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="footer-box">
							<div class="footer-left">
								{{ `共 ${totalDecreesNum} 项` }}
							</div>
							<div class="footer-right">
								<el-pagination @current-change="handleCurrentChange" :pageSize="10" :current-page="currentPage"
									background layout="prev, pager, next" :total="totalDecreesNum" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
// import NewsList from "@/components/NewsList/NewsList.vue";
import { onMounted, ref, computed, watch, nextTick } from "vue";
import router from "@/router";
import {
	getDepartmentList,
	getLatestDecree,
	getDecreeRiskSignal,
	getDecreeYearOrder,
	getDecreeArea,
	getKeyDecree,
	getDecreeKeyInstruction,
	getDecreeOrderList,
	getDecreehylyList,
	getDecreeTypeList
} from "@/api/decree/home";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { getPersonSummaryInfo } from "@/api/common/index";
import { getNews, getSocialMedia } from "@/api/general/index";
import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getWordCloudChart from "./utils/wordCloudChart";
import getCalendarHeatChart from "./utils/cleandarHeat";

import setChart from "@/utils/setChart";

import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import DefaultIconNews from "@/assets/icons/default-icon-news.png";

import p1 from "./assets/images/iconp1.png";
import p2 from "./assets/images/iconp2.png";
import p3 from "./assets/images/iconp3.png";
import p4 from "./assets/images/iconp4.png";
import p5 from "./assets/images/iconp5.png";
import p6 from "./assets/images/iconp6.png";
import p7 from "./assets/images/iconp7.png";
import p8 from "./assets/images/iconp8.png";
import p9 from "./assets/images/iconp9.png";
import p10 from "./assets/images/iconp10.png";

import Gov1 from "./assets/images/gov1.png";
import Gov2 from "./assets/images/gov2.png";
import Gov3 from "./assets/images/gov3.png";
import Gov4 from "./assets/images/gov4.png";
import Gov5 from "./assets/images/gov5.png";
import Gov6 from "./assets/images/gov6.png";
import Gov7 from "./assets/images/gov7.png";
import Gov8 from "./assets/images/gov8.png";
import Gov9 from "./assets/images/gov9.png";
import Gov10 from "./assets/images/gov10.png";

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 { ElMessage } from "element-plus";


// 跳转行政机构主页
const handleToInstitution = item => {
	window.sessionStorage.setItem("curTabName", item.name);
	const curRoute = router.resolve({
		path: "/institution",
		query: {
			id: item.id
		}
	});
	window.open(curRoute.href, "_blank");
};

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

// 页面 header
const govInsList = ref([
	// {
	// 	img: Gov1,
	// 	name: "美国白宫"
	// },
	// {
	// 	img: Gov2,
	// 	name: "美国财政部"
	// },
]);
const checkedGovIns = ref([]);

const handleChangeCheckedGovIns = val => { };

const handleGetDepartmentList = async () => {
	try {
		const res = await getDepartmentList();
		console.log("机构列表", res);
		if (res.code === 200 && res.data) {
			govInsList.value = res.data.map(item => {
				return {
					id: item.orgId,
					name: item.orgName,
					img: item.orgImage
				};
			});
		}
	} catch (error) {
		console.error("获取机构列表error", error);
	}
};
handleGetDepartmentList();

// 查看更多风险信号
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 box1DataList = ref([
	{
		id: 89,
		name: "",
		postDate: "",
		describe: null,
		imageUrl: null,
		officialUrl: null,
		industryList: null
	}
]);

// const curBox1Data = ref({
// 	id: 89,
// 	name: "",
// 	postDate: "",
// 	describe: null,
// 	imageUrl: null,
// 	officialUrl: null,
// 	industryList: null
// });

const handleGetLatestDecree = async () => {
	try {
		const res = await getLatestDecree();
		console.log("最新科技政令", res);
		if (res.code === 200 && res.data) {
			box1DataList.value = res.data;
		}
	} catch (error) {
		console.error("最新科技政令error", error);
	}
};

const handleBox1 = async () => {
	await handleGetLatestDecree();
};
const carouselRef = ref(null);
// 点击查看详情
const handleClickToDetail = () => {
	let activeIndex = 0;
	if (carouselRef.value) {
		activeIndex = carouselRef.value.activeIndex;
	}

	console.log("当前 Carousel 激活索引:", activeIndex);

	const id = box1DataList.value[activeIndex].id;

	window.sessionStorage.setItem("curTabName", box1DataList.value[activeIndex].name);
	const route = router.resolve({
		path: "/decreeLayout",
		query: {
			id: id
		}
	});
	window.open(route.href, "_blank");
};

// 点击政令库政令
const handleClickDecree = decree => {
	window.sessionStorage.setItem("curTabName", decree.title);
	const route = router.resolve({
		path: "/decreeLayout",
		query: {
			id: decree.id
		}
	});
	window.open(route.href, "_blank");
};

const handleKeyDecree = item => {
	window.sessionStorage.setItem("curTabName", item.title);
	const route = router.resolve({
		path: "/decreeLayout",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

// 风险信号
const warningList = ref([
	// {
	// 	id: 1,
	// 	name: "关于对中华人民共和国合成阿片类药物供应链...",
	// 	postDate: "一天前",
	// 	riskLevel: "特别重大"
	// }
]);
const handlegetDecreeRiskSignal = async () => {
	try {
		const res = await getDecreeRiskSignal();
		console.log("风险信号", res);
		if (res.code === 200 && res.data) {
			warningList.value = res.data;
		}
	} catch (error) {
		console.error("风险信号error", error);
	}
};
handlegetDecreeRiskSignal();

// 新闻资讯
const newsList = ref([
	// {
	// 	img: News1,
	// 	title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
	// 	content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
	// 	from: "11-4 · 华盛顿邮报"
	// },
	// {
	// 	img: News2,
	// 	title: "美参议院通过决议，要求终止特朗普全球关税政策",
	// 	content: `参议院以51票赞成、47票反对通过一项决议，旨在终止特朗普实施的全面关税政策，四名......`,
	// 	from: "11-4 · 纽约时报"
	// }
]);
const handleGetNews = async () => {
	const params = {
		moduleId: "0100"
	};
	try {
		const res = await getNews(params);
		console.log("新闻资讯", res);
		if (res.code === 200 && res.data) {
			// newsList.value = res.data || []
			newsList.value = (res.data ?? []).map(item => {
				return {
					newsId: item.newsId,
					img: item.newsImage,
					title: item.newsTitle,
					content: item.newsContent,
					from: item.newsDate + " · " + item.newsOrg
				};
			});
		}
	} catch (error) {
		console.error("新闻资讯error", error);
	}
};
handleGetNews();
// 点击新闻条目，跳转到新闻分析页
const handleToNewsAnalysis = news => {
	const route = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: news.newsId
		}
	});
	window.open(route.href, "_blank");
};

// 社交媒体
const messageList = ref([
	// {
	// 	img: Message1,
	// 	name: "唐纳德·特朗普",
	// 	time: "15:23 · 发布于真实社交",
	// 	content: `埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。`
	// },
	// {
	// 	img: Message2,
	// 	name: "埃隆·马斯克",
	// 	time: "14:49 · 发布于X",
	// 	content: `如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。`
	// }
]);
const handleGetMessage = async () => {
	const params = {
		moduleId: "0100"
	};
	try {
		const res = await getSocialMedia(params);
		console.log("社交媒体", res);
		messageList.value = res.data.map(item => {
			return {
				img: item.personImage,
				name: item.personName,
				// time: item.time.replace("T", " ") + " · 发布于" + item.orgName,
				time: item.time.replace("T", " "),
				source: item.orgName,
				content: item.remarks,
				personId: item.personId,
				remarksId: item.remarksId
			};
		});
	} catch (error) { }
};
handleGetMessage();

// 点击人物头像，跳转到人物主页
const handleClickPerson = async item => {
	console.log("person", item);
	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
	console.log("personTypeList", personTypeList);

	let type = 0;
	let personTypeName = "";

	const params = {
		personId: item.personId
	};
	try {
		const res = await getPersonSummaryInfo(params);
		console.log("人物全局信息", res);
		if (res.code === 200 && res.data) {
			const arr = personTypeList.filter(item => {
				return item.typeId === res.data.personType;
			});
			console.log("arr", arr);

			if (arr && arr.length > 0) {
				personTypeName = arr[0].typeName;
				console.log("personTypeName", personTypeName);

				if (personTypeName === "科技企业领袖") {
					type = 1;
				} else if (personTypeName === "国会议员") {
					type = 2;
				} else if (personTypeName === "智库研究人员") {
					type = 3;
				} else {
					personTypeName = "";
					ElMessage.warning("找不到当前人员的类型值！");
					return;
				}
				window.sessionStorage.setItem("curTabName", item.name);
				const route = router.resolve({
					path: "/characterPage",
					query: {
						type: type, // type=1为科技企业领袖，2为国会议员，3为智库研究人员
						personId: item.personId
					}
				});
				window.open(route.href, "_blank");
			} else {
				personTypeName = "";
				ElMessage.warning("找不到当前人员的类型值！");
				return;
			}
		} else {
			ElMessage.warning("找不到当前人员的类型值！");
			return;
		}
	} catch (error) { }
};

// 行政令发布频度
const chart1Data = ref({
	dataX: [],
	dataY: []
});

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

const handleGetDecreeYearOrder = async () => {
	const params = {
		year: box5SelectedYear.value
	};
	try {
		const res = await getDecreeYearOrder(params);
		console.log("行政令发布频度", res);
		if (res.code === 200 && res.data) {
			chart1Data.value.dataX = res.data.map(item => {
				return item.year;
			});
			chart1Data.value.dataY = res.data.map(item => {
				return item.count;
			});
		}
	} catch (error) {
		console.error("行政令发布频度error", error);
	}
};

const handleBox5YearChange = val => {
	handleBox5();
};

const handleBox5 = async () => {
	await handleGetDecreeYearOrder();
	let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
	setChart(chart1, "chart1");
};

// 政令涉及领域
const chart2Data = ref([
	// {
	// 	name: "集成电路",
	// 	value: 50
	// },
	// {
	// 	name: "人工智能",
	// 	value: 46
	// },
]);
// const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB", "#4096FF"];

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

const handleGetDecreeArea = async () => {
	const params = {
		year: box6SelectedYear.value
	};
	try {
		const res = await getDecreeArea(params);
		console.log("政令涉及领域", res);
		if (res.code === 200 && res.data) {
			chart2Data.value = res.data.map(item => {
				return {
					name: item.industry,
					value: item.count
				};
			});
		}
	} catch (error) {
		console.error("政令涉及领域error", error);
	}
};
const handleBox6 = async () => {
	await handleGetDecreeArea();
	let chart2 = getPieChart(chart2Data.value);
	setChart(chart2, "chart2");
};

const handleBox6YearChange = () => {
	handleBox6();
};

// 关键行政令
const keyDecreeList = ref([]);

const handleGetKeyDecree = async () => {
	try {
		const res = await getKeyDecree();
		console.log("关键行政令", res);
		if (res.code === 200 && res.data) {
			keyDecreeList.value = res.data.map(item => {
				return {
					title: item.name,
					content: item.describe,
					time: item.postDate,
					id: item.orderId
				};
			});
		}
	} catch (error) { }
};

handleGetKeyDecree();

// 政令重点条款
const wordCloudData = [
	// { name: "与马斯克公开冲突", value: 100 },
	// { name: "传统能源", value: 5 },
	// { name: "共和党财政鹰派", value: 77 },
	// { name: "未实现赤字控制目标", value: 35 },
	// { name: "得克萨斯州", value: 88 },
	// { name: "选举压力", value: 57 },
	// { name: "主张财政紧缩", value: 72 },
	// { name: "财政保守", value: 18 },
];

const handleGetDecreeKeyInstruction = async () => {
	try {
		const res = await getDecreeKeyInstruction();
		console.log("政令重点条款", res);
		wordCloudData.value = res.data.map(item => {
			return {
				name: item.clause,
				value: item.count
			};
		});
	} catch (error) {
		console.error("政令重点条款error", error);
	}
};

const handleBox8 = async () => {
	await handleGetDecreeKeyInstruction();
	let chart3 = getWordCloudChart(wordCloudData.value);
	setChart(chart3, "wordCloudChart");
};

// 资源库
const isSort = ref(false); // true 升序  false 倒序
const handleSwithSort = () => {
	isSort.value = !isSort.value;
};

const handleToPosi = id => {
	const element = document.getElementById(id);
	if (element && containerRef.value) {
		// 1. 如果是从完整搜索框跳转，先强制切换状态稳定布局
		if (!isShow.value) {
			isShow.value = true;
		}

		// 2. 使用 nextTick 等待 DOM 布局（如高度切换）完成后再进行坐标计算
		nextTick(() => {
			const containerRect = containerRef.value.getBoundingClientRect();
			const elementRect = element.getBoundingClientRect();
			// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离，不受嵌套布局影响
			const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;

			containerRef.value.scrollTo({
				top: top,
				behavior: "smooth"
			});
		});
	}
};

const areaList = ref([
	// { id: "人工智能", name: "人工智能" },
	// { id: "集成电路", name: "集成电路" },
	// { id: "通信网络", name: "通信网络" },
	// { id: "量子科技", name: "量子科技" }
]);
const activeAreaList = ref(["1"]);
// const handleGetAreaList = async () => {
// 	try {
// 		const res = await getDecreehylyList();
// 		console.log("行业领域列表", res);
// 		if (res.code === 200 && res.data) {
// 			areaList.value = res.data.map(item => {
// 				return {
// 					name: item.name,
// 					id: item.id
// 				};
// 			});
// 			console.log("areaList", areaList.value);
// 		}
// 	} catch (error) { }
// };

// 政令类型
const decreeTypeList = ref([]);
const checkedDecreeType = ref([]);

const handleGetDecreeTypeList = async () => {
	try {
		const res = await getDecreeTypeList();
		console.log("政令类型", res);
		if (res.code === 200 && res.data) {
			decreeTypeList.value = res.data;
		}
	} catch (error) { }
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
	const route = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(route.href, "_blank");
};
const handleChangeCheckedDecreeType = () => {
	handleGetDecreeOrderList();
};

const pubTime = ref([
	{ id: "all", name: "全选" },
	{ id: "2026", name: "2026年" },
	{ id: "2025", name: "2025年" },
	{ id: "2024", name: "2024年" },
	{ id: "2023", name: "2023年" },
	{ id: "2022", name: "2022年" },
	{ id: "2021", name: "2021年" },
	{ id: "2020", name: "2020年" }
]);
const activePubTime = ref(["2026"]);
// 处理发布时间全选逻辑
const handlePubTimeChange = (id, checked) => {
	const allIds = pubTime.value.filter(item => item.id !== "all").map(item => item.id);

	if (id === "all") {
		// 点击全选：选中所有或清空所有
		activePubTime.value = checked ? ["all", ...allIds] : [];
	} else {
		const selectedIds = activePubTime.value.filter(itemId => itemId !== "all");
		const isAllSelected = selectedIds.length === allIds.length;

		if (isAllSelected && !activePubTime.value.includes("all")) {
			// 手动选中了所有年份，自动勾选全选
			activePubTime.value = ["all", ...allIds];
		} else if (!isAllSelected && activePubTime.value.includes("all")) {
			// 取消某个选项，取消全选状态
			activePubTime.value = selectedIds;
		}
	}
};

const handleAreaChange = (id, checked) => {
	const allIds = areaList.value.filter(item => item.id !== "all").map(item => item.id);

	if (id === "all") {
		activeAreaList.value = checked ? ["all", ...allIds] : [];
	} else {
		const selectedIds = activeAreaList.value.filter(itemId => itemId !== "all");
		const isAllSelected = selectedIds.length === allIds.length;

		if (isAllSelected && !activeAreaList.value.includes("all")) {
			activeAreaList.value = ["all", ...allIds];
		} else if (!isAllSelected && activeAreaList.value.includes("all")) {
			activeAreaList.value = selectedIds;
		}
	}
};

// 修改获取涉及领域列表，添加全选选项
const handleGetAreaList = async () => {
	try {
		const res = await getDecreehylyList();
		console.log("行业领域列表", res);
		if (res.code === 200 && res.data) {
			areaList.value = [
				{ name: "全选", id: "all" },
				...res.data.map(item => {
					return {
						name: item.name,
						id: item.id
					};
				})
			];
			// 设置默认全选
			activeAreaList.value = ["all", ...res.data.map(item => item.id)];
			console.log("areaList", areaList.value);
			// 获取列表后重新查询
			handleGetDecreeOrderList();
		}
	} catch (error) { }
};

const totalDecreesNum = ref(0);

const decreeList = ref([]);

// 修改请求方法，处理全选时不传参数的情况
const handleGetDecreeOrderList = async () => {
	const p0 = checkedGovIns.value.join(",");

	// 处理涉及领域：如果包含 all 或全选，则 researchTypeIds 为空（不传）
	let p1 = "";
	const allAreaIds = areaList.value.filter(item => item.id !== "all").map(item => item.id);
	const selectedAreaIds = activeAreaList.value.filter(id => id !== "all");

	if (!activeAreaList.value.includes("all") && selectedAreaIds.length > 0 && selectedAreaIds.length < allAreaIds.length) {
		p1 = selectedAreaIds.join(",");
	}
	// 其他情况（包含all、长度为0、全部选中）p1保持为空，即不传researchTypeIds

	// 处理发布时间：如果包含 all 或全选，则 years 为空（不传）
	let p2 = "";
	const allPubTimeIds = pubTime.value.filter(item => item.id !== "all").map(item => item.id);
	const selectedPubTimeIds = activePubTime.value.filter(id => id !== "all");

	if (
		!activePubTime.value.includes("all") &&
		selectedPubTimeIds.length > 0 &&
		selectedPubTimeIds.length < allPubTimeIds.length
	) {
		p2 = selectedPubTimeIds.join(",");
	}
	// 其他情况（包含all、长度为0、全部选中）p2保持为空，即不传years
	console.log(activePubTime.value, "activePubTime.value");
	const params = {
		currentPage: currentPage.value,
		pageSize: pageSize.value,
		proposeName: p0,
		researchTypeIds: p1, // 全选时不传（为空）
		sortFun: isSort.value,
		years: p2, // 全选时不传（为空）
		typeIds: checkedDecreeType.value.toString()
	};

	try {
		const res = await getDecreeOrderList(params);
		console.log("资源库列表", res);
		if (res.code === 200 && res.data) {
			totalDecreesNum.value = res.data.totalElements;
			decreeList.value = res.data.content.map(item => {
				return {
					id: item.id,
					time: item.postDate,
					title: item.proposeOrgName + ": " + item.name,
					desc: item.describe,
					img: item.orgImage,
					tagList: item.industryList
				};
			});
		} else {
			decreeList.value = [];
			totalDecreesNum.value = 0;
		}
	} catch (error) {
		console.error("资源库列表error", error);
		decreeList.value = [];
		totalDecreesNum.value = 0;
	}
};

watch(
	() => activePubTime.value,
	val => {
		handleGetDecreeOrderList();
	}
);

watch(
	() => activeAreaList.value,
	val => {
		handleGetDecreeOrderList();
	}
);

watch(
	() => isSort.value,
	val => {
		handleGetDecreeOrderList();
	}
);

watch(
	() => checkedGovIns.value,
	val => {
		handleGetDecreeOrderList();
	}
);

// 切换当前政令
const handleSwithCurDecree = name => {
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}
};

// 搜索
const searchDecreeText = ref("");
const handleSearch = () => {
	window.sessionStorage.setItem("curTabName", `搜索-${searchDecreeText.value}`);
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: searchDecreeText.value,
			areaName: "政令"
		}
	});
	window.open(curRoute.href, "_blank");
};

onMounted(async () => {
	handleGetDecreeTypeList();
	handleGetAreaList();
	handleGetDecreeOrderList();
	handleBox1(); // 最新科技政令
	handleBox5();
	handleBox6();
	handleBox8();
});
</script>

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

.home-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow-y: hidden;

	.search-header {
		width: 100%;
		// height: 144px;
		background: #fff;
		overflow: hidden;
		box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);

		.search-header-container {
			width: 1600px;
			margin: 0 auto;
			padding: 16px 0px 16px 0px;
		}

		.home-main-header-center {
			// margin-top: 20px;
			// margin-left: 200px;
			width: 800px;
			height: 48px;
			border-radius: 10px;
			// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
			border: 1px solid var(--color-primary-35);
			background: rgba(255, 255, 255, 1);
			box-sizing: border-box;
			padding: 1px;
			position: relative;

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

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

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

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

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

		.home-main-header-btn-box {
			margin-top: 16px;
			// margin-left: 200px;
			display: flex;
			gap: 16px;

			.btn {
				display: flex;
				align-items: center;
				gap: 9px;
				width: 140px;
				height: 36px;
				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: 24px;
					text-align: center;
				}

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

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

	.scrollHomeMain {
		width: 100%;
		height: calc(100% - 144px);
		overflow-y: auto;
	}

	.home-main {
		position: relative;
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.home-top-bg {
			background: url("./assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
			background-size: 100% 100%;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: -100;
			top: -64px;
		}

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

			.home-main-header-top {
				width: 100%;
				height: 64px;
				background: url("./assets/images/header-bg.png");
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				padding: 0 160px;
			}

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

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

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

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

			.home-main-header-btn-box {
				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-item-box {
				margin-top: 48px;
				margin-bottom: 64px;
				width: 1600px;
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 254px;
					height: 72px;
					display: flex;
					box-sizing: border-box;
					background: rgba(255, 255, 255, 0.65);
					border: 1px solid rgba(255, 255, 255, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					align-items: center;
					gap: 17px;
					margin: 0 6px 16px 6px;
					cursor: pointer;
					transition:
						transform 0.3s ease,
						box-shadow 0.3s ease;

					&:hover {
						transform: translateY(-3px);
						box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
					}

					.item-left {
						margin-left: 24px;
						width: 48px;
						height: 48px;

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

					.item-right {
						width: 140px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 24px;
					}
				}
			}
		}

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

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

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

					.box1-left {
						position: absolute;
						z-index: 9999;
						left: 0;
						top: 200px;
						width: 24px;
						height: 48px;
						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						.icon {
							width: 24px;
							height: 48px;

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

					.box1-right {
						position: absolute;
						z-index: 9999;
						right: 0;
						top: 200px;
						width: 24px;
						height: 48px;
						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						.icon {
							width: 24px;
							height: 48px;

							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: 14px;

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

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

						.box1-header-right {
							margin-top: 16px;
							height: 16px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
							margin-right: 39px;
						}
					}

					.box1-main {
						display: flex;
						justify-content: space-between;
						width: 1064px;
						height: 354px;
						margin-top: 22px;
						padding-left: 31px;
						padding-right: 41px;
						box-sizing: border-box;

						.box1-main-left {
							width: 450px;
							height: 353px;
							position: relative;

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

							.box1-main-left-img-mock {
								width: 100%;
								height: 100%;
								margin-left: 24px;
								border-radius: 4px;
								background-color: #0b1932;
								display: flex;
								align-items: center;
								flex-direction: column;
								justify-content: space-around;
								padding: 24px;

								.img-mock-badge-img {
									width: 80px;
									height: 80px;
								}

								.img-mock-badge-title {
									text-align: center;
									font-size: 24px;
									line-height: 36px;
									color: #fff;
								}

								// .img-mock-badge-org {
								// 	text-align: center;
								// 	font-size: 14px;
								// 	color: #fff;
								// }
							}
						}

						.box1-main-right {
							width: 500px;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.box1-main-right-title {
								width: 100%;
								// height: 26px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;

								display: -webkit-box;
								/* 将元素设置为弹性盒模型 */
								-webkit-line-clamp: 2;
								/* 限制文本显示的行数 */
								-webkit-box-orient: vertical;
								/* 设置弹性盒子的子元素垂直排列 */
								overflow: hidden;
								/* 隐藏溢出的内容 */
								text-overflow: ellipsis;
								/* 文本溢出时显示省略号 */
							}

							.box1-main-right-info {
								margin-top: 14px;
								display: flex;
								height: 24px;

								.tag {
									height: 24px;
									line-height: 24px;
									padding: 0 8px;
									box-sizing: border-box;
									border-radius: 4px;
									margin-right: 5px;
									border: 1px solid rgba(255, 163, 158, 1);
									color: rgba(245, 34, 45, 1);
									background: rgba(255, 241, 240, 1);
								}

								.tag1 {
									border: 1px solid rgba(135, 232, 222, 1);
									color: rgba(19, 168, 168, 1);
									background: rgba(230, 255, 251, 1);
								}

								.tag2 {
									border: 1px solid rgba(186, 224, 255, 1);
									background: rgba(230, 244, 255, 1);
									color: rgba(22, 119, 255, 1);
								}

								.tag3 {
									border: 1px solid rgba(255, 229, 143, 1);
									color: rgba(250, 173, 20, 1);
									background: rgba(255, 251, 230, 1);
								}

								.tag4 {
									border: 1px solid rgba(255, 163, 158, 1);
									color: rgba(245, 34, 45, 1);
									background: rgba(255, 241, 240, 1);
								}
							}

							.box1-main-right-center {
								margin-top: 10px;
								height: 200px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								display: -webkit-box;
								/* 将元素设置为弹性盒模型 */
								overflow: hidden;
								/* 隐藏溢出的内容 */
								text-overflow: ellipsis;
								/* 文本溢出时显示省略号 */
							}

							.box1-main-right-footer {
								margin-top: 50px;
								height: 24px;
								display: flex;
								justify-content: space-between;

								.footer-left {
									height: 24px;
									line-height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}

								.footer-right {
									display: flex;

									.footer-right-item1 {
										height: 24px;
										color: var(--color-main-active);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
									}

									.footer-right-item2 {
										width: 16px;
										height: 16px;
										margin-top: 4px;
										margin-left: 11px;

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

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

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

						.icon {
							width: 24px;
							height: 22px;
							margin-left: 18px;
							margin-top: 14px;

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

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

							.text {
								margin-left: 16px;
								height: 48px;
								color: #fff;
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 48px;
							}

							.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: 15px;
								border-radius: 100px;
								background: rgba(255, 255, 255, 0.3);
							}
						}
					}

					.box2-main {
						box-sizing: border-box;
						padding-right: 20px;
						height: 282px;
						overflow-y: auto;

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

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

							.itemLeftStatus3 {
								color: rgba(245, 34, 45, 1) !important;
								background: rgba(255, 241, 240) !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;
								color: rgba(82, 196, 26, 1);
								background: rgba(246, 255, 237, 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: 318px;
									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 {
									width: 90px;
									line-height: 47px;
									text-align: center;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
						}
					}

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

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

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

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

			.divide2 {
				width: 1600px;
				margin: 0 auto;
				margin-top: 68px;
				margin-bottom: 36px;
			}

			.center-center {
				width: 1600px;
				margin: 0 auto;
				margin-top: 21px;
				height: 450px;
				display: flex;

				.box3 {
					width: 792px;
					height: 450px;
					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;
						position: relative;

						.box3-header-left {
							display: flex;

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

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

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

						.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: 6px 0;

						.box3-item {
							display: flex;
							height: 77px;
							width: 749px;
							margin-left: 21px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							cursor: pointer;

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

							.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: 500px;
										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 {
										width: 157px;
										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;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.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;
						position: relative;

						.header-icon {
							margin-left: 21px;
							margin-top: 17px;
							width: 20px;
							height: 20px;

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

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

					.box4-main {
						height: 402px;
						overflow-y: auto;
						box-sizing: border-box;
						padding-bottom: 8px;
						padding-left: 24px;
						padding-top: 5px;
						// .box4-main-item {
						// 	margin-top: 16px;
						// 	display: flex;
						// 	margin-left: 21px;
						// 	.left {
						// 		margin-top: 5px;
						// 		width: 36px;
						// 		height: 36px;
						// 		border-radius: 18px;
						// 		overflow: hidden;
						// 		cursor: pointer;
						// 		img {
						// 			width: 100%;
						// 			height: 100%;
						// 		}
						// 	}
						// 	.right {
						// 		margin-left: 10px;
						// 		width: 690px;
						// 		border-radius: 4px;
						// 		box-sizing: border-box;
						// 		border: 1px solid rgba(231, 243, 255, 1);
						// 		background: rgba(246, 250, 255, 1);
						// 		padding: 10px 15px;
						// 		.right-top {
						// 			display: flex;
						// 			justify-content: space-between;
						// 			.name {
						// 				height: 24px;
						// 				color: rgba(59, 65, 75, 1);
						// 				font-family: Microsoft YaHei;
						// 				font-size: 16px;
						// 				font-weight: 700;
						// 				line-height: 24px;
						// 			}
						// 			.time {
						// 				height: 30px;
						// 				color: rgba(95, 101, 108, 1);
						// 				font-family: Microsoft YaHei;
						// 				font-size: 16px;
						// 				font-weight: 400;
						// 				line-height: 30px;
						// 			}
						// 		}
						// 		.content {
						// 			color: rgba(59, 65, 75, 1);
						// 			font-family: Microsoft YaHei;
						// 			font-size: 16px;
						// 			font-weight: 400;
						// 			line-height: 24px;
						// 		}
						// 	}
						// }
					}
				}
			}

			.center-center1 {
				margin: 0 auto;
				margin-top: 24px;
				height: 100px;
				width: 1600px;
				border-radius: 50px;
				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				background: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 4px 5px;

				.center1-item {
					width: 351px;
					height: 92px;
					border-radius: 48px;
					display: flex;
					cursor: pointer;

					&:hover {
						background: rgba(231, 243, 255, 1);
					}

					.left {
						margin-top: 15px;
						margin-left: 39px;
						width: 60px;
						height: 60px;

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

					.right {
						margin-left: 8px;

						.name {
							height: 31px;
							margin-top: 16px;

							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 24px;
							font-weight: 700;
							line-height: 31px;
						}

						.nameActive {
							color: var(--color-main-active);
						}

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

						.timeActive {
							color: var(--color-main-active);
						}
					}
				}

				.center1ItemActive {
					background: rgba(231, 243, 255, 1);
				}
			}

			.center-center2 {
				margin: 0 auto;
				margin-top: 24px;
				width: 1600px;
				height: 960px;
				border-radius: 4px;
				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				background: rgba(255, 255, 255, 1);

				.center2-header {
					display: flex;
					justify-content: space-between;

					.center2-header-left {
						margin-left: 62px;
						display: flex;

						.left {
							width: 140px;
							height: 175px;
							border-radius: 0px 0px 70px 70px;
							background: rgba(231, 243, 255, 1);
							overflow: hidden;

							.icon {
								width: 128px;
								height: 128px;
								border-radius: 75px;
								margin-top: 41px;
								margin-left: 6px;

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

						.right {
							margin-left: 29px;

							.right-item1 {
								margin-top: 41px;
								height: 31px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 24px;
								font-weight: 700;
								line-height: 32px;
							}

							.right-item2 {
								display: flex;
								margin-top: 7px;

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

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

								.text {
									margin-left: 8px;
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 18px;
									font-weight: 400;
									line-height: 24px;
								}
							}

							.right-item3 {
								margin-top: 10px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 400;
								line-height: 24px;
							}

							.right-item4 {
								margin-top: 8px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 400;
								line-height: 24px;
							}
						}
					}

					.center2-header-right {
						margin-right: 59px;
						margin-top: 47px;

						.top {
							display: flex;

							.top-box {
								width: 180px;
								height: 72px;
								margin-left: 50px;

								.item1 {
									height: 26px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 26px;
									text-align: right;
								}

								.item2 {
									margin-top: 4px;
									font-family: Microsoft YaHei;
									font-weight: 700;
									display: flex;
									justify-content: flex-end;

									.item2-3 {
										height: 42px;
										color: var(--color-main-active);
										font-size: 32px;
										line-height: 42px;
									}

									.item2-2 {
										height: 24px;
										margin-top: 9px;
										margin-left: 5px;
										margin-right: 5px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 18px;
										font-weight: 700;
										line-height: 24px;
									}

									.item2-1 {
										height: 42px;
										color: rgba(206, 79, 81, 1);
										font-size: 32px;
										line-height: 42px;
									}
								}
							}
						}

						.bottom {
							height: 22px;
							margin-top: 29px;
							display: flex;
							justify-content: flex-end;

							.icon {
								margin-top: 4px;
								width: 14px;
								height: 14px;
								margin-right: 8px;

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

							.text {
								height: 22px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 24px;
							}
						}
					}
				}

				.center2-mid {
					width: 1479px;
					height: 189px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					margin: 40px auto 0;
				}

				.center2-footer {
					display: flex;

					.center2-footer-left {
						width: 732px;
						margin-left: 58px;
						margin-top: 21px;

						.header {
							display: flex;
							height: 48px;
							border-bottom: 1px solid rgba(234, 236, 238, 1);

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

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

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

						.main {
							width: 732px;
							height: 470px;
							overflow-y: auto;
							overflow-x: hidden;
							display: flex;
							flex-wrap: wrap;
							box-sizing: border-box;
							padding-top: 9px;

							.item {
								width: 50%;
								height: 80px;
								display: flex;
								margin-top: 8px;

								.item-left {
									width: 60px;
									height: 60px;
									margin-top: 10px;
									margin-left: 16px;

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

								.item-right {
									margin-left: 13px;

									.item-right-box1 {
										margin-top: 15px;
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 18px;
										font-weight: 700;
										line-height: 24px;
									}

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

					.center2-footer-right {
						margin-left: 21px;
						margin-top: 16px;
						width: 730px;

						.header {
							height: 54px;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							display: flex;

							.icon {
								width: 24px;
								height: 24px;
								margin-left: 16px;
								margin-top: 16px;

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

							.tab-box {
								margin-left: 20px;
								width: 500px;
								display: flex;

								.tab {
									height: 54px;
									margin-right: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 400;
									line-height: 54px;
									padding: 0 2px;
									box-sizing: border-box;
								}

								.tabActive {
									font-weight: 700;
									color: var(--color-main-active);
									border-bottom: 3px solid var(--color-main-active);
								}
							}

							.right {
								width: 80px;
								margin-left: 90px;
								display: flex;
								justify-content: space-between;

								.btn {
									width: 28px;
									height: 28px;
									margin-top: 13px;

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

						.main {
							height: 475px;
							margin-top: 5px;
							overflow-y: hidden;

							.main-item {
								display: flex;
								margin-top: 20px;

								.id {
									margin-top: 3px;
									margin-left: 2px;
									width: 36px;
									height: 36px;
									border-radius: 18px;
									background: #e7f3ff;
									line-height: 36px;
									text-align: center;
									color: var(--color-main-active);
								}

								.info {
									margin-left: 13px;
									width: 672px;

									.info-header {
										display: flex;
										justify-content: space-between;
										height: 24px;

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

										.tag {
											height: 24px;
											line-height: 24px;
											border-radius: 4px;
											padding: 0 8px;
											background: rgba(255, 251, 230, 1);
											color: rgba(250, 173, 20, 1);
											font-family: Microsoft YaHei;
											font-size: 14px;
											font-weight: 400;
										}
									}

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

			.divide3 {
				width: 1600px;
				margin: 0 auto;
				margin-top: 68px;
				margin-bottom: 36px;
			}

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

				.box5 {
					width: 792px;
					height: 452px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					border-radius: 10px;

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

						.box5-header-left {
							display: flex;

							.box5-header-icon {
								margin-top: 17px;
								margin-left: 24px;
								width: 17px;
								height: 17px;

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

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

						.box5-selectbox {
							margin-right: 20px;
							margin-top: 8px;
						}
					}

					.box5-main {
						height: 397px;

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

				.box6 {
					margin-left: 16px;
					width: 792px;
					height: 452px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					border-radius: 10px;

					.box6-header {
						margin: 0 auto;
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						position: relative;

						.header-icon {
							margin-top: 16px;
							margin-left: 22px;
							width: 20px;
							height: 20px;

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

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

						.box6-selectbox {
							position: absolute;
							right: 20px;
							top: 8px;
						}
					}

					.box6-main {
						margin-top: 8px;
						height: 390px;
					}
				}
			}

			.center-footer1 {
				margin-top: 21px;
				height: 450px;
				display: flex;
				justify-content: center;

				.box7 {
					width: 792px;
					height: 450px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);

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

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

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

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

					.box7-main {
						margin-top: 10px;
						height: 380px;
						box-sizing: border-box;
						overflow-y: auto;
						overflow-x: hidden;

						.box7-item {
							width: 730px;
							margin-top: 16px;
							margin-left: 25px;
							display: flex;
							cursor: pointer;

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

							.icon {
								margin-top: 6px;
								width: 24px;
								height: 22px;

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

							.info {
								margin-left: 13px;
								width: 100%;

								.info-header {
									height: 24px;
									display: flex;
									margin-top: 4px;
									justify-content: space-between;

									.title {
										width: 600px;
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 18px;
										font-weight: 700;
										line-height: 24px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.time {
										width: 91px;
										height: 24px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.info-content {
									min-height: 24px;
									max-height: 48px;
									margin-top: 6px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									overflow: hidden;
								}
							}
						}
					}
				}

				.box8 {
					margin-left: 16px;
					width: 792px;
					height: 450px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);

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

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

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

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

					.box8-main {
						height: 401px;
					}
				}
			}
		}

		.home-main-footer {
			margin-top: 34px;
			max-height: 1860px;
			padding-bottom: 160px;
			background: rgba(248, 249, 250, 1);
			overflow: hidden;

			.divide4 {
				margin: 0 auto;
				margin-top: 52px;
				margin-bottom: 6px;
			}

			.home-main-footer-header {
				width: 1600px;
				height: 50px;
				margin: 0 auto 16px;
				display: flex;
				justify-content: flex-end;

				.btn-box {
					margin-top: 10px;
					width: 1450px;
					overflow-x: auto;
					overflow-y: hidden;
					display: flex;
					gap: 8px;
					white-space: nowrap;

					.btn {
						min-width: min-content;
						height: 42px;
						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);
						cursor: pointer;

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

					.btnActive {
						font-weight: 700;
						background: rgba(20, 89, 187, 1);
						color: #fff;

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

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

					.paixu-btn {
						display: flex;
						width: 120px;
						height: 32px;
						box-sizing: border-box;
						border: 1px solid rgba(230, 231, 232, 1);
						border-radius: 4px;
						background: rgba(255, 255, 255, 1);

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

						cursor: pointer;

						.icon1 {
							width: 11px;
							height: 14px;
							margin-top: 10px;
							margin-left: 9px;

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

						.text {
							height: 19px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							letter-spacing: 0px;
							text-align: left;
							margin-top: 7px;
							margin-left: 9px;
						}

						.icon2 {
							width: 10px;
							height: 5px;
							margin-top: 5px;
							margin-left: 13px;

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

			.home-main-footer-main {
				width: 1600px;
				margin: 0 auto;
				display: flex;
				gap: 16px;

				.left {
					width: 360px;
					// height: 666px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);
					box-sizing: border-box;
					border-radius: 10px;

					.select-box {
						margin-top: 21px;

						.select-box-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: 260px;
						}
					}
				}

				.right {
					width: 1284px;
					max-height: 1489px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);
					box-sizing: border-box;
					border-radius: 10px;

					.content-header {
						height: 48px;
						display: flex;
						border-bottom: 1px solid rgba(234, 236, 238, 1);

						.icon {
							width: 23px;
							height: 18px;
							margin-top: 16px;
							margin-left: 20px;

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

						.title {
							height: 26px;
							margin-top: 11px;
							margin-left: 17px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
					}

					.content-box {
						max-height: 1367px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						overflow: hidden;
						min-height: 790px;
						overflow: hidden;
						overflow-y: auto;

						.main-item {
							display: flex;
							min-height: 100px;
							// height: 136px;
							// background: orange;
							box-sizing: border-box;
							padding: 16px 36px 0px 0px;
							cursor: pointer;

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

							.main-item-left {
								display: flex;
								gap: 18px;
								justify-content: flex-end;

								.left-left {
									margin-left: 30px;
									width: 80px;
									height: 48px;
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 20px;
									letter-spacing: 1px;
									text-align: right;
								}

								.left-right {
									.icon {
										width: 30px;
										height: 30px;
										border-radius: 50%;
										overflow: hidden;

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

									.line {
										height: 100%;
										width: 2px;
										background: var(--border-black-5);
										margin-left: 14px;
									}
								}
							}

							.main-item-center {
								margin-left: 21px;
								margin-bottom: 16px;
								width: 1086px;

								.center-header {
									display: flex;
									justify-content: space-between;

									.title {
										height: 26px;
										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;
									}

									.type-box {
										height: 28px;
										line-height: 28px;
										padding: 0 8px;
										text-align: center;
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										letter-spacing: 0px;
										border-radius: 4px;
									}

									.type1 {
										color: rgba(22, 119, 255, 1);
										background: rgba(230, 244, 255, 1);
									}

									.type2 {
										color: rgba(19, 168, 168, 1);
										background: rgba(230, 255, 251, 1);
									}

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

								.desc {
									margin-top: 8px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 28px;
									letter-spacing: 0px;
									text-align: justify;

									overflow: hidden;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
								}

								.tag-box {
									margin-top: 9px;
									display: flex;
									flex-wrap: wrap;
									gap: 8px;

									.tag {
										height: 28px;
										line-height: 28px;
										text-align: center;
										padding: 0 8px;
										border-radius: 4px;
										background: rgba(231, 243, 255, 1);
										color: var(--color-main-active);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										letter-spacing: 0px;
									}
								}
							}
						}
					}

					.footer-box {
						margin: 20px 30px;
						height: 32px;
						display: flex;
						justify-content: space-between;

						.footer-left {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 32px;
						}
					}
				}
			}
		}
	}
}

.divide {
	margin: 0 auto;
}

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

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

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

:deep(.el-checkbox__label) {
	color: rgba(95, 101, 108, 1);

	font-family: Source Han Sans CN;
	font-style: Regular;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: justify;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
	color: rgba(95, 101, 108, 1);
}
</style>
