<!-- 中M博弈概览页 -->
<template>
	<div class="content-main">
		<!-- 面包屑 -->
		<div class="content-title">
			<span>国家科技安全</span>> <span>中美博弈概览 </span>
			<div class="header-search-box">
				<div class="header-search-left">
					<div class="input-box">
						<el-input v-model="searchText" style="width: 324px" @keyup.enter="handleSearch" />
					</div>
					<div class="icon" @click="handleSearch">
						<img src="./assets/images/search-icon.png" alt="" />
					</div>
				</div>
				<div class="header-search-right" @click="handleToSearch">
					<div class="header-img-box"><img src="./assets/images/search-btn.png" alt="" /></div>
				</div>
			</div>
		</div>
		<!-- 中美博弈最新动态内容-->
		<div class="content-box">
			<div class="title-text">中美博弈最新动态</div>
			<div class="title-text-small">
				提供半导体、AI、量子等关键领域的竞争动态、政策追踪与产业链分析，实时把握中美博弈全局
			</div>
			<div class="box">
				<div class="item left">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/overview-card-header-icon.png" />
						<div class="item-header-text">机构动态</div>
						<!-- <div class="item-header-more">更多 +</div> -->
					</div>
					<div class="item-header-divider"></div>
					<div class="item-content">
						<div class="item-card" style="">
							<div class="item-card-btn-left" @click="changeOrganizationNews('left')">
								<img class="item-btn-icon" src="@/assets/images/icon/card-btn-left.png" />
							</div>
							<!-- 机构动态内容-->
							<div class="item-card-content">
								<div class="item-card-content-header">
									<div style="width: calc(100% - 80px)">
										<div class="item-card-content-title">
											{{ organizationNews[organizationNewsShow].title }}
										</div>
										<div class="item-card-content-title-small">
											{{
												organizationNews[organizationNewsShow].time +
												" · " +
												organizationNews[organizationNewsShow].adress
											}}
										</div>
									</div>
									<img
										class="item-card-content-title-image"
										:src="organizationNews[organizationNewsShow].image"
										alt=""
									/>
								</div>
								<div class="item-header-divider"></div>
								<div class="item-card-content-text">
									{{ organizationNews[organizationNewsShow].content }}
								</div>
								<div style="display: flex; margin-top: 30px">
									<div
										class="item-card-content-tag"
										v-for="(tag, index) in organizationNews[organizationNewsShow].tag"
										:key="index"
										:style="{
											color: tag.textColor,
											background: tag.color,
											border: `1px solid ${tag.textColor}`
										}"
									>
										{{ tag.text }}
									</div>
								</div>
							</div>
							<div class="item-card-btn-right" @click="changeOrganizationNews('right')">
								<img class="item-btn-icon" src="@/assets/images/icon/card-btn-right.png" />
							</div>
						</div>
						<div class="item-card-right">
							<div class="item-list">
								<div v-for="(organizationItem, index) in organizationList" :key="index" style="height: 40px">
									<div style="display: flex; margin: 10px">
										<div class="item-list-punblier">
											{{ organizationItem.punblier }}
										</div>
										<div class="item-list-content">
											{{ organizationItem.content }}
										</div>
										<div class="item-list-time">
											{{ organizationItem.time }}
										</div>
									</div>
									<div class="item-header-divider"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--风险信号-->
				<div class="item left">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" />
						<div class="item-header-text" style="background-color: #ce4f51">
							风险信号
							<div class="num">{{ warningList.length }}</div>
						</div>
					</div>
					<div class="item-header-divider"></div>
					<div style="padding: 30px 23px; height: 400px">
						<div class="waring-item" v-for="(item, index) in warningList" :key="index" @click="handleRiskSignalItemClick">
							<div style="display: flex; height: 47px">
								<div
									class="waring-status"
									:style="{
										color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
										backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
									}"
								>
									{{ item.status === 0 ? "特别重大" : item.status === 1 ? "重大风险" : "一般风险" }}
								</div>
								<div class="waring-text">
									{{ item.title }}
								</div>
								<div class="waring-time">{{ item.time }}</div>
							</div>
							<!-- <div class="item-header-divider"></div> -->
						</div>
					</div>
					<div class="item-btn" @click="handleToMoreRiskSignal">
						<div class="icon">
							<img src="@/assets/images/more-signal.png" alt="" />
						</div>
						<div class="text">{{ "查看更多" }}</div>
					</div>
				</div>
				<!--新闻资讯-->
				<div class="item right">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/news-card-header-icon.png" />
						<div class="item-header-text-1" style="color: #055fc2">新闻资讯</div>
						<div class="item-header-more" style="color: #055fc2; cursor: pointer" @click="handleToMoreNews">
							更多 +
						</div>
					</div>
					<div class="item-header-divider"></div>
					<div class="news-box">
						<div v-for="(item, index) in newsList" :key="index" class="news-box-item">
							<div style="display: flex">
								<img :src="item.image" />
								<div style="padding: 0 10px">
									<div class="news-box-title">
										{{ item.title }}
									</div>
									<div class="news-box-title-small">
										{{ item.time + " · " + item.publier }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--人物动态-->
				<div class="item right">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/people-card-header-icon.png" />
						<div class="item-header-text-1" style="color: #055fc2">人物动态</div>
					</div>
					<div class="item-header-divider"></div>
					<div class="character-box">
						<div class="character-item" v-for="(item, index) in characterDynamics" :key="index">
							<img :src="item.image" class="character-image" />
							<div class="talk-box">
								<div style="display: flex">
									<div class="talk-title">
										{{ item.name }}
									</div>
									<div style="width: 60%; text-align: right">
										{{ item.position + "." + item.time }}
									</div>
								</div>
								{{ item.talk }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<Thematicanalysis />
				<ResourceSupport />
				<strengthComparison />
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Thematicanalysis from "./component/Thematicanalysis.vue";
import ResourceSupport from "./component/ResourceSupport.vue";
import strengthComparison from "./component/strengthComparison.vue";
import router from "@/router";
import { navigateToViewRiskSignal, navigateToViewRiskSignalOpenFirstDetail } from "@/utils/riskSignalOverviewNavigate";

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

// 跳转到综合检索页面
const handleToSearch = () => {
	const route = router.resolve("/comprehensiveSearch");
	window.open(route.href, "_blank");
};

const handleRiskSignalItemClick = () => {
	navigateToViewRiskSignalOpenFirstDetail(router);
};

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	navigateToViewRiskSignal(router);
};

// 查看更多新闻资讯
const handleToMoreNews = () => {
	const route = router.resolve("/newsBrief");
	window.open(route.href, "_blank");
};

const organizationNews = ref([
	{
		title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		time: "2025年9月16日",
		adress: "美国白宫",
		image: "/testData/organizationNews-image1.png",
		content:
			"9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需",
		tag: [
			{
				color: "#FFF1F0",
				textColor: " rgba(245, 34, 45, 1)",
				text: "人工智能"
			},
			{
				color: "#E6F4FF",
				textColor: "  rgba(22, 119, 255, 1)",
				text: "通信网络"
			}
		]
	},
	{
		title: "2美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		time: "2025年9月16日",
		adress: "美国白宫",
		image: "/testData/organizationNews-image1.png",
		content:
			"9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需",
		tag: [
			{
				color: "#F5222D",
				textColor: "#FFF1F0",
				borderColor: "rgba(255, 163, 158, 1)",
				text: "人工智能"
			},
			{
				color: "#E6F4FF",
				textColor: "#1677FF",
				borderColor: "rgba(145, 202, 255, 1)",
				text: "通信网络"
			}
		]
	},
	{
		title: "3美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		time: "2025年9月16日",
		adress: "美国白宫",
		image: "/testData/organizationNews-image1.png",
		content:
			"9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需",
		tag: [
			{
				color: "#FFF1F0",
				textColor: " rgba(245, 34, 45, 1)",
				text: "人工智能"
			},
			{
				color: "#E6F4FF",
				textColor: "  rgba(22, 119, 255, 1)",
				text: "通信网络"
			}
		]
	}
]); //机构动态
const organizationNewsShow = ref(0); //机构动态当前展示条目

const organizationList = ref([
	{
		time: "1小时前",
		content:
			"特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
		punblier: "国会"
	},
	{
		time: "10小时前",
		content: "众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
		punblier: "商务部"
	},
	{
		time: "11小时前",
		content: "民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
		punblier: "财政部"
	},
	{
		time: "一天前",
		content: "众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
		punblier: "FCC"
	},
	{
		time: "周三",
		content:
			"参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
		punblier: "白宫"
	}
]); //机构动态

//风险信号
const warningList = ref([
	{
		title: "美国大而美法案落地，总统签署通过",
		time: "一天前",
		status: 2
	},
	{
		title: "美大而美法案7月1日以51:50的票数胜出",
		time: "一天前",
		status: 2
	},
	{
		title: "首次提出“限制外国敏感实体获取补",
		time: "一天前",
		status: 1
	},
	{
		title: "首次提出“限制外国敏感实体获取补偿",
		time: "一天前",
		status: 1
	},
	{
		title: "首次提出“限制外国敏感实体获取补偿",
		time: "一天前",
		status: 0
	}
]);

//新闻资讯
const newsList = ref([
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	}
]);

