<template>
	<div class="home-wrapper">
		<div class="home-main" ref="containerRef">
			<div class="home-top-bg"></div>

			<div class="home-content">
				<div class="home-content-header">
					<SearchContainer style="margin-bottom: 0; height: fit-content" v-if="containerRef"
						placeholder="搜索科技法案" :containerRef="containerRef" areaName="法案" :enableBillTypeSwitch="true"
						defaultBillSearchType="federal" />
				</div>

				<DivideHeader id="position1" class="divide1" :titleText="'最新动态'"></DivideHeader>
				<div class="home-content-center">
					<div class="center-top">
						<div class="box1">
							<div class="box1-left" @click="handleSwithCurBill('left')">
								<div class="icon">
									<img src="./assets/images/box1-left.svg" alt="" />
								</div>
							</div>
							<div class="box1-right" @click="handleSwithCurBill('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>
							<div class="box1-main" style="display: block">
								<el-carousel ref="carouselRef" height="354px" :autoplay="true" :interval="3000"
									arrow="never" indicator-position="none" @change="handleCarouselChange">
									<el-carousel-item v-for="(bill, billIndex) in hotBillList" :key="billIndex">
										<div class="carousel-content" style="display: flex; height: 100%">
											<div class="box1-main-left">
												<div class="box1-main-left-title">
													<!-- "H.R.1(119th)-大而美法案" -->
													{{ bill.billName }}
												</div>
												<div class="box1-main-left-info">
													<AreaTag v-for="(item, index) in bill.hylyList" :key="index"
														:tagName="item.industryName">
													</AreaTag>
												</div>
												<div class="box1-main-left-info1">
													<div class="info1-box">
														<div class="icon"></div>
														<div class="info1-box-left">{{ "提案人：" }}</div>
														<div class="info1-box-right">{{ bill.tarName }}</div>
													</div>
													<div class="info1-box">
														<div class="icon"></div>
														<div class="info1-box-left">{{ "提出时间：" }}</div>
														<div class="info1-box-right">
															{{ bill.introductionDate }}
														</div>
													</div>
												</div>
												<div class="box1-main-left-info2">
													<div class="info2-item" v-for="(item, index) in bill.dyqkList"
														:key="index">
														<div class="time-line"
															v-if="index !== bill.dyqkList.length - 1"></div>
														<div class="item-icon">
															<img src="./assets/images/info2-icon.png" alt="" />
														</div>
														<div class="item-time" :class="{ itemTimeActive: index === 0 }">
															{{ item.actionDate }}
														</div>
														<div class="item-title"
															:class="{ itemTitleActive: index === 0 }">
															{{ item.actionContentCn }}
														</div>
													</div>
												</div>
											</div>
											<div class="box1-main-right">
												<img :src="bill.news?.newsImage" alt="" />
												<div class="inner-box">
													<div class="inner-box-header">
														<div class="inner-box-title">
															{{ bill.news?.newsTitle }}
														</div>
														<div class="inner-box-time">
															{{ bill.news?.newsTime.replace("T", " ") }}
														</div>
													</div>
													<div class="inner-box-content">
														{{ bill.news?.newsContent }}
													</div>
												</div>
											</div>
										</div>
									</el-carousel-item>
								</el-carousel>
							</div>
						</div>
						<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal"
							@item-click="handleClickToDetailO" riskLevel="signalLevel" postDate="signalTime"
							name="signalTitle" />
					</div>

					<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
					<div class="center-center">
						<NewsList :list="newsList" />
						<MessageBubble :messageList="messageList" imageUrl="personImage"
							@more-click="handleToSocialDetail" @person-click="handleClcikToCharacter" name="personName"
							content="remarks" source="orgName" />
					</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/box5-header-icon.png" alt="" />
									</div>
									<div class="box5-header-title">{{ "涉华法案数量" }}</div>
								</div>
								<div class="box5-header-right">
									<!-- <div class="header-right-icon">
										<img src="./assets/images/tips-icon.png" alt="" />
									</div>
									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
									<div class="box5-select">
										<el-select v-model="box5Select" placeholder="选择领域" @change="handleBox5Change"
											style="width: 150px">
											<el-option label="全部领域" value="全部领域" />
											<el-option v-for="item in categoryList" :key="item.id" :label="item.name"
												:value="item.id" />
										</el-select>
									</div>
								</div>
							</div>

							<div class="box5-main" :style="getEmptyStateStyle(box5HasData)">
								<el-empty v-if="!box5HasData" description="暂无数据" :image-size="100" />
								<div v-else id="box5Chart" style="width: 100%; height: 100%"></div>
							</div>
						</div>
						<div class="box6">
							<div class="box6-header">
								<div class="header-icon">
									<img src="./assets/images/box6-header-icon.png" alt="" />
								</div>
								<div class="header-title">{{ "涉华法案领域分布" }}</div>
								<div class="box6-header-right">
									<el-select v-model="box9selectetedTime" placeholder="选择时间" style="width: 90px">
										<el-option v-for="item in box9YearList" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</div>
							</div>
							<div class="box6-main" :style="getEmptyStateStyle(box9HasData)">
								<el-empty v-if="!box9HasData" description="暂无数据" :image-size="100" />
								<div v-else id="box9Chart" style="width: 100%; height: 100%"></div>
							</div>
						</div>
					</div>
					<div class="center-footer1">
						<div class="box7">
							<div class="box7-header">
								<div class="box7-header-left">
									<div class="box7-header-icon">
										<img src="./assets/images/box7-header-icon.png" alt="" />
									</div>
									<div class="box7-header-title">{{ "法案提出部门" }}</div>
								</div>
								<div class="box7-header-right">
									<!-- <div class="header-right-icon">
										<img src="./assets/images/tips-icon.png" alt="" />
									</div> -->
									<!-- <div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
									<el-select v-model="box7selectetedTime" placeholder="选择时间" style="width: 90px">
										<el-option v-for="item in box7YearList" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</div>
							</div>
							<!-- <div class="box-center">
								<el-select v-model="box7selectetedTime" placeholder="选择时间" style="width: 90px">
									<el-option
										v-for="item in box7YearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div> -->
							<div class="box7-main" :style="getEmptyStateStyle(box7HasData)">
								<el-empty v-if="!box7HasData" description="暂无数据" :image-size="100" />
								<div v-else id="box7Chart" style="width: 100%; height: 100%"></div>
							</div>
						</div>
						<div class="box8">
							<div class="box8-header">
								<div class="box8-header-left">
									<div class="box8-header-icon">
										<img src="./assets/images/box7-header-icon.png" alt="" />
									</div>
									<div class="box8-header-title">{{ "关键议员提案" }}</div>
								</div>
								<div class="box8-header-right">
									<!-- <div class="header-right-icon">
										<img src="./assets/images/tips-icon.png" alt="" />
									</div> -->
									<!-- <div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
									<el-select v-model="box8selectetedTime" placeholder="选择时间" style="width: 90px">
										<el-option v-for="item in box8YearList" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</div>
							</div>
							<!-- <div class="box-center">
								<el-select v-model="box8selectetedTime" placeholder="选择时间" style="width: 90px">
									<el-option
										v-for="item in box8YearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div> -->
							<div class="box8-main" :style="getEmptyStateStyle(box8Data.length > 0)">
								<el-empty v-if="box8Data.length === 0" description="暂无数据" :image-size="100" />
								<div v-else class="box8-main-item" v-for="(item, index) in box8Data" :key="index"
									@click="handleClcikToCharacter(item.memberId, item.name)">
									<div class="box8-main-item-left">
										<img :src="getProxyUrl(item.img)" alt="" referrerpolicy="no-referrer"
											class="left-img" />
										<div class="left-icon1">
											<img :src="item.dangpai" alt="" />
										</div>
										<div class="left-icon2">
											<img :src="item.yuan" alt="" />
										</div>
									</div>
									<div class="box8-main-item-center">
										<div class="box8-main-item-center-top">{{ item.name }}</div>
										<div class="box8-main-item-center-footer">{{ item.zhiwei }}</div>
									</div>
									<div class="box8-main-item-right">
										{{ `${item.num}项提案 >` }}
									</div>
								</div>
							</div>
						</div>
						<div class="box9">
							<div class="box9-header">
								<div class="box9-header-left">
									<div class="box9-header-icon">
										<img src="./assets/images/box7-header-icon.png" alt="" />
									</div>
									<div class="box9-header-title">{{ "关键条款" }}</div>
								</div>
							</div>
							<div class="box9-main" id="wordCloudChart"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="home-content-footer">
				<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
				<div class="home-content-footer-header">
					<div class="btn-box">
						<div class="btn" :class="{ btnActive: activeTabName === cate.name, disabled: index !== 0 }"
							v-for="(cate, index) in tabList" :key="index" @click="index === 0 && handleClickTab(cate)">
							{{ cate.name }}
						</div>
					</div>
				</div>
				<div class="home-content-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">
								<el-checkbox-group class="checkbox-group" v-model="activeAreaList"
									@change="handleAreaChange">
									<el-checkbox class="filter-checkbox" label="全部领域"> 全部领域 </el-checkbox>
									<el-checkbox v-for="(area, index) in cateKuList" :key="index" :label="area.id"
										class="filter-checkbox">
										{{ area.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="select-box-header">
								<div class="icon"></div>
								<div class="title">{{ "党派" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" v-model="activeDpList"
									@change="handleDpChange">
									<el-checkbox v-for="(dp, index) in dpList" :key="index" :label="dp.id"
										class="filter-checkbox">
										{{ dp.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="select-box-header">
								<div class="icon"></div>
								<div class="title">{{ "议院" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" v-model="activeYyList"
									@change="handleYyChange">
									<el-checkbox v-for="(yy, index) in yyList" :key="index" :label="yy.id"
										class="filter-checkbox">
										{{ yy.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>

						<div class="select-box">
							<div class="select-box-header">
								<div class="icon"></div>
								<div class="title">{{ "发布时间" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" v-model="activePubTime"
									@change="handlePubTimeChange">
									<el-checkbox v-for="(time, index) in pubTime" :key="index" :label="time.id"
										class="filter-checkbox">
										{{ time.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="right-header">
							<div class="right-header-box">
								<el-select v-model="footerSelect1" placeholder="选择委员会" style="width: 240px"
									@change="handleFooterSelect1Change">
									<el-option v-for="item in postOrgList" :key="item.departmentId"
										:label="item.departmentName" :value="item.departmentId" />
								</el-select>
							</div>
							<div class="right-header-box">
								<el-select v-model="footerSelect2" placeholder="选择提出议员" style="width: 240px"
									@change="handleFooterSelect2Change">
									<el-option v-for="item in postMemberList" :key="item.memberId"
										:label="item.memberName" :value="item.memberId" />
								</el-select>
							</div>
							<div class="right-header-box" style="margin-left: auto">
								<el-select v-model="releaseTime" placeholder="选择排序方式" style="width: 120px"
									@change="handlePxChange">
									<template #prefix>
										<div style="display: flex; align-items: center; height: 100%">
											<img :src="desc" style="width: 14px; height: 14px" />
										</div>
									</template>
									<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
						</div>
						<div class="right-main" v-loading="loading">
							<div class="right-main-box" v-for="(item, index) in bills" :key="index">
								<div class="header">
									<div class="title" @click="handleClickToDetailO(item)" :title="item.name">
										{{ item.name }}
									</div>
									<div class="en-title" :title="item.eName">{{ item.eName }}</div>
								</div>
								<div class="main">
									<div class="item">
										<div class="item-left">{{ "提案人：" }}</div>
										<div class="item-right">{{ item.tcr }}</div>
									</div>
									<div class="item">
										<div class="item-left">{{ "委员会：" }}</div>
										<div class="item-right">{{ item.wyh }}</div>
									</div>
									<div class="item">
										<div class="item-left">{{ "相关领域：" }}</div>
										<div class="item-right1">
											<div class="tag" v-for="(val, idx) in item.areaList" :key="idx">{{ val }}
											</div>
										</div>
									</div>
									<div class="item">
										<div class="item-left">{{ "最新动议：" }}</div>
										<div class="item-right">
											<CommonPrompt :content="item.zxdy" />
										</div>
									</div>
									<div class="item">
										<div class="item-left">{{ "法案进展：" }}</div>
										<div class="item-right2">
											<div class="tag" v-for="(val, idx) in [...item.progress].reverse()"
												:key="idx" :style="{ zIndex: item.progress.length - idx }">
												{{ val }}
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="right-footer">
								<div class="footer-left">
									{{ `共 ${total} 项` }}
								</div>
								<div class="footer-right">
									<el-pagination @current-change="handleCurrentChange" :page-size="pageSize"
										:current-page="currentPage" background layout="prev, pager, next"
										:total="total" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref, onUnmounted, nextTick, watch } from "vue";
import router from "@/router/index";
import setChart from "@/utils/setChart";
import {
	getBillIndustry,
	getHotBills,
	getBillRiskSignal,
	getHylyList,
	getBillOverviewKeyTK,
	getBillCount,
	getBillPostOrg,
	getMemberProposal,
	getNews,
	getRemarks,
	getPostOrgList,
	getPostMemberList,
	getBills
} from "@/api/bill/billHome";
import { getPersonSummaryInfo } from "@/api/common/index";
import DivideHeader from "@/components/DivideHeader.vue";
import CommonPrompt from "../commonPrompt/index.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";

import getMultiLineChart from "./utils/multiLineChart";
import getWordCloudChart from "./utils/worldCloudChart";
import getPieChart from "./utils/piechart";
import getDoublePieChart from "./utils/doublePieChart";

import desc from "./assets/icons/icon-desc.png";

import Cyy from "@/assets/icons/cyy.png";
import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";

import { ElMessage } from "element-plus";

// 处理图片代理
const getProxyUrl = url => {
	if (!url) return "";
	const urlStr = String(url);
	// 排除非 http 开头（相对路径）、已经是代理链接、或者是本地链接
	if (
		!urlStr.startsWith("http") ||
		urlStr.includes("images.weserv.nl") ||
		urlStr.includes("localhost") ||
		urlStr.includes("127.0.0.1")
	) {
		return url;
	}
	// 移除协议头 http:// 或 https://
	const cleanUrl = urlStr.replace(/^https?:\/\//i, "");
	return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};

// 跳转人物主页
const handleClcikToCharacter = async (id, name) => {
	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));

	let type = 0;
	let personTypeName = "";

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

const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	handleGetBills();
	handleToPosi("position4");
};

const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);

const hotBillList = ref([]); // 热门法案列表
const curHotBillListIndex = ref(0); // 当前热门法案索引
const carouselRef = ref(null);

const handleCarouselChange = index => {
	curHotBillListIndex.value = index;
	if (hotBillList.value && hotBillList.value.length > 0) {
		curBill.value = hotBillList.value[index];
	}
};

// 切换热门法案
const handleSwithCurBill = name => {
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}
};

// 当前法案
const curBill = ref({
	billName: "",
	billId: 0,
	dyqkList: [],
	hylyList: [],
	tarName: "",
	introductionDate: ""
});

// 查看详情
const handleClickToDetail = () => {
	window.sessionStorage.setItem("billId", curBill.value.billId);
	window.sessionStorage.setItem("curTabName", curBill.value.billName);
	const route = router.resolve({
		path: "/billLayout",
		query: {
			billId: curBill.value.billId
		}
	});
	console.log(route);

	window.open(route.href, "_blank");
};
// 查看详情 传递参数
const handleClickToDetailO = item => {
	window.sessionStorage.setItem("billId", item.billId);
	window.sessionStorage.setItem("curTabName", item.name || item.signalTitle);
	const route = router.resolve("/billLayout?billId=" + item.billId);
	window.open(route.href, "_blank");
};

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

const getEmptyStateStyle = hasData => ({
	display: hasData ? "block" : "flex",
	justifyContent: "center",
	alignItems: "center"
});

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

const box8selectetedTime = ref("2025");
const box8YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	}
]);
// 排序方式
const releaseTime = ref(true);

const releaseTimeList = ref([
	{
		label: "正序",
		value: true
	},
	{
		label: "倒序",
		value: false
	}
]);
// 涉华法案数量使用的领域分类列表
const categoryList = ref([]);
// 资源库使用的领域分类列表
const cateKuList = ref([]);

// 获取领域分类
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		console.log("行业领域列表", res);
		categoryList.value = res.data;
		cateKuList.value = res.data;
	} catch (error) { }
};
// 新闻资讯
const newsList = ref([]);

// 社交媒体
const messageList = ref([]);

// 获取热门法案
const handleGetHotBills = async () => {
	try {
		const res = await getHotBills();
		console.log("热门法案", res);
		hotBillList.value = res.data;
	} catch (error) {
		console.error(error);
	}
};

// 获取法案风险信号
const handleGetBillRiskSignal = async () => {
	const params = {
		moduleId: "0100"
	};
	try {
		const res = await getBillRiskSignal(params);
		console.log("法案风险信号", res);
		if (res.code === 200) {
			warningList.value = res.data;
		}
	} catch (error) { }
};

// 获取新闻资讯
const handleGetNews = async () => {
	const params = {
		moduleId: "0100"
	};
	try {
		const res = await getNews(params);
		console.log("新闻资讯", res);
		if (res.code === 200) {
			newsList.value =
				res.data ||
				[].map(item => {
					return {
						...item,
						from: `${item.newsOrg} · ${item.newsDate ? item.newsDate.slice(5) : ""}`
					};
				});
		}
	} catch (error) { }
};

// 获取社交媒体
const handleGetRemarks = async () => {
	const params = {
		moduleId: "0100"
	};
	try {
		const res = await getRemarks(params);
		console.log("社交媒体", res);
		if (res.code === 200) {
			messageList.value = res.data.map(item => {
				return {
					...item,
					time: item.time.replace("T", " ")
				};
			});
		}
	} catch (error) { }
};

// 获取提出部门列表
const postOrgList = ref([{ departmentName: "全部委员会", departmentId: "全部委员会" }]);
const handleGetPostOrgList = async () => {
	try {
		const res = await getPostOrgList();
		console.log("提出部门列表", res);
		if (res.code === 200) {
			const list = res.data.filter(item => item.departmentId);
			postOrgList.value = [{ departmentName: "全部委员会", departmentId: "全部委员会" }, ...list];
		}
	} catch (error) { }
};

// 获取提出议员列表
const postMemberList = ref([{ memberName: "全部提出议员", memberId: "全部提出议员" }]);
const handleGetPostMemberList = async () => {
	try {
		const res = await getPostMemberList();
		console.log("提出议员列表", res);
		if (res.code === 200) {
			const list = res.data.filter(item => item.memberId);
			postMemberList.value = [{ memberName: "全部提出议员", memberId: "全部提出议员" }, ...list];
		}
	} catch (error) { }
};

// 获取资源库
const bills = ref([]);
const total = ref(0);
const pageSize = ref(4);
const loading = ref(false);
const abortController = ref(null);

const handleGetBills = async () => {
	// 取消上一次未完成的请求
	if (abortController.value) {
		abortController.value.abort();
	}
	// 创建新的 AbortController
	abortController.value = new AbortController();

	loading.value = true;
	const params = {
		currentPage: currentPage.value - 1, // Standard Spring Boot page index is 0-based
		pageSize: pageSize.value
	};

	if (!activeYyList.value.includes("全部议院")) {
		params.congressIds = activeYyList.value.join(",");
	}
	if (footerSelect1.value !== "全部委员会") {
		params.departmentId = footerSelect1.value;
	}
	if (!activeDpList.value.includes("全部党派")) {
		params.partyIds = activeDpList.value.join(",");
	}
	if (footerSelect2.value !== "全部提出议员") {
		params.personId = footerSelect2.value;
	}
	if (!activeAreaList.value.includes("全部领域")) {
		params.researchIds = activeAreaList.value.join(",");
	}
	if (releaseTime.value !== true) {
		params.sortFun = releaseTime.value;
	}
	if (!activePubTime.value.includes("全部时间")) {
		params.years = activePubTime.value.join(",");
	}

	try {
		const res = await getBills(params, abortController.value.signal);
		console.log("资源库列表", res);
		if (res.code === 200) {
			if (res.data && res.data.content) {
				bills.value = res.data.content.map(item => ({
					billId: item.billId,
					name: item.billName,
					eName: item.billNameEn,
					tcr: item.personName,
					wyh: item.congressName,
					areaList: item.hylyList || [],
					zxdy: item.latestAction,
					progress: item.stageList || []
				}));
				total.value = res.data.totalElements;
			} else {
				bills.value = [];
				total.value = 0;
			}
		} else {
			bills.value = [];
			total.value = 0;
		}
		loading.value = false;
	} catch (error) {
		if (error.name !== "AbortError") {
			console.error(error);
			loading.value = false;
		}
	}
};

// 处理选择委员会变化
const handleFooterSelect1Change = val => {
	console.log("选择委员会变化", val);
	// 等会再做处理
	handleGetBills();
};
// 处理选择议员变化
const handleFooterSelect2Change = val => {
	console.log("选择议员变化", val);
	// 等会再做处理
	handleGetBills();
};
// 处理选择排序方式变化
const handlePxChange = val => {
	console.log("选择排序方式变化", val);
	// 等会再做处理
	handleGetBills();
};

// 根据法案类型获取法案列表
// const handleGetBillsByType = async () => {
// 	const params = {
// 		type: activeHylyId.value
// 	};
// 	try {
// 		const res = await getBillsByType(params);
// 		console.log("根据法案类型获取法案列表", res);
// 		billList.value = res.data.map(item => {
// 			return {
// 				billId: item.billId,
// 				billName: item.billName,
// 				introductionDate: item.introductionDate,
// 				img: bill1
// 			};
// 		});
// 	} catch (error) {}
// };

// 涉华法案数量
const box5Select = ref("全部领域");
const box5Data = ref({
	title: [
		"2024-09",
		"2024-10",
		"2024-11",
		"2024-12",
		"2025-01",
		"2025-02",
		"2025-03",
		"2025-04",
		"2025-05",
		"2025-06",
		"2025-07",
		"2025-08"
	],
	data: [
		{
			name: "提出法案",
			value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
		},
		{
			name: "通过法案",
			value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
		}
	]
});
const box5HasData = ref(true);
const handleGetBillCount = async () => {
	try {
		let params = {};
		if (box5Select.value !== "全部领域") {
			params.industryId = box5Select.value;
		}
		const res = await getBillCount(params);
		console.log("涉华法案统计", res);
		if (res.code === 200 && res.data && res.data.length > 0) {
			box5HasData.value = true;
			const sortedData = res.data.sort((a, b) => a.month.localeCompare(b.month));
			box5Data.value = {
				title: sortedData.map(item => item.month),
				data: [
					{
						name: "提出法案",
						value: sortedData.map(item => item.totalCount)
					},
					{
						name: "通过法案",
						value: sortedData.map(item => item.passCount)
					}
				],
				percent: sortedData.map(item => item.percent)
			};
		} else {
			// 接口异常（如500）时，清空图表数据以避免报错或显示错误信息
			box5HasData.value = false;
			box5Data.value = {
				title: [],
				data: [
					{ name: "提出法案", value: [] },
					{ name: "通过法案", value: [] }
				],
				percent: []
			};
		}
	} catch (error) {
		console.error("获取涉华法案统计error", error);
		// 发生错误时同样清空数据
		box5HasData.value = false;
		box5Data.value = {
			title: [],
			data: [
				{ name: "提出法案", value: [] },
				{ name: "通过法案", value: [] }
			],
			percent: []
		};
	}
};

const handleBox5 = async () => {
	await handleGetBillCount();
	if (box5HasData.value) {
		await nextTick();
		const proposed = box5Data.value.data[0].value;
		const passed = box5Data.value.data[1].value;
		const rate =
			box5Data.value.percent ||
			proposed.map((p, i) => {
				const pass = passed[i] || 0;
				return p ? ((pass / p) * 100).toFixed(2) : 0;
			});
		let box5Chart = getMultiLineChart(box5Data.value.title, proposed, passed, rate);
		setChart(box5Chart, "box5Chart");
	}
};

const handleBox5Change = () => {
	handleBox5();
};

// 法案提出部门
const box7HasData = ref(true);
const handleBox7Data = async () => {
	try {
		const res = await getBillPostOrg({ year: box7selectetedTime.value });
		console.log("法案提出部门", res);
		if (res.code === 200 && res.data && res.data.length > 0) {
			box7HasData.value = true;
			// 必须等待DOM更新，因为v-if切换可能导致元素刚被创建
			await nextTick();

			const apiData = res.data;

			const houseItems = apiData.filter(i => i.congressName === "House");
			const senateItems = apiData.filter(i => i.congressName === "Senate");

			const houseTotal = houseItems.reduce((sum, i) => sum + i.countBill, 0);
			const senateTotal = senateItems.reduce((sum, i) => sum + i.countBill, 0);

			const data1 = [];
			if (houseItems.length > 0) {
				data1.push({ name: "众议院", value: houseTotal });
			}
			if (senateItems.length > 0) {
				data1.push({ name: "参议院", value: senateTotal });
			}

			const data2 = [...houseItems, ...senateItems].map(item => ({
				name: item.originDepart,
				value: item.countBill,
				type: item.congressName === "House" ? "众议院" : "参议院"
			}));

			const box7Chart = getDoublePieChart(data1, data2);
			setChart(box7Chart, "box7Chart");
		} else {
			// 接口异常（如500）时，清空图表数据以避免报错或显示错误信息
			box7HasData.value = false;
			setChart({}, "box7Chart");
		}
	} catch (error) {
		console.error("获取法案提出部门数据失败", error);
		box7HasData.value = false;
	}
};

watch(box7selectetedTime, () => {
	handleBox7Data();
});
// 查看社交媒体详情
const handleToSocialDetail = item => {
	const route = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(route.href, "_blank");
};
// 关键条款
const wordCloudData = ref([]);
const handleGetKeyTK = async () => {
	try {
		const res = await getBillOverviewKeyTK();
		console.log("关键条款", res);
		if (res.code === 200 && res.data) {
			wordCloudData.value = res.data.map(item => {
				return {
					name: item.clause,
					value: item.count
				};
			});
		}
	} catch (error) {
		console.error("获取关键条款error", error);
	}
};
const handleBox6 = async () => {
	await handleGetKeyTK();
	const wordCloudChart = getWordCloudChart(wordCloudData.value);
	setChart(wordCloudChart, "wordCloudChart");
};

// 涉华领域分布
const box9ChartData = ref([]);
const box9selectetedTime = ref("2025");
const box9YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	}
]);
const box9HasData = ref(true);
let box9ChartInstance = null;
const getBox9Data = async () => {
	const params = {
		year: box9selectetedTime.value
	};
	try {
		const res = await getBillIndustry(params);
		console.log("box9-涉华法案领域分布", res.data);
		if (res.code === 200 && res.data && res.data.length > 0) {
			box9HasData.value = true;
			box9ChartData.value = res.data;
		} else {
			box9HasData.value = false;
			box9ChartData.value = [];
		}
	} catch (error) {
		box9HasData.value = false;
		box9ChartData.value = [];
	}
};
const handleBox9Data = async () => {
	await getBox9Data();
	if (box9HasData.value) {
		await nextTick();
		const box9Chart = getPieChart(
			box9ChartData.value.map(item => {
				return {
					name: item.industryName,
					value: item.countBill
				};
			})
		);
		box9ChartInstance = setChart(box9Chart, "box9Chart");
	}
};

watch(box9selectetedTime, () => {
	handleBox9Data();
});

const box8Data = ref([]);

const handleBox8Data = async () => {
	try {
		const res = await getMemberProposal({ year: box8selectetedTime.value });
		console.log("关键议员提案", res);
		if (res.code === 200 && res.data) {
			box8Data.value = res.data.map(item => ({
				memberId: item.memberId,
				name: item.memberName,
				zhiwei: item.position,
				img: item.imageUrl,
				num: item.countProposal,
				dangpai: Cyy,
				yuan: item.position === "Democratic" ? Mzd : Ghd
			}));
		} else {
			// 接口异常（如500）时，清空图表数据以避免报错或显示错误信息
			box8Data.value = [];
		}
	} catch (error) {
		console.error("获取关键议员提案失败", error);
		box8Data.value = [];
	}
};

watch(box8selectetedTime, () => {
	handleBox8Data();
});

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 tabList = ref([
	{
		name: "国会法案",
		active: true
	},
	{
		name: "国会议员",
		active: false
	},
	{
		name: "议员合作关系",
		active: false
	},
	{
		name: "涉华委员会",
		active: false
	}
]);

const activeTabName = ref("国会法案");
const handleClickTab = tab => {
	activeTabName.value = tab.name;
};

const activeAreaList = ref(["全部领域"]);
const handleAreaChange = val => {
	if (val.includes("全部领域") && val.length > 1) {
		if (val[val.length - 1] === "全部领域") {
			activeAreaList.value = ["全部领域"];
		} else {
			activeAreaList.value = val.filter(item => item !== "全部领域");
		}
	} else if (val.length === 0) {
		activeAreaList.value = ["全部领域"];
	}
	// 打印 activeAreaList.value
	console.log(activeAreaList.value);
	handleGetBills();
};

const dpList = ref([
	{ id: "全部党派", name: "全部党派" },
	{ id: "Democratic", name: "民主党" },
	{ id: "Republican", name: "共和党" }
]);
const activeDpList = ref(["全部党派"]);
// 处理选择党派变化
const handleDpChange = val => {
	if (val.includes("全部党派") && val.length > 1) {
		if (val[val.length - 1] === "全部党派") {
			activeDpList.value = ["全部党派"];
		} else {
			activeDpList.value = val.filter(item => item !== "全部党派");
		}
	} else if (val.length === 0) {
		activeDpList.value = ["全部党派"];
	}
	console.log("选择党派变化", activeDpList.value);
	handleGetBills();
};

const yyList = ref([
	{ id: "全部议院", name: "全部议院" },
	{ id: "S", name: "参议院" },
	{ id: "H", name: "众议院" }
]);
const activeYyList = ref(["全部议院"]);
// 处理选择议院变化
const handleYyChange = val => {
	if (val.includes("全部议院") && val.length > 1) {
		if (val[val.length - 1] === "全部议院") {
			activeYyList.value = ["全部议院"];
		} else {
			activeYyList.value = val.filter(item => item !== "全部议院");
		}
	} else if (val.length === 0) {
		activeYyList.value = ["全部议院"];
	}
	console.log("选择议院变化", activeYyList.value);
	handleGetBills();
};

const pubTime = ref([
	{ id: "全部时间", name: "全部时间" },
	{ id: "2025", name: "2025年" },
	{ id: "2024", name: "2024年" },
	{ id: "2023", name: "2023年" },
	{ id: "2022", name: "2022年" },
	{ id: "2021", name: "2021年" }
	// { id: "更早时间", name: "更早时间" }
]);
const activePubTime = ref(["全部时间"]);
// 处理选择时间变化
const handlePubTimeChange = val => {
	if (val.includes("全部时间") && val.length > 1) {
		if (val[val.length - 1] === "全部时间") {
			activePubTime.value = ["全部时间"];
		} else {
			activePubTime.value = val.filter(item => item !== "全部时间");
		}
	} else if (val.length === 0) {
		activePubTime.value = ["全部时间"];
	}
	console.log("选择时间变化", activePubTime.value);
	handleGetBills();
};

const footerSelect1 = ref("全部委员会");
const footerSelect2 = ref("全部提出议员");

// const footerBillList = ref([
// 	{
// 		name: "H.R.1-大而美法案",
// 		eName: "One Big Beautiful Bill Act",
// 		tcr: "乔迪·阿灵顿等2人",
// 		wyh: "众议院-预算委员会",
// 		areaList: ["集成电路", "人工智能"],
// 		zxdy: "2025.07.04   成为公法 No: 119-21",
// 		progress: []
// 	},
// 	{
// 		name: "H.R.1-大而美法案",
// 		eName: "One Big Beautiful Bill Act",
// 		tcr: "乔迪·阿灵顿等2人",
// 		wyh: "众议院-预算委员会",
// 		areaList: ["集成电路", "人工智能"],
// 		zxdy: "2025.07.04   成为公法 No: 119-21",
// 		progress: []
// 	},
// 	{
// 		name: "H.R.1-大而美法案",
// 		eName: "One Big Beautiful Bill Act",
// 		tcr: "乔迪·阿灵顿等2人",
// 		wyh: "众议院-预算委员会",
// 		areaList: ["集成电路", "人工智能"],
// 		zxdy: "2025.07.04   成为公法 No: 119-21",
// 		progress: []
// 	}
// ]);

const handleResize = () => {
	box9ChartInstance && box9ChartInstance.resize();
};

onMounted(async () => {
	window.addEventListener("resize", handleResize);
	handleGetHylyList();
	// 获取风险信号
	handleGetBillRiskSignal();
	// 获取新闻资讯
	handleGetNews();
	// 获取社交媒体
	handleGetRemarks();
	// 获取提出部门列表
	handleGetPostOrgList();
	// 获取提出议员列表
	handleGetPostMemberList();
	// 获取资源库
	handleGetBills();

	// handleGetBillsByType();

	handleBox5(); //涉华法案统计
	handleBox6(); // 关键条款

	handleBox7Data();

	handleBox8Data();

	await handleGetHotBills();
	curBill.value = hotBillList.value[0];

	handleBox9Data();
});

onUnmounted(() => {
	window.removeEventListener("resize", handleResize);
});
</script>

<style lang="scss" scoped>
.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-content-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-content-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%;
					}
				}
			}
		}
	}

	.scrollHomeBox {
		height: calc(100% - 144px);
	}

	.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 {
		position: relative;
		width: 100%;
		height: 100%;
		// background: url("./assets/images/background.png"),linear-gradient(180.00deg, rgba(229, 241, 254, 1) 0%,rgba(246, 251, 255, 0) 100%);
		// background-size: 100% 100%;
		overflow-y: auto;

		.home-content {
			width: 1600px;
			margin: 0 auto;
			margin-top: 48px;

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

				.home-content-header-center {
					width: 960px;
					height: 48px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 0.65);
					box-sizing: border-box;
					padding: 1px;
					position: relative;
					border: 1px solid rgba(255, 255, 255, 1);

					&: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-content-header-footer {
					margin-top: 38px;
					width: 960px;
					height: 64px;
					box-sizing: border-box;
					padding: 0 108px;
					display: flex;
					justify-content: space-between;

					.home-content-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-content-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%;
							}
						}
					}
				}
			}

			.divide1 {
				margin-top: 64px;
				margin-bottom: 36px;
			}

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

				.center-top {
					height: 450px;
					display: flex;
					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;
							left: 0;
							top: 200px;
							width: 24px;
							height: 48px;
							display: flex;
							justify-content: center;
							align-items: center;
							cursor: pointer;
							z-index: 10;

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

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

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

							.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;
							box-sizing: border-box;
							padding: 0 40px 0 21px;

							.box1-header-left {
								display: flex;

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

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

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

							.box1-header-right {
								margin-top: 19px;
								height: 16px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 16px;
								cursor: pointer;
							}
						}

						.box1-main {
							display: flex;
							height: 354px;
							margin-top: 22px;
							box-sizing: border-box;
							padding-left: 31px;

							.box1-main-left {
								margin-left: 39px;
								width: 484px;

								.box1-main-left-title {
									color: rgba(20, 89, 187, 1);
									font-family: "Microsoft YaHei";
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
									margin-bottom: 14px;
								}

								.box1-main-left-info {
									margin-top: 17px;
									display: flex;
									gap: 8px;
								}

								.box1-main-left-info1 {
									margin-top: 25px;
									margin-left: 4px;

									.info1-box {
										display: flex;

										.icon {
											margin-top: 15px;
											width: 4px;
											height: 4px;
											border-radius: 2px;
											background: rgba(132, 136, 142, 1);
										}

										.info1-box-left {
											margin-left: 18px;
											width: 100px;
											height: 30px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 400;
											line-height: 30px;
										}

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

								.box1-main-left-info2 {
									margin-top: 21px;
									height: 200px;
									width: 440px;
									position: relative;

									.time-line {
										position: absolute;
										z-index: 0;
										top: 15px;
										left: 4px;
										width: 2px;
										background: #e6e7e8;
									}

									.info2-item {
										margin-left: 1px;
										margin-bottom: 8px;
										height: 30px;
										display: flex;
										// background: orange;
										position: relative;

										.time-line {
											position: absolute;
											left: 4px;
											top: 18px;
											width: 2px;
											background: #e6e7e8;
											height: 34px;
										}

										.item-icon {
											margin-top: 8px;
											width: 10px;
											height: 10px;
											position: relative;
											z-index: 1;

											img {
												width: 10px;
												height: 10px;
											}
										}

										.itemTimeActive {
											color: rgba(20, 89, 187, 1) !important;
										}

										.itemTitleActive {
											font-weight: 700 !important;
											color: rgba(20, 89, 187, 1) !important;
										}

										.item-time {
											margin-left: 15px;
											width: 147px;
											height: 30px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 700;
											line-height: 30px;
										}

										.item-title {
											margin-left: 10px;
											width: 320px;
											height: 30px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 400;
											line-height: 30px;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}
									}
								}
							}

							.box1-main-right {
								height: 354px;
								width: 458px;
								border-radius: 4px;
								overflow: hidden;
								position: relative;

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

								.inner-box {
									width: 100%;
									height: 93px;
									background: rgba(10, 18, 30, 0.75);
									position: absolute;
									left: 0;
									bottom: 0;
									box-sizing: border-box;
									padding: 9px 10px 12px 10px;

									.inner-box-header {
										height: 30px;
										display: flex;

										.inner-box-title {
											flex: 9;
											color: rgba(255, 255, 255, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 700;
											line-height: 30px;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}

										.inner-box-time {
											flex: 2;
											height: 30px;
											color: rgba(255, 255, 255, 0.65);
											font-family: Microsoft YaHei;
											font-size: 14px;
											font-weight: 400;
											line-height: 30px;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}
									}

									.inner-box-content {
										width: 100%;
										height: 40px;
										overflow: hidden;
										color: rgba(255, 255, 255, 0.8);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 20px;
									}
								}
							}
						}
					}

					.box2 {
						width: 520px;
						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;
							box-sizing: border-box;
							padding-right: 20px;
							border-bottom: 1px solid rgba(234, 236, 238, 1);

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

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

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

								.text {
									margin-left: 16px;
									height: 22px;
									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: 10px;
									margin-top: 15px;
									// border: 1px solid rgba(255, 255, 255, 1);
									border-radius: 100px;
									background: rgba(255, 255, 255, 0.3);
								}
							}
						}

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

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

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

								.itemLeftStatus1 {
									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: 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 {
										width: 88px;
										margin-left: 5px;
										line-height: 47px;
										color: rgba(132, 136, 142, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										text-align: center;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
							}
						}

						.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);
							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 {
					margin-top: 68px;
					margin-bottom: 36px;
				}

				.center-center {
					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;
							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: 11px;
									margin-left: 19px;
									height: 26px;
									color: rgba(20, 89, 187, 1);
									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: hidden;
							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);
								cursor: pointer;

								&:last-child {
									border-bottom: 0px;
								}

								&: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 {
										margin-top: 16px;
										width: 657px;
										height: 24px;
										display: flex;
										justify-content: space-between;

										.title {
											width: 440px;
											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: 24px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 14px;
											font-weight: 400;
											line-height: 24px;
											overflow: hidden;
										}
									}

									.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: 11px;
								margin-left: 18px;
								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;
							}
						}

						.box4-main {
							height: 402px;
							overflow-y: auto;
							box-sizing: border-box;
							padding-top: 8px;
							padding-bottom: 20px;
							padding-left: 24px;
							// .box4-main-item {
							// 	margin-top: 16px;
							// 	display: flex;
							// 	margin-left: 21px;
							// 	.left {
							// 		margin-top: 5px;
							// 		width: 36px;
							// 		height: 36px;
							// 		cursor: pointer;
							// 		img {
							// 			width: 100%;
							// 			height: 100%;
							// 			border-radius: 50%;
							// 		}
							// 	}
							// 	.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;
							// 		}
							// 	}
							// }
						}
					}
				}

				.divide3 {
					margin-top: 64px;
					margin-bottom: 36px;
				}

				.center-footer {
					margin-top: 21px;
					height: 450px;
					display: flex;

					.box5 {
						width: 1059px;
						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;

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

							.box5-header-left {
								display: flex;

								.box5-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;

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

								.box5-header-title {
									margin-top: 11px;
									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-header-right {
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;

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

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

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

						.box5-main {
							height: 397px;
							padding: 8px 16px 8px 16px;
						}
					}

					.box6 {
						margin-left: 20px;
						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);

						.box6-header {
							width: 521px;
							height: 53px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							display: flex;
							box-sizing: border-box;
							padding-left: 22px;

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

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

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

							.box6-header-right {
								margin-left: 130px;
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;

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

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

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

						.box6-main {
							width: 100%;
							height: calc(100% - 53px);
						}
					}
				}

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

					.box7 {
						width: 520px;
						height: 450px;
						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 27px 0 22px;

							.box7-header-left {
								display: flex;

								.box7-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;

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

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

							.box7-header-right {
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;

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

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

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

						.box-center {
							height: 45px;
							padding-right: 20px;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}

						.box7-main {
							height: 390px;
						}
					}

					.box8 {
						width: 527px;
						height: 450px;
						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 27px 0 22px;

							.box8-header-left {
								display: flex;

								.box8-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;

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

								.box8-header-title {
									margin-top: 11px;
									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-header-right {
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;

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

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

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

						.box8-main {
							height: 380px;
							overflow: hidden;
							padding: 20px;

							.box8-main-item {
								// margin: 0 auto;
								width: 478px;
								height: 51px;
								margin-bottom: 20px;
								display: flex;
								align-items: center;
								position: relative;
								// padding: 0 10px;
								cursor: pointer;

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

								.box8-main-item-left {
									position: relative;
									width: 42px;
									height: 42px;

									.left-img {
										width: 42px;
										height: 42px;
										border-radius: 50%;
									}

									.left-icon1 {
										position: absolute;
										left: 2px;
										bottom: -6px;
										width: 20px;
										height: 20px;
										border-radius: 10px;
										background: (255, 255, 255, 0.8);
										box-sizing: border-box;
										padding: 2px;

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

									.left-icon2 {
										position: absolute;
										right: 2px;
										bottom: -6px;
										width: 20px;
										height: 20px;
										border-radius: 10px;
										background: (255, 255, 255, 0.8);
										box-sizing: border-box;
										padding: 2px;

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

								.box8-main-item-center {
									height: 48px;
									margin-left: 12px;

									.box8-main-item-center-top {
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
									}

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

								.box8-main-item-right {
									position: absolute;
									top: 0;
									right: 10px;
									height: 51px;
									text-align: right;
									color: rgba(95, 101, 108, 1);
									font-family: "Microsoft YaHei";
									font-size: 16px;
									font-weight: 400;
									line-height: 51px;
								}
							}
						}
					}

					.box9 {
						width: 521px;
						height: 450px;
						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);

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

							.box9-header-left {
								display: flex;

								.box9-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;

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

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

							.box9-header-right {
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;

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

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

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

						.box-center {
							height: 45px;
							padding-right: 20px;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}

						.box9-main {
							height: 380px;
							padding: 10px 20px;
						}
					}
				}
			}
		}

		.home-content-footer {
			width: 100%;
			height: 1740px;
			background: rgba(248, 249, 250, 1);
			margin-bottom: 20px;
			overflow: hidden;
			margin-top: 36px;

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

			.home-content-footer-header {
				width: 1600px;
				margin: 0 auto;
				margin-top: 37px;
				margin-bottom: 36px;
				// width: 1600px;
				height: 42px;
				// background: orange;
				display: flex;
				justify-content: space-between;

				.btn-box {
					display: flex;
					gap: 24px;
					width: 1000px;

					.btn {
						height: 42px;
						line-height: 42px;
						padding: 0 20px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						border-radius: 21px;
						// background: rgba(20, 89, 187, 0);

						cursor: pointer;

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

					.btnActive {
						background: var(--color-main-active);
						color: #fff;
						font-weight: 700;

						&:hover {
							color: #fff;
							background: var(--color-main-active);
						}
					}

					.disabled {
						cursor: not-allowed;
						opacity: 0.5;

						&:hover {
							background: transparent;
						}
					}
				}

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

			.home-content-footer-main {
				width: 1600px;
				height: 1401px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.left {
					width: 300px;
					// min-height: 784px;
					padding-bottom: 33px;
					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);

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

						.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: 20px;
								font-weight: 700;
								line-height: 26px;
								letter-spacing: 1px;
								text-align: left;
							}
						}

						.select-main {
							margin-left: 25px;
							margin-top: 16px;

							.checkbox-group {
								display: flex;
								flex-wrap: wrap;

								.filter-checkbox {
									width: 50%;
									margin-right: 0;
									margin-bottom: 4px;

									:deep(.el-checkbox__label) {
										color: rgb(95, 101, 108);
										font-size: 16px;
										font-weight: 400;
										font-family: "Microsoft YaHei";
										line-height: 24px;
									}
								}
							}
						}

						.select-main1 {
							width: 100px;
						}
					}
				}

				.right {
					margin-left: 20px;
					width: 1280px;

					.right-header {
						height: 48px;
						display: flex;
						gap: 18px;
					}

					.right-main {
						height: 1264px;

						// overflow: hidden;
						.right-main-box {
							width: 1280px;
							height: 300px;
							padding-bottom: 24px;
							border-radius: 10px;
							box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
							background: rgba(255, 255, 255, 1);
							margin-bottom: 16px;
							overflow: hidden;

							// overflow-y: auto;
							// cursor: pointer;
							.header {
								height: 91px;
								width: 1200px;
								margin: 0 auto;
								border-bottom: 1px solid rgba(234, 236, 238, 1);
								padding-top: 19px;

								.title {
									cursor: pointer;
									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;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.en-title {
									margin-top: 8px;
									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;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}

							.main {
								width: 1200px;
								margin: 0 auto;
								margin-top: 2px;

								.item {
									margin-top: 12px;
									// height: 24px;
									display: flex;

									.item-left {
										width: 100px;
										// height: 24px;
										color: rgb(59, 65, 75);
										font-family: "Microsoft YaHei";
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
										letter-spacing: 1px;
										text-align: left;
									}

									.item-right {
										max-width: 1000px;
										margin-left: 10px;
										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;
									}

									.item-right1 {
										margin-left: 10px;
										display: flex;
										gap: 8px;

										.tag {
											height: 24px;
											line-height: 24px;
											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;
										}
									}

									.item-right2 {
										margin-left: 10px;
										display: flex;
										align-items: center;

										.tag {
											height: 24px;
											line-height: 22px;
											padding: 0 10px 0 30px;
											background: rgba(255, 255, 255, 1);
											color: rgb(95, 101, 108);
											border-top: 1px solid rgb(234, 236, 238);
											border-bottom: 1px solid rgb(234, 236, 238);
											position: relative;
											margin-left: -10px;
											font-family: "Microsoft YaHei";
											font-size: 14px;
											font-weight: 400;

											&::after {
												content: "";
												position: absolute;
												top: 50%;
												right: -8.485px;
												width: 16.97px;
												height: 16.97px;
												background: inherit;
												border-top: 1px solid rgb(234, 236, 238);
												border-right: 1px solid rgb(234, 236, 238);
												transform: translateY(-50%) rotate(45deg);
												z-index: 1;
												box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.05);
												box-sizing: border-box;
											}

											&:first-child {
												margin-left: 0;
												padding-left: 10px;
												border-left: 1px solid rgb(234, 236, 238);
												border-radius: 4px 0 0 4px;
											}

											&:last-child {
												background: rgb(59, 65, 75);
												color: rgba(255, 255, 255, 1);
												border-color: rgb(59, 65, 75);
												padding-right: 10px;
												border-radius: 0;
												border-right: none;

												&::after {
													display: block;
													border-color: rgb(59, 65, 75);
													box-shadow: none;
												}
											}

											&:first-child:last-child {
												margin-left: 0;
												padding: 0 10px;
												border-radius: 4px 0 0 4px;
												background: rgb(59, 65, 75);
												color: rgba(255, 255, 255, 1);
												border: 1px solid rgb(59, 65, 75);
												border-right: none;
											}
										}
									}
								}
							}
						}
					}

					.right-footer {
						height: 85px;
						display: flex;
						justify-content: space-between;
						box-sizing: border-box;
						padding-top: 12px;

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

			.home-content-footer-footer {
				width: 1600px;
				margin: 0 auto;
				height: 32px;
				margin-top: 30px;
				display: flex;
				justify-content: space-between;

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

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