<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-show="infoActive === '人物详情'">
			<div class="left">
				<AnalysisBox title="科技观点" width="1064px" height="300px" :show-all-btn="false" class="left-top">
					<template #header-btn>
						<el-select v-model="numActive" class="tab-select" :teleported="true" @change="handleChangeYear">
							<el-option v-for="item in num" :key="item" :label="item" :value="item" />
						</el-select>
					</template>
					<div class="echarts" id="wordCloudChart">
					</div>
				</AnalysisBox>

				<AnalysisBox title=" 金钱来源" width="1064px" height="512px" :show-all-btn="false" class="left-center">
					<template #header-btn>
						<div class="input">
							<el-select v-model="selectedOption" placeholder="请选择" class="select" :teleported="true">
								<el-option v-for="item in yearList" :key="item.value" :label="item.label"
									:value="item.value" @click="handleChangeYearList()" />
							</el-select>
						</div>
					</template>
					<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 class="table-pagination">
							<span class="table-pagination-total">共{{ fundTotal }}项</span>
							<el-pagination v-if="fundTotal / fundPageSize >= 2" :current-page="fundCurrentPage"
								:page-size="fundPageSize" :total="fundTotal" :pager-count="4" layout="prev, pager, next"
								background @current-change="handleFundPageChange" />
						</div>
					</div>
					<div class="bottom">
						<img src="./assets/ai.png" alt="" class="icon">
						<div class="text1">
						</div>
						<img src="./assets/right.png" alt="" class="icon1">
					</div>
				</AnalysisBox>
				<AnalysisBox title="最新动态" width="1064px" height="1330px" :show-all-btn="false" class="left-bottom">
					<template #header-btn>
						<div class="input">
							<input type="checkbox" v-model="isChecked" @change="handleChange"
								style="padding-top: 2px;" /><span style="margin-left: 8px ">只看涉华动态</span>
						</div>
					</template>
					<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 style="display: flex; flex-wrap: wrap; gap: 8px;">
										<AreaTag v-for="tag in item.industryList" :key="tag"
											:tag-name="tag.industryName" @click="handleClickTag(tag.industryName)" />
									</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>
				</AnalysisBox>

			</div>

			<div class="right">
				<AnalysisBox title="基本信息" width="520px" :height="boxHeight" :show-all-btn="false" class="right-top" v-if="characterBasicInfo">
					<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>
				</AnalysisBox>

				<AnalysisBox title="职业履历" width="520px" height="1556px" :show-all-btn="false" class="right-bottom">
					<template #header-btn>
						<div class="resume-tabs">
							<button class="resume-tab" :class="{ active: resumeType === 'career' }"
								@click="switchResumeType('career')">职业履历</button>
							<button class="resume-tab" :class="{ active: resumeType === 'education' }"
								@click="switchResumeType('education')">教育履历</button>
						</div>
					</template>
					<div class="content-main">
						<!-- 职业履历 -->
						<template v-if="resumeType === 'career'">
							<div v-for="item in currentResumeList" :key="item.startTime" 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>
						</template>
						<!-- 教育履历 -->
						<template v-else>
							<div v-for="(item, index) in currentResumeList" :key="index" 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.school }}</div>
								<div class="content-item-content">{{ item.description }}</div>
								<div class="content-item-door" v-if="item.country">
									<img src="./assets/icon02.png" alt="" />
									<span>{{ item.country }}</span>
								</div>
							</div>
						</template>
					</div>
				</AnalysisBox>

			</div>
		</div>
		<!-- 历史提案 -->
		<!-- 在 member-of-congress 同级的左侧添加标签栏 -->
		<!-- 历史提案 tab 对应的内容区 -->
		<div v-if="infoActive === '历史提案'" class="proposal-wrapper"> 
			<div class="proposal-tab-switcher">
				<button :class="['proposal-tab', { active: newsTab === 'history' }]" @click="newsTab = 'history'">
					<span>历史提案</span>
					<svg v-if="newsTab === 'history'" class="proposal-tab-arrow" width="12" height="12"
						viewBox="0 0 12 12" fill="currentColor">
						<path d="M4 2l5 4-5 4V2z" />
					</svg>
				</button>
				<button :class="['proposal-tab', { active: newsTab === 'potential' }]" @click="newsTab = 'potential'">
					<span>潜在提案</span>
					<svg v-if="newsTab === 'potential'" class="proposal-tab-arrow" width="12" height="12"
						viewBox="0 0 12 12" fill="currentColor">
						<path d="M4 2l5 4-5 4V2z" />
					</svg>
				</button>
			</div>
 
			<HistoricalProposal v-if="newsTab === 'history'" />
			<PotentialNews v-else />
		</div> 
		<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" :show-close="false">
			<template #header>
				<div class="viewpoint-header">
					<div class="viewpoint-title">
						<span class="viewpoint-tag">#{{ currentTag }}</span>
						<span class="viewpoint-label">相关领域标签</span>
					</div>
					<div class="viewpoint-close" @click="dialogVisible = false">
						<el-icon :size="16">
							<Close />
						</el-icon>
					</div>
				</div>
			</template>
			<div class="viewpoint-body">
				<div v-for="item in CharacterFieldView" :key="item.id" class="viewpoint-item">
					<div class="viewpoint-avatar">
						<el-avatar :size="48" shape="circle"
							:src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" />
					</div>
					<div class="viewpoint-content">
						<div class="viewpoint-arrow"></div>
						<div class="viewpoint-card">
							<div class="viewpoint-card-header">
								<span class="viewpoint-name">{{ item.name }}</span>
								<span class="viewpoint-job">{{ item.jobName }}</span>
							</div>
							<div class="viewpoint-desc">{{ item.remarks }}</div>
						</div>
					</div>
				</div>
				<div v-if="CharacterFieldView.length === 0" class="viewpoint-empty">暂无数据</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import HistoricalProposal from "./components/historicalProposal/components/BillTracker.vue";