//人物动态
const characterDynamics = ref([
	{
		image: "/testData/united_states 1.png",
		name: "詹姆斯·刘易斯",
		position: "商务部某办公室主任",
		time: "一天前",
		talk: "指出美国在AI赋能科学，特别是“自驱实验室”等自动化科研设施上的投资不足，呼吁进行系统性战略投资"
	},
	{
		image: "/testData/united_states 2.png",
		name: "迈克尔·霍洛维茨",
		position: "某计划署主席",
		time: "一天前",
		talk: "评价特朗普政府《AI国家行动计划》，认为其关键在于通过技术出口和基础设施建设主动抢占全球AI主导权。"
	},
	{
		image: "/testData/united_states 1.png",
		name: "詹姆斯·戴维·万斯",
		position: "副总统",
		time: "一天前",
		talk: "提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。"
	}
]);

function changeOrganizationNews(type) {
	if (type === "left") {
		organizationNewsShow.value === 0 ? "" : (organizationNewsShow.value = organizationNewsShow.value - 1);
	} else {
		organizationNews.value === organizationNews.value.length - 1
			? ""
			: (organizationNewsShow.value = organizationNewsShow.value + 1);
	}
}
onMounted(() => {});
</script>

<style lang="scss" scoped>
.content-main {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: Microsoft YaHei;
	background-image: url("./assets/images/bg.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: #fff;

	.content-title {
		height: 64px;
		color: #fff;
		font-family: Microsoft YaHei;
		font-size: 20px;
		font-weight: 700;
		line-height: 26px;
		line-height: 64px;
		background: url("../../assets/images/bg//header-bg.png");
		box-sizing: border-box;
		padding-left: 160px;
		position: relative;

		.header-search-box {
			position: absolute;
			top: 14px;
			right: 160px;
			display: flex;
			gap: 12px;
			justify-content: flex-end;

			.header-search-left {
				width: 360px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
				background: rgba(255, 255, 255, 0.3);
				display: flex;

				.input-box {
					width: 324px;
				}

				.icon {
					width: 36px;
					height: 36px;
					border-radius: 4px;
					cursor: pointer;
					&:hover {
						background: rgba(255, 255, 255, 0.5);
					}

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

			.header-search-right {
				width: 36px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
				background: rgba(255, 255, 255, 0.3);
				cursor: pointer;

				.header-img-box {
					width: 19px;
					height: 24px;
					margin: 4px auto;

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

	.content-box {
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: 0 10%;

		.title-text {
			margin-top: 56px;
			font-size: 32px;
			font-weight: 700;
			line-height: 42px;
			letter-spacing: 0px;
			text-align: center;
		}

		.title-text-small {
			font-size: 20px;
			font-weight: 400;
			text-align: center;
			margin-top: 8px;
			color: rgba(59, 65, 75, 1);
			font-size: 20px;
			font-weight: 400;
			line-height: 26px;
		}

		/* 父级：2×2 网格，固定间距 */
		.box {
			margin-top: 57px;
			display: grid;
			grid-template-columns: 2fr 1fr;
			/* 左列宽是右列的 2 倍 */
			grid-auto-rows: 1fr;
			/* 两行等高 */
			gap: 16px;
			/* 横竖间距都是 16 px */
			height: 1000px;
			/* 示例：撑满视口，可改 */
		}

		/* 子级：仅上色居中，方便观察 */
		.item {
			height: 500px;
			justify-content: center;
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			/* 业务系统/模块阴影 */
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);

			.item-header {
				height: 48px;
				width: 100%;
				display: flex;
				position: relative;

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

				.item-header-text {
					/* 原有样式不变 */
					display: flex;
					align-items: center;
					/* 垂直居中 */
					justify-content: center;
					/* 水平居中（可选） */
					gap: 8px;
					/* 文字与圆点之间的距离，按需调 */

					/* 其余保持原样 */
					width: 150px;
					height: 48px;
					/* 建议把高度写死，方便对齐 */
					background: #055fc2;
					color: #fff;
					font: bold 20px/1 Microsoft YaHei;
					text-align: center;

					.num {
						display: inline-flex;
						/* 或 flex */
						align-items: center;
						justify-content: center;
						width: 24px;
						height: 24px;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.3);
						font-size: 14px;
					}
				}

				.item-header-text-1 {
					// width: 150px;
					height: 48px;
					line-height: 48px;
					text-align: left;
					font-weight: 700;
					font-size: 20px;
					font-family: Microsoft YaHei;
				}

				.item-header-num {
					width: 30px;
					display: flex;
					justify-content: flex-start;
					align-items: center;

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

				.item-header-more {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					line-height: 48px;
					text-align: center;
					width: 50px;
					position: absolute;
					top: 0;
					right: 27px;
				}
			}

			.item-header-divider {
				/* 矩形 249 */
				width: 100%;
				height: 1px;
				background: #eaecee;
			}

			.item-card-content-tag {
				width: 76px;
				height: 24px;
				padding: 1px 8px 1px 8px;
				margin: 2px;
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
				letter-spacing: 0px;
				text-align: justify;
				box-sizing: border-box;
				border: 1px;
				border-radius: 4px;
				border: 1px solid transparent;
			}

			.item-content {
				height: calc(100% - 50px);
				width: 100%;
				display: flex;
				padding: 20px;

				.item-card {
					width: 50%;
					height: 100%;
					display: flex;
					box-sizing: border-box;
					border: 1px solid rgba(255, 255, 255, 1);
					border-radius: 10px;
					/* 业务系统/模块阴影 */
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 0.3);

					.item-card-btn-left {
						height: 100%;
						width: 24px;
						padding-top: calc(50% - 20px);
					}

					.item-card-content {
						height: 100%;
						width: 454px;
						padding: 20px;

						.item-card-content-header {
							height: 110px;
							display: flex;
							justify-content: space-between;

							.item-card-content-title {
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								text-overflow: ellipsis;
								word-break: break-all;
							}

							.item-card-content-title-small {
								margin-top: 15px;
								color: rgba(95, 101, 108, 1);

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

						.item-card-content-title-image {
							height: 80px;
							width: 80px;
						}

						.item-card-content-text {
							margin-top: 16px;
							color: rgba(95, 101, 108, 1);

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

							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 7;
							text-overflow: ellipsis;
							word-break: break-all;
						}
					}

					.item-btn-icon {
						height: 48px;
						width: 100%;
						margin-top: calc(50% - 24px);
					}

					.item-card-btn-right {
						height: 100%;
						width: 24px;
						padding-top: calc(50% - 20px);
					}
				}

				.item-card-right {
					width: 50%;
					height: 100%;
					display: flex;

					.item-list {
						padding: 10px;

						.item-list-punblier {
							width: 64px;
							height: 22px;
							border-radius: 4px;
							background: rgba(231, 243, 255, 1);
							text-align: center;
							padding: 1px 4px 1px 4px;
							color: rgba(5, 95, 194, 1);

							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
							letter-spacing: 0px;
							margin-right: 5px;
						}

						.item-list-content {
							width: calc(100% - 150px);
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							word-break: break-all;
						}

						.item-list-time {
							width: 68px;
							color: rgba(132, 136, 142, 1);

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

			.waring-item {
				height: 48px;
				cursor: pointer;
				margin: 0 auto;

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

				.waring-status {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					padding: 4px;
					font-size: 12px;
					text-align: center;
					box-sizing: border-box;
				}

				.waring-text {
					color: rgba(59, 65, 75, 1);
					width: calc(100% - 120px);
					padding: 0 16px;
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 48px;
					text-align: justify;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border-bottom: 1px solid #eaecee;
					/* 底部边框 */
				}

				.waring-time {
					width: 68px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 48px;
					letter-spacing: 0px;
					text-align: right;
					border-bottom: 1px solid #eaecee;
					/* 底部边框 */
				}
			}

			.item-btn {
				/* Buttons按钮/主按钮/亮色/默认 */
				width: 460px;
				height: 42px;
				margin: 0 20px;
				/* 自动布局 */
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				gap: 8px;
				padding: 5px 16px 5px 16px;

				border-radius: 6px;
				background: rgba(5, 95, 194, 1);
				cursor: pointer;

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

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

				.text {
					color: rgba(255, 255, 255, 1);

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

			/* 新闻资讯 */
			.news-box {
				display: grid;
				grid-template-columns: 1fr 1fr;
				/* 两列，等宽 */
				gap: 10px;
				height: 400px;
				overflow: hidden;

				.news-box-item {
					padding: 20px;

					.news-box-item-img {
						/* 矩形 265 */
						width: 96px;
						height: 72px;
					}

					.news-box-title {
						height: 48px;
						line-height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
						overflow: hidden;
						display: -webkit-box;
						/* 旧语法，但必须写 */
						-webkit-box-orient: vertical;
						/* 垂直排列 */
						-webkit-line-clamp: 2;
						/* 限制两行 */
						text-overflow: ellipsis;
						/* 兜底，部分旧机需要 */
						/* 可选：防止单词过长撑开 */
						word-break: break-all;
					}

					.news-box-title-small {
						margin-top: 3px;
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}

			/* 人物动态 */
			.character-box {
				.character-item {
					display: flex;
					padding: 17px;

					.character-image {
						/* united_states 1 */
						width: 36px;
						height: 36px;
						border-radius: 50%;
					}

					.talk-box {
						height: 98px;
						width: 100%;
						padding: 17px;
						color: rgba(59, 65, 75, 1);

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

						background-image: url("../../assets/images/bg/characterDynamics-bg.png");
						background-repeat: no-repeat;
						/* 不重复 */
						background-size: 100% 100%;
						/* 自动拉伸并覆盖整个元素，保持比例 */
						background-position: center center;

						.talk-title {
							width: 220px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
}

:deep(.el-input__wrapper) {
	box-shadow: none;
	background: none;
}

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

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

:deep(.el-input__inner::placeholder) {
	color: rgba(132, 136, 142, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

:deep(.el-input__inner) {
	color: #fff;
	font-family: Microsoft YaHei;
	font-size: 18px;
	font-weight: 400;
	line-height: 34px;
}
</style>
