<template>
	<div class="think-tank-person">
		<!-- 智库研究人员人物基础 -->
		<div class="header">
			<div class="avatar">
				<img :src="musk.avatar" alt="" />
			</div>
			<div class="info">
				<!-- <div class="name"> -->
				<p class="name-cn">{{ musk.nameCn }}</p>
				<p class="name-en">{{ musk.nameEn }}</p>
				<!-- </div> -->
				<div class="introduction">
					<p>{{ musk.introduction }}</p>
				</div>
				<div class="domain">
					<p
						v-for="item in musk.domain"
						:key="item"
						:class="{
							cl1: item === '跨党派鹰派',
							cl2: item === '大国竞争',
							cl3: item === 'AI/AGI地缘政治',
							cl4: item === '综合威慑',
							cl5: item === '战略预测'
						}"
					>
						{{ item }}
					</p>
				</div>
			</div>
		</div>
		<!-- 智库研究人员人物信息区分 -->
		<div class="info-divide">
			<div v-for="item in info" :key="item" :class="{ active: item === infoActive }" @click="infoActive = item">
				{{ item }}
			</div>
		</div>
		<!-- 人物详情 -->
		<div class="info-content" v-if="infoActive === '人物详情'">
			<div class="left">
				<div class="left-top">
					<div class="title">
						<div class="box"></div>
						<div class="text">核心观点</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<!-- 主要内容 -->
					<div class="num-list">
						<div v-for="item in num" :key="item" :class="{ active: item === numActive }" @click="numActive = item">
							{{ item }}
						</div>
					</div>
					<!-- echarts 图表 -->
					<div class="echarts">
						<div class="row" v-for="(row, index) in wordCloudData" :key="index">
							<span
								v-for="(item, idx) in row"
								:key="idx"
								:style="{
									color: item.color,
									fontSize: item.fontSize || '16px',
									fontWeight: item.fontWeight || 'normal'
								}"
							>
								{{ item.text }}
							</span>
						</div>
					</div>
				</div>
				<div class="left-bottom">
					<div class="title">
						<div class="box"></div>
						<div class="text">最新动态</div>
						<div class="input"><input type="checkbox" checked />只看涉华动态</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<!-- 主要内容 -->
					<div class="main">
						<div v-for="item in newList" :key="item" class="main-item">
							<div class="time">
								<div class="year">{{ item.time.split("年")[0] }}</div>
								<div class="date">{{ item.time.split("年")[1] }}</div>
							</div>
							<div class="image">
								<img src="./assets/type1.png" alt="" v-if="item.type === 1" /><img
									src="./assets/type2.png"
									alt=""
									v-else
								/>
							</div>
							<div class="content">
								<div :class="{ 'content-type1': item.type === 1, 'content-type2': item.type === 2 }">
									<p :class="{ 'content-title1': item.type === 1, 'content-title2': item.type === 2 }">
										{{ item.title }}
									</p>
									<p class="content-title-en">{{ item.titleEn }}</p>
								</div>
								<p class="content-contentcontent">{{ item.content }}</p>
								<div class="content-tag">
									<div>
										<span
											v-for="tag in item.pie"
											:key="tag"
											class="tag"
											:class="{
												dl1: tag === '人工智能',
												dl2: tag === '量子科技',
												dl3: tag === '新能源',
												dl4: tag === '集成电路'
											}"
											@click="handleClickTag(tag)"
											>{{ tag }}</span
										>
									</div>
									<div class="origin">来源：{{ item.origin }}</div>
								</div>
							</div>
						</div>
						<div class="line-test"></div>
					</div>
					<div class="pagination">
						<div class="total">共153项动态</div>
						<el-pagination
							background
							layout="prev, pager, next"
							:page-count="10"
							:pager-count="5"
							v-model:current-page="currentPage"
							class="custom-pagination"
						/>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right-top">
					<div class="title">
						<div class="box"></div>
						<div class="text">基本信息</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<div class="main-content">
						<div class="baseInfo">
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">出生日期：</div>
								<div class="baseInfo-item-content">未知</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">现任职位：</div>
								<div class="baseInfo-item-content">兰德公司国家安全研究部副总裁兼主任</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">兼任职位：</div>
								<div class="baseInfo-item-content">国家国防研究所（NDRI）主任</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">政策倾向：</div>
								<div class="baseInfo-item-content">主流鹰派现实主义者</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">国籍：</div>
								<div class="baseInfo-item-content">美国</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">教育背景：</div>
								<div class="baseInfo-item-content long">
									布朗大学--应用数学与经济学学士；<br>
									普林斯顿大学--伍德罗·威尔逊公共与国际事务学院公共事务硕士；
								</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">研究领域：</div>
								<div class="baseInfo-item-content longlong">
									<span class="span">地缘政治与大国战略竞争</span>
									<span class="span">战略预测与情景规划</span>
									<span class="span">印太地区与跨大西洋安全</span>
									<span class="span">经济安全与技术-军事融合</span>
									<span class="span">联盟现代化与国防态势调整</span>
								</div>
							</div>
						</div>
						<div class="company">
							<div class="company-title">社交媒体</div>
							<div class="company-content">
								<div v-for="item in companyList" :key="item" class="company-item">
									<div class="img">
										<img :src="item.logo" alt="" />
									</div>
									<div>
										<div class="company-cn">{{ item.cn }}</div>
										<div class="company-name">{{ item.name }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="right-bottom">
					<div class="title">
						<div class="box"></div>
						<div class="text">政治履历</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<div class="content-main">
						<div v-for="item in resumeList" :key="item.id" class="content-item">
							<img src="./assets/icon01.png" alt="" class="image01" />
							<div class="content-item-time">{{ item.time }}</div>
							<div class="content-item-title">{{ item.title }}</div>
							<div class="content-item-content">{{ item.content }}</div>
							<div class="content-item-door" v-if="item.door">
								<img src="./assets/icon02.png" alt="" />
								<span>{{ item.door }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 成果报告 -->
		<HistoricalProposal v-if="infoActive === '成果报告'" />
		<!-- 人物关系 -->
		<CharacterRelationships v-if="infoActive === '人物关系'" />
		<!-- 相关情况 -->
		<RelevantSituation v-if="infoActive === '相关情况'" />
		<!-- 弹框 -->
		<el-dialog
			v-model="dialogVisible"
			width="761px"
			class="viewpoint-dialog"
			:modal="false"
			:draggable="true"
			:lock-scroll="false"
		>
			<template #header>
				<div class="viewpoint-header">
					<div class="viewpoint-title">领域观点</div>
				</div>
			</template>
			<div class="viewpoint-body">
				<div class="viewpoint-body-title">#人工智能</div>
				<div v-for="item in dialogData" :key="item.id" class="viewpoint-item">
					<img :src="item.img" alt="" />
					<div class="viewpoint-item-content">
						<div class="viewpoint-item-name">{{ item.name }}</div>
						<div class="viewpoint-item-desc">{{ item.content }}</div>
						<div class="viewpoint-item-job">{{ item.job }}</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref } from "vue";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import HistoricalProposal from "./components/historicalProposal/index.vue";

import Musk from "./assets/Musk.png";
import cp1 from "./assets/cp1.png";
import cp2 from "./assets/cp2.png";


import img1 from "./assets/img1.png";
import img2 from "./assets/img2.png";
import img3 from "./assets/img3.png";
import img4 from "./assets/img4.png";
import img5 from "./assets/img5.png";

const wordCloudData = ref([
	[
		{ text: "AI安全与模型保护", color: "rgba(19, 168, 168, 1)" },
		{ text: "地球化改造", color: "rgb(206, 79, 81)" },
		{ text: "减少燃料对外依赖", color: "rgba(250, 173, 20, 1)" },
		{ text: "外交政策立场", color: "rgba(250, 173, 20, 1)" },
		{ text: "AI供应链监督", color: "rgba(22, 119, 255, 1)" },
		{ text: "预算纪律", color: "rgba(19, 168, 168, 1)" }
	],
	[
		{ text: "外交网络全球野心", color: "rgb(206, 79, 81)" },
		{ text: "NATO扩张与乌克兰整合", color: "rgba(22, 119, 255, 1)" },
		{ text: "技术扩散威胁", color: "rgba(250, 173, 20, 1)" },
		{ text: "盟友安全保障", color: "rgb(206, 79, 81)" },
		{ text: "波罗的海战略转变", color: "rgba(250, 173, 20, 1)" },
		// { text: "教育政策", color: "rgba(19, 168, 168, 1)" },
		{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" }
	],
	[
		{ text: "减少政府支出", color: "rgba(255, 122, 69, 1)" },
		{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" },
		{ text: "第一性原理", color: "rgba(250, 173, 20, 1)" },
		{ text: "AI治理与国际监督", color: "rgba(255, 122, 69, 1)" },
		{ text: "经济安全优先", color: "rgb(206, 79, 81)" },
		{ text: "有限政府", color: "rgba(255, 122, 69, 1)" }
	],
	[
		{ text: "综合威胁架构", color: "rgba(22, 119, 255, 1)" },
		{ text: "AGI重塑全球权力动态", color: "rgb(206, 79, 81)", fontSize: "26px", fontWeight: "700" },
		{ text: "不确定性即弱点", color: "rgba(255, 122, 69, 1)" },
		// { text: "战后重建需安全基础", color: "rgba(22, 119, 255, 1)" },
		{ text: "战后重建需安全基础", color: "rgba(250, 173, 20, 1)" },
		{ text: "受控竞争通道", color: "rgba(250, 173, 20, 1)" }
	],
	[
		{ text: "经济-技术激烈竞争", color: "rgba(19, 168, 168, 1)" },
		{ text: "印太-跨大西洋双线", color: "rgba(250, 173, 20, 1)" },
		{ text: "超音速海啸", color: "rgba(250, 173, 20, 1)" },
		{ text: "乌克兰胜利保障", color: "rgba(19, 168, 168, 1)" },
		{ text: "平民“联合参谋部”", color: "rgb(206, 79, 81)" },
		{ text: "多智能体协作", color: "rgba(19, 168, 168, 1)" }
	]
]);
const musk = ref({
	nameCn: "巴里·帕维尔",
	nameEn: "Barry Pavel",
	introduction:
		"美国兰德公司国家安全研究部副总裁兼主任，曾任白宫国家安全委员会国防政策高级主任，30余年深耕大国战略竞争与AI地缘政治风险。",
	domain: ["跨党派鹰派", "大国竞争", "AI/AGI地缘政治", "综合威慑", "战略预测"],
	avatar: Musk
});

const info = ref(["人物详情", "成果报告", "人物关系", "相关情况"]);
const infoActive = ref("人物详情");
const num = ref(["2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("2025");
const currentPage = ref(5);
const dialogVisible = ref(false);
const handleClickTag = tag => {
	dialogVisible.value = true;
};
const newList = ref([
	{
		id: 1,
		title: "如果普京拿下整个乌克兰，并在7个NATO成员国边境部署包括核武的部队，美国和欧洲的风险将巨大且持续。这是我们自私的国家利益，防止普京获胜。",
		titleEn:
			"If Putin takes all of Ukraine, and deploys forces including nuclear wpns on the borders of 7 NATO members, the risks to US and Europe will be enormous and sustained. It’s in our selfish national interests to prevent a Putin win.",
		pie: ["人工智能"],
		origin: "Linkedln",
		time: "2025年10月10日",
		type: 1
	},
	{
		id: 2,
		title: "欧洲长期战争：2024年及以后美国、波兰及盟友选项",
		content:
			"兰德国家安全研究部与波兰国际事务研究所于2024年4月25日举办公开活动，讨论为什么2024年是确保乌克兰胜利和遏制俄罗斯的关键转折年。通过长期战略分析和可操作政策建议，美国、波兰及盟友专家概述了如何在乌克兰、欧洲及其他地区有效捍卫基于规则的国际秩序。Barry Pavel作为主讲人之一，强调联盟合作的重要性。",
		pie: ["量子科技"],
		origin: "兰德公司",
		time: "2025年10月10日",
		type: 2
	},
	{
		id: 3,
		title: "女性视角如何塑造国家安全",
		content:
			"兰德公司妇女、和平与安全倡议于2024年5月举办活动，探讨性别视角在帮助美国及盟国政府决策者应对最紧迫国家安全挑战中的关键作用。Barry Pavel与Carol M. Pottenger、Deborah Avant等专家共同参与，强调多样化视角在政策制定中的价值。",
		pie: ["新能源"],
		origin: "兰德公司",
		time: "2025年10月09日",
		type: 2
	},
	{
		id: 4,
		title: "AI安全：保护大型语言模型及其对地缘政治未来的影响",
		content:
			"兰德公司召集AI和全球安全专家进行专题讨论，聚焦AI安全的日益重要性及其对国家和本土安全的含义。Barry Pavel与Richard Danzig、Jim Mitre等参与，分析保护大型语言模型以应对地缘政治风险的必要性，并探讨其对全球安全的战略影响。",
		pie: ["量子科技"],
		origin: "兰德公司",
		time: "2025年10月09日",
		type: 2
	},
	{
		id: 5,
		title: "虽然乌克兰短期内不太可能将俄罗斯赶回边境，但战争在未来几个月可能有利于乌克兰。但前提是西方不要先眨眼。",
		titleEn:
			"Good timely @RANDCorporation analysis on war trajectories. 'Although Ukraine is unlikely to throw Russia back to its borders any time soon, the war will likely trend in Ukraine's favor in the coming months. But only if the West does not blink first.",
		pie: ["人工智能"],
		origin: "X",
		time: "2025年10月08日",
		type: 1
	},
	{
		id: 6,
		title: "平衡和避免公然挑衅是合理的原则。但系统性地决定“做x”是否会在普京脑海中太挑衅的政策，会让他牢牢掌控局面直到获胜。他可以挑选美国/NATO能做什么。",
		titleEn:
			"Balance and avoiding blatant provocation are sound principles. But a systematic policy of deciding whether “doing x” might be too provocative in Putin’s mind keeps him firmly in the driver’s seat until he wins. He gets to pick and choose what the US/NATO can do.",
		pie: ["集成电路"],
		origin: "X",
		time: "2025年10月08日",
		type: 1
	},
	{
		id: 7,
		title: "兰德专家预览2024年北约峰会",
		content:
			"兰德公司于2024年6月26日举办媒体电话会议，预览即将于7月9-11日举行的华盛顿北约峰会。Barry Pavel作为国家安全研究部副总裁，分享美国国防战略、能力及联盟专长，讨论对乌克兰的支持、联盟防御强化、东部侧翼加固、新成员芬兰和瑞典的整合，以及应对中国挑战和新兴技术等问题。",
		pie: ["量子科技"],
		origin: "兰德公司",
		time: "2025年10月09日",
		type: 2
	}
]);
const companyList = ref([
	{
		id: 1,
		cn: "LinkedIn",
		name: "@BarryPavel",
		logo: cp1
	},
	{
		id: 2,
		cn: "Twitter/X",
		name: "@BarryPavel",
		logo: cp2
	}
]);
// 政治履历
const resumeList = ref([
	{
		id: 1,
		time: "2022年 – 至今",
		title: "兰德公司  |  国家安全研究部副总裁兼主任",
		content:
			"基于华盛顿办公室，监督国防政策、AI安全与地缘政治研究；于2022年8月8日正式加入。",
		door: ""
	},
	{
		id: 2,
		time: "2011年 – 2022年",
		title: "大西洋理事会  |  Scowcroft战略与安全中心创始主任兼高级副总裁",
		content: "专注地缘政治、新兴安全挑战、美国联盟适应与国防战略调整；服务11年。2022年后转为杰出研究员。",
		door: ""
	},
	{
		id: 3,
		time: "2008年 – 2010年",
		title: "白宫国家安全委员会  |  总统特别助理兼国防政策与战略高级主任",
		content:
			"服务乔治·W·布什与巴拉克·奥巴马两届政府，作为职业公务员；领导首份国家安全优先审查，并贡献2010年国家安全战略。",
		door: ""
	},
	{
		id: 4,
		time: "2004年 – 2006年",
		title: "美国国防部 |  代理国防部副助理部长",
		content:
			"负责战略与政策规划，为总统的政策制定提供理论支撑与咨询。",
		door: ""
	},
	{
		id: 5,
		time: "1999年 – 2001年",
		title: "外交关系委员会  |  任期成员咨询委员会联合主席",
		content: "参与外交政策咨询与网络构建。",
		door: ""
	},
	{
		id: 6,
		time: "1991年 – 2004年",
		title: "美国国防部  |  国防部政策副部长办公室成员",
		content: "角色包括战略规划与政策支持。",
		door: ""
	}
]);
// 弹框数据
const dialogData = ref([
	{
		id: 1,
		name: "山姆・奥特曼",
		content: "主张分级监管，反对 “一刀切” 审批；警告美国领先优势有限，电力与基建是关键瓶颈。",
		img: img1,
		job: "OpenAI CEO"
	},
	{
		id: 2,
		name: "布拉德・史密斯",
		content: "主张全技术栈监管与基础建设投入，强调美国需在芯片、算法、数据各层保持领先。",
		img: img2,
		job: "微软副董事长"
	},
	{
		id: 3,
		name: "黄仁勋",
		content: "认为 AI 处于 “智能基建起步期”，大模型为基础，代理式 AI 为下一阶段；否定 AI 泡沫，强调与实体经济融合。",
		img: img3,
		job: "NVIDIA CEO"
	},
	{
		id: 4,
		name: "杰弗里・辛顿",
		content: "担忧 AI 发展过快，警告 “涌现能力” 超预期，可能导致存在性风险；呼吁放缓研发、加强安全。",
		img: img4,
		job: "图灵奖得主、深度学习先驱"
	},
	{
		id: 5,
		name: "李飞飞",
		content: "关注 AI 伦理与公平性，强调安全与普惠并重，对 AGI 时间表持谨慎态度。",
		img: img5,
		job: "斯坦福大学教授"
	}
]);
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.think-tank-person {
	width: 1600px;
	margin: 0 auto;
	padding-bottom: 50px;
	.header {
		width: 1600px;
		height: 200px;
		margin: 16px auto;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
		padding: 20px;
		display: flex;
		align-items: center;
		.avatar {
			width: 160px;
			height: 160px;
			margin-right: 24px;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.info {
			flex: 1;
			.name-cn {
				font-size: 32px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 42px;
				color: rgb(59, 65, 75);
				margin-bottom: 8px;
			}
			.name-en {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(59, 65, 75);
				margin-bottom: 6px;
			}
			.introduction {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(59, 65, 75);
				margin-bottom: 6px;
			}
			.domain {
				font-size: 14px;
				p {
					display: inline-block;
					padding: 1px 8px;
					border-radius: 4px;
					margin-right: 8px;
					border: 1px solid;
				}
				.cl1 {
					border-color: rgba(186, 224, 255, 1);
					background-color: rgba(230, 244, 255, 1);
					color: rgba(22, 119, 255, 1);
				}
				.cl2 {
					border-color: rgba(217, 247, 190, 1);
					background-color: rgba(246, 255, 237, 1);
					color: rgba(82, 196, 26, 1);
				}
				.cl3 {
					border-color: rgba(255, 241, 184, 1);
					background-color: rgba(255, 251, 230, 1);
					color: rgba(250, 173, 20, 1);
				}
				.cl4 {
					border-color: rgba(255, 204, 199, 1);
					background-color: rgba(255, 241, 240, 1);
					color: rgba(255, 77, 79, 1);
				}
				.cl5 {
					border-color: rgba(255, 241, 184, 1);
					background-color: rgba(255, 251, 230, 1);
					color: rgba(250, 173, 20, 1);
				}
				.cl6 {
					border-color: rgba(255, 204, 199, 1);
					background-color: rgba(255, 241, 240, 1);
					color: rgba(255, 77, 79, 1);
				}
			}
		}
	}
	.info-divide {
		width: 1600px;
		height: 64px;
		margin: 16px auto;
		background-color: rgba(255, 255, 255, 0.65);
		border-radius: 10px;
		box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
		padding: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		div {
			width: 530px;
			height: 54px;
			text-align: center;
			font-size: 20px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 54px;
			color: rgb(59, 65, 75);
			border-radius: 10px;
			cursor: pointer;
			&:hover {
				background: rgba(231, 243, 255, 1);
			}
		}
		.active {
			font-size: 24px;
			font-weight: 700;
			font-family: "Microsoft YaHei";
			line-height: 54px;
			color: rgb(5, 95, 194);
			background-color: rgba(231, 243, 255, 1);
			border: 2px solid rgba(174, 214, 255, 1);
		}
	}
	.info-content {
		width: 1600px;
		height: 1933px;
		margin-bottom: 50px;
		margin: 16px auto;
		display: flex;
		.left {
			width: 1064px;
			height: 100%;
			margin-right: 16px;
			.left-top {
				width: 100%;
				height: 300px;
				margin-bottom: 16px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
				.title {
					width: 100%;
					height: 56px;
					display: flex;
					align-items: center;
					padding: 14px 12px 16px 0;
					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}
					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
					.btn {
						width: 60px;
						height: 28px;
						margin-left: auto;
						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}
						img:first-child {
							margin-right: 4px;
						}
					}
				}
				.num-list {
					display: flex;
					align-items: center;
					padding-left: 24px;
					margin-bottom: 16px;
					div {
						padding: 1px 8px;
						line-height: 30px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						color: rgb(59, 65, 75);
						cursor: pointer;
						border: 1px solid rgb(230, 231, 232);
						border-radius: 4px;
						margin-right: 8px;
					}
					.active {
						background-color: rgba(231, 243, 255, 1);
						color: rgb(5, 95, 194);
						border-color: rgb(5, 95, 194);
					}
				}
				.echarts {
					width: 1009px;
					height: 170px;
					margin-left: 24px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10px 0;

					.row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						span {
							font-family: "Microsoft YaHei";
							white-space: nowrap;
							cursor: pointer;
							transition: all 0.3s;

							&:hover {
								transform: scale(1.1);
								text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
							}
						}
					}
				}
			}
			.left-bottom {
				width: 100%;
				height: 1617px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
				.title {
					width: 100%;
					height: 85px;
					display: flex;
					align-items: center;
					padding: 14px 12px 45px 0;
					position: relative;
					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}
					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
					.btn {
						width: 60px;
						height: 28px;
						margin-left: auto;
						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}
						img:first-child {
							margin-right: 4px;
						}
					}
					.input {
						position: absolute;
						top: 15px;
						right: 114px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(132, 136, 142);
						input {
							margin-right: 8px;
						}
					}
				}
				.main {
					width: 1064px;
					height: 1435px;
					box-sizing: border-box;
					padding-right: 50px;
					position: relative;
					z-index: 110;
					.main-item {
						width: 1014px;
						margin-bottom: 40px;
						display: flex;
						.time {
							width: 77px;
							box-sizing: border-box;
							margin-right: 20px;
							display: flex;
							flex-direction: column;
							align-items: flex-end;
							.year {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgb(5, 95, 194);
								line-height: 24px;
							}
							.date {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgb(5, 95, 194);
								line-height: 24px;
							}
						}
						.image {
							margin-right: 20px;
							img {
								width: 24px;
								height: 24px;
							}
						}
						.content {
							width: 873px;
							.content-type1 {
								background-color: rgba(246, 250, 255, 1);
								border-radius: 10px;
								border: 1px solid rgb(234, 236, 238);
								padding: 12px 14px 12px 15px;
								.content-title1 {
									font-size: 16px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									color: rgb(59, 65, 75);
									line-height: 24px;
									padding-bottom: 12px;
									border-bottom: 1px solid rgb(234, 236, 238);
									cursor: pointer;
								}
								.content-title-en {
									font-size: 16px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									color: rgb(59, 65, 75);
									line-height: 24px;
									padding-top: 12px;
									cursor: pointer;
								}
							}
							.content-type2 {
								.content-title2 {
									font-size: 20px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									color: rgb(59, 65, 75);
									line-height: 26px;
									padding-bottom: 8px;
									cursor: pointer;
								}
							}
							.content-contentcontent {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								color: rgb(95, 101, 108);
								line-height: 24px;
								margin-bottom: 8px;
								cursor: pointer;
							}
							.content-tag {
								width: 873px;
								display: flex;
								justify-content: space-between;
								.tag {
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 20px;
									margin-right: 8px;
									padding: 1px 10px;
									border-radius: 4px;
									border: 1px solid;
									cursor: pointer;
								}
								.dl1 {
									background-color: rgba(230, 255, 251, 1);
									color: rgba(19, 168, 168, 1);
									border-color: rgba(135, 232, 222, 1);
								}
								.dl2 {
									background-color: rgba(255, 241, 240, 1);
									color: rgb(206, 79, 81);
									border-color: rgba(255, 163, 158, 1);
								}
								.dl3 {
									background-color: rgba(255, 247, 230, 1);
									color: rgba(250, 140, 22, 1);
									border-color: rgba(255, 213, 145, 1);
								}
								.dl4 {
									background-color: rgba(249, 240, 255, 1);
									color: rgba(114, 46, 209, 1);
									border-color: rgba(211, 173, 247, 1);
								}
								.origin {
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 22px;
									color: rgb(132, 136, 142);
									cursor: pointer;
								}
							}
						}
					}
					.line-test {
						position: absolute;
						top: 10px;
						left: 109px;
						height: 1300px;
						border: 1px solid rgb(230, 231, 232);
						z-index: -1;
					}
				}
				.line {
					width: 100%;
					height: 1px;
					background-color: rgb(234, 236, 238);
					margin-top: 30px;
					border: none;
				}
				.pagination {
					width: 100%;
					height: 76px;
					margin: 20px auto;
					display: flex;
					padding: 0 31px 0 36px;
					justify-content: space-between;
					align-items: center;
					border-top: 1px solid rgb(234, 236, 238);
					.total {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						color: rgb(59, 65, 75);
					}
					:deep(.custom-pagination) {
						display: flex;
						align-items: center;
					}
					:deep(.custom-pagination.el-pagination.is-background .el-pager li) {
						min-width: 32px;
						height: 32px;
						line-height: 32px;
						border-radius: 6px;
						margin: 0 6px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						background-color: #fff;
						color: rgb(95, 101, 108);
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
					}
					:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-active) {
						background-color: #fff;
						color: rgba(22, 119, 255, 1);
						border-color: rgba(22, 119, 255, 1);
					}
					:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-ellipsis) {
						border: none;
						background-color: transparent;
						color: rgb(95, 101, 108);
						min-width: 16px;
						margin: 0 6px;
					}
					:deep(.custom-pagination.el-pagination.is-background .btn-prev),
					:deep(.custom-pagination.el-pagination.is-background .btn-next) {
						min-width: 32px;
						height: 32px;
						border-radius: 6px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						background-color: #fff;
						color: rgb(95, 101, 108);
						font-size: 16px;
						font-family: "Microsoft YaHei";
						margin: 0 6px;
					}
					:deep(.custom-pagination.el-pagination.is-background .btn-prev.is-disabled),
					:deep(.custom-pagination.el-pagination.is-background .btn-next.is-disabled) {
						color: rgba(95, 101, 108, 0.45);
						border-color: rgb(235, 238, 242);
						background-color: #fff;
					}
				}
			}
		}
		.right {
			width: 520px;
			height: 100%;
			.right-top {
				width: 520px;
				height: 625px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
				margin-bottom: 16px;
				.title {
					width: 100%;
					height: 60px;
					display: flex;
					align-items: center;
					padding: 14px 12px 20px 0;
					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}
					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
					.btn {
						width: 60px;
						height: 28px;
						margin-left: auto;
						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}
						img:first-child {
							margin-right: 4px;
						}
					}
				}
				.main-content {
					width: 520px;
					height: 565px;
					padding: 0 48px 50px 34px;
					.baseInfo {
						width: 438px;
						height: 402px;
						padding-bottom: 50px;
						border-bottom: 1px solid rgb(234, 236, 238);
						.baseInfo-item {
							display: flex;
							margin-bottom: 12px;
							.baseInfo-item-title {
								width: 88px;
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
							.address {
								width: 110px;
							}
							.baseInfo-item-content {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
							.long {
								width: 349px;
							}
							.longlong {
								width: 358px;
								height: 88px;
								display: flex;
								flex-wrap: wrap;
								align-content: space-between;
								.span {
									padding: 2px 8px;
									border-radius: 4px;
									background-color: rgba(230, 244, 255, 1);
									border: 1px solid rgba(186, 224, 255, 1);
									color: rgba(22, 119, 255, 1);
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 20px;
								}
								.span:nth-child(2n-1) {
									margin-right: 2px;
								}
							}
						}
					}
					.company {
						width: 438px;
						height: 176px;
						padding-top: 19px;
						.company-title {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
							margin-bottom: 19px;
						}
						.company-content {
							width: 409px;
							// height: 114px;
							display: flex;
							flex-wrap: wrap;
							.company-item {
								width: 185px;
								height: 49px;
								margin-bottom: 16px;
								display: flex;
								align-items: center;
								cursor: pointer;
								.img {
									width: 48px;
									height: 48px;
									margin-right: 8px;
									padding: 12px;
									background-color: rgb(230, 231, 232);
									border-radius: 75px;
									img {
										width: 24px;
										height: 24px;
									}
								}

								.company-cn {
									font-size: 16px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									line-height: 24px;
									color: rgb(59, 65, 75);
								}
								.company-name {
									font-size: 16px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 24px;
									color: rgb(95, 101, 108);
								}
							}
							.company-item:nth-child(2n-1) {
								margin-right: 39px;
							}
							.company-item:last-child {
								.company-name {
									width: 150px;
								}
							}
						}
					}
				}
			}
			.right-bottom {
				width: 520px;
				height: 1292px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
				.title {
					width: 100%;
					height: 80px;
					display: flex;
					align-items: center;
					padding: 14px 12px 40px 0;
					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}
					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
					.btn {
						width: 60px;
						height: 28px;
						margin-left: auto;
						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}
						img:first-child {
							margin-right: 4px;
						}
					}
				}
				.content-main {
					width: 480px;
					height: 1020px;
					margin-left: 16px;
					.content-item {
						width: 454px;
						margin-bottom: 60px;
						margin-left: 26px;
						position: relative;
						.image01 {
							width: 14px;
							height: 12.13px;
							position: absolute;
							top: 8px;
							left: -26px;
						}
						.content-item-time {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 30px;
							color: rgb(5, 95, 194);
							margin-bottom: 8px;
						}
						.content-item-title {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 30px;
							color: rgb(59, 65, 75);
							margin-bottom: 8px;
						}
						.content-item-content {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(95, 101, 108);
							margin-bottom: 8px;
						}
						.content-item-door {
							width: 300px;
							height: 32px;
							display: flex;
							align-items: center;
							padding: 4px 0 4px 11px;
							border-radius: 4px;
							background-color: rgba(255, 246, 240, 1);
							border: 1px solid rgba(250, 140, 22, 0.4);
							img {
								width: 20px;
								height: 24px;
								margin-right: 10px;
							}
							span {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgba(255, 149, 77, 1);
							}
						}
					}
				}
			}
		}
	}
}