import PotentialNews from './components/historicalProposal/components/PotentialNews.vue'
import getWordCloudChart from "../../utils/worldCloudChart";
import setChart from "@/utils/setChart";
import {
	getCharacterGlobalInfo,
	getCharacterBasicInfo,
	getCharacterView,
	getCharacterLatestDynamic,
	getCharacterResume,
	getCharacterFieldView,
	getCharacterFundSource,
	getCharacterReducationResume
} from "@/api/characterPage/characterPage.js";
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
const fundCurrentPage = ref(1)
const fundPageSize = ref(4)
const fundTotal = ref(0)
const allFundSource = ref([])
const boxHeight = computed(() => { 
	if(characterBasicInfo.value.organizationList==undefined) return '545px'
	if(characterBasicInfo.value.organizationList.length==0) return '495px'
	if(characterBasicInfo.value.organizationList.length<=2) return '445px'
	return '545px'
})
// const CharacterFundSource = computed(() => {
//     const start = (fundCurrentPage.value - 1) * fundPageSize.value
//     return allFundSource.value.slice(start, start + fundPageSize.value)
// })

const handleFundPageChange = (page) => {
	fundCurrentPage.value = page
	getCharacterFundSourceFn()
}
const resumeType = ref('career')
const CharacterEducationResume = ref([])

const currentResumeList = computed(() => {
	return resumeType.value === 'career' ? CharacterResume.value : CharacterEducationResume.value
})



const getCharacterEducationResumeFn = async () => {
	const params = { personId: personId.value }
	try {
		const res = await getCharacterReducationResume(params)
		if (res.code === 200 && res.data) {
			CharacterEducationResume.value = res.data
		}
	} catch (error) { }
}

const switchResumeType = (type) => {
	resumeType.value = type
	if (type === 'education' && CharacterEducationResume.value.length === 0) {
		getCharacterEducationResumeFn()
	}
}
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'

import { useRoute } from 'vue-router';
const route = useRoute();
const personId = ref(route.query.personId || "Y000064");
const newsTab = ref('history')
// 处理图片代理
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: personId.value
	};
	try {
		const res = await getCharacterGlobalInfo(params);
		if (res.code === 200) {
			console.log("人物全局信息1", res);
			if (res.data) {
				characterInfo.value = res.data;
			}
		}
	} catch (error) {

	}

};

