<template>
	<div class="content-wrapper">
		<div class="header">
			<div class="header-arrow-left">
				<img src="../../assets/left-btn.png" alt="" />
			</div>
			<div class="header-arrow-right">
				<img src="../../assets/right-btn.png" alt="" />
			</div>
			<div
				class="header-item"
				:class="{
					headerItem1: index === 0,
					headerItem2: index === 1,
					headerItem3: index === 2,
					headerItem4: index === 3,
					headerItem5: index === 4
				}"
				v-for="(item, index) in headerList"
				:key="index"
			>
				<div class="name">{{ item.name }}</div>
				<div class="num">{{ item.value }}</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.title }}</div>
								<div class="content">{{ item.content }}</div>
								<div class="tag-box">
									<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">{{ val }}</div>
								</div>
								<div class="box1-item-right-footer">
									<div class="time">{{ item.time }}</div>
									<div class="area-box">
										<div class="area" v-for="(vall, idxx) in item.areaList" :key="idxx">{{ vall.name }}</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.title }}</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"
									/>
								</div>
							</div>
							<div class="right">
								<div class="title">{{ box2DataList[box2LeftActiveIndex].title }}</div>
								<div class="tag-box">
									<div
										class="tag"
										v-for="(item, index) in box2DataList[box2LeftActiveIndex].tagList"
										:key="index"
									>
										{{ item }}
									</div>
								</div>
								<div class="content">{{ box2DataList[box2LeftActiveIndex].content }}</div>
								<div class="area-box">
									<div
										class="area"
										v-for="(item, index) in box2DataList[box2LeftActiveIndex].areaList"
										:key="index"
									>
										{{ item.name }}
									</div>
								</div>
								<div class="footer">
									{{
										`${box2DataList[box2LeftActiveIndex].time} · ${box2DataList[box2LeftActiveIndex].org} · ${box2DataList[box2LeftActiveIndex].type}`
									}}
								</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.title }}</div>
									</div>
								</div>
								<div class="left-footer">
									<el-pagination
										background
										layout="prev, pager, next"
										:total="box3Total"
										:page-size="box3PageSize"
										v-model:current-page="box3CurrentPage"
										@current-change="handleGetBox3DataList"
									/>
								</div>
							</div>
							<div class="right">
								<div class="title">{{ box3DataList[box3LeftActiveIndex].title }}</div>
								<div class="tag-box">
									<div
										class="tag"
										v-for="(item, index) in box3DataList[box3LeftActiveIndex].tagList"
										:key="index"
									>
										{{ item }}
									</div>
								</div>
								<div class="content">{{ box3DataList[box3LeftActiveIndex].content }}</div>
								<div class="area-box">
									<div
										class="area"
										v-for="(item, index) in box3DataList[box3LeftActiveIndex].areaList"
										:key="index"
									>
										{{ item.name }}
									</div>
								</div>
								<div class="footer">
									{{
										`${box3DataList[box3LeftActiveIndex].time} · ${box3DataList[box3LeftActiveIndex].org} · ${box3DataList[box3LeftActiveIndex].type}`
									}}
								</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 } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./uitls/worldCloudChart";

const headerList = ref([
	{
		name: "科研仪器",
		value: 132
	},
	{
		name: "科研机构",
		value: 104
	},
	{
		name: "科研人才",
		value: 177
	},
	{
		name: "科研数据",
		value: 60
	},
	{
		name: "科研经费",
		value: 45
	}
]);

const box1DataList = ref([
	{
		title: '更新"中国涉军企业清单"(NS-CMIC List)',
		content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
		tagList: ["科研机构", "科研经费"],
		time: "2025年12月18日",
		areaList: [
			{
				name: "量子科技"
			},
			{
				name: "量子科技"
			}
		]
	},
	{
		title: '更新"中国涉军企业清单"(NS-CMIC List)',
		content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
		tagList: ["科研机构", "科研经费"],
		time: "2025年12月18日",
		areaList: [
			{
				name: "量子科技"
			},
			{
				name: "量子科技"
			}
		]
	},
	{
		title: '更新"中国涉军企业清单"(NS-CMIC List)',
		content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
		tagList: ["科研机构", "科研经费"],
		time: "2025年12月18日",
		areaList: [
			{
				name: "量子科技"
			},
			{
				name: "量子科技"
			}
		]
	},
	{
		title: '更新"中国涉军企业清单"(NS-CMIC List)',
		content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
		tagList: ["科研机构", "科研经费"],
		time: "2025年12月18日",
		areaList: [
			{
				name: "量子科技"
			},
			{
				name: "量子科技"
			}
		]
	}
]);

