<template>
	<div class="home-wrapper">

		<div class="home-box" :class="{ scrollHomeBox: isShow }" ref="containerRef">
			<!-- <div class="home-header" v-show="!isShow">
				<div class="header-item">国家科技安全</div>
				<div class="header-item">></div>
				<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
				<div class="header-item">></div>
				<div class="header-item">科技人物观点</div>
			</div> -->
			<div class="home-top-bg"></div>
			<div class="home-main">
				<div class="home-main-header" v-show="!isShow">
					<!-- <div class="home-main-header-top">
						<div class="header-item">国家科技安全</div>
						<div class="header-item">></div>
						<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
						<div class="header-item">></div>
						<div class="header-item">科技人物观点</div>
					</div> -->
					<div class="home-main-header-center">
						<SearchContainer style="margin-bottom: 0;margin-top: 48px; " v-if="containerRef"
							placeholder="搜索科技人物及观点" :containerRef="containerRef" areaName="人物" />
						<!-- <el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
						<div class="search">
							<div class="search-icon">
								<img src="./assets/images/search-icon.png" alt="" />
							</div>
							<div class="search-text">搜索</div>
						</div> -->
					</div>
					<!-- <div class="home-main-header-footer">
						<div class="home-main-header-footer-item">
							<div class="item-top">843</div>
							<div class="item-footer">政府官员</div>
						</div>
						<div class="home-main-header-footer-item">
							<div class="item-top">131</div>
							<div class="item-footer">科技企业领袖</div>
						</div>
						<div class="home-main-header-footer-item">
							<div class="item-top">633</div>
							<div class="item-footer">顶级科学家</div>
						</div>
						<div class="home-main-header-footer-item">
							<div class="item-top">312</div>
							<div class="item-footer">国会议员</div>
						</div>
					</div> -->
					<!-- <div class="home-main-header-btn-box">
						<div class="btn" @click="handleToPosi('position1')">
							<div class="btn-text">{{ "最新动态" }}</div>
							<div class="btn-icon">
								<img src="@/assets/icons/arrow-right-icon.png" alt="" />
							</div>
						</div>
						<div class="btn" @click="handleToPosi('position2')">
							<div class="btn-text">{{ "言论动态" }}</div>
							<div class="btn-icon">
								<img src="@/assets/icons/arrow-right-icon.png" alt="" />
							</div>
						</div>
						<div class="btn" @click="handleToPosi('position3')">
							<div class="btn-text">{{ "数据总览" }}</div>
							<div class="btn-icon">
								<img src="@/assets/icons/arrow-right-icon.png" alt="" />
							</div>
						</div>
						<div class="btn" @click="handleToPosi('position4')">
							<div class="btn-text">{{ "资源库" }}</div>
							<div class="btn-icon">
								<img src="@/assets/icons/arrow-right-icon.png" alt="" />
							</div>
						</div>
					</div> -->
				</div>
				<div class="home-main-center">
					<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
					<div class="center-top">
						<OverviewMainBox title="人物新闻动态" width="1064px" height="460px"
							@to-detail="handleClcikToCharacter(curnews.personId, curnews.name)">
							<!-- 自定义左上角图标插槽 -->
							<template #headerIcon>
								<img src="./assets/images/personNewIcon.svg " alt="" />
							</template>

							<!-- 主内容区域 -->
							<div class="box1-wrapper">
								<div class="box1-left" @click="handleSwithCurBill('left')">
									<img src="./assets/images/box1-left.png" alt="" />
								</div>
								<div class="box1-right" @click="handleSwithCurBill('right')">
									<img src="./assets/images/box1-right.png" alt="" />
								</div>

								<div class="box1-main">
									<el-carousel ref="carouselRef" height="354px" :autoplay="true" :interval="3000"
										arrow="never" indicator-position="none" @change="handleCarouselChange">
										<el-carousel-item v-for="person in newsDynamics" :key="person.personId">
											<div class="carousel-content">
												<!-- 左侧：头像 -->
												<div class="avatar">
													<img :src="person.imageUrl" alt="人物头像" />
												</div>

												<!-- 事件列表 -->
												<div class="events">
													<!-- 头部区域 -->
													<div class="header">
														<div class="info">
															<div>
																<h2>{{ person.name }}</h2>
																<p class="newtitle">{{ person.positionTitle }}</p>
															</div>
															<!-- 使用 AreaTag 组件替换 -->
															<div class="tag-group">
																<AreaTag v-for="item in person.personTypeList"
																	:key="item.typeId" :tag-name="item.typeName" />
															</div>
														</div>
													</div>
													<div class="line"></div>

													<div class="timeline-wrapper">
														<el-timeline>
															<el-timeline-item
																v-for="(activity, index) in person.newsList"
																:key="index" placement="top" type="primary"
																:hollow="true">
																<template #dot>
																	<div class="timeline-dot">
																		<div class="dot-left">
																			<img src="./assets/images/dot1.png" alt=""
																				class="dot-icon" />
																			<div class="dot-date">{{ activity.newsDate
																			}}</div>
																		</div>
																		<img src="./assets/images/dot2.png" alt=""
																			class="dot-arrow" />
																	</div>
																</template>
																{{ activity.newsContent }}
															</el-timeline-item>
														</el-timeline>
													</div>
												</div>
											</div>
										</el-carousel-item>
									</el-carousel>
								</div>
							</div>
						</OverviewMainBox>

						<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal" postDate="signalTime"
							name="signalTitle" riskLevel="signalLevel" />
					</div>
					<DivideHeader id="position2" class="divide-header" :titleText="'言论动态'"></DivideHeader>
					<div class="center-center">
						<div class="box3">
							<div class="box3-header">
								<div class="box3-header-left">
									<div class="box3-header-icon">
										<img src="./assets/images/TechnologyFigures-icon3.png" alt="" />
									</div>
									<!-- <div class="box3-header-title">{{ "人物动向" }}</div> -->
									<div class="header-title"
										style="width: 1560px; display: flex; justify-content: space-between; margin-top: 10px">
										<div class="box3-header-title">
											{{ "人物动向" }}
										</div>
										<div style="display: flex; gap: 8px; margin-right: 12px">
											<div v-for="value in peoDateList"
												:class="peoDate !== value ? 'btn-box-samll' : 'btn-box-select-samll'"
												@click="ChooseTime(value)">
												{{ value }}
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="box3-main">
								<TimelineMap :peoDate="peoDate" />
							</div>
						</div>
						<div class="box4">
							<div class="box4-header">
								<div class="header-icon">
									<img src="./assets/images/header-message.png" alt="" />
								</div>
								<div class="header-title"
									style="width: 1595px; display: flex; justify-content: space-between; margin-top: 10px">
									<div>
										{{ "重要人物言论及立场" }}
									</div>
									<div style="display: flex; gap: 8px; margin-right: 12px">
										<div v-for="value in areaTypeList"
											:class="fieldSelected !== value.name ? 'btn-box-samll' : 'btn-box-select-samll'"
											@click="ChooseArea(value)">
											{{ value.name }}
										</div>
									</div>
								</div>
							</div>
							<div class="box4-main">
								<SpeechStance :fieldSelected="fieldSelected" :areaId="areaId" />
							</div>
						</div>
					</div>
					<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
					<div class="center-footer">
						<div class="box5">
							<div class="box5-header">
								<div class="box5-header-left">
									<div class="box5-header-icon">
										<img src="./assets/images/TechnologyFigures-icon1.png" alt=""
											style="margin: 13px 21px 13px 21px; height: 22px" />
										<div class="box5-header-title">{{ "科技人物观点词云" }}</div>
									</div>
									<div>
										<div style="height: 45px; display: flex; align-items: center">
											<el-select v-model="wordCloudvalue" style="width: 120px; height: 28px"
												@change="handleBox5Change">
												<el-option v-for="item in yearList" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
											<el-select v-model="wordCloudfield"
												style="width: 120px; height: 28px; margin: 10px 24px 10px 5px"
												@change="handleBox5areaChange">
												<el-option v-for="item in fieldSelectList" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
										</div>
									</div>
								</div>
							</div> 
							<div class="box5-main"  ><WordCloudChart v-if="WordLoading" :data="CharacterOpinionWordCloud" /></div>
						</div>
						<div class="box6">
							<div class="box6-header" style="width: 790px">
								<div class="header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="header-title"
									style="display: flex; width: 740px; justify-content: space-between; align-items: center">
									<div>
										{{ "科技人物观点涉及领域变化趋势" }}
									</div>

									<el-select v-model="areaSelect" style="width: 120px; height: 28px">
										<el-option v-for="item in options" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</div>
							</div>
							<div class="box6-main" id="box6Chart"></div>
						</div>
					</div>
					<div class="center-footer1">
						<div class="box7">
							<div class="box7-header">
								<div class="box7-header-left">
									<div class="box7-header-icon">
										<img src="./assets/images/TechnologyFigures-icon2.png" alt="" />
									</div>
									<div class="box7-header-title">{{ "科技人物类型" }}</div>
								</div>
							</div>
							<div class="box7-main" id="box7Chart"></div>
						</div>
						<div class="box8">
							<div class="box8-header">
								<div class="box8-header-left">
									<div class="box8-header-icon">
										<img src="./assets/images/TechnologyFigures-icon2.png" alt="" />
									</div>
									<div class="box8-header-content">
										<div class="box8-header-title">观点统计</div>
										<div class="box8-header-filters">
											<el-select v-model="viewSelect" placeholder="请选择类型"
												@change="handlePersonTypeChange">
												<el-option v-for="item in PersonType" :key="item.typeId"
													:label="item.typeName" :value="item.typeName" />
											</el-select>
											<el-select v-model="yearSelect" placeholder="请选择年份">
												<el-option v-for="item in yearList" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
										</div>
									</div>
								</div>
							</div>
							<div class="box8-main">
								<PersonTable :persontypeid="persontypeid" :yearSelect="yearSelect" />
							</div>
						</div>
					</div>
				</div>

				<div class="home-main-footer">
					<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
					<div class="home-main-footer-header">
						<div class="btn-box">
							<div class="btn" :class="{ btnActive: activeCate === cate.typeName }"
								v-for="(cate, index) in categoryList" :key="index" @click="handleClickCate(cate)">
								{{ cate.typeName }}
							</div>
						</div>
					</div>
					<div class="home-main-footer-main">
						<SourceLibrary :typeId="typeId" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import RiskSignal from "@/components/base/riskSignal/index.vue";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import scrollToTop from "@/utils/scrollToTop";
