<!--今日风险-->
<template>
	<div class="content-wrapper">
		<div class="policy-monitoring">
			<div class="header">
				<div class="section" v-for="(section, index) in sectionTab" :key="index" :style="{
					width: sections[index].waveBall.length === 2 ? '350px' : '503px',
					background: section.background
				}">
					<img class="section-title" :src="section.title" />
					<div class="stats">
						<div v-for="value in sections[index].waveBall" @click="highLight(value.type)">
							<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
							<div class="waveBall-text">
								{{ value.title }}
								<span v-if="value.change !== '无新增'" class="red-dot"></span>
							</div>
						</div>
					</div>
					<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
						<img src="./icon/title-icon-1.png" />
						<div class="bottm-box-text" :style="sections[index].waveBall.length === 2 ? 'width: 225px' : 'width:378px'">
							{{ sections[index].title }}
						</div>
						<div style="width: 50px; color: #ffffff">
							{{ sections[index].date.slice(-5) }}
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="content-title">
					<img class="section-title" src="./icon/title-icon-2.png" />

					<div>风险信号</div>
					<div class="num">{{ riskTotal }}</div>
					<div class="manage-btn" @click="handleToRiskManage">
						风险信号管理 >
					</div>
				</div>
				<div style="display: flex">
					<!-- 风险信号列表 -->
					<div class="risk-signals" ref="riskSignalsRef">
						<div class="risk-signals-item" v-for="(item, index) in warningList" :key="index"
							@click="handleClickToDetailO(item)" @mouseenter="onMouseEnter(item.signalId)" @mouseleave="onMouseLeave"
							:class="['risk-signals-item', { 'risk-signals-item-hightLight': item.eventType === highlightedEventType }]">
							<div class="item-left" :class="{
								itemLeftStatus1: item.signalLevel === '特别重大',
								itemLeftStatus2: item.signalLevel === '重大风险'
							}">
								{{ item.signalLevel ? item.signalLevel : "一般风险" }}
							</div>
							<div class="item-right">
								<div class="text">
									{{ item.signalTitle }}
								</div>
								<div class="time">{{ item.signalTime }}</div>
							</div>
						</div>
					</div>
					<div class="news">
						<div class="box1-left" @click="handleSwithCurNews('left')">
							<div class="icon">
								<img src="./icon/box1-left.png" alt="" />
							</div>
						</div>
						<div class="box1-right" @click="handleSwithCurNews('right')">
							<div class="icon">
								<img src="./icon/box1-right.png" alt="" />
							</div>
						</div>
						<el-carousel ref="carouselRef" style="height: 443px; width: 664px" :autoplay="true" :interval="30000"
							arrow="never" indicator-position="none" @change="handleCarouselChange">
							<el-carousel-item v-for="(News, NewsIndex) in filteredHotNewsList" :key="NewsIndex">
								<div class="carousel-item" @click="toDetaile(News.hotspotID, News.hotspotType)">
									<div class="carousel-title">
										<div>
											<div class="title-text">
												{{ News.hotspotTitle }}
											</div>
											<div class="title-tag">
												{{ News.hotspotTag }}
											</div>
										</div>
										<img :src="News.hotspotPicture" style="width: 96px; height: 96px" />
									</div>
									<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div>
									<div class="news-carousel-content">{{ News.hotspotDesc }}</div>

									<div class="carousel-bottom">
										<div class="left">{{ News.hotspotDate + News.hotspotOrgName }}</div>
										<div class="right">
											<div v-for="tag in News.domainList" class="tag">
												{{ tag.name }}
											</div>
										</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { color } from "echarts";