// 获取人物基本信息
const characterBasicInfo = ref({});
const getCharacterBasicInfoFn = async () => {
	const params = {
		personId: personId.value
	};
	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: personId.value
	};
	if (numActive.value !== '全部') {
		params.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 = () => {
	characterView.value = []
	handleCharacterView()

}



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

const getCharacterFundSourceFn = async () => {
	const params = {
		personId: personId.value,
		pageSize: 4,
		currentPage: fundCurrentPage.value - 1,
	};
	if (selectedOption.value !== '全部') {
		params.year = selectedOption.value;
	}

	try {
		const res = await getCharacterFundSource(params);
		if (res.code === 200) {
			if (res.data) {
				fundTotal.value = res.data.totalElements
				CharacterFundSource.value = res.data.content.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: personId.value,
		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: personId.value
	};
	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 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 info = ref(["人物详情", "历史提案", "人物关系" ]);

const infoActive = ref("人物详情");
const num = ref(['全部', "2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("全部");
const selectedOption = ref("全部");

const dialogVisible = ref(false);
const currentTag = ref(null)
const handleClickTag = async (tag) => {
	currentTag.value = tag
	dialogVisible.value = true
	await getCharacterFieldViewFn(tag)
}

</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}

.news-tab-btn {
	writing-mode: horizontal-tb;
	font-size: 13px;
	color: #8c8c8c;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 12px;
	white-space: nowrap;
}

.news-tab-btn.active {
	background: #e8513f;
	color: #fff;
	border-radius: 20px;
	font-weight: 500;
}

.member-of-congress {
	width: 1600px;
	margin: 0 auto;
	padding-bottom: 50px;

	.header {
		width: 100%;
		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: 100%;
		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;

		:deep(.header-btn) {
			top: 10px;
		}

		.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;
						}
					}
				}



				.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; 
					margin-left: 24px;
					margin-bottom: 16px;
					width: 1064px; 
    min-height: auto;       
    box-sizing: border-box;
    padding-right: 50px;
    position: relative;
    z-index: 110;
				}

				.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-center .input {
				overflow: visible;
			}

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

			.left-center :deep(.el-select .el-input__inner) {
				font-size: 14px;
				color: rgba(59, 65, 75, 1);
			}

			.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);

				:deep(.wrapper-header) {
					position: relative;
					display: flex;
					align-items: center;
					height: 56px;
					/* 根据设计图调整 */
					padding: 0 24px;
				}
				:deep(.header-btn){
					top: 16px;
				}
				.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: 50%;
						transform: translateY(-50%);
						right: 120px;
						 
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(132, 136, 142);
						display: flex;
						align-items: center;
						gap: 8px;

						input[type="checkbox"] {
							width: 16px;
							height: 16px;
							accent-color: #1890ff;
						 
							cursor: pointer;
							margin: 0;
						}

						span {
							margin-left: 0 !important;
						}
					}
				}

				.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;
 
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative;
						.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;
								}
							}
						}
					}
.main-item::after {
    content: '';
    position: absolute;
    left: 109px;  /* 与圆点对齐 */
    top: 24px;    /* 从圆点下方开始 */
    bottom: -20px; /* 延伸到下一个 item */
    width: 1px;
    background-color: rgb(230, 231, 232);
    z-index: -1;
}
					.line-test {
						position: absolute;
						top: 10px;
						left: 109px; 
						border: 1px solid rgb(230, 231, 232);
						z-index: -1;
						position: absolute;
   
    bottom: 10px;   
					}
				}

				.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;
					margin-top: 16px;
					.baseInfo {
						width: 438px;
						height: 265px;
						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;
							overflow-x: hidden;
							-ms-overflow-style: none;
							scrollbar-width: none;

							&::-webkit-scrollbar {
								display: none;
							}

							.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);

				.resume-tabs {
					display: flex;
					flex-direction: row;
					gap: 8px;
					align-items: flex-start;
				}

				.resume-tab {
					width: 90px;
					height: 28px;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 1px 8px;
					border-radius: 4px;
					border: 1px solid rgba(230, 231, 232, 1);
					background: rgba(255, 255, 255, 1);
					color: rgba(59, 65, 75, 1);
					font-size: 16px;
					font-family: 'Microsoft YaHei', sans-serif;
					font-weight: 400;
					line-height: 30px;
					cursor: pointer;
					box-sizing: border-box;
				}

				.resume-tab.active {
					background: rgba(231, 243, 255, 1);
					border-color: rgba(5, 95, 194, 1);
					color: rgba(5, 95, 194, 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);
}



.proposal-wrapper {
	position: relative;
	/* 作为定位参考 */
}



