<template>
	<div class="content-wrapper">
		<div class="header" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
			<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">
							<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">
									<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">
									<el-pagination
										background
										layout="prev, pager, next"
										:total="box2Total"
										:page-size="box2PageSize"
										v-model:current-page="box2CurrentPage"
										@current-change="handleGetBox2DataList"
										size="small"
										:pager-count="6"
									/>
								</div>
							</div>
							<div class="right">
								<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">
									{{ `${box2DetailInfo?.postDate} · ${box2DetailInfo?.orgNameList?.toString()} · 行政令` }}
								</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">
									<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="6"
									/>
								</div>
							</div>
							<div class="right">
								<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 class="inner-box2">
							<div class="chart-header">{{ "关键词云" }}</div>
							<div class="box3Chart" id="box3Chart"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

const activeDate = inject("activeDate");

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;
		}
	} catch (error) {}
};

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);
		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);
	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;
		}
	} catch (error) {}
};

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);
	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);
	}
};

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;
					overflow-y: auto;
					background: rgba(255, 255, 255, 0.65);
					.box1-item {
						width: 430px;
						padding: 12px 0;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(234, 236, 238, 1);

						margin: 0 auto;
						display: flex;
						.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;
							}
							.content {
								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: justify;
							}
							.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;
							.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;
								max-height: 170px;
								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;
								overflow-y: auto;
							}
							.area-box {
								width: 283px;
								margin: 0 auto;
								margin-top: 8px;
								// 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;
							.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;
								max-height: 170px;
								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;
								overflow-y: auto;
							}
							.area-box {
								width: 283px;
								margin: 0 auto;
								margin-top: 8px;
								// 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>