import { onMounted, ref, onUnmounted, computed } from "vue";
import WaveBall from "./WaveBall.vue";
import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js'
import router from "@/router/index";
import icon1 from './icon/title-1.png'
import icon2 from './icon/title-2.png'
import icon3 from './icon/title-3.png'
import icon4 from './icon/title-4.png'
const sectionTab = [
	{
		textColor: "rgba(9, 88, 217, 1)",
		background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)",
		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#4E92F4", "#5993EE", "#8EB3ED", "#77A2EB", "#ffffff", "#ffffff"],
		title: icon1
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		background: "linear-gradient(180.00deg, rgba(8, 151, 156, 1),rgba(8, 151, 156, 0.5) 100%)",

		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#4AB9BA", "#5DBFC1", "#86CCCF", "#8DD0D2", "#ffffff", "#ffffff"],
		title: icon2
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		background: "linear-gradient(180.00deg, rgba(206, 79, 81, 1),rgba(206, 79, 81, 0.5) 100%)",

		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#EF797B", "#ED8C8E", "#EAB0B2", "#E7ABAC", "#ffffff", "#ffffff"],
		title: icon3
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		background: "linear-gradient(180.00deg, rgba(212, 107, 8, 1),rgba(212, 107, 8, 0.5) 100%)",

		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#EFA04F", "#EDA969", "#EABA8C", "#E7AF7A", "#ffffff", "#ffffff"],
		title: icon4
	}
];
// 模拟从后端获取的数据
const sections = ref([
	{
		title: "政令：确保美国太空优势",
		date: "12-18",
		waveBall: [
			{
				percent: 0, // 估算的百分比
				count: 1626,
				change: "+3",
				unit: "项",
				title: "法案(提出)",
				type: '法案'
			},
			{
				percent: 0, // 估算的百分比
				count: 69,
				change: "+2",
				unit: "个",
				title: "政令",
				type: '行政令'
			}
		]
	},
	{
		title: "对实体清单的更新及修订",
		date: "12-19",
		waveBall: [
			{
				percent: 0, // 估算的百分比
				count: 128,
				change: "+1",
				unit: "次",
				title: "实体清单",
				type: '实体清单'
			},
			{
				percent: 0, // 估算的百分比
				count: 69,
				change: "+1",
				unit: "次",
				title: "CCL",
				type: 'CCL'
			}
		]
	},
	{
		title: "SDN清单更新",
		date: "12-15",
		waveBall: [
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "+1",
				unit: "次",
				title: "SDN",
				type: 'SDN'
			},
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "+1",
				unit: "家",
				title: "涉军企业",
				type: '涉军企业'
			}
		]
	},
	{
		title: "232调查：商用飞机和喷气发动机进口对国家安全的...",
		date: "12-15",
		waveBall: [
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "+1",
				unit: "次",
				title: "337调查",
				type: '337调查'
			},
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "无新增",
				unit: "次",
				title: "230调查",
				type: '230调查'
			},
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "无新增",
				unit: "次",
				title: "301调查",
				type: '301调查'
			}
		]
	}
]);