import DivideHeader from "@/components/DivideHeader.vue";
import OverviewMainBox from '@/components/base/boxBackground/overviewMainBox.vue'
import setChart from "@/utils/setChart";
import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
import {
	getnewsDynamics,
	getBillRiskSignal,
	getCharacterOpinionWordCloud,
	getOptionAreaChange,
	getPersonTypeCount,
	getPersonSummaryInfo, getareaType, getPersonType
} from "@/api/technologyFigures/technologyFigures"

// 图表工具函数（仅保留用到的）
import getWordCloudChart from "./utils/worldCloudChart";
import getMultiLineChart from "./utils/multiLineChart";
import getDonutChart from "./utils/donutChart.js";

// 组件
import TimelineMap from "./component/TimelineMap.vue";
import PersonNewsCard from "./component/PersonNewsCard.vue";
import SpeechStance from "./component/speechStance.vue";
import PersonTable from "./component/PersonTable.vue";
import SourceLibrary from "./component/SourceLibrary.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";

const router = useRouter();


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

// 当前人物新闻动态
const curnews = ref({
	imageUrl: "",
	name: "",
	newsList: [],
	personId: "",
	personTypeList: [],
	positionTitle: "",
});

const curnewsDynamicsIndex = ref(0);
const handleCarouselChange = index => {
	curnewsDynamicsIndex.value = index;
	if (newsDynamics.value && newsDynamics.value.length > 0) {
		curnews.value = newsDynamics.value[index];
	}
};




