<template>
	<div class="content-wrapper">
		<div class="header">
			<div class="header-arrow-left" @click="prev">
				<img src="../../assets/left-btn.png" alt="" />
			</div>
			<div class="header-arrow-right" @click="next">
				<img src="../../assets/right-btn.png" alt="" />
			</div>
			<div class="cards-mask">
				<div class="item-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
					<div
						class="header-item"
						:class="{
							headerItem1: index % 5 === 0,
							headerItem2: index % 5 === 1,
							headerItem3: index % 5 === 2,
							headerItem4: index % 5 === 3,
							headerItem5: index % 5 === 4
						}"
						v-for="(item, index) in headerList"
						:key="index"
					>
						<div class="name">{{ item.elementName }}</div>
						<div class="num">{{ item.num }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="left">
				<div class="box box1">
					<div class="box1-header">
						<div class="icon">
							<img src="./assets/images/box-header-icon1.png" alt="" />
						</div>
						<div class="title">{{ "最新动态" }}</div>
					</div>
					<div class="box1-main">
						<div
							class="box1-item"
							v-for="(item, index) in box1DataList"
							:key="index"
							@click="handleToDecreeDetail(item)"
						>
							<div class="box1-item-left">{{ index + 1 }}</div>
							<div class="box1-item-right">
								<div class="title">{{ item.name }}</div>
								<div class="content">{{ item.describe }}</div>
								<div class="tag-box">
									<div class="tag" v-for="(val, idx) in item.elemetList" :key="idx">{{ val }}</div>
								</div>
								<div class="box1-item-right-footer">
									<div class="time">{{ item.postDate }}</div>
									<div class="area-box">
										<div
											class="area"
											:class="{
												area1: vall.status === '1',
												area2: vall.status === '2',
												area3: vall.status === '3',
												area4: vall.status === '4',
												area5: vall.status === '5'
											}"
											v-for="(vall, idxx) in item.areaList"
											:key="idxx"
										>
											{{ vall.industryName }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="box box2">
					<div class="box2-header">
						<div class="icon">
							<img src="./assets/images/box-header-icon2.png" alt="" />
						</div>
						<div class="title">{{ "美对华要素打压情况" }}</div>
					</div>
					<div class="box2-main">
						<div class="inner-box1">
							<div class="left">
								<div class="left-main">
									<el-empty
										v-if="box2DataList.length === 0"
										style="padding-top: 80px"
										description="暂无数据1"
										:image-size="100"
									/>
									<div
										class="left-item"
										:class="{ leftItemActive: box2LeftActiveIndex === index }"
										v-for="(item, index) in box2DataList"
										:key="index"
										@click="handleClickBox2Item(index)"
									>
										<div class="id">{{ index + 1 }}</div>
										<div class="text">{{ item.name }}</div>
									</div>
								</div>
								<div class="left-footer" v-if="box2DataList.length !== 0">
									<el-pagination
										background
										layout="prev, pager, next"
										:total="box2Total"
										:page-size="box2PageSize"
										v-model:current-page="box2CurrentPage"
										@current-change="handleGetBox2DataList"
										size="small"
										:pager-count="4"
									/>
								</div>
							</div>
							<div class="right" @click="handleToDecreeDetail(box2DetailInfo)">
								<el-empty
									v-if="box2DataList.length === 0 || !isShowBox2Info"
									style="padding-top: 80px"
									description="暂无数据"
									:image-size="100"
								/>
								<div v-else>
									<div class="title">{{ box2DetailInfo?.name }}</div>
									<div class="tag-box">
										<div class="tag" v-for="(item, index) in box2DetailInfo.elemetList" :key="index">
											{{ item }}
										</div>
									</div>
									<div class="content">{{ box2DetailInfo?.describe }}</div>
									<div class="area-box">
										<div
											class="area"
											:class="{
												area1: item.status === '1',
												area2: item.status === '2',
												area3: item.status === '3',
												area4: item.status === '4',
												area5: item.status === '5'
											}"
											v-for="(item, index) in box2DetailInfo.areaList"
											:key="index"
										>
											{{ item.industryName }}
										</div>
									</div>
									<div class="footer" v-show="box2DetailInfo?.postDate || box2DetailInfo?.orgNameList">
										{{ `${box2DetailInfo?.postDate} · ${box2DetailInfo?.orgNameList?.toString()} · 行政令` }}
									</div>
								</div>
							</div>
						</div>
						<div class="inner-box2">
							<div class="chart-header">{{ "关键词云" }}</div>
							<div class="box2Chart" id="box2Chart"></div>
						</div>
					</div>
				</div>
				<div class="box box3">
					<div class="box3-header">
						<div class="icon">
							<img src="./assets/images/box-header-icon2.png" alt="" />
						</div>
						<div class="title">{{ "美自身要素发展情况" }}</div>
					</div>
					<div class="box3-main">
						<div class="inner-box1">
							<div class="left">
								<div class="left-main">
									<el-empty
										v-if="box3DataList.length === 0"
										style="padding-top: 80px"
										description="暂无数据"
										:image-size="100"
									/>
									<div
										class="left-item"
										:class="{ leftItemActive: box3LeftActiveIndex === index }"
										v-for="(item, index) in box3DataList"
										:key="index"
										@click="handleClickBox3Item(index)"
									>
										<div class="id">{{ index + 1 }}</div>
										<div class="text">{{ item.name }}</div>
									</div>
								</div>
								<div class="left-footer" v-if="box3DataList.length">
									<el-pagination
										background
										layout="prev, pager, next"
										:total="box3Total"
										:page-size="box3PageSize"
										v-model:current-page="box3CurrentPage"
										@current-change="handleGetBox3DataList"
										size="small"
										:pager-count="4"
									/>
								</div>
							</div>
							<div class="right" @click="handleToDecreeDetail(box3DetailInfo)">
								<el-empty
									v-if="box3DataList.length === 0 || !isShowBox3Info"
									style="padding-top: 80px"
									description="暂无数据"
									:image-size="100"
								/>
								<div v-else>
									<div class="title">{{ box3DetailInfo?.name }}</div>
									<div class="tag-box">
										<div class="tag" v-for="(item, index) in box3DetailInfo?.elemetList" :key="index">
											{{ item }}
										</div>
									</div>
									<div class="content">{{ box3DetailInfo?.describe }}</div>
									<div class="area-box">
										<div
											class="area"
											:class="{
												area1: item.status === '1',
												area2: item.status === '2',
												area3: item.status === '3',
												area4: item.status === '4',
												area5: item.status === '5'
											}"
											v-for="(item, index) in box3DetailInfo?.areaList"
											:key="index"
										>
											{{ item.industryName }}
										</div>
									</div>
									<div class="footer" v-if="box3DetailInfo?.postDate || box3DetailInfo?.orgNameList">
										{{ `${box3DetailInfo?.postDate} · ${box3DetailInfo?.orgNameList?.toString()} · 行政令` }}
									</div>
								</div>
							</div>
						</div>
						<div class="inner-box2">
							<el-empty
								v-if="box3ChartData.length === 0"
								style="padding-top: 80px"
								description="暂无数据"
								:image-size="100"
							/>
							<div class="chart-header">{{ "关键词云" }}</div>
							<div class="box3Chart" id="box3Chart"></div>
							<!-- <Echarts :option="usChinaSanctionTrendOptions" height="100%"></Echarts> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