// 最新风险动态统计
const handleGetLatestRiskUpdates = async () => {
	try {
		const params = {
			currentDate: '本周'
		}
		const res = await getLatestRiskUpdates(params);
		console.log("最新风险动态统计", res);
		if (res.code === 200 && res.data) {

			sections.value = [
				{
					title: res.data.policiesRegulations.hotspotTitle,
					date: res.data.policiesRegulations.hotspotDate,
					waveBall: [
						{
							percent: 30, // 估算的百分比
							count: res.data.bill.total,
							change: res.data.bill.dailyIncrement,
							unit: "项",
							title: "法案(提出)",
							type: '法案'
						},
						{
							percent: 20, // 估算的百分比
							count: res.data.administrativeOrder.total,
							change: res.data.administrativeOrder.dailyIncrement,
							unit: "个",
							title: "政令",
							type: '行政令'
						}
					]
				},
				{
					title: res.data.exportControl.hotspotTitle,
					date: res.data.exportControl.hotspotDate,
					waveBall: [
						{
							percent: 10, // 估算的百分比
							count: res.data.Entities.total,
							change: res.data.Entities.dailyIncrement,

							unit: "次",
							title: "实体清单",
							type: '实体清单'
						},
						{
							percent: 20, // 估算的百分比
							count: res.data.CCL.total,
							change: res.data.CCL.dailyIncrement,
							unit: "次",
							title: "CCL",
							type: 'CCL'
						}
					]
				},
				{
					title: res.data.investmentFinancingRestrictions.hotspotTitle,
					date: res.data.investmentFinancingRestrictions.hotspotDate,
					waveBall: [
						{
							percent: 15, // 估算的百分比
							count: res.data.SDN.total,
							change: res.data.SDN.dailyIncrement,
							unit: "次",
							title: "SDN",
							type: 'SDN'
						},
						{
							percent: 5, // 估算的百分比
							count: res.data.militaryInvolvement.total,
							change: res.data.militaryInvolvement.dailyIncrement,
							unit: "家",
							title: "涉军企业",
							type: '涉军企业'
						}
					]
				},
				{
					title: res.data.marketAccess.hotspotTitle,
					date: res.data.marketAccess.hotspotDate,
					waveBall: [
						{
							percent: 3, // 估算的百分比
							count: res.data['337Survey'].total,
							change: res.data['337Survey'].dailyIncrement,
							unit: "次",
							title: "337调查",
							type: '337调查'
						},
						{
							percent: 3, // 估算的百分比
							count: res.data['232Survey'].total,
							change: res.data['232Survey'].dailyIncrement,
							unit: "次",
							title: "230调查",
							type: '230调查'
						},
						{
							percent: 3, // 估算的百分比
							count: res.data['301Survey'].total,
							change: res.data['301Survey'].dailyIncrement,
							unit: "次",
							title: "301调查",
							type: '301调查'
						}
					]
				}
			]
			console.log(sections.value, 'sections.value')
		}
	} catch (error) {
		console.error("获取最新风险动态统计error", error);
	}
};

// 风险信号
const warningList = ref([]);
const riskTotal = ref(0)
const hotNewsList = ref([
	{
		title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		category: "政策及立法打压风险",
		content:
			"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
		date: "2025年9月16日",
		source: "美国白宫·总统行政令",
		tags: ['人工智能', '通信网络']
	},
	{
		title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		category: "政策及立法打压风险",
		content:
			"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
		date: "2025年9月16日",
		source: "美国白宫·总统行政令",
		tags: ['人工智能', '通信网络']
	}
]);

//最新风险信号
const handleGetLatestRisks = async () => {
	try {
		const res = await getLatestRisks();
		console.log("最新风险信号", res);
		if (res.code === 200 && res.data) {
			warningList.value = res.data.riskVOS
			hotNewsList.value = res.data.hotspotVOS
			riskTotal.value = res.data.riskCount
			console.log(hotNewsList.value, 'hotNewsList.value')
		}
	} catch (error) {
		console.error("获取最新风险信号error", error);
	}
};

const curNews = ref({});
const carouselRef = ref(null);
const curHotNewsListIndex = ref(0);
const handleCarouselChange = index => {
	curHotNewsListIndex.value = index;
	if (hotNewsList.value && hotNewsList.value.length > 0) {
		curNews.value = hotNewsList.value[index];
	}
};

// 查看详情
const handleClickToDetail = () => {
	window.sessionStorage.setItem("billId", curBill.value.billId);
	window.sessionStorage.setItem("curTabName", curBill.value.billName);
	const route = router.resolve({
		path: "/billLayout",
		query: {
			billId: curBill.value.billId
		}
	});
	console.log(route);

	window.open(route.href, "_blank");
};
// 查看详情 传递参数
const handleClickToDetailO = item => {
	window.sessionStorage.setItem("billId", item.billId);
	window.sessionStorage.setItem("curTabName", item.name || item.signalTitle);
	const route = router.resolve("/billLayout?billId=" + item.billId);
	window.open(route.href, "_blank");
};

const currentHoveredSignalId = ref(null);

const onMouseEnter = (signalId) => {
	currentHoveredSignalId.value = signalId;
};

const onMouseLeave = () => {
	currentHoveredSignalId.value = null;
};

// 计算属性或使用 watchEffect 来动态计算 filteredHotNewsList
const filteredHotNewsList = computed(() => {
	if (!currentHoveredSignalId.value) return hotNewsList.value; // 如果没有悬停，则返回全部数据

	return hotNewsList.value.filter(newsItem => newsItem.signalId === currentHoveredSignalId.value);
});
const handleToRiskManage = () => {
	// 这里的路由路径请根据实际情况修改
	// router.push('/riskSignalManage');
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
	console.log('跳转到风险信号管理');
};

