<template>
	<div class="data-new">
		<div class="left">
			<img src="./assets/leftbtn.png" alt="" class="left-btn" />
			<img src="./assets/rightbtn.png" alt="" class="right-btn" />
			<div class="left-top">
				<img src="./assets/icon01.png" alt="" />
				<div class="left-top-title">规则限制动态</div>
				<div class="more" @click="handleClickToDetail">查看详情 ></div>
			</div>
			<div class="left-center">
				<img src="./assets/usImg.png" alt="" />
				<div class="left-center-main">
					<div class="left-center-main-title">
						美国联邦通信委员会（FCC）启动撤销重庆信息通信研究院作为认可测试实验室资格的程序
					</div>
					<div class="left-center-main-ul">
						<ul>
							<li>
								<span class="ul-title">发布机构：</span>
								<span class="ul-content">美国联邦通信委员会（FCC）工程技术与媒体关系部</span>
							</li>
							<li>
								<span class="ul-title">发布日期：</span>
								<span class="ul-content">2025年10月24日</span>
							</li>
							<li>
								<span class="ul-title">涉及领域：</span>
								<span class="ul-pie cl1">能源</span>
								<span class="ul-pie cl2">集成电路</span>
								<span class="ul-pie cl3">新材料</span>
								<span class="ul-pie cl4">生物科技</span>
							</li>
							<li>
								<span class="ul-title">限制实体：</span>
								<span class="ul-content">重庆信息通信研究院</span>
							</li>
						</ul>
					</div>
				</div>
				<!-- <div class="left-center-title">国会法案</div> -->
			</div>
			<div class="left-bottom">
				<ul>
					<li class="left-bottom-li">内容摘要：</li>
				</ul>
				<div class="left-bottom-content">
					工程和技术办公室着手撤销对德国莱茵 TÜV 集团/中国检验认证集团（宁波）有限公司作为认可测试实验室的资格。
				</div>
			</div>
		</div>
		<div class="right">
			<div class="right-top">
				<img src="./assets/icon02.png" alt="" />
				<div class="right-top-title">
					风险信号
					<span>4</span>
				</div>
			</div>
			<div style="margin: 6px 34px 0 23px">
				<div v-for="item in list" :key="item.id" class="right-main" @click="handleClickToDetail">
					<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }">
						{{ item.title }}
					</div>
					<div class="main-center">{{ item.content }}</div>
					<div class="main-right">{{ item.time }}</div>
				</div>
			</div>
			<div class="right-mainbtn" @click="handleToMoreRiskSignal">
				<img src="./assets/btn.png" alt="" />
				查看更多
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import router from "@/router";

const list = ref([
	{
		id: 1,
		title: "特别重大",
		content: "保护美国资金与专业知识免受敌对研究利用法案",
		time: "一天前"
	},
	{
		id: 2,
		title: "特别重大",
		content: "美国国土安全部终止哈佛大学SEVP认证",
		time: "一天前"
	},
	{
		id: 3,
		title: "重大风险",
		content: "众议院“美中战略竞争特别委员会”向国会提...",
		time: "一天前"
	},
	{
		id: 4,
		title: "重大风险",
		content: '2026财年拨款法案要求重启"中国行动计划"',
		time: "一天前"
	}
]);