import router from "@/router";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./uitls/worldCloudChart";
import "echarts-wordcloud";
import {
	getElementCount,
	getNewDynamics,
	getElementSuppress,
	getKeyWordUp,
	getElementDevelop,
	getKeyWordDown,
	getOrderInfo
} from "@/api/zmOverview/allElement";
import Echarts from "@/components/Chart/index.vue";

const activeDate = inject("activeDate");

const isShowBox2Info = ref(true);
const isShowBox3Info = ref(true);

const getCalculatedDate = type => {
	const now = new Date();
	const endDate = new Date();
	const start = new Date();

	switch (type) {
		case "week": // 近一个月
			start.setMonth(now.getMonth() - 1);
			break;
		case "three_month": // 近三个月
			start.setMonth(now.getMonth() - 3);
			break;
		case "six_month": // 近半年
			start.setMonth(now.getMonth() - 6);
			break;
		case "year": // 近一年
			start.setFullYear(now.getFullYear() - 1);
			break;
		default:
			start.setMonth(now.getMonth() - 1); // 默认近一个月
	}

	const formatDate = date => {
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, "0");
		const day = String(date.getDate()).padStart(2, "0");
		return `${year}-${month}-${day}`;
	};

	return {
		startDate: formatDate(start),
		endDate: formatDate(endDate)
	};
};