const highlightedEventType = ref('')
const highLight = (title) => {
	console.log(title)
	// 如果再次点击同一个，取消高亮
	if (highlightedEventType.value === title) {
		highlightedEventType.value = null;
	} else {
		highlightedEventType.value = title;
	}
};
const toDetaile = (id, type) => {
	console.log(id, type)
	if (type === '法案') {
		let path = "/billLayout/bill/introduction";
		let query = { billId: id };
		const { href } = router.resolve({ path, query });
		window.open(href, "_blank");
	} else if (type === '政令') {
		const route = router.resolve({
			path: "/decreeLayout/overview/introduction",
			query: {
				id: id
			}
		});
		window.open(route.href, "_blank");
	} else if (type === '实体清单' || type === 'CCL') {
		const route = router.resolve({
			path: "/exportControl/singleSanction",
			query: {
				id: id
			}
		});
		window.open(route.href, "_blank");
	} else if (type === '337') {
		const curRoute = router.resolve({
			path: "/marketSingleCaseLayout/overview",
			query: {
				id: "337",
				searchId: id
			}
		});
		window.open(curRoute.href, "_blank");
	} else if (type === '203') {
		const curRoute = router.resolve({
			path: "/marketSingleCaseLayout/overview",
			query: {
				id: "203",
				searchId: id
			}
		});
		window.open(curRoute.href, "_blank");
	} else if (type === '301') {
		const curRoute = router.resolve({
			path: "/marketSingleCaseLayout/overview",
			query: {
				id: "301",
				searchId: id
			}
		});
		window.open(curRoute.href, "_blank");
	}
	//type=涉军企业和SDN未对接
}
const handleSwithCurNews = name => {
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}
};

const riskSignalsRef = ref(null); // 引用risk-signals容器

