<template>
	<div class="member-of-congress">
		<!-- 国会议员人物基础 -->
		<div class="header">
			<div class="avatar">
				<el-avatar :size="160" shape="circle" :src="getProxyUrl(characterInfo.imageUrl)" />
			</div>
			<div class="info">
				<!-- <div class="name"> -->
				<p class="name-cn">{{ characterInfo.name }}</p>
				<p class="name-en">{{ characterInfo.ename }}</p>
				<!-- </div> -->
				<div class="introduction">
					<p>{{ characterInfo.description }}</p>
				</div>
				<div class="domain">
					<p
						v-for="item in characterInfo.industryList"
						:key="item"
						class="cl1"
						:class="{
							cl1: item.status === '1',
							cl2: item.status === '2',
							cl3: item.status === '3',
							cl4: item.status === '4',
							cl5: item.status === '5',
							cl6: item.status === '6'
						}"
					>
						{{ item.industryName }}
					</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="handleChangeYear(item)">
							{{ item }}
						</div>
					</div>
					<!-- echarts 图表 -->
					<div class="echarts" id="wordCloudChart">
						<!-- <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-center">
					<div class="title">
						<div class="box"></div>
						<div class="text">资金来源</div>
						<div class="input">
							<el-select v-model="selectedOption" placeholder="请选择" class="select">
								<el-option @click="handleChangeYearList()" v-for="item in yearList" :key="item.value"
							:label="item.label" :value="item.value" />
								
							</el-select>
						</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<!-- 主要内容 -->
					<div class="main">
						<el-table
							:data="CharacterFundSource"
							style="width: 100%"
							:header-cell-style="{
								background: 'transparent',
								color: 'rgba(59, 65, 75, 1)',
								fontWeight: 700,
								fontSize: '16px'
							}"
							:cell-style="{
								fontSize: '16px',
								fontWeight: 400,
								color: 'rgba(59, 65, 75, 1)'
							}"
							:row-class-name="tableRowClassName"
							:row-style="{ height: '60px' }"
							size="large"
						>
							<el-table-column prop="rank" label="排名" width="100" align="center" />
							<el-table-column prop="contributor" label="贡献者" min-width="300" />
							<el-table-column prop="totalAmount" label="总捐款" width="150" />
							<el-table-column prop="individualAmount" label="个人捐款" width="150" />
							<el-table-column prop="pacsAmount" label="PACs捐款" width="150" />
						</el-table>
					</div>
					<div class="bottom">
						<img src="./assets/ai.png" alt="" class="icon">
						<div class="text1">约翰·图恩的竞选资金前五大贡献者以美国以色列公共事务委员会（AIPAC）为主导，总捐款超61.8万美元，主要来自个人捐款，凸显其在外交、国防和行业游说方面的强大支持网络。</div>
						<img src="./assets/right.png" alt="" class="icon1">
					</div>
				</div>
				<div class="left-bottom">
					<div class="title">
						<div class="box"></div>
						<div class="text">最新动态</div>
						<div class="input"><input type="checkbox" v-model="isChecked" @change="handleChange"/>只看涉华动态</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<!-- 主要内容 -->
					<div class="main">
						<div v-for="item in CharacterLatestDynamic" :key="item" class="main-item">
							<div class="time">
								<div class="year">{{ item.time.split("-")[0] }}</div>
								<div class="date">{{ item.time.split("-")[1] + "月" + item.time.split("-")[2] + "日"}}</div>
							</div>
							<div class="image">
								<img src="./assets/type1.png" alt="" v-if="item.remarks === true" /><img
									src="./assets/type2.png"
									alt=""
									v-else
								/>
							</div>
							<div class="content">
								<div :class="{ 'content-type1': item.remarks === true, 'content-type2': item.remarks === false }">
									
									<p v-if="item.remarks === true" class="content-title1"> 
										{{ item.content }}
									</p>
									<p v-else class="content-title2"> 
										{{ item.title }}
									</p>
									<p v-if="item.remarks === true" class="content-title-en">{{ item.econtent }}</p>
								</div>
								<p v-if="item.remarks === false" class="content-contentcontent">{{ item.content }}</p>
								<div class="content-tag">
									<div>
										<span
											v-for="tag in item.industryList"
											:key="tag"
											class="tag"
											:class="{
												dl1: tag === '人工智能',
												dl2: tag === '量子科技',
												dl3: tag === '新能源',
												dl4: tag === '集成电路'
											}"
											@click="handleClickTag(tag)"
											>{{ tag }}</span
										>
									</div>
									<div class="origin">来源：{{ item.orgName }}</div>
								</div>
							</div>
						</div>
						<div class="line-test"></div>
					</div>
					<div class="pagination">
						<div class="total">{{`共${total}项动态`}}</div>
						<el-pagination
							@current-change="handleCurrentChange"
							:page-size="pageSize"
							:current-page="currentPage"
							background
							layout="prev, pager, next"
							:total="total"
							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">{{characterBasicInfo.birthday}}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">现任职位：</div>
								<div class="baseInfo-item-content">{{characterBasicInfo.positionTitle}}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">党派归属：</div>
								<div class="baseInfo-item-content">{{characterBasicInfo.party}}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">教育背景：</div>
								<div class="baseInfo-item-content" v-for="item in characterBasicInfo.educationList">{{item.school+item.major}}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title address">代表州/选区：</div>
								<div class="baseInfo-item-content">{{characterBasicInfo.state}}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">政治立场：</div>
								<div class="baseInfo-item-content long">
									{{characterBasicInfo.political}}
								</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">出生地：</div>
								<div class="baseInfo-item-content">{{characterBasicInfo.birthPlace}}</div>
							</div>
						</div>
						<div class="company">
							<div class="company-title">社交媒体</div>
							<div class="company-content">
								<div v-for="item in characterBasicInfo.organizationList" :key="item" class="company-item">
									<img :src="item.imageUrl?item.imageUrl:DefaultIcon2" alt="" />
									<div>
										<div class="company-cn">{{ item.name }}</div>
										<div class="company-name">{{ item.ename }}</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 CharacterResume" class="content-item">
							<img src="./assets/icon01.png" alt="" class="image01" />
							<div class="content-item-time">{{ item.startTime +'-' + item.endTime}}</div>
							<div class="content-item-title">{{ item.orgName +'|' + item.jobName}}</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 CharacterFieldView" class="viewpoint-item">
					<!-- <img :src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" alt="" /> -->
					<el-avatar :size="42" shape="circle" :src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" class="viewpoint-item-img" />
					<div class="viewpoint-item-content">
						<div class="viewpoint-item-name">{{ item.name }}</div>
						<div class="viewpoint-item-desc">{{ item.remarks }}</div>
						<div class="viewpoint-item-job">{{ item.jobName }}</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

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