// 全要素统计
const headerList = ref([]);
const handleGetHeaderList = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		date: startDate
	};
	try {
		const res = await getElementCount(params);
		console.log("全要素统计", res);
		if (res.code === 200 && res.data) {
			headerList.value = res.data;
		}
	} catch (error) {}
};

// 最新动态
const box1DataList = ref([
	// {
	// 	title: '更新"中国涉军企业清单"(NS-CMIC List)',
	// 	content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
	// 	tagList: ["科研机构", "科研经费"],
	// 	time: "2025年12月18日",
	// 	areaList: [
	// 		{
	// 			name: "量子科技"
	// 		},
	// 		{
	// 			name: "量子科技"
	// 		}
	// 	]
	// }
]);
const handleGetBox1Data = async () => {
	try {
		const res = await getNewDynamics();
		console.log("最新动态", res);
		if (res.code === 200 && res.data) {
			box1DataList.value = res.data;
		}
	} catch (error) {}
};

const box2DataList = ref([]);
const box2Total = ref(0);
const box2CurrentPage = ref(1);
const box2PageSize = ref(5);
const box2LeftActiveIndex = ref(0);
const box2DetailInfo = ref({});

// 根据id 获取政令详细信息
const handleGetOrderInfo = async id => {
	const params = {
		id: id
	};
	try {
		const res = await getOrderInfo(params);
		console.log("根据id获取政令详细信息1", res);
		if (res.code === 200 && res.data) {
			box2DetailInfo.value = res.data;
		} else {
			isShowBox2Info.value = false;
		}
	} catch (error) {
		isShowBox2Info.value = false;
	}
};

const handleGetBox2DataList = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		currentPage: box2CurrentPage.value,
		pageSize: box2PageSize.value,
		date: startDate
	};
	try {
		const res = await getElementSuppress(params);
		console.log("美对我要素打压情况", res);
		if (res.code === 200 && res.data) {
			box2DataList.value = res.data.content;
			box2Total.value = res.data.totalElements;
			handleGetOrderInfo(box2DataList.value[box2LeftActiveIndex.value].id);
		}
	} catch (error) {}
};

const handleClickBox2Item = index => {
	box2LeftActiveIndex.value = index;
	handleGetOrderInfo(box2DataList.value[index].id);
};

const box2ChartData = ref([]);
const handleGetBox2ChartData = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		date: startDate
	};
	try {
		const res = await getKeyWordUp(params);
		console.log("关键词云-上", res);
		console.log("关键词云-上 参数", params);
		if (res.code === 200 && res.data) {
			box2ChartData.value = res.data.map(item => {
				return {
					name: item.name,
					value: item.count
				};
			});
		}
	} catch (error) {}
};
const handleBox2Chart = async () => {
	await handleGetBox2ChartData();
	let box2Chart = getWordCloudChart(box2ChartData.value);
	console.log("关键词云-上 options =>", box2Chart);
	console.log("关键词云-上 box2ChartData =>", box2ChartData.value);
	setChart(box2Chart, "box2Chart");
};