// 获取人物新闻动态
const newsDynamics = ref([]);
const handlgetnewsDynamicsFn = async () => {
	try {
		const res = await getnewsDynamics();
		console.log("人物新闻动态", res);
		newsDynamics.value = res.data;
	} catch (error) {
		console.error(error);
	}
};


// 获取人物类别
const PersonType = ref([]);
const handlgetPersonTypeFn = async () => {
	try {
		const res = await getPersonType();
		console.log("人物类别", res);
		PersonType.value = res.data;
		categoryList.value = res.data;
		categoryList.value.unshift({ typeId: '000', typeName: '全部人物' });
	} catch (error) {
		console.error(error);
	}
};

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

// 获取行业领域
const areaTypeList = ref([]);
const handlePersonTypeChange = (typeName) => {
  const selectedType = PersonType.value.find(item => item.typeName === typeName)
  if (selectedType) {
    selectpersontype(selectedType)
  }
}
const handlegetareaTypeFn = async () => {
	try {
		const res = await getareaType();
		console.log("行业领域", res);
		if (res.code === 200) {
			areaTypeList.value = res.data.map(item => {
				return {
					id: item.id,
					name: item.name
				}
			});
			areaTypeList.value.unshift({ id: "0", name: "全部领域" });
			fieldSelectList.value = areaTypeList.value.map(item => {
				return {
					label: item.name,
					value: item.id
				}
			})
		}
	} catch (error) { }
};

const WordLoading=ref(false)

// 获取科技人物观点词云
const CharacterOpinionWordCloud = ref([]);

const handlegetCharacterOpinionWordCloudFn = async () => {
	const params = {
		year: wordCloudvalue.value,
	};
	if (wordCloudfield.value !== "0") {
		params.areaId = wordCloudfield.value;
	}
	WordLoading.value=false
	try {
		const res = await getCharacterOpinionWordCloud(params);
		console.log("科技人物观点词云", res);
		CharacterOpinionWordCloud.value = [];
		if (res.code === 200) {
			CharacterOpinionWordCloud.value = res.data.map(item => {
				return {
					name: item.option,
					value: item.count
				}
			
			});
				WordLoading.value=true
		}
	} catch (error) { }
};

// 科技人物观点涉及领域变化趋势
const box6Chart = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{ name: "人工智能", value: [150, 70, 80, 90, 75, 85, 100, 140, 130, 150, 190, 170] },
		{ name: "集成电路", value: [70, 85, 120, 115, 100, 120, 160, 160, 160, 160, 165, 175] },
		{ name: "量子科技", value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 15] },
		{ name: "生物科技", value: [5, 0, 10, 15, 18, 20, 25, 30, 30, 35, 40, 45] },
		{ name: "通信网络", value: [40, 35, 45, 48, 45, 45, 50, 55, 50, 50, 55, 50] },
		{ name: "能源", value: [90, 70, 75, 70, 65, 75, 80, 80, 75, 85, 80, 70] }
	]
});
const box6HasData = ref(true);
const handlegetOptionAreaChangeFn = async () => {
	const params = {
		startTime: "2015-01-01"
	};
	try {
		const res = await getOptionAreaChange(params);
		console.log("科技人物观点涉及领域变化趋势", res);
		if (res.code === 200 && res.data && res.data.length > 0) {
			box6HasData.value = true;
			const sortedData = res.data.sort((a, b) => a.year.localeCompare(b.year));

			//提取年份作为 title
			const years = sortedData.map(item => item.year);
			//收集所有行业名称
			const allIndustries = new Set();
			sortedData.forEach(yearData => {
				yearData.industryList.forEach(industry => {
					allIndustries.add(industry.industryName);
				});
			});
			//构建结果数据
			const industryMap = new Map();
			//初始化每个行业的 value 数组
			Array.from(allIndustries).forEach(industryName => {
				industryMap.set(industryName, new Array(years.length).fill(0));
			});
			// 填充每个行业每年的数据
			sortedData.forEach((yearData, yearIndex) => {
				yearData.industryList.forEach(industry => {
					const industryValues = industryMap.get(industry.industryName);
					if (industryValues) {
						industryValues[yearIndex] = industry.amount;
					}
				});
			});
			box6Chart.value = {
				title: years,
				data: Array.from(industryMap.entries()).map(([name, value]) => ({
					name,
					value
				}))
			};

		}
	} catch (error) { }
};