.proposal-tab.active {
	background: #055FC2;
	color: #fff;
}

.proposal-tab-switcher {
	position: absolute;
	right: calc(100% + 24px);
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 1;
}

.proposal-tab {
	width: 120px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	font-family: 'Source Han Sans CN', 'Noto Sans SC', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #8c8c8c;
	background: none;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	white-space: nowrap;
	box-sizing: border-box;
}

.proposal-tab.active {
	background: #055FC2;
	color: #fff;
}

.proposal-tab-arrow {
	flex-shrink: 0;
}

.table-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 0;
}

.table-pagination-total {
	font-size: 14px;
	font-family: 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	color: rgba(95, 101, 108, 1);
	white-space: nowrap;
}

.table-pagination :deep(.el-pagination.is-background .btn-prev),
.table-pagination :deep(.el-pagination.is-background .btn-next),
.table-pagination :deep(.el-pagination.is-background .el-pager li) {
	min-width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 4px;
	border: 1px solid rgba(234, 236, 238, 1);
	background: #fff;
	color: rgba(59, 65, 75, 1);
	font-size: 14px;
	font-family: 'Microsoft YaHei', sans-serif;
	margin: 0 3px;
}

.table-pagination :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
	background: #fff;
	color: rgba(5, 95, 194, 1);
	border-color: rgba(5, 95, 194, 1);
}

.table-pagination :deep(.el-pagination.is-background .el-pager li:not(.is-disabled):hover) {
	color: rgba(5, 95, 194, 1);
}

.table-pagination :deep(.el-pagination.is-background .btn-prev:hover),
.table-pagination :deep(.el-pagination.is-background .btn-next:hover) {
	color: rgba(5, 95, 194, 1);
}

.left-top :deep(.header-btn) {
	overflow: visible;
}

.tab-select {
	width: 120px;
}

.left-top :deep(.el-select .el-input__wrapper) {
	height: 28px;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(230, 231, 232, 1) inset;
	background: rgba(255, 255, 255, 1);
}

.left-top :deep(.el-select .el-input__inner) {
	font-size: 14px;
	font-family: 'Microsoft YaHei', sans-serif;
	color: rgba(59, 65, 75, 1);
}

.left-top :deep(.el-select .el-input.is-focus .el-input__wrapper) {
	box-shadow: 0 0 0 1px rgba(5, 95, 194, 1) inset;
}

.viewpoint-dialog {
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}


.viewpoint-dialog.el-dialog {
	width: 761px !important;
	height: 669px !important;
	max-height: 669px !important;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.viewpoint-dialog .el-dialog__header {
	padding: 0;
	margin: 0;
	height: 52px;
	flex-shrink: 0;
}

.viewpoint-dialog .el-dialog__body {
	padding: 0;
	flex: 1;
	overflow: hidden;
}

.viewpoint-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 52px;
	padding: 0 24px;
	border-bottom: 1px solid rgba(231, 243, 255, 1);
	box-sizing: border-box;
}

.viewpoint-title {
	display: flex;
	align-items: center;
}

.viewpoint-tag {
	font-size: 18px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(206, 79, 81, 1);
	line-height: 24px;
}

.viewpoint-label {
	font-size: 18px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
}

.viewpoint-close {
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.viewpoint-body {
	padding: 18px 24px 24px;
	height: calc(669px - 52px);
	max-height: calc(669px - 52px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
}

.viewpoint-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.viewpoint-avatar {
	flex-shrink: 0;
	padding-top: 12px;
}

.viewpoint-content {
	flex: 1;
	display: flex;
	align-items: flex-start;
}

.viewpoint-arrow {
	width: 9px;
	height: 72px;
	flex-shrink: 0;
	background: url('./assets/arrow-icon.png') no-repeat center / 100%;
}

.viewpoint-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	background-color: rgba(246, 250, 255, 1);
	border: 1px solid rgba(231, 243, 255, 1);
	border-radius: 4px;
}

.viewpoint-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.viewpoint-name {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
}

.viewpoint-job {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	color: rgba(95, 101, 108, 1);
	line-height: 30px;
}

.viewpoint-desc {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
	text-align: justify;
}

.viewpoint-empty {
	text-align: center;
	padding: 40px 0;
	color: rgba(170, 173, 177, 1);
	font-size: 14px;
}
</style>