const box3DataList = ref([]);

const box3Total = ref(0);
const box3CurrentPage = ref(1);
const box3PageSize = ref(5);
const box3LeftActiveIndex = ref(0);
const box3DetailInfo = ref({});

// 根据id 获取政令详细信息
const handleGetOrderInfo1 = async id => {
	const params = {
		id: id
	};
	try {
		const res = await getOrderInfo(params);
		console.log("根据id获取政令详细信息1", res);
		if (res.code === 200 && res.data) {
			box3DetailInfo.value = res.data;
		} else {
			isShowBox3Info.value = false;
		}
	} catch (error) {
		isShowBox3Info.value = false;
	}
};

const handleGetBox3DataList = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);

	const params = {
		currentPage: box3CurrentPage.value,
		pageSize: box3PageSize.value,
		date: startDate
	};
	try {
		const res = await getElementDevelop(params);
		console.log("美自身要素发展情况", res);
		if (res.code === 200 && res.data) {
			box3DataList.value = res.data.content;
			box3Total.value = res.data.totalElements;
			if (res.data.content.length) {
				handleGetOrderInfo1(box3DataList.value[box3LeftActiveIndex.value].id);
			} else {
				box3DetailInfo.value = {};
			}
		} else {
			box3DetailInfo.value = {};
		}
	} catch (error) {}
};

const handleClickBox3Item = index => {
	box3LeftActiveIndex.value = index;
	handleGetOrderInfo1(box3DataList.value[index].id);
};

const box3ChartData = ref([]);

const handleGetBox3ChartData = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		date: startDate
	};
	try {
		const res = await getKeyWordDown(params);
		console.log("关键词云-下", res);
		if (res.code === 200 && res.data) {
			box3ChartData.value = res.data.map(item => {
				return {
					name: item.name,
					value: item.count
				};
			});
		}
	} catch (error) {}
};
const handleBox3Chart = async () => {
	await handleGetBox3ChartData();
	let box3Chart = getWordCloudChart(box3ChartData.value);
	console.log("关键词云-下", box3Chart);
	setChart(box3Chart, "box3Chart");
};

const currentIndex = ref(0);
let autoTimer = null;

const startAutoPlay = isContiune => {
	if (!isContiune) {
		currentIndex.value = 0;
	}
	stopAutoPlay();
	if (headerList.value.length >= 5) {
		autoTimer = setInterval(() => {
			next();
		}, 3000);
	}
};

const stopAutoPlay = () => {
	if (autoTimer) {
		clearInterval(autoTimer);
		autoTimer = null;
	}
};

const next = () => {
	let arr = [...headerList.value];
	if (currentIndex.value < headerList.value.length - 5) {
		currentIndex.value++;
	} else {
		// currentIndex.value = 0;
		headerList.value = [...headerList.value, ...arr];
		currentIndex.value++;
	}
};

const prev = () => {
	if (currentIndex.value > 0) {
		currentIndex.value--;
	} else {
		currentIndex.value = Math.max(0, headerList.value.length - 5);
	}
};

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

watch(activeDate, async () => {
	handleGetBox2DataList(); // 美对我要素打压情况
	handleGetBox3DataList(); // 美自身要素发展情况
	handleBox2Chart(); // 关键词云-上
	handleBox3Chart(); // 关键词云-下
	await handleGetHeaderList(); // 全要素统计
	// startAutoPlay();
});

onMounted(async () => {
	handleGetBox1Data(); // 最新动态
	handleGetBox2DataList(); // 美对我要素打压情况
	handleGetBox3DataList(); // 美自身要素发展情况
	handleBox2Chart(); // 关键词云-上
	handleBox3Chart(); // 关键词云-下
	await handleGetHeaderList(); // 全要素统计
	// startAutoPlay();
});