// 科技人物类型
const chart7Data = ref({
	name: ["国会议员", "行政主官", "科技领袖", "顶尖科学家", "其他"],
	value: [482, 41, 83, 201, 25]
});
const handlegetPersonTypeCountFn = async () => {
	try {
		const res = await getPersonTypeCount();
		console.log("科技人物类型", res);
		chart7Data.value = {
			name: res.data.map(item => item.typeName),
			value: res.data.map(item => item.countPerson)
		};
		console.log("chart7Data", chart7Data);
	} catch (error) {
		console.error(error);
	}
};


// 搜索输入
const input = ref("");

// 返回首页
const handleBackHome = () => {
	router.push({ path: "/overview" });
};

const carouselRef = ref(null);

// 切换人物新闻动态

const handleSwithCurBill = name => {
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}

};

const handleSearch = () => {
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: input.value,
			areaName: "人物"
		}
	});
	window.open(curRoute.href, "_blank");
};

const handleToPosi = id => {
	const element = document.getElementById(id);
	if (element && containerRef.value) {
		const containerRect = containerRef.value.getBoundingClientRect();
		const elementRect = element.getBoundingClientRect();
		const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
		containerRef.value.scrollTo({
			top: top,
			behavior: "smooth"
		});
	}
};

const ChooseTime = value => {
	peoDate.value = value;
}

const areaId = ref();
const ChooseArea = value => {
	fieldSelected.value = value.name;
	areaId.value = value.id;
}

const handleBox5Change = async () => {
	await handlegetCharacterOpinionWordCloudFn();
	// const wordCloudChart = getWordCloudChart(CharacterOpinionWordCloud.value);
	// console.log(wordCloudChart,'wordCloudChart')
	// setChart(wordCloudChart, "box5Chart");
}

const handleBox5areaChange = async () => {
	await handlegetCharacterOpinionWordCloudFn();
	// const wordCloudChart = getWordCloudChart(CharacterOpinionWordCloud.value);
	// setChart(wordCloudChart, "box5Chart");

}

const persontypeid = ref();
const selectpersontype = value => {
	viewSelect.value = value.typeName;
	persontypeid.value = value.typeId;
}