let intervalId;
onMounted(async () => {

	await handleGetLatestRiskUpdates()
	await handleGetLatestRisks()

	const scrollInterval = 2000; // 每隔2秒滚动一次
	let currentScroll = 0;

	intervalId = setInterval(() => {
		if (riskSignalsRef.value) {

			const scrollHeight = riskSignalsRef.value.scrollHeight; // 内容总高度
			const clientHeight = riskSignalsRef.value.clientHeight; // 可视区域高度
			console.log(scrollHeight, clientHeight)
			// 如果滚动到底，则回到顶部
			if (currentScroll + clientHeight >= scrollHeight) {
				currentScroll = 0;
				riskSignalsRef.value.scrollTop = currentScroll;
			} else {
				currentScroll += 10; // 调整这个值可以改变滚动速度
				riskSignalsRef.value.scrollTop = currentScroll;
			}
		}
	}, scrollInterval);
});
onUnmounted(() => {
	clearInterval(intervalId); // 清除定时器
});
// onBeforeUnmount(() => {
// 	andleGetLatestRiskUpdates()
// });
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 100%;
	// height: 100%;

	.policy-monitoring {
		font-family: Arial, sans-serif;
		width: 1601px;
		margin: 0 auto;
	}

	.header {
		width: 1601px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.content {
		/* 容器 83 */
		/* 容器 83 */
		width: 1601px;
		height: 568px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: var(---10, 10px);
		/* 业务系统/模块阴影 */
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 0.65);

		.content-title {
			/* 块级标题 */
			width: 1602px;
			height: 48px;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255, 255, 255, 1);
			background: linear-gradient(180deg, rgba(255, 241, 240, 0.5), rgba(255, 241, 240, 0) 100%);
			color: rgba(206, 79, 81, 1);

			font-family: YouSheBiaoTiHei;
			font-style: Regular;
			font-size: 24px;
			font-weight: 400;
			line-height: 48px;
			letter-spacing: 0px;
			text-align: left;
			display: flex;
			align-items: center;

			img {
				/* 矢量 347 */
				width: 22px;
				height: 18px;
			}

			.num {
				/* 数据展示/Badge徽标数/亮色/数字 */

				height: 22px;
				/* 自动布局 */
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				gap: 10;
				padding: 0px 8px 0px 8px;
				border-radius: 100px;
				background: rgba(206, 79, 81, 1);
				color: rgba(255, 255, 255, 1);
				margin: 12px;
				font-family: Microsoft YaHei;
				font-style: Regular;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				letter-spacing: 0px;
				text-align: center;
			}

			.manage-btn {
				margin-left: auto;
				/* 推到最右侧 */
				margin-right: 16px;
				/* 适当的右边距 */
				padding: 4px 12px;
				border-radius: 20px;
				background-color: rgba(206, 79, 81, 0.1);
				border: 1px solid rgba(206, 79, 81, 0.1);

				font-family: "Microsoft YaHei";
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				color: rgb(206, 79, 81);
				cursor: pointer;

				&:hover {
					background-color: rgba(206, 79, 81, 0.2);
				}
			}
		}
	}

	.section {
		/* 容器 535 */
		width: 350px;
		height: 320px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: var(---10, 10px);
		/* 业务系统/模块阴影 */
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 0.65);
	}

	.section-title {
		margin: 8px 16px;
		/* 容器 1559 */
		width: 125px;
		height: 31px;
	}

	.stats {
		/* 容器 519 */
		height: 210px;
		display: flex;
		justify-content: space-between;
		padding: 0 35px;

		.waveBall-text {
			margin-top: 17px;
			color: #ffffff;

			font-family: Microsoft YaHei;
			font-style: Bold;
			font-size: 20px;
			font-weight: 700;
			// line-height: 26px;
			letter-spacing: 0px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.red-dot {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: rgba(255, 77, 79, 1);
				margin-left: 8px;
				// 如果需要绝对定位，可以使用下面的样式，但在 flex 布局中 margin-left 更简单
				// position: absolute;
				// right: -14px;
				// top: 50%;
				// transform: translateY(-50%);
			}
		}
	}

	.bottm-box {
		/* 容器 1561 */
		display: flex;
		width: 350px;
		height: 48px;
		/* 自动布局 */

		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		// gap: 15;
		color: #ffffff;

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

		.bottm-box-text {
			white-space: nowrap;
			/* 保持在一行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 超出部分显示省略号 */
		}

		img {
			/* 矢量 1667 */
			width: 12px;
			height: 16px;
			margin: 16px 20px;
		}
	}

	.risk-signals {
		width: 769px;
		height: 470px;
		overflow-y: auto;
		overflow-x: hidden;
		box-sizing: border-box;
		padding-right: 20px;

		.risk-signals-item {
			margin-left: 23px;
			height: 47px;
			width: 780px;
			display: flex;
			cursor: pointer;

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

			.itemLeftStatus1 {
				color: rgba(245, 34, 45, 1) !important;
				background: rgba(255, 241, 240) !important;
			}

			.itemLeftStatus2 {
				color: rgba(250, 140, 22, 1) !important;
				background: rgba(255, 247, 230, 1) !important;
			}

			.item-left {
				margin-top: 4px;
				margin-left: 2px;
				width: 40px;
				height: 40px;
				border-radius: 20px;
				color: rgba(82, 196, 26, 1);
				background: rgba(246, 255, 237, 1);
				font-family: Microsoft YaHei;
				font-size: 12px;
				font-weight: 400;
				line-height: 14px;
				box-sizing: border-box;
				padding: 6px 4px;
				text-align: center;
			}

			.item-right {
				margin-left: 13px;
				width: 722px;
				height: 47px;
				border-bottom: 1px solid rgba(240, 242, 244, 1);
				display: flex;

				.text {
					width: 598px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 47px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time {
					width: 88px;
					margin-left: 5px;
					line-height: 47px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.risk-signals-item-hightLight {
			margin-left: 23px;
			height: 47px;
			width: 780px;
			display: flex;
			cursor: pointer;
			background: var(--color-bg-hover);

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

			.itemLeftStatus1 {
				color: rgba(245, 34, 45, 1) !important;
				background: rgba(255, 241, 240) !important;
			}

			.itemLeftStatus2 {
				color: rgba(250, 140, 22, 1) !important;
				background: rgba(255, 247, 230, 1) !important;
			}

			.item-left {
				margin-top: 4px;
				margin-left: 2px;
				width: 40px;
				height: 40px;
				border-radius: 20px;
				color: rgba(82, 196, 26, 1);
				background: rgba(246, 255, 237, 1);
				font-family: Microsoft YaHei;
				font-size: 12px;
				font-weight: 400;
				line-height: 14px;
				box-sizing: border-box;
				padding: 6px 4px;
				text-align: center;
			}

			.item-right {
				margin-left: 13px;
				width: 722px;
				height: 47px;
				border-bottom: 1px solid rgba(240, 242, 244, 1);
				display: flex;

				.text {
					width: 598px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 47px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time {
					width: 88px;
					margin-left: 5px;
					line-height: 47px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}

	.news {
		/* 容器 1567 */
		width: 760px;
		height: 491px;
		margin-left: 37px;
		/* 自动布局 */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 16;
		padding: 24px 48px 24px 48px;

		box-sizing: border-box;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.65);
		position: relative;

		.box1-left {
			position: absolute;
			left: 0;
			top: 200px;
			width: 24px;
			height: 48px;
			background: #e7f1ff;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			z-index: 10;

			.icon {
				width: 11px;
				height: 18px;

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

		.box1-right {
			position: absolute;
			right: 0;
			top: 200px;
			width: 24px;
			height: 48px;
			background: #e7f1ff;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			z-index: 10;

			.icon {
				width: 11px;
				height: 18px;

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

		.carousel-item {
			height: 443px;
			width: 736px;

			.carousel-title {
				width: 664px;
				height: 96px;
				margin: 14px 0;
				color: rgba(59, 65, 75, 1);

				font-family: Microsoft YaHei;
				font-style: Bold;
				font-size: 20px;
				font-weight: 700;
				line-height: 26px;
				letter-spacing: 0px;
				text-align: justify;
				display: flex;

				.title-text {
					/* 美国白宫发布关于进一步延长TikTok执法宽限期的行政令 */
					width: 547px;
					// height: 26px;
				}

				.title-tag {
					/* 移除固定 width */
					height: 30px;
					padding: 0 12px;
					/* 左右内边距控制最小宽度 */
					display: inline-flex;
					/* ✅ 关键：inline + flex */
					justify-content: center;
					/* 水平居中 */
					align-items: center;
					/* 垂直居中 */
					border-radius: 20px;
					background: rgba(206, 79, 81, 0.1);
					color: rgba(206, 79, 81, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					white-space: nowrap;
					/* 防止文字换行 */
					box-sizing: border-box;
				}
			}

			.news-carousel-content {
				width: 664px;
				margin-top: 16px;
				height: 280px;
				/* 调整为可用空间 */
				overflow-y: auto;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				line-height: 30px;
				text-align: justify;
			}

			.carousel-bottom {
				/* 容器 1566 */
				width: 664px;
				height: 34px;
				display: flex;
				justify-content: space-between;

				.left {
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: right;
				}

				.right {
					.tag {
						/* 数据展示/Tag标签/亮色/绿 */
						width: 81px;
						height: 20px;
						/* 自动布局 */
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						gap: 8;
						padding: 1px 8px 1px 8px;
						box-sizing: border-box;
						border: 1px solid rgba(255, 163, 158, 1);
						border-radius: 4px;
						background: rgba(255, 241, 240, 1);
						color: rgba(245, 34, 45, 1);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 14px;
						font-weight: 400;

						letter-spacing: 0px;
						text-align: justify;
					}
				}
			}


		}
	}

	h3 {
		margin-bottom: 10px;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}
}

:deep(.el-carousel__container) {
	height: 443px;
}

:deep(.el-carousel__item) {
	height: 443px;
}

:deep(.el-carousel__item--card) {
	height: 443px;
}
</style>