// 跳转详情
const handleClickToDetail = () => {
	// router.push("/decreeLayout");
	const route = router.resolve("/ruleRestrictions/detail");
	window.open(route.href, "_blank");
};

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.data-new {
	width: 1600px;
	height: 460px;
	display: flex;
	justify-content: space-between;
	.left {
		width: 1064px;
		height: 460px;
		margin-right: 16px;
		border-radius: 10px;
		background-color: #fff;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		position: relative;
		.left-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 223px;
			left: 0px;
			cursor: pointer;
		}
		.right-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 223px;
			right: 0px;
			cursor: pointer;
		}
		.left-top {
			width: 100%;
			height: 48px;
			position: relative;
			border-bottom: 1px solid rgb(234, 236, 238);
			img {
				width: 18px;
				height: 18px;
				position: absolute;
				top: 15px;
				left: 23px;
			}
			.more {
				height: 48px;
				line-height: 48px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				position: absolute;
				top: 0;
				right: 40px;
				color: rgb(5, 95, 194);
				cursor: pointer;
			}
			.left-top-title {
				margin-left: 60px;
				width: 152px;
				height: 48px;
				background-color: rgb(5, 95, 194);
				color: #fff;
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				text-align: center;
				padding: 11px 16px;
			}
		}
		.left-center {
			width: 967px;
			height: 208px;
			margin-top: 33px;
			margin-left: 62px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 148px;
				height: 148px;
				margin-right: 21px;
			}
			display: flex;
			.left-center-main {
				width: 758px;
				height: 175px;
				.left-center-main-title {
					margin-left: 19px;
					margin-bottom: 17px;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
				}
				.left-center-main-ul {
					// width: 439px;
					height: 132px;
					ul {
						list-style-position: inside;
						li {
							width: 100%;
							height: 24px;
							margin-bottom: 12px;
							.ul-title {
								display: inline-block;
								width: 120px;
								height: 24px;
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
							.ul-content {
								color: rgb(59, 65, 75);
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
							}
							.ul-pie {
								display: inline-block;
								box-sizing: border-box;
								padding: 2px 8px;
								border: 1px solid;
								border-radius: 4px;
								margin-right: 8px;
							}
							.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(255, 163, 158, 1);
								background-color: rgba(255, 241, 240, 1);
								color: rgba(245, 34, 45, 1);
							}
							.cl3 {
								border-color: rgba(135, 232, 222, 1);
								background-color: rgba(230, 255, 251, 1);
								color: rgba(19, 168, 168, 1);
							}
							.cl4 {
								border-color: rgba(211, 173, 247, 1);
								background-color: rgba(249, 240, 255, 1);
								color: rgba(114, 46, 209, 1);
							}
						}
					}
				}
			}
			.left-center-title {
				padding: 3px 8px 5px;
				height: 32px;
				border-radius: 4px;
				background-color: rgba(231, 243, 255, 1);
				font-size: 18px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(5, 95, 194);
				position: absolute;
				right: 0px;
				top: -1px;
			}
		}
		.left-bottom {
			margin: 17px 0 0 62px;
			ul {
				list-style-position: inside;
				.left-bottom-li {
					font-size: 16px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					margin-bottom: 10px;
				}
			}
			.left-bottom-content {
				width: 943px;
				margin-left: 22px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 30px;
				color: rgb(59, 65, 75);
			}
		}
	}
	.right {
		width: 520px;
		height: 460px;
		border-radius: 10px;
		background-color: #fff;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		position: relative;
		.right-top {
			width: 520px;
			height: 48px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 21px;
				height: 16.84px;
				position: absolute;
				top: 15.1px;
				left: 19.5px;
			}
			.right-top-title {
				padding: 11px 16px;
				width: 148px;
				height: 48px;
				background-color: rgb(206, 79, 81);
				font-size: 20px;
				font-family: "Microsoft YaHei";
				font-weight: 700;
				line-height: 26px;
				text-align: center;
				color: #fff;
				margin-left: 60px;
				span {
					display: inline-block;
					width: 24px;
					height: 20px;
					background-color: rgba(255, 255, 255, 0.3);
					font-size: 14px;
					font-family: "Microsoft YaHei";
					font-weight: 400;
					line-height: 22px;
					text-align: center;
					color: #fff;
					border-radius: 100px;
				}
			}
		}
		.right-main {
			width: 468px;
			padding-right: 5px;
			height: 47px;
			border-radius: 2px;
			display: flex;
			align-items: center;
			cursor: pointer;
			&:hover {
				background: var(--color-bg-hover);
			}
			.main-left {
				width: 40px;
				height: 40px;
				margin: 4px 13px 3px 2px;
				border-radius: 50%;
				font-size: 12px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 14px;
				padding: 6px 4px;
				text-align: center;
			}
			.cl4 {
				background-color: rgba(255, 241, 240, 1);
				color: rgb(206, 79, 81);
			}
			.cl5 {
				background-color: rgba(255, 247, 230, 1);
				color: rgba(250, 140, 22, 1);
			}
			.main-center {
				width: 347px;
				height: 30px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 30px;
				color: rgb(59, 65, 75);
				margin-right: 2px;
			}
			.main-right {
				width: 60px;
				height: 24px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(132, 136, 142);
				text-align: right;
			}
		}
		.right-mainbtn {
			width: 460px;
			height: 42px;
			border-radius: 6px;
			position: absolute;
			left: 26px;
			bottom: 21px;
			background-color: rgb(5, 95, 194);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			img {
				width: 16px;
				height: 16px;
				margin-right: 8px;
			}
			font-size: 16px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 24px;
		}
	}
}
</style>