// 跳转人物主页
const handleClcikToCharacter = async (id, name) => {
	window.sessionStorage.setItem('curTabName', name)
	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
	let type = 0;
	let personTypeName = "";

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

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

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

// 风险信号
const warningList = ref([
	{ title: "关于对中华人民共和国合成阿片类药物供应链...", time: "一天前", status: "特别重大" },
	{ title: "关于调整汽车及汽车零部件进口的公告", time: "一天前", status: "特别重大" },
	{ title: "关于调整钢铁进口的公告", time: "一天前", status: "重大风险" },
	{ title: "关于使用互惠关税规范进口以纠正导致大规模...", time: "一天前", status: "重大风险" },
	{ title: "关于修订对中华人民共和国低价值进口商品适...", time: "一天前", status: "一般风险" }
]);

//人物动向
const peoDate = ref("本周");
const peoDateList = ["今天", "昨天", "近三天", "本周", "本月"];
//重要人物言论及立场选择按钮
const fieldSelected = ref("全部领域");

const fieldSelectList = ref([
	{
		label: "全部领域",
		value: "0"
	},
	{
		label: "人工智能",
		value: "1"
	},
	{
		label: "生物科技",
		value: "2"
	},
	{
		label: "新一代信息技术",
		value: "3"
	},
	{
		label: "量子科技",
		value: "4"
	},
	{
		label: "新能源",
		value: "5"
	},
	{
		label: "集成电路",
		value: "6"
	},
	{
		label: "海洋",
		value: "7"
	},
	{
		label: "先进制造",
		value: "8"
	},
	{
		label: "新材料",
		value: "9"
	},
	{
		label: "航空航天",
		value: "10"
	},
	{
		label: "深海",
		value: "11"
	},
	{
		label: "极地",
		value: "12"
	},
	{
		label: "太空",
		value: "13"
	},
	{
		label: "核",
		value: "14"
	}
]);
const fields = [
	"全部领域",
	"集成电路",
	"能源",
	"生物科技",
	"量子科技",
	"人工智能",
	"通信网络",
	"航空航天",
	"海洋",
	"新材料",
	"先进制造"
];
const yearList = ref([
	{
		label: "2025年",
		value: "2025"
	},
	{
		label: "2024年",
		value: "2024"
	},
	{
		label: "2023年",
		value: "2023"
	},
	{
		label: "2022年",
		value: "2022"
	}
]);
// 资源库分类
const categoryList = ref(["全部人物", "国会议员", "行政主官", "科技领袖", "顶尖科学家"]);
const activeCate = ref("全部人物");

const typeId = ref("000");
const handleClickCate = cate => {
	activeCate.value = cate.typeName;
	typeId.value = cate.typeId;
};

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

// === 图表数据 ===


// 词云数据
const wordCloudData = ref([
	{ name: "人工智能 (AI)", value: 100 },
	{ name: "进行可再生能源税收减免", value: 85 },
	{ name: "减少燃料对外依赖", value: 80 },
	{ name: "评估中美现代化技术", value: 75 },
	{ name: "应对中国制造2025战略", value: 70 },
	{ name: "加强供应链风险管理", value: 68 },
	{ name: "补贴和税收抵免", value: 65 },
	{ name: "评估中美能源技术", value: 60 },
	{ name: "实施能源税收延期", value: 58 },
	{ name: "投资基础设施", value: 55 },
	{ name: "禁止资助中国能源项目", value: 53 },
	{ name: "限制采购中国产电池", value: 50 },
	{ name: "加强美国在核能领域得到领导力", value: 48 },
	{ name: "技术出口限制", value: 45 },
	{ name: "出口管制与投资审查", value: 42 },
	{ name: "供应链调整", value: 40 },
	{ name: "左岸外包", value: 38 },
	{ name: "空域主权与安全", value: 36 },
	{ name: "抵制外国人才争夺", value: 34 },
	{ name: "无人机先进空中交通", value: 32 },
	{ name: "能源与基础设施", value: 30 }
]);
const wordCloudfield = ref("0");
const wordCloudvalue = ref("2025");
const yearSelect = ref("2025");
const areaSelect = ref("近十年");
const options = [
	{
		value: "近十年",
		label: "近十年"
	},
	{
		value: "近五年",
		label: "近五年"
	}
];


const viewOption = ref(["行政主管", "国会议员", "科技领袖", "顶尖科学家"]);
const viewSelect = ref("国会议员");


onMounted(async () => {

	await handlgetnewsDynamicsFn();
	curnews.value = newsDynamics.value[0];
	handleGetBillRiskSignalFn();
	await handlegetCharacterOpinionWordCloudFn();
	await handlegetOptionAreaChangeFn();
	await handlegetPersonTypeCountFn();
	handlegetareaTypeFn();
	await handlgetPersonTypeFn();

	// 词云
	const wordCloudChart = getWordCloudChart(CharacterOpinionWordCloud.value);
	setChart(wordCloudChart, "box5Chart");

	// 领域趋势
	const chart6 = getMultiLineChart(box6Chart.value.title, ...box6Chart.value.data.map(d => d.value));
	setChart(chart6, "box6Chart");

	// 人物类型
	const chart7 = getDonutChart(chart7Data.value.name, chart7Data.value.value, true);
	setChart(chart7, "box7Chart");
});
</script>

<style lang="scss" scoped>
/* 样式保持不变（已无冗余） */
:deep(.el-input__wrapper) {
	box-shadow: none;
}

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

	// overflow-y: hidden;
	.search-header {
		width: 100%;
		height: 144px;
		background: #fff;
		overflow: hidden;

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

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

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

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

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

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

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

			.btn {
				display: flex;
				align-items: center;
				gap: 9px;
				width: 160px;
				height: 48px;
				border: 1px solid #aed6ff;
				box-sizing: border-box;
				border-radius: 24px;
				background: #e7f3ff;
				cursor: pointer;
				position: relative;

				&:hover {
					background: #cae3fc;
				}

				.btn-text {
					width: 80px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 400;
					line-height: 48px;
					margin-left: 36px;
					text-align: center;
				}

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

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

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

	.home-box {
		width: 100%;
		height: 100%;
		// background: url("./assets/images/background.png");
		// background-size: 100% 100%;
		overflow-y: auto;
		position: relative;

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

		// .home-header {
		// 	height: 64px;
		// 	color: #fff;
		// 	font-family: Microsoft YaHei;
		// 	font-size: 20px;
		// 	font-weight: 700;
		// 	line-height: 26px;
		// 	line-height: 64px;
		// 	background: url("./assets/images/header-bg.png");
		// 	box-sizing: border-box;
		// 	padding-left: 160px;
		// 	display: flex;
		// 	.header-item {
		// 		margin: 0 3px;
		// 	}
		// 	.back-item {
		// 		cursor: pointer;
		// 		&:hover {
		// 			color: #ccc;
		// 		}
		// 	}
		// }
		.home-main {
			width: 1600px;
			margin: 0 auto;
			// margin-top: 48px;

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

				.home-main-header-top {
					box-sizing: border-box;
					width: 100%;
					height: 64px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 64px;
					background: url("./assets/images/header-bg.png");
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 700;
					color: #fff;
					padding-left: 160px;
					display: flex;

					.header-item {
						margin: 0 3px;
					}

					.back-item {
						cursor: pointer;

						&:hover {
							color: #ccc;
						}
					}
				}



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

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

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

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

				.home-main-header-btn-box {
					width: 688px;
					margin: 0 auto;
					margin-top: 39px;
					display: flex;
					justify-content: space-between;

					.btn {
						display: flex;
						align-items: center;
						gap: 9px;
						width: 160px;
						height: 48px;
						border: 1px solid #aed6ff;
						box-sizing: border-box;
						border-radius: 24px;
						background: #e7f3ff;
						cursor: pointer;
						position: relative;

						&:hover {
							background: #cae3fc;
						}

						.btn-text {
							width: 83px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 400;
							line-height: 48px;
							margin-left: 36px;
							text-align: center;
						}

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

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

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

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

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

						.box1-left {
							position: absolute;
							left: 0;
							top: 228px;
							width: 24px;
							height: 48px;
							cursor: pointer;

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

						.box1-right {
							position: absolute;
							right: 0;
							top: 228px;
							width: 24px;
							height: 48px;
							cursor: pointer;

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

						.box1-header {
							height: 48px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							display: flex;
							justify-content: space-between;
							padding-left: 31px;
							padding-right: 41px;

							.box1-header-left {
								display: flex;

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

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

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

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

						.box1-main {
							width: 1009px;
							height: 354px;
							margin-top: 28px;
							margin-left: 40px;
						}
					}

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

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

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

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

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

								.text {
									margin-left: 15px;
									margin-top: 13px;
									height: 22px;
									color: #fff;
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
								}

								.num {
									width: 24px;
									height: 20px;
									line-height: 20px;
									text-align: center;
									color: rgba(255, 255, 255, 1);
									font-family: Microsoft YaHei;
									font-size: 12px;
									margin-left: 15px;
									margin-top: 14px;
									border-radius: 100px;
									background: rgba(255, 255, 255, 0.3);
								}
							}
						}

						.box2-main {
							margin-top: 2px;
							height: 330px;
							overflow-y: auto;

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

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

								.itemLeftStatus1 {
									color: rgba(82, 196, 26, 1) !important;
									background: rgba(246, 255, 237, 1) !important;
								}

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

								.item-left {
									margin-top: 4px;
									margin-left: 2px;
									width: 40px;
									height: 40px;
									border-radius: 20px;
									background: rgba(255, 241, 240);
									color: rgba(245, 34, 45, 1);
									font-family: Microsoft YaHei;
									font-size: 12px;
									font-weight: 400;
									line-height: 14px;
									box-sizing: border-box;
									padding: 6px 4px;
									text-align: center;
								}

								.item-right {
									margin-left: 13px;
									width: 408px;
									height: 48px;
									border-bottom: 1px solid rgba(240, 242, 244, 1);
									display: flex;

									.text {
										width: 348px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 47px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.time {
										width: 100px;
										margin-left: 5px;
										line-height: 47px;
										color: rgba(132, 136, 142, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										text-align: center;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
							}
						}

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

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

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

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

				.center-center {
					width: 1600px;
					margin: 0 auto;
					margin-top: 21px;

					.box3 {
						width: 1600px;
						height: 640px;
						border-radius: 10px;
						box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
						background: rgba(255, 255, 255, 1);

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

							.box3-header-left {
								display: flex;

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

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

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

						.box3-main {
							height: 590px;
							overflow-y: auto;
							overflow-x: hidden;
							padding-top: 6px;
						}
					}

					.box4 {
						margin-top: 16px;
						width: 1600px;
						height: 460px;
						border-radius: 10px;
						box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
						background: rgba(255, 255, 255, 1);

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

							box-sizing: border-box;
							padding-left: 22px;
							position: relative;

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

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

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

						.box4-main {
							height: 402px;
							overflow-y: auto;
							box-sizing: border-box;
							padding-top: 8px;
						}
					}
				}

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

					.box5 {
						width: 792px;
						height: 460px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
						background: rgba(255, 255, 255, 1);

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

							position: relative;

							.box5-header-left {
								display: flex;
								width: 792px;
								justify-content: space-between;

								.box5-header-icon {
									display: flex;
								}

								.box5-header-title {
									width: 190px;
									color: rgba(5, 95, 194, 1);

									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									letter-spacing: 0px;
									text-align: left;
									line-height: 48px;
								}
							}
						}

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

					.box6 {
						width: 792px;
						height: 460px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
						background: rgba(255, 255, 255, 1);

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

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

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

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

						.box6-main {
							margin-top: 15px;
							height: 360px;
						}
					}
				}

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

					.box7 {
						width: 792px;
						height: 460px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
						background: rgba(255, 255, 255, 1);

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

							.box7-header-left {
								display: flex;

								.box7-header-icon {
									margin-top: 15px;
									margin-left: 2px;
									width: 19px;
									height: 19px;

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

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

						.box7-main {
							height: 405px;
							margin: 0 59px 0 59px;
						}
					}

					.box8 {
  width: 792px;
  height: 460px;
  box-sizing: border-box;
  border: 1px solid rgba(234, 236, 238, 1);
  border-radius: 10px;
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  background: rgba(255, 255, 255, 1);

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

    .box8-header-left {
      display: flex;
      width: 100%;

      .box8-header-icon {
        margin-top: 18px;
        margin-left: 2px;
        width: 19px;
        height: 19px;

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

      .box8-header-content {
        display: flex;
        width: 730px;
        justify-content: space-between;
        align-items: center;
      }

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

      .box8-header-filters {
        display: flex;
        gap: 10px;
        align-items: center;

        :deep(.el-select) {
          width: 120px;

          .el-input__wrapper {
            height: 28px;
          }
        }
      }
    }
  }

  .box8-main {
    width: 469px;
    height: 360px;
  }
}
				}
			}

			.home-main-footer {
				height: 1000px;


				.home-main-footer-header {
					width: 1600px;
					height: 42px;
					margin: 36px auto;
					display: flex;
					justify-content: space-between;

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

						.btn {
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 400;
							line-height: 42px;
							padding: 0 24px;
							border-radius: 21px;
							background: rgba(20, 89, 187, 0);
							margin-right: 20px;
							cursor: pointer;

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

						.btnActive {
							padding: 0 24px;
							border-radius: 21px;
							background: rgba(20, 89, 187, 1);
							color: #fff;
							font-weight: 700;

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

				.home-main-footer-main {
					width: 1600px;
					margin-bottom: 20px;
					height: 985px;
					margin: 0 auto;
					box-sizing: border-box;
					display: flex;
				}
			}
		}
	}
}

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

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

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

:deep(.el-select__placeholder) {
	color: rgba(59, 65, 75, 1);

	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0px;
}

.btn-box-samll {
	height: 28px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	color: rgba(59, 65, 75, 1);
	box-sizing: border-box;
	border: 1px solid rgba(230, 231, 232, 1);
	border-radius: 4px;
	background: rgba(255, 255, 255, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;

}

.btn-box-select-samll {
	height: 28px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	color: rgba(5, 95, 194, 1);
	box-sizing: border-box;
	border: 1px solid rgba(5, 95, 194, 1);
	border-radius: 4px;
	background: rgba(231, 243, 255, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.person-news-card {
	width: 1016px;
	height: 354px;
	display: flex;
}

.header {
	display: flex;
	height: 73px;
}

.avatar {
	/* 容器 552 */
	width: 266px;
	height: 352px;
}

.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.info h2 {
	color: rgba(5, 95, 194, 1);
	margin: 0;
	font-family: Microsoft YaHei;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0px;
	text-align: left;
}

.info .newtitle {
	color: rgba(59, 65, 75, 1);

	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	margin-top: 4px;
}

.source-tag {
	/* 数据展示/Tag标签/亮色/蓝 */
	width: 100px;
	height: 24px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	padding: 1px 6px 1px 6px;
	box-sizing: border-box;
	border: 1px solid rgba(135, 232, 222, 1);
	border-radius: 4px;
	background: rgba(230, 255, 251, 1);
	color: rgba(19, 168, 168, 1);

	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: left;

	.tag1 {
		border: 1px solid rgba(217, 247, 190, 1);
		background: rgba(246, 255, 237, 1);
		color: rgba(82, 196, 26, 1);
	}

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

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

	.tag4 {
		border: 1px solid rgba(211, 173, 247, 1);
		background: rgba(249, 240, 255, 1);
		color: rgba(114, 46, 209, 1);
	}

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

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

.line {
	/* 矩形 277 */
	width: 686px;
	height: 1px;
	background: rgba(234, 236, 238, 1);

}

.events {
	margin-left: 4px;
	width: 710px;
}

.event-item {
	margin-bottom: 16px;
	padding: 12px;
	background-color: #fff;
	border-left: 4px solid #007bff;
	border-radius: 6px;
	position: relative;
}

.event-date {
	font-size: 0.85em;
	color: #999;
	margin-bottom: 8px;
	display: inline-block;
}

.event-content {
	display: flex;
	align-items: flex-start;
	line-height: 1.5;
}

.event-content .icon {
	margin-right: 8px;
	font-size: 1.2em;
	color: #ff6b00;
	vertical-align: middle;
}

.event-content span {
	color: #333;
	font-size: 0.95em;
}

:deep(.el-timeline) {
	max-width: 688px !important;
	padding: 0;
}

:deep(.el-timeline-item__wrapper) {
	padding-left: 16px;
}

:deep(.el-timeline-item__timestamp.is-top) {
	margin-bottom: 0;
	padding-top: 0;
	height: 12px;
}

:deep(.el-timeline-item__content) {
	margin-left: 10px;
}

:deep(.el-timeline-item__wrapper) {
	padding-top: 6px;
	top: 0;
	color: rgba(59, 65, 75, 1);

	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: justify;

}

.box1-content {
	position: relative;
	height: 100%;
	width: 100%;
	display: block;
}

.box1-left,
.box1-right {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 10;
}

.box1-left {
	left: 0;
}

.box1-right {
	right: 0;
}



.avatar {
	width: 280px;
	height: 354px;
	flex-shrink: 0;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.events {
	flex: 1;
	padding: 0 20px;

	.header {
		padding-top: 16px;

		.info {
			display: flex;
			width: 100%;
			justify-content: space-between;

			h2 {
				color: rgba(20, 89, 187, 1);
				font-family: Microsoft YaHei;
				font-size: 24px;
				font-weight: 700;
				margin: 0;
			}

			.newtitle {
				color: rgba(102, 102, 102, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				margin-top: 8px;
			}
		}
	}

	.tag-group {
		display: flex;
		gap: 10px;
	}

	.source-tag {
		padding: 4px 12px;
		background: rgba(20, 89, 187, 0.1);
		color: rgba(20, 89, 187, 1);
		border-radius: 4px;
		font-size: 14px;
		height: fit-content;
	}

	.tag2 {
		background: rgba(255, 152, 0, 0.1);
		color: rgba(255, 152, 0, 1);
	}

	.line {
		border-bottom: 1px solid rgba(240, 242, 244, 1);
		margin-top: 16px;
	}
}

.timeline-wrapper {
	height: 289px;
	width: 688px;
	overflow-y: auto;
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;

	:deep(.el-timeline) {
		margin-top: 14px;
		padding-left: 0;
	}

	:deep(.el-timeline-item__wrapper) {
		padding-left: 40px;
	}

	:deep(.el-timeline-item__tail) {
		left: 4px;
	}

	:deep(.el-timeline-item__content) {
		color: rgba(102, 102, 102, 1);
		font-family: Microsoft YaHei;
		font-size: 14px;
		line-height: 24px;
	}
}

.timeline-wrapper::-webkit-scrollbar {
	display: none;
}

.timeline-dot {
	display: flex;
	justify-content: space-between;
	width: 688px;
	text-align: center;
	align-items: center;
	margin-bottom: 12px;

	.dot-left {
		display: flex;
		align-items: center;
	}

	.dot-icon {
		width: 10px;
		height: 10px;
	}

	.dot-date {
		margin-left: 16px;
		margin-top: -6px;
		color: rgba(59, 65, 75, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 1px;
		text-align: left;
	}

	.dot-arrow {
		width: 20px;
		height: 18px;
	}
}

.box1-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.box1-left {
	position: absolute;
	left: 0;
	top: 180px;
	width: 24px;
	height: 48px;
	cursor: pointer;
	z-index: 10;

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

.box1-right {
	position: absolute;
	right: 0;
	top: 180px;
	width: 24px;
	height: 48px;
	cursor: pointer;
	z-index: 10;

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

.box1-main {
	width: 1009px;
	height: 354px;
	margin-top: 28px;
	margin-left: 40px;
}

.carousel-content {
	display: flex;
	height: 100%;
}

.avatar {
	width: 280px;
	height: 354px;
	flex-shrink: 0;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.events {
	flex: 1;
	padding-left: 20px;

	.header {
		.info {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding-right: 20px;

			h2 {
				margin: 0;
				color: rgba(20, 89, 187, 1);
				font-family: Microsoft YaHei;
				font-size: 24px;
				font-weight: 700;
			}

			.newtitle {
				margin-top: 8px;
				color: rgba(102, 102, 102, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
			}
		}
	}

	.tag-group {
		display: flex;
		gap: 10px;
	}

	.source-tag {
		padding: 4px 12px;
		background: rgba(20, 89, 187, 0.1);
		color: rgba(20, 89, 187, 1);
		border-radius: 4px;
		font-size: 14px;
		height: fit-content;
	}

	.tag2 {
		background: rgba(255, 152, 0, 0.1);
		color: rgba(255, 152, 0, 1);
	}

	.line {
		border-bottom: 1px solid rgba(240, 242, 244, 1);
		margin-top: 16px;
	}
}

.timeline-wrapper {
	height: 289px;
	width: 688px;
	overflow-y: auto;

	:deep(.el-timeline) {
		margin-top: 14px;
		padding-left: 0;
	}

	:deep(.el-timeline-item__wrapper) {
		padding-left: 40px;
	}

	:deep(.el-timeline-item__tail) {
		left: 4px;
	}

	:deep(.el-timeline-item__content) {
		color: rgba(102, 102, 102, 1);
		font-family: Microsoft YaHei;
		font-size: 14px;
		line-height: 24px;
	}
}

.timeline-dot {
	display: flex;
	justify-content: space-between;
	width: 688px;
	align-items: center;
	margin-bottom: 12px;

	.dot-left {
		display: flex;
		align-items: center;
	}

	.dot-icon {
		width: 10px;
		height: 10px;
	}

	.dot-date {
		margin-left: 16px;
		color: rgba(59, 65, 75, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 1px;
	}

	.dot-arrow {
		width: 20px;
		height: 18px;
	}
}

.box1-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.box1-left {
	position: absolute;
	left: 0;
	top: 180px;
	width: 24px;
	height: 48px;
	cursor: pointer;
	z-index: 10;

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

.box1-right {
	position: absolute;
	right: 0;
	top: 180px;
	width: 24px;
	height: 48px;
	cursor: pointer;
	z-index: 10;

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

.box1-main {
	width: 1009px;
	height: 354px;
	margin-top: 28px;
	margin-left: 40px;
}

.carousel-content {
	display: flex;
	height: 100%;
}

.avatar {
	width: 280px;
	height: 354px;
	flex-shrink: 0;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.events {
	flex: 1;
	padding-left: 20px;

	.header {
		.info {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding-right: 20px;

			h2 {
				margin: 0;
				color: rgba(20, 89, 187, 1);
				font-family: Microsoft YaHei;
				font-size: 24px;
				font-weight: 700;
			}

			.newtitle {
				margin-top: 8px;
				color: rgba(102, 102, 102, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
			}
		}
	}

	.tag-group {
		display: flex;
		gap: 10px;
	}

	.line {
		border-bottom: 1px solid rgba(240, 242, 244, 1);
		margin-top: 16px;
	}
}

.timeline-wrapper {
	height: 289px;
	width: 688px;
	overflow-y: auto;

	:deep(.el-timeline) {
		margin-top: 14px;
		padding-left: 0;
	}

	:deep(.el-timeline-item__wrapper) {
		padding-left: 40px;
	}

	:deep(.el-timeline-item__tail) {
		left: 4px;
	}

	:deep(.el-timeline-item__content) {
		color: rgba(102, 102, 102, 1);
		font-family: Microsoft YaHei;
		font-size: 14px;
		line-height: 24px;
	}
}

.timeline-dot {
	display: flex;
	justify-content: space-between;
	width: 688px;
	align-items: center;
	margin-bottom: 12px;

	.dot-left {
		display: flex;
		align-items: center;
	}

	.dot-icon {
		width: 10px;
		height: 10px;
	}

	.dot-date {
		margin-left: 16px;
		color: rgba(59, 65, 75, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 1px;
	}

	.dot-arrow {
		width: 20px;
		height: 18px;
	}
}
</style>