import getWordCloudChart from "../../utils/worldCloudChart";
import setChart from "@/utils/setChart";
import { getCharacterGlobalInfo, 
	getCharacterBasicInfo,
	getCharacterView,
	getCharacterLatestDynamic,
	getCharacterResume,
	getCharacterFieldView,
	getCharacterFundSource } from "@/api/characterPage/characterPage.js";

import Musk from "./assets/Musk.png";
import cp1 from "./assets/cp1.png";
import cp2 from "./assets/cp2.png";
import cp3 from "./assets/cp3.png";
import cp4 from "./assets/cp4.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";

import DefaultIcon1 from '@/assets/icons/default-icon1.png'
import DefaultIcon2 from '@/assets/icons/default-icon2.png'

// 处理图片代理
const getProxyUrl = (url) => {
	if (!url) return "";
	const urlStr = String(url);
	// 排除非 http 开头（相对路径）、已经是代理链接、或者是本地链接
	if (!urlStr.startsWith('http') || urlStr.includes('images.weserv.nl') || urlStr.includes('localhost') || urlStr.includes('127.0.0.1')) {
		return url;
	}
	// 移除协议头 http:// 或 https://
	const cleanUrl = urlStr.replace(/^https?:\/\//i, '');
	return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};




// 获取人物全局信息
const characterInfo = ref({});

const getCharacterGlobalInfoFn = async () => {
	const params = {
		personId: window.sessionStorage.getItem("personId") || "Y000064"
	};
	try{
		const res = await getCharacterGlobalInfo(params);
		if (res.code === 200) {
			console.log("人物全局信息", res);
			if (res.data) {
				characterInfo.value = res.data;
			}
		}
	}catch(error){

	}
	
};

// 获取人物基本信息
const characterBasicInfo = ref({});
const getCharacterBasicInfoFn = async () => {
	const params = {
		personId: window.sessionStorage.getItem("personId") || "Y000064"
	};
	try{
		const res = await getCharacterBasicInfo(params);
		if (res.code === 200) {
			console.log("人物基本信息", res);
			if (res.data) {
				characterBasicInfo.value = res.data;
			}
		}
	}catch (error) {
		console.error(error);
	}
};

// 获取人物观点
const characterView = ref({});
const getCharacterViewFn = async () => {
	const params = {
		personId: window.sessionStorage.getItem("personId") || "Y000064",
		year: numActive.value
	};
	try{
		const res = await getCharacterView(params);
		if (res.code === 200) {
			console.log("人物观点", res);
			if (res.data) {
				characterView.value = res.data.map(item=>{
					return{
						name:item.option,
						value:item.count
					};
				});
			}
		}
	}catch(error){

	}
	
};

const handleCharacterView = async () => {
	await getCharacterViewFn();
	const wordCloudChart = getWordCloudChart(characterView.value);
	setChart(wordCloudChart, "wordCloudChart");
};

const handleChangeYear = (item) => {
	numActive.value = item;
	characterView.value = [];
	handleCharacterView();
};


// 获取资金来源

const yearList = ref([
	{
		label: "2025",
		value: 2025
	},
	{
		label: "2024",
		value: 2024
	},
	{
		label: "2023",
		value: 2023
	}
]);
const CharacterFundSource = ref([]);

const getCharacterFundSourceFn = async () => {
	const params = {
		personId: window.sessionStorage.getItem("personId") || "Y000064",
		year: selectedOption.value || "2025"
	};
	try{
		const res = await getCharacterFundSource(params);
		if (res.code === 200) {
			console.log("资金来源", res);
			if (res.data) {
				CharacterFundSource.value = res.data.map((item,index)=>{
					return{
						rank: index + 1,
						contributor: item.orgName,
						totalAmount: item.totalDonation,
						individualAmount: item.personalDonation,
						pacsAmount: item.pacsDonation
					}
					
				});
			}
		}
	}catch(error){

	}
	
};

const handleChangeYearList = async () => {
	
	getCharacterFundSourceFn();
};

// 获取领域观点
const CharacterFieldView = ref({});
const getCharacterFieldViewFn = async () => {
	const params = {
		areaId: window.sessionStorage.getItem("areaId") || "20",
	};
	try{
		const res = await getCharacterFieldView(params);
		if (res.code === 200) {
			console.log("领域观点", res);
			if (res.data) {
				CharacterFieldView.value = res.data;
			}
		}
	}catch(error){

	}
	
};



//是否涉华
const isChecked = ref(false);
const related = ref('N');

const handleChange = event => {
	if(isChecked.value){
		related.value = 'Y';
	}else{
		related.value = 'N';
	}
	getCharacterLatestDynamicFn();
	console.log(related.value);
};

const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	getCharacterLatestDynamicFn();
};