:deep(.el-table .highlight-row) {
	background: rgba(248, 249, 250, 1);
}

:deep(.viewpoint-dialog) {
	width: 761px !important;
	height: 669px;
	padding: 0;
	border-radius: 4px;
	.el-dialog__body {
		padding: 0;
	}
	.el-dialog__header {
		padding: 0;
		margin: 0;
		position: relative;
		height: 48px;
	}
	.el-dialog__headerbtn {
		top: 50%;
		transform: translateY(-50%);
		right: 12px;
	}
	.viewpoint-header {
		width: 761px;
		height: 48px;
		background: linear-gradient(180deg, rgba(31, 140, 252, 0.2) 0%, rgba(36, 144, 255, 0) 100%);
		display: flex;
		align-items: center;
		padding: 0 24px;
		border-bottom: 1px solid rgb(234, 236, 238);
	}
	.viewpoint-title {
		font-size: 16px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 24px;
		color: rgb(5, 95, 194);
	}
	.viewpoint-body {
		padding: 24px 24px 35px 24px;
		height: calc(669px - 48px);
		box-sizing: border-box;
		overflow: hidden;
		.viewpoint-body-title {
			font-size: 28px;
			font-weight: 700;
			font-family: "Microsoft YaHei";
			line-height: 37px;
			color: rgb(59, 65, 75);
			margin-bottom: 32px;
		}
		.viewpoint-item {
			width: 713px;
			min-height: 81px;
			display: block;
			margin-bottom: 12px;
			position: relative;
			padding-left: 48px;
			img {
				position: absolute;
				top: -20px;
				left: -20px;
			}
			.viewpoint-item-content {
				width: 665px;
				min-height: 81px;
				background-image: url("./assets/bg01.png");
				background-size: 100% 100%;
				position: relative;
				top: 0;
				left: 0;
				padding-left: 23px;
				padding-top: 12px;
				padding-bottom: 13px;
				box-sizing: border-box;
				.viewpoint-item-name {
					font-size: 16px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					margin-bottom: 5px;
				}
				.viewpoint-item-desc {
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
				}
				.viewpoint-item-job {
					position: absolute;
					top: 8px;
					right: 22px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 30px;
					color: rgb(132, 136, 142);
				}
			}
		}
	}
}
</style>