onUnmounted(() => {
	stopAutoPlay();
});
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1600px;

	// height: 2132px;
	.header {
		width: 1600px;
		height: 176px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		gap: 16px;
		margin: 0 auto;
		position: relative;

		.header-arrow-left {
			position: absolute;
			left: -33px;
			top: 64px;
			width: 24px;
			height: 48px;
			cursor: pointer;

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

		.header-arrow-right {
			position: absolute;
			right: -33px;
			top: 64px;
			width: 24px;
			height: 48px;
			cursor: pointer;

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

		.cards-mask {
			width: 100%;
			overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
		}

		.item-box {
			width: 100%;
			width: max-content;
			height: 178px;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: stretch;
			gap: 16px;
			padding: 0;
			transition: transform 0.5s ease; // 平滑过渡动画

			.header-item {
				width: 307px;
				height: 178px;
				border-radius: 10px;

				.name {
					margin-top: 53px;
					margin-left: 112px;
					width: 174px;
					height: 39px;
					color: rgba(255, 255, 255, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 30px;
					font-weight: 400;
					line-height: 39px;
					letter-spacing: 0px;
					text-align: left;
				}

				.num {
					margin-top: -8px;
					margin-left: 112px;
					width: 174px;
					height: 39px;
					color: rgba(255, 255, 255, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 30px;
					font-weight: 400;
					line-height: 39px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.headerItem1 {
				background: url("./assets/images/bg1.png");
			}

			.headerItem2 {
				background: url("./assets/images/bg2.png");
			}

			.headerItem3 {
				background: url("./assets/images/bg3.png");
			}

			.headerItem4 {
				background: url("./assets/images/bg4.png");
			}

			.headerItem5 {
				background: url("./assets/images/bg5.png");
			}
		}
	}

	.main {
		width: 1598px;
		height: 884px;
		margin: 0 auto;
		margin-top: 14px;
		display: flex;
		justify-content: space-between;

		.box {
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);
		}

		.left {
			width: 472px;

			.box1 {
				width: 472px;
				height: 884px;
				overflow: hidden;

				.box1-header {
					height: 48px;
					display: flex;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(255, 255, 255, 1);
					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);

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

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

					.title {
						width: 89px;
						height: 31px;
						margin-top: 8px;
						margin-left: 11px;
						color: var(--color-main-active);
						font-family: YouSheBiaoTiHei;
						font-style: Regular;
						font-size: 24px;
						font-weight: 400;
						line-height: 31px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.box1-main {
					height: 836px;
					overflow: hidden;
					background: rgba(255, 255, 255, 0.65);

					.box1-item {
						width: 430px;
						height: 167px;
						padding: 12px 0;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(234, 236, 238, 1);

						margin: 0 auto;
						display: flex;
						cursor: pointer;

						.box1-item-left {
							width: 30px;
							height: 30px;
							border-radius: 50px;
							background: rgba(246, 250, 255, 1);
							line-height: 30px;
							text-align: center;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							letter-spacing: 0px;
						}

						.box1-item-right {
							width: 388px;
							margin-left: 12px;

							.title {
								height: 30px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 16px;
								font-weight: 700;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: left;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.content {
								height: 48px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}

							.tag-box {
								margin-top: 4px;
								height: 28px;
								display: flex;
								flex-wrap: wrap;
								gap: 8px;

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

							.box1-item-right-footer {
								height: 30px;
								margin-top: 4px;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.time {
									width: 124px;
									height: 30px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 16px;
									font-weight: 400;
									line-height: 30px;
									letter-spacing: 0px;
									text-align: left;
								}

								.area-box {
									height: 24px;
									display: flex;
									gap: 8px;
									justify-content: flex-end;

									.area {
										height: 24px;
										padding: 0 8px;
										line-height: 24px;
										text-align: center;
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 14px;
										font-weight: 400;
										box-sizing: border-box;
										border-radius: 4px;

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

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

		.right {
			width: 1110px;

			.box2 {
				width: 1110px;
				height: 434px;

				.box2-header {
					height: 48px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(255, 255, 255, 1);
					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
					display: flex;

					.icon {
						width: 17px;
						height: 16.5px;
						margin-left: 19px;
						margin-top: 16px;

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

					.title {
						margin-top: 8px;
						margin-left: 13px;
						width: 199px;
						height: 31px;
						color: var(--color-main-active);
						font-family: YouSheBiaoTiHei;
						font-style: Regular;
						font-size: 24px;
						font-weight: 400;
						line-height: 31px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.box2-main {
					height: 386px;
					background: rgba(255, 255, 255, 0.65);
					display: flex;
					justify-content: center;
					gap: 16px;

					.inner-box1 {
						width: 640px;
						height: 368px;
						overflow: hidden;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						display: flex;

						.left {
							width: 320px;
							border-right: 1px solid rgba(234, 236, 238, 1);

							.left-main {
								margin-top: 9px;
								height: 270px;

								.left-item {
									height: 54px;
									border: 1px solid transparent;
									display: flex;
									align-items: center;

									&:hover {
										background: rgba(246, 250, 255, 1);
									}

									cursor: pointer;

									.id {
										margin-left: 16px;
										width: 24px;
										height: 24px;
										border-radius: 50px;
										background: rgba(231, 243, 255, 1);
										color: var(--color-main-active);
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: center;
									}

									.text {
										width: 260px;
										height: 30px;
										margin-left: 12px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 16px;
										font-weight: 400;
										line-height: 30px;
										letter-spacing: 0px;
										text-align: left;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.leftItemActive {
									box-sizing: border-box;
									border: 1px solid rgba(231, 243, 255, 1);
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
								}
							}

							.left-footer {
								margin-top: 30px;
								height: 60px;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

						.right {
							width: 320px;
							height: 368px;
							overflow: hidden;
							overflow-y: auto;
							cursor: pointer;

							.title {
								width: 283px;
								min-height: 24px;
								max-height: 48px;
								overflow: hidden;
								margin: 16px auto 18px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
							}

							.tag-box {
								width: 283px;
								margin: 0 auto;
								// height: 28px;
								display: flex;
								flex-wrap: wrap;
								gap: 8px;

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

							.content {
								margin: 0 auto;
								margin-top: 8px;
								width: 283px;
								height: 150px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 5;
							}

							.area-box {
								width: 283px;
								margin: 0 auto;
								margin-top: 28px;
								// height: 24px;
								display: flex;
								flex-wrap: wrap;
								justify-content: flex-start;
								gap: 8px;

								.area {
									height: 24px;
									padding: 0 8px;
									line-height: 24px;
									text-align: center;
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									box-sizing: border-box;
									border-radius: 4px;

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

							.footer {
								width: 283px;
								margin: 0 auto;
								margin-top: 8px;
								height: 30px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.inner-box2 {
						width: 412px;
						height: 368px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						overflow: hidden;
						position: relative;

						.chart-header {
							position: absolute;
							top: 14px;
							left: 20px;
							width: 90px;
							height: 26px;
							border-radius: 20px;
							background: var(--color-main-active);
							text-align: center;
							line-height: 26px;
							color: #fff;
							font-family: YouSheBiaoTiHei;
							font-style: Regular;
							font-size: 20px;
							font-weight: 400;
							line-height: 26px;
							letter-spacing: 0px;
						}

						.box2Chart {
							width: 412px;
							height: 368px;
						}
					}
				}
			}

			.box3 {
				margin-top: 16px;
				width: 1110px;
				height: 434px;

				.box3-header {
					height: 48px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(255, 255, 255, 1);
					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
					display: flex;

					.icon {
						width: 17px;
						height: 16.5px;
						margin-left: 19px;
						margin-top: 16px;

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

					.title {
						margin-top: 8px;
						margin-left: 13px;
						width: 199px;
						height: 31px;
						color: var(--color-main-active);
						font-family: YouSheBiaoTiHei;
						font-style: Regular;
						font-size: 24px;
						font-weight: 400;
						line-height: 31px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.box3-main {
					height: 386px;
					background: rgba(255, 255, 255, 0.65);
					display: flex;
					justify-content: center;
					gap: 16px;

					.inner-box1 {
						width: 640px;
						height: 368px;
						overflow: hidden;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						display: flex;

						.left {
							width: 320px;
							border-right: 1px solid rgba(234, 236, 238, 1);

							.left-main {
								margin-top: 9px;
								height: 270px;

								.left-item {
									height: 54px;
									border: 1px solid transparent;
									display: flex;
									align-items: center;

									&:hover {
										background: rgba(246, 250, 255, 1);
									}

									cursor: pointer;

									.id {
										margin-left: 16px;
										width: 24px;
										height: 24px;
										border-radius: 50px;
										background: rgba(231, 243, 255, 1);
										color: var(--color-main-active);
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: center;
									}

									.text {
										width: 260px;
										height: 30px;
										margin-left: 12px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 16px;
										font-weight: 400;
										line-height: 30px;
										letter-spacing: 0px;
										text-align: left;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.leftItemActive {
									box-sizing: border-box;
									border: 1px solid rgba(231, 243, 255, 1);
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
								}
							}

							.left-footer {
								margin-top: 30px;
								height: 60px;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

						.right {
							width: 320px;
							height: 368px;
							overflow: hidden;
							overflow-y: auto;
							cursor: pointer;

							.title {
								width: 283px;
								min-height: 24px;
								max-height: 48px;
								overflow: hidden;
								margin: 16px auto 18px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
							}

							.tag-box {
								width: 283px;
								margin: 0 auto;
								// height: 28px;
								display: flex;
								flex-wrap: wrap;
								gap: 8px;

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

							.content {
								margin: 0 auto;
								margin-top: 8px;
								width: 283px;
								height: 150px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 5;
							}

							.area-box {
								width: 283px;
								margin: 0 auto;
								margin-top: 28px;
								// height: 24px;
								display: flex;
								flex-wrap: wrap;
								justify-content: flex-start;
								gap: 8px;

								.area {
									height: 24px;
									padding: 0 8px;
									line-height: 24px;
									text-align: center;
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									box-sizing: border-box;
									border-radius: 4px;

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

							.footer {
								width: 283px;
								margin: 0 auto;
								margin-top: 8px;
								height: 30px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.inner-box2 {
						width: 412px;
						height: 368px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						overflow: hidden;
						position: relative;

						.chart-header {
							position: absolute;
							top: 14px;
							left: 20px;
							width: 90px;
							height: 26px;
							border-radius: 20px;
							background: var(--color-main-active);
							text-align: center;
							line-height: 26px;
							color: #fff;
							font-family: YouSheBiaoTiHei;
							font-style: Regular;
							font-size: 20px;
							font-weight: 400;
							line-height: 26px;
							letter-spacing: 0px;
						}

						.box3Chart {
							width: 412px;
							height: 368px;
						}
					}
				}
			}
		}
	}
}

.area1 {
	border: 1px solid rgba(217, 247, 190, 1) !important;
	background: rgba(246, 255, 237, 1) !important;
	color: rgba(56, 158, 13, 1) !important;
}

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

.area3 {
	border: 1px solid rgba(145, 202, 255, 1) !important;
	background: rgba(230, 244, 255, 1) !important;
	color: rgba(22, 119, 255, 1) !important;
}

.area4 {
	border: 1px solid rgba(173, 198, 255, 1) !important;
	background: rgba(240, 245, 255, 1) !important;
	color: rgba(47, 84, 235, 1) !important;
}

.area5 {
	border: 1px solid rgba(211, 173, 247, 1) !important;
	background: rgba(249, 240, 255, 1) !important;
	color: rgba(114, 46, 209, 1) !important;
}
</style>