// 获取最新动态
const CharacterLatestDynamic = ref({});
const total = ref(0);
const pageSize = ref(7);
const loading = ref(false);
const abortController = ref(null);
const getCharacterLatestDynamicFn = async () => {
	// 取消上一次未完成的请求
	if (abortController.value) {
		abortController.value.abort();
	}
	// 创建新的 AbortController
	abortController.value = new AbortController();

	loading.value = true;

	const params = {
		personId: window.sessionStorage.getItem("personId") || "Y000064",
		cRelated:  related.value,
		currentPage: currentPage.value - 1,
		pageSize: pageSize.value
	};

	try{
		const res = await getCharacterLatestDynamic(params, abortController.value.signal);
		console.log("最新动态", res);
		if (res.code === 200) {
			if (res.data&& res.data.content) {
				CharacterLatestDynamic.value = res.data.content.map(item => ({
					title: item.title,
					content: item.content,
					econtent: item.econtent,
					time: item.time,
					industryList: item.industryList || ["人工智能"],
					orgName: item.orgName,
					remarks: item.remarks
				}));
				total.value = res.data.totalElements;
			}else {
				CharacterLatestDynamic.value = [];
				total.value = 0;
			}
		}else {
			CharacterLatestDynamic.value = [];
			total.value = 0;
		}
		loading.value = false;
	}catch (error) {
		if (error.name !== "AbortError") {
			console.error(error);
			loading.value = false;
		}
	}
	
};