const box2DataList = ref([
	{
		title: "防止受关注国家访问美国敏感数据的规定",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	},
	{
		title: "防止受关注国家访问美国敏感数据的规定2",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	},
	{
		title: "防止受关注国家访问美国敏感数据的规定3",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	},
	{
		title: "防止受关注国家访问美国敏感数据的规定4",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	},
	{
		title: "防止受关注国家访问美国敏感数据的规定5",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	}
]);
const box2LeftActiveIndex = ref(0);

const handleClickBox2Item = index => {
	box2LeftActiveIndex.value = index;
};

const box2Total = ref(25);
const box2CurrentPage = ref(1);
const box2PageSize = ref(5);
const handleGetBox2DataList = async () => {};

const box2ChartData = ref([
	{
		name: "限制中国获取能源技术",
		value: 35
	},
	{
		name: "加强美国在核能领域得到领导力",
		value: 12
	},
	{
		name: "关注核聚变能源研究",
		value: 15
	},
	{
		name: "发展风能",
		value: 21
	},
	{
		name: "实施能源税收延期",
		value: 18
	},
	{
		name: "限制采购中国产电池",
		value: 5
	},
	{
		name: "评估中美现代化技术",
		value: 11
	},
	{
		name: "应对中国制造2025战略",
		value: 9
	},
	{
		name: "抵制外国人才争夺",
		value: 16
	}
]);

const box3DataList = ref([
	{
		title: "防止受关注国家访问美国敏感数据的规定",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	},
	{
		title: "防止受关注国家访问美国敏感数据的规定2",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	},
	{
		title: "防止受关注国家访问美国敏感数据的规定3",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	},
	{
		title: "防止受关注国家访问美国敏感数据的规定4",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	},
	{
		title: "防止受关注国家访问美国敏感数据的规定5",
		tagList: ["科研机构", "科研经费"],
		content:
			'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
		areaList: [
			{
				name: "人工智能"
			},
			{
				name: "生物科技"
			}
		],
		time: "2025年12月18日",
		org: "司法部",
		type: "行政令"
	}
]);
const box3LeftActiveIndex = ref(0);

const handleClickBox3Item = index => {
	box3LeftActiveIndex.value = index;
};

const box3Total = ref(25);
const box3CurrentPage = ref(1);
const box3PageSize = ref(5);
const handleGetBox3DataList = async () => {};

const box3ChartData = ref([
	{
		name: "限制中国获取能源技术",
		value: 35
	},
	{
		name: "加强美国在核能领域得到领导力",
		value: 12
	},
	{
		name: "关注核聚变能源研究",
		value: 15
	},
	{
		name: "发展风能",
		value: 21
	},
	{
		name: "实施能源税收延期",
		value: 18
	},
	{
		name: "限制采购中国产电池",
		value: 5
	},
	{
		name: "评估中美现代化技术",
		value: 11
	},
	{
		name: "应对中国制造2025战略",
		value: 9
	},
	{
		name: "抵制外国人才争夺",
		value: 16
	}
]);

onMounted(() => {
	let box2Chart = getWordCloudChart(box2ChartData.value);
	setChart(box2Chart, "box2Chart");

	let box3Chart = getWordCloudChart(box3ChartData.value);
	setChart(box3Chart, "box3Chart");
});
</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%;
			}
		}

		.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;
								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(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 {
								height: 80px;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
						.right {
							width: 320px;
							.title {
								width: 283px;
								min-height: 24px;
								max-height: 48px;
								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;
								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;
							}
							.area-box {
								width: 283px;
								margin: 0 auto;
								margin-top: 28px;
								height: 24px;
								display: flex;
								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(135, 232, 222, 1);
									background: rgba(230, 255, 251, 1);
									color: rgba(19, 168, 168, 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 {
								height: 80px;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
						.right {
							width: 320px;
							.title {
								width: 283px;
								min-height: 24px;
								max-height: 48px;
								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;
								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;
							}
							.area-box {
								width: 283px;
								margin: 0 auto;
								margin-top: 28px;
								height: 24px;
								display: flex;
								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(135, 232, 222, 1);
									background: rgba(230, 255, 251, 1);
									color: rgba(19, 168, 168, 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;
						}
					}
				}
			}
		}
	}
}
</style>
