<template>
	<div class="home-wrapper">
		<div class="search-header" v-show="isShow">
			<div class="home-main-header-center">
				<el-input v-model="input" style="width: 680px; height: 100%" placeholder="搜索科技人物及观点" />
				<div class="search">
					<div class="search-icon">
						<img src="./assets/images/search-icon.png" alt="" />
					</div>
					<div class="search-text" @click="handleSearch">搜索</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-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-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">
						<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">
						<div class="box1">
							<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-header">
								<div class="box1-header-left">
									<div class="icon">
										<img src="./assets/images/TechnologyFigures-icon4.png" alt="" />
									</div>
									<div class="title">{{ "人物新闻动态" }}</div>
								</div>
								<div class="box1-header-right" @click="handleClcikToCharacter(curnews.personId, curnews.name)">
									{{ "查看详情 >" }}
								</div>
							</div>
							<div class="box1-main" style="display: block">
									<el-carousel
									ref="carouselRef"
									height="354px"
									:autoplay="true"
									:interval="3000"
									arrow="never"
									indicator-position="none"
									@change="handleCarouselChange"
									>
									<el-carousel-item v-for="person in newsDynamics">
										<div class="carousel-content" style="display: flex; height: 100%">
										<!-- 左侧：头像 -->
									
										<div class="avatar">
											<img :src="person.imageUrl" alt="人物头像" />
										</div>

										<!-- 事件列表 -->
										<div class="events">
										<!-- 头部区域 -->
										<div class="header">
											<!-- 右侧：信息 -->
											<div class="info" style="display: flex; width: 100%; justify-content: space-between">
												<div>
													<h2>{{ person.name }}</h2>
													<p class="newtitle">{{ person.positionTitle }}</p>
												</div>
												<div style="display: flex; gap: 10px;">
												<div class="source-tag" v-for="item in person.personTypeList"
												:class="{tag2: item.typeId === '002'}">{{ item.typeName }}</div>
												</div>
											</div>
										</div>
										<div class="line"></div>

										<div style="height: 289px; width: 688px;">
											<el-timeline style="margin-top: 14px">
											<el-timeline-item placement="top" v-for="(activity, index) in person.newsList" :key="index" type="primary"
												:hollow="true">
												<template #dot>
												<div style="
													display: flex;
													justify-content: space-between;
													width: 688px;
													text-align: center;
													align-items: center;
													margin-bottom: 12px;
													">
													<div style="display: flex">
													<img src="./assets/images/dot1.png" alt="" style="width: 10px; height: 10px" />
													<div style="
														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;
														">
														{{ activity.newsDate }}
													</div>
													</div>

													<img src="./assets/images/dot2.png" alt="" style="width: 20px; height: 18px" />
												</div>
												</template>
												{{ activity.newsContent }}
											</el-timeline-item>
											
											</el-timeline>
										</div>
										</div>
										</div>
									</el-carousel-item>
									
									</el-carousel>
								
							</div>
						</div>
						<div class="box2">
							<div class="box2-header">
								<div class="icon">
									<img src="./assets/images/box2-header-icon.png" alt="" />
								</div>
								<div class="title">
									<div class="text">{{ "风险信号" }}</div>
									<div class="num">{{ warningList.length }}</div>
								</div>
							</div>
							<div class="box2-main">
								<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
									<div
										class="item-left"
										:class="{
											itemLeftStatus1: item.signalLevel === '一般风险',
											itemLeftStatus2: item.signalLevel === '重大风险'
										}"
									>
										{{ item.signalLevel ? item.signalLevel : "一般风险" }}
									</div>
									<div class="item-right">
										<div class="text">
											{{ item.signalTitle }}
										</div>
										<div class="time">{{ item.signalTime }}</div>
									</div>
								</div>
							</div>
							<div class="box2-footer" @click="handleToMoreRiskSignal">
								<div class="icon">
									<img src="./assets/images/box2-footer-icon.png" alt="" />
								</div>
								<div class="text">{{ "查看更多" }}</div>
							</div>
						</div>
					</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" id="box5Chart"></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 style="display: flex; width: 730px; justify-content: space-between; align-items: center">
										<div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div>
										<div style="gap: 2px; display: flex;width:510px;">
											<div
												v-for="value in PersonType"
												:class="viewSelect !== value.typeName ? 'btn-box-samll' : 'btn-box-select-samll'"
												@click="selectpersontype(value)"
											>
												{{ value.typeName }}
											</div>
											<el-select v-model="yearSelect" style="width: 100px; height: 28px; margin-top: -5px" >
												<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 { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import scrollToTop from "@/utils/scrollToTop";
import DivideHeader from "@/components/DivideHeader.vue";
import setChart from "@/utils/setChart";
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 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 CharacterOpinionWordCloud = ref([]); 

const handlegetCharacterOpinionWordCloudFn = async () => {
	const params = {
		year: wordCloudvalue.value,
	};
	if(wordCloudfield.value !== "0"){
		params.areaId = wordCloudfield.value;
	}
	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 
				}
			});
		}
	} 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);
	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("人物全局信息", 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% - 144px);
		overflow-y: auto;
	}
	.home-box {
		width: 100%;
		height: 100%;
		background: url("./assets/images/background.png");
		background-size: 100% 100%;
		overflow-y: auto;
		.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: 1920px;
			// margin: 0 auto;
			// background: url("./assets/images/background.png");
			// background-repeat: no-repeat;
			// background-color: #fff;
			// background-size: contain;
			// width: 100%;
			// height: 100%;
			// overflow-y: auto;
			// background: url("./assets/images/background.png");
			// background-size: 100% 100%;
			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-center {
					margin-top: 48px;
					width: 960px;
					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-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;

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

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

								.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-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: 24px;
  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;

}

</style>