//获取职业履历
const CharacterResume = ref({});
const getCharacterResumeFn = async () => {
	const params = {
		personId: window.sessionStorage.getItem("personId") || "Y000064"
	};
	try{
		const res = await getCharacterResume(params);
		if (res.code === 200) {
			console.log("人物职业履历", res);
			if (res.data) {
				CharacterResume.value = res.data;
			}
		}
	}catch(error){

	}
	
};

onMounted(() => {
	getCharacterGlobalInfoFn();
	getCharacterBasicInfoFn();
	// getCharacterViewFn();
	getCharacterLatestDynamicFn();
	getCharacterResumeFn();
	getCharacterFieldViewFn();
	handleCharacterView();
	getCharacterFundSourceFn();
});


// const wordCloudData = ref([
// 	[
// 		{ text: "Boring Company", 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: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
// 		{ text: "预算纪律", color: "rgba(19, 168, 168, 1)" }
// 	],
// 	[
// 		{ text: "保守派财政立场", color: "rgb(206, 79, 81)" },
// 		{ text: "能源政策", 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: "可持续能源", color: "rgba(255, 122, 69, 1)" },
// 		{ text: "农业经济引擎", color: "rgb(206, 79, 81)" },
// 		{ text: "有限政府", color: "rgba(255, 122, 69, 1)" }
// 	],
// 	[
// 		{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
// 		{ text: "财政责任", 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: "John Randolph Thune",
// 	introduction: "美国南达科他州共和党籍联邦参议员，现任参议院多数党领袖，以财政保守主义和对华强硬立场著称。",
// 	domain: ["共和党", "电信改革", "美国参议员", "对华强硬派", "参议院多数党领袖"],
// 	avatar: Musk
// });
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 0) {
		return "highlight-row";
	}
	return "";
};
const contributorData = ref([
	{
		rank: 1,
		contributor: "美国以色列公共事务委员会",
		totalAmount: "$618,530",
		individualAmount: "$608,530",
		pacsAmount: "$10,000"
	},
	{
		rank: 2,
		contributor: "洛克希德·马丁公司",
		totalAmount: "$59,747",
		individualAmount: "$49,747",
		pacsAmount: "$10,000"
	},
	{
		rank: 3,
		contributor: "奥驰亚集团（美国烟草巨头）",
		totalAmount: "$43,882",
		individualAmount: "$33,882",
		pacsAmount: "$10,000"
	},
	{
		rank: 4,
		contributor: "Praeses LLC（专注于情报与国防技术的中小型公司）",
		totalAmount: "$41,248",
		individualAmount: "$41,248",
		pacsAmount: "$0"
	},
	{
		rank: 5,
		contributor: "全国广播协会",
		totalAmount: "$41,100",
		individualAmount: "$32,600",
		pacsAmount: "$8,500"
	}
]);
const info = ref(["人物详情", "历史提案", "人物关系", "相关情况"]);
const infoActive = ref("人物详情");
const num = ref(["2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("2025");
const selectedOption = ref("2025");

const dialogVisible = ref(false);
const handleClickTag = tag => {
	dialogVisible.value = true;
};
const newList = ref([
	{
		id: 1,
		title: "我敦促共和党人优先支持特朗普议程：打击移民、降低物价、增加国内能源生产，并通过税收立法。作为下一任多数党领袖，我致力于迅速推进这些优先事项。参议院必须成为人民授权的引擎，而不是障碍。",
		titleEn:
			"I urged Republicans to prioritize backing Trump’s agenda: cracking down on immigration, bringing down prices, increasing domestic energy production, and passing tax legislation. As the next majority leader, I’m committed to moving these priorities swiftly. The Senate must be an engine for the people’s mandate.",
		pie: ["人工智能"],
		origin: "X",
		time: "2025年10月10日",
		type: 1
	},
	{
		id: 2,
		title: "约翰·图恩对白宫推动的人工智能禁令表示怀疑",
		content:
			"参议院多数党领袖约翰·图恩表示，白宫在人工智能禁令方面的进展不足以将其纳入本月晚些时候参议院审议的国防政策法案中。他强调，需要与参议员和众议员合作制定方案，同时保护各州权利，避免联邦过度干预。",
		pie: ["量子科技"],
		origin: "华盛顿观察家报",
		time: "2025年10月10日",
		type: 2
	},
	{
		id: 3,
		title: "约翰·图恩呼吁医疗改革，大流行时期补贴即将到期",
		content:
			"图恩在参议院发言中指出，大流行时期临时扩展的《平价医疗法案》补贴已扭曲保险市场，并将于年底到期。他呼吁国会采取行动，建立可持续模式，提高可负担性和消费者选择，而不是简单延长补贴。",
		pie: ["新能源"],
		origin: "米切尔今报",
		time: "2025年10月09日",
		type: 2
	},
	{
		id: 4,
		title: "医疗谈判中堕胎条款成为障碍",
		content:
			"图恩表示，两党需要就到期中的奥巴马医改税收抵免达成策略共识，但堕胎相关条款已成为谈判的绊脚石。他强调需要平衡各方关切，以避免数百万美国人面临保费上涨。",
		pie: ["量子科技"],
		origin: "泰晤士报",
		time: "2025年10月09日",
		type: 2
	},
	{
		id: 5,
		title: "最近的医疗保健讨论聚焦于大流行时期临时补贴增强措施，这些措施将于年底到期。数百万美国人可能甚至不知道自己已报名补贴计划，因为保险公司会自动为符合零成本覆盖条件的人重新登记。",
		titleEn:
			"Recent discussions on health care have focused on the temporary subsidy enhancements from the pandemic era, which expire at year-end. Millions of Americans may not even know they’re enrolled in subsidized plans because insurers auto-reenroll those eligible for no-cost coverage.",
		pie: ["人工智能"],
		origin: "X",
		time: "2025年10月08日",
		type: 1
	},
	{
		id: 6,
		title: "通过‘一个大美丽法案’使特朗普减税永久化，将为家庭和企业提供所需的稳定性。这是关于创造就业、降低成本，并确保我们的经济比以往任何时候都更强劲复苏。",
		titleEn:
			"The phone records provision was a Senate issue we’re working through, but let’s be clear: transparency in investigations matters. On the Epstein files, the debate took on a life of its own, but passing the bill by unanimous consent was the right call to get it to the President without unnecessary delays.",
		pie: ["集成电路"],
		origin: "X",
		time: "2025年10月08日",
		type: 1
	}
]);
const companyList = ref([
	{
		id: 1,
		cn: "个人官网",
		name: "thune.senate.gov ",
		logo: cp1
	},
	{
		id: 2,
		cn: "Twitter/X",
		name: "@johnthune",
		logo: cp2
	},
	{
		id: 3,
		cn: "Instagram",
		name: "@johnrthune",
		logo: cp3
	},
	{
		id: 4,
		cn: "Facebook",
		name: "johnthune",
		logo: cp4
	}
]);
// 政治履历
const resumeList = ref([
	{
		id: 1,
		time: "2025年1月",
		title: "参议院多数党领袖",
		content:
			"图恩创造历史，成为南达科他州历史上第二位当选第四届参议员任期的政客。4 2025年1月，他更进一步当选为参议院多数党领袖，成为美国国会中最具影响力的政治人物之一。",
		door: ""
	},
	{
		id: 2,
		time: "2016年",
		title: "美国参议院议员（第三届任期）",
		content: "图恩成功当选第三届参议员任期，进一步巩固了其在南达科他州的政治地位。",
		door: ""
	},
	{
		id: 3,
		time: "2005-2010年",
		title: "美国参议院议员（第109届、110届、111届国会）",
		content:
			"图恩正式就任美国参议员，代表南达科他州，开始了他在参议院的长期服务。他在参议院迅速适应角色，关注农业、交通和财政等关键议题。",
		door: ""
	},
	{
		id: 4,
		time: "2004年",
		title: "美国参议院议员候选人",
		content:
			"图恩的政治生涯迎来历史性转折，他在选举中击败时任参议院多数党领袖汤姆·达施勒（Tom Daschle），这一胜利是近50年来首次有参议院多数党领袖在选举中落败。",
		door: ""
	},
	{
		id: 5,
		time: "1997-2003年",
		title: "美国众议院议员（第105届、106届、107届国会）",
		content: "图恩在众议院轻松赢得两次连任，连续服务三个任期，展现了其在南达科他州的广泛支持基础。",
		door: ""
	},
	{
		id: 6,
		time: "1996年",
		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;
}
.member-of-congress {
	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: 2174px;
		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-center {
				width: 100%;
				height: 512px;
				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: 56px;
					display: flex;
					align-items: center;
					padding: 14px 12px 16px 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;
						.select {
							width: 120px;
						}
					}
				}
				.main {
					width: 1016px;
					height: 360px;
					margin-left: 24px;
					margin-bottom: 16px;
				}
				.bottom {
					width: 1016px;
					height: 64px;
					margin-left: 24px;
					background-color: rgba(246, 250, 255, 1);
					display: flex;
					align-items: center;
					border-radius: 4px;
					border: 1px solid rgba(231, 243, 255, 1);
					padding: 6px 12px;
					.icon {
						width: 19px;
						height: 20px;
						margin-right: 13px;
					}
					.text1 {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(5, 95, 194);
						margin-right: 13px;
					}
					.icon1 {
						width: 24px;
						height: 24px;
					}
				}
			}
			.left-bottom {
				width: 100%;
				height: 1330px;
				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: 1133px;
					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 {
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
								overflow: hidden;
								text-overflow: ellipsis;
								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: 1000px;
						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: 602px;
				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: 517px;
					padding: 0 48px 50px 34px;
					.baseInfo {
						width: 438px;
						height: 314px;
						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;
							}
						}
					}
					.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;
							overflow-y: scroll;
							.company-item {
								width: 180px;
								height: 49px;
								margin-bottom: 16px;
								display: flex;
								align-items: center;
								cursor: pointer;
								img {
									width: 48px;
									height: 48px;
									margin-right: 8px;
								}

								.company-cn {
									width: 130px;
									font-size: 16px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									line-height: 24px;
									color: rgb(59, 65, 75);
									white-space: nowrap;
									overflow: hidden; 
									text-overflow: ellipsis;
								}
								.company-name {
									width: 130px;
									font-size: 16px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 24px;
									color: rgb(95, 101, 108);
									white-space: nowrap;
									overflow: hidden; 
									text-overflow: ellipsis;
								}
							}
							.company-item:nth-child(2n-1) {
								margin-right: 39px;
							}
							.company-item:last-child {
								.company-name {
									width: 150px;
								}
							}
						}
					}
				}
			}
			.right-bottom {
				width: 520px;
				height: 1556px;
				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;
			.viewpoint-item-img {
				position: absolute;
				top: 0;
				left: -10px;
				width: 42px;
				height: 42px;
			}
			.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>
