<template>
	<div class="cooperation-restrictions-detail">
		<div class="nav">
			<div class="nav-main">
				<img src="./assets/image01.png" alt="" />
				<div class="content">
					<div class="cl1">通过应对哈佛大学的风险来增强国家安全</div>
					<div class="cl2">Enhancing National Security by Addressing Risks at Harvard University</div>
					<div class="cl3">2025年6月4日 10:33 · 美国白宫</div>
				</div>
				<div class="btn">
					<button class="btn1"><img src="./assets/icon01.png" alt="" />查看原文</button>
					<button class="btn1"><img src="./assets/icon02.png" alt="" />查看官网</button>
					<button class="btn1 active"><img src="./assets/icon03.png" alt="" />分析报告</button>
				</div>
			</div>
		</div>
		<div class="title">
			<span class="title-one">当前合作限制数据已关联至总统政令：</span>
			<span class="title-two">《通过应对哈佛大学的风险来增强国家安全》2025年6月4日</span>
			<img src="./assets/right.png" alt="" />
		</div>
		<div class="main">
			<div class="left">
				<!-- 制裁概况 -->
				<div class="left-top">
					<img class="img1" src="./assets/bluetitle.png" alt="" />
					<div class="left-top-title">制裁概况</div>
					<img class="img2" src="./assets/下载按钮.png" alt="" />
					<img class="img3" src="./assets/收藏按钮.png" alt="" />
					<div class="left-top-content">
						<span
							>2025年6月4日，特朗普签署总统公告，全面暂停持F/M/J签证者入境哈佛学习，并授权撤销部分在校国际生的签证。</span
						>
					</div>
					<div class="left-top-bottom">
						<div><span class="tit">限制时间：</span><span class="tit1">2025年6月4日</span></div>
						<div><span class="tit">限制机构：</span><span class="tit1 tit2">美国白宫 ></span></div>
						<div><span class="tit">限制手段：</span><span class="tit1">总统行政令</span></div>
						<div><span class="tit">限制类型：</span><span class="tit1 tit3">人才交流限制</span></div>
						<div><span class="tit">限制领域：</span><span class="tit1">无特定领域</span></div>
					</div>
				</div>
				<!-- 相关实体 -->
				<div class="left-bottom">
					<img class="img1" src="./assets/bluetitle.png" alt="" />
					<div class="left-bottom-title">相关实体</div>
					<img class="img2" src="./assets/下载按钮.png" alt="" />
					<img class="img3" src="./assets/收藏按钮.png" alt="" />
					<div class="left-bottom-main">
						<div v-for="item in dataList" :key="item.id" class="main-box">
							<img :src="item.img" alt="" />
							<div class="name">{{ item.name }}</div>
							<div class="type">{{ item.type }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<!-- 背景分析 -->
				<div class="right-top">
					<img class="img1" src="./assets/bluetitle.png" alt="" />
					<div class="right-top-title">背景分析</div>
					<div class="btn cl1" :class="{'active': active === '涉华背景'}" @click="active = '涉华背景'">涉华背景</div>
					<div class="btn cl2" :class="{'active': active === '全部背景'}" @click="active = '全部背景'">全部背景</div>
					<div class="right-top-content">
						<div v-for="item in dataList2" :key="item.id" class="right-top-item">
							<span class="id">{{ item.id }}</span>
							<span class="name">{{ item.name }}</span>
							<img src="./assets/打开按钮.png" alt="" />
						</div>
					</div>
				</div>
				<!-- 限制条款 -->
				<div class="right-bottom">
					<img class="img1" src="./assets/bluetitle.png" alt="" />
					<div class="right-bottom-title">限制条款</div>
					<div class="btn cl1" :class="{'active': active2 === '涉华背景'}" @click="active2 = '涉华背景'">涉华背景</div>
					<div class="btn cl2" :class="{'active': active2 === '全部背景'}" @click="active2 = '全部背景'">全部背景</div>
					<div class="right-bottom-content1">
						<div class="right-bottom-content1-title">
							<span>（一）暂停入境 </span>
							<img src="./assets/打开按钮.png" alt="">
						</div>
						<div class="right-bottom-content1-content">
							任何外籍人士作为非移民进入美国，根据 INA 第 101（a）（15）（F）或第 101（a）（15）（M）条，即 8 U.S.C. 1101（a）（15）（F）或 1101（a）（15）（M）条款，进入哈佛大学参加交流访客项目，或根据 INA 第 101（a）（15）（J）条，在哈佛大学主办的交流访客项目， 8 U.S.C. 1101（a）（15）（J）被暂停并限制，受本公告第 2 条约束。 该暂停和限制将在本公告发布后 6 个月内失效，除非延长。
						</div>
					</div>
					<div class="right-bottom-content2">
						<div class="right-bottom-content2-title">
							<span>（二）暂停和限制入境的范围及实施  </span>
							<img src="./assets/打开按钮.png" alt="">
						</div>
						<div class="right-bottom-content2-content">
							<div v-for="item in dataList3" :key="item.id" class="forcontent">
								<span>{{ item.id }}.</span>
								<span>{{ item.name }}</span>
							</div>
						</div>
					</div>
					<div class="right-bottom-content3">
						<div class="right-bottom-content3-title">
							<span>（三）执行本命令的作性行动   </span>
							<img src="./assets/打开按钮.png" alt="">
						</div>
						<div class="right-bottom-content3-content">
							国务卿、司法部长和国土安全部长应协调采取一切必要和适当的行动以落实本公告。 国务卿、司法部长和国土安全部长还应考虑利用各自在 INA 下的权限，对哈佛大学参与 SEVP 的能力施加限制，以及学生及交流访客信息系统。 任何此类行动应包括对任何符合国家利益的外国人的例外，这些入境由国务卿、国土安全部长或其各自指定的人决定。
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Harvard from "./assets/哈佛.png";
import Senate from "./assets/参议院.png";
import Justice from "./assets/司法部.png";
import Security from "./assets/国土安全部.png";
import bill from "./assets/授权法案.png";
import Trump from "./assets/trump.png";
import Rubio from "./assets/卢比奥.png";
import Bondi from "./assets/邦迪.png";
import Nome from "./assets/诺姆.png";

const active = ref("涉华背景");
const active2 = ref("涉华背景");

const dataList = ref([
	{
		id: 1,
		name: "哈佛大学",
		type: "",
		img: Harvard
	},
	{
		id: 2,
		name: "美国参议院",
		type: "",
		img: Senate
	},
	{
		id: 3,
		name: "美国司法部",
		type: "",
		img: Justice
	},
	{
		id: 4,
		name: "美国国土安全部",
		type: "",
		img: Security
	},
	{
		id: 5,
		name: "国防授权法案",
		type: "",
		img: bill
	},
	{
		id: 6,
		name: "唐纳德·特朗普",
		type: "总统",
		img: Trump
	},
	{
		id: 7,
		name: "马尔科·卢比奥",
		type: "国务卿",
		img: Rubio
	},
	{
		id: 8,
		name: "帕姆·邦迪",
		type: "司法部长",
		img: Bondi
	},
	{
		id: 9,
		name: "克丽斯蒂·诺姆",
		type: "国土安全部部长",
		img: Nome
	}
]);

const dataList2 = ref([
	{
		id: 1,
		name: "2016-2019 年美国钒表观消费量年均 8590 吨（含钒量），国内产量仅 340 万千克 / 年，进口依赖度超 80%（年均进口 780 万千克）（P1-481、P1-661）。"
	},
	{
		id: 2,
		name: "哈佛大学拒绝提供关于其外国学生已知不当行为和犯罪行为的充分信息，特朗普认为这对国家安全构成了不可接受的风险。"
	},
	{
		id: 3,
		name: "近年来，哈佛大学的犯罪率——包括暴力犯罪率——急剧上升。 哈佛未能对校园内至少某些行为违规进行纪律处分。"
	},
	{
		id: 4,
		name: "调查认为哈佛大学与包括敌对国家在内的外国建立了广泛的纠葛。 过去五年哈佛从外国政府获得了超过1.5亿美元的总捐赠，来自国外的捐赠超过10亿美元。 过去十年中，哈佛仅从中国就获得了超过1.5亿美元的资金支持。 哈佛“多次接待并培训中国共产党准军事组织成员”，哈佛研究人员还与中国相关人士合作开展可能推动中国军事现代化的研究。"
	},
	{
		id: 5,
		name: "哈佛大学继续公视其学生和教职工的公民权利，引发了多起联邦调查。 哈佛在招生中对不利种族的歧视如此明显，以至于最高法院在全国范围内终止这一做法的裁决以哈佛命名。"
	}
]);

const dataList3 = ref([
	{
		id: 1,
		name: "根据本公告第 1 条的暂停和入境限制，适用于在本公告发布日期后通过 SEVP 进入或试图进入美国开始就读哈佛大学的外国人。"
	},
	{
		id: 2,
		name: "国务卿应酌情考虑，目前就读哈佛大学且持有 F、M 或 J 签证且符合本公告第 1 条所述条件的外国人，是否应根据 INA 第 221（i）条撤销其签证， 8 美国法典 1201（i）"
	},
	{
		id: 3,
		name: "根据本公告第 1 条的入境暂停和限制，不适用于通过 SEVP 进入美国就读其他大学的外国人。"
	},
	{
		id: 4,
		name: "根据本公告第 1 条对入境的暂停和限制，不适用于任何由国务卿、国土安全部长或其指定人认定符合国家利益的外国人。"
	},
	{
		id: 5,
		name: "本公告发布日起不迟于 90 天内，司法部长与国土安全部长应通过总统国家安全事务助理共同向总统提交建议，决定是否延长或续期本公告第 1 条中暂停和限制入境的条款符合美国利益。"
	},
])
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.cooperation-restrictions-detail {
	width: 100%;
	height: 100%;
	background: rgba(243, 243, 244, 1);
	overflow: auto;
	padding-bottom: 50px;
	.nav {
		width: 100%;
		height: 120px;
		padding: 19px 0 20px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		.nav-main {
			width: 1600px;
			height: 81px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			img {
				width: 72px;
				height: 72px;
				margin-right: 16px;
			}
			.content {
				width: 758px;
				height: 81px;
				margin-right: 378px;
				.cl1 {
					font-size: 24px;
					font-weight: 700;
					line-height: 32px;
					font-family: "Microsoft YaHei";
					color: rgb(59, 65, 75);
					margin-bottom: 1px;
				}
				.cl2 {
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					font-family: "Microsoft YaHei";
					color: rgb(59, 65, 75);
					margin-bottom: 1px;
				}
				.cl3 {
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					font-family: "Microsoft YaHei";
					color: rgb(95, 101, 108);
				}
			}
			.btn {
				width: 376px;
				height: 36px;
				display: flex;
				.btn1 {
					border-radius: 6px;
					border: 1px solid rgb(230, 231, 232);
					width: 120px;
					height: 36px;
					background-color: #fff;
					margin-right: 8px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					img {
						width: 16px;
						height: 16px;
						margin-right: 8px;
					}
					font-size: 16px;
					font-weight: 400;
					line-height: 22px;
					font-family: "Microsoft YaHei";
					color: rgb(95, 101, 108);
				}
				.active {
					background-color: rgb(5, 95, 194);
					color: #fff;
				}
			}
		}
	}
	.title {
		width: 1600px;
		height: 50px;
		margin: 16px auto;
		border-radius: 10px;
		border: 1px solid rgba(174, 214, 255, 1);
		background-color: rgba(246, 250, 255, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		display: flex;
		align-items: center;
		position: relative;
		.title-one {
			margin-left: 23px;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			font-family: "Microsoft YaHei";
			color: rgb(59, 65, 75);
		}
		.title-two {
			font-size: 16px;
			font-weight: 700;
			line-height: 24px;
			font-family: "Microsoft YaHei";
			color: rgb(5, 95, 194);
			cursor: pointer;
		}
		img {
			width: 24px;
			height: 24px;
			position: absolute;
			top: 13px;
			right: 13px;
			cursor: pointer;
		}
	}
	.main {
		width: 1600px;
		height: 1373px;
		margin: 0 auto;
		display: flex;
		.left {
			width: 520px;
			height: 1012px;
			margin-right: 17px;
			.left-top {
				margin-bottom: 16px;
				width: 520px;
				height: 386px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				.left-top-title {
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
					position: absolute;
					top: 14px;
					left: 22px;
				}
				.img1 {
					width: 8px;
					height: 20px;
					position: absolute;
					left: 0px;
					top: 18px;
				}
				.img2 {
					width: 28px;
					height: 28px;
					position: absolute;
					top: 14px;
					right: 44px;
					cursor: pointer;
				}
				.img3 {
					width: 28px;
					height: 28px;
					position: absolute;
					top: 14px;
					right: 12px;
					cursor: pointer;
				}
				.left-top-content {
					width: 470px;
					height: 92px;
					border-radius: 4px;
					border: 1px solid rgba(231, 243, 255, 1);
					background-color: rgba(246, 250, 255, 1);
					position: absolute;
					top: 58px;
					left: 26px;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 16px 24px;
					span {
						font-size: 16px;
						font-weight: 700;
						line-height: 30px;
						font-family: "Microsoft YaHei";
						color: rgb(5, 95, 194);
					}
				}
				.left-top-bottom {
					width: 460px;
					height: 184px;
					position: absolute;
					top: 169px;
					left: 26px;
					div {
						height: 24px;
						margin-bottom: 16px;
						.tit {
							display: inline-block;
							width: 120px;
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
						}
						.tit1 {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 30px;
							color: rgb(59, 65, 75);
						}
						.tit2 {
							color: rgb(5, 95, 194);
							cursor: pointer;
						}
						.tit3 {
							display: inline-block;
							border-radius: 4px;
							background-color: rgba(231, 243, 255, 1);
							color: rgb(5, 95, 194);
							padding: 2px 4px;
						}
					}
				}
			}
			.left-bottom {
				width: 520px;
				height: 610px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				.left-bottom-title {
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
					position: absolute;
					top: 14px;
					left: 22px;
				}
				.img1 {
					width: 8px;
					height: 20px;
					position: absolute;
					left: 0px;
					top: 18px;
				}
				.img2 {
					width: 28px;
					height: 28px;
					position: absolute;
					top: 14px;
					right: 44px;
					cursor: pointer;
				}
				.img3 {
					width: 28px;
					height: 28px;
					position: absolute;
					top: 14px;
					right: 12px;
					cursor: pointer;
				}
				.left-bottom-main {
					width: 478px;
					height: 528px;
					position: absolute;
					top: 60px;
					left: 21px;
					.main-box {
						width: 480px;
						height: 48px;
						border-radius: 50px;
						border: 1px solid rgb(234, 236, 238);
						margin-bottom: 12px;
						position: relative;
						cursor: pointer;
						img {
							width: 24px;
							height: 24px;
							position: absolute;
							top: 12px;
							left: 16px;
						}
						.name {
							position: absolute;
							top: 12px;
							left: 52px;
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
						}
						.type {
							position: absolute;
							top: 12px;
							right: 12px;
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(95, 101, 108);
						}
					}
				}
			}
		}
		.right {
			width: 1063px;
			height: 1373px;
			.right-top {
				margin-bottom: 16px;
				width: 1063px;
				height: 476px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				padding: 60px 19px 24px 22px;
				.right-top-title {
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
					position: absolute;
					top: 14px;
					left: 22px;
				}
				.img1 {
					width: 8px;
					height: 20px;
					position: absolute;
					left: 0px;
					top: 18px;
				}
				.right-top-content {
					width: 1022px;
					height: 392px;
					.right-top-item {
						width: 1022px;
						padding: 12px 0px;
						position: relative;
						display: flex;
						align-items: center;
					}
					.right-top-item:nth-child(odd) {
						background-color: rgb(247, 248, 249);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
					}
					.right-top-item .id {
						display: inline-block;
						width: 24px;
						height: 24px;
						font-size: 12px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(5, 95, 194);
						background-color: rgba(231, 243, 255, 1);
						text-align: center;
						border-radius: 50%;
						position: absolute;
						top: 16px;
						left: 24px;
					}
					.right-top-item .name {
						display: inline-block;
						width: 902px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 30px;
						color: rgb(59, 65, 75);
						margin-left: 64px;
					}
					.right-top-item img {
						width: 16px;
						height: 31px;
						position: absolute;
						top: 12px;
						right: 24px;
						cursor: pointer;
					}
				}
				.btn {
					padding: 2px 8px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					border-radius: 4px;
					border: 1px solid rgb(230, 231, 232);
					background-color: #fff;
					cursor: pointer;
					position: absolute;
					z-index: 100;
				}
				.cl1 {
					top: 14px;
					right: 107px;
				}
				.cl2 {
					top: 14px;
					right: 19px;
				}
				.active {
					color: rgb(5, 95, 194);
					background-color: rgba(246, 250, 255, 1);
					border-color: rgb(5, 95, 194);
				}
			}
			.right-bottom {
				width: 1063px;
				height: 881px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				.right-bottom-title {
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
					position: absolute;
					top: 14px;
					left: 22px;
				}
				.img1 {
					width: 8px;
					height: 20px;
					position: absolute;
					left: 0px;
					top: 18px;
				}
				.btn {
					padding: 2px 8px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					border-radius: 4px;
					border: 1px solid rgb(230, 231, 232);
					background-color: #fff;
					cursor: pointer;
					position: absolute;
					z-index: 100;
				}
				.cl1 {
					top: 14px;
					right: 107px;
				}
				.cl2 {
					top: 14px;
					right: 19px;
				}
				.active {
					color: rgb(5, 95, 194);
					background-color: rgba(246, 250, 255, 1);
					border-color: rgb(5, 95, 194);
				}
				.right-bottom-content1 {
					width: 1022px;
					height: 199px;
					position: absolute;
					top: 60px;
					left: 22px;
					margin-bottom: 24px;
					.right-bottom-content1-title {
						width: 1022px;
						height: 55px;
						padding: 14px 56px 17px 24px;
						display: flex;
						align-items: center;
						position: relative;
						background-color: rgb(247, 248, 249);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
						span {
							font-size: 18px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
						}
						img {
							width: 16px;
							height: 31px;
							position: absolute;
							right: 24px;
							top: 14px;
							cursor: pointer;
						}
					}
					.right-bottom-content1-content {
						width: 1022px;
						height: 144px;
						padding: 12px 24px 12px 78px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 30px;
						color: rgb(59, 65, 75);
						border-bottom: 1px solid rgb(234, 236, 238);
					}
				}
				.right-bottom-content2 {
					width: 1022px;
					height: 385px;
					position: absolute;
					top: 283px;
					left: 22px;
					margin-bottom: 24px;
					.right-bottom-content2-title {
						width: 1022px;
						height: 55px;
						padding: 14px 56px 17px 24px;
						display: flex;
						align-items: center;
						position: relative;
						background-color: rgb(247, 248, 249);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
						span {
							font-size: 18px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
						}
						img {
							width: 16px;
							height: 31px;
							position: absolute;
							right: 24px;
							top: 14px;
							cursor: pointer;
						}
					}
					.right-bottom-content2-content {
						width: 1022px;
						height: 330px;
						.forcontent {
							padding: 12px 24px 12px 54px;
							border-bottom: 1px solid rgb(234, 236, 238);
							span {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 30px;
								color: rgb(59, 65, 75);
							}
						}
					}
					
				}
				.right-bottom-content3 {
					width: 1022px;
					height: 169px;
					position: absolute;
					top: 692px;
					left: 22px;
					margin-bottom: 24px;
					.right-bottom-content3-title {
						width: 1022px;
						height: 55px;
						padding: 14px 56px 17px 24px;
						display: flex;
						align-items: center;
						position: relative;
						background-color: rgb(247, 248, 249);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
						span {
							font-size: 18px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
						}
						img {
							width: 16px;
							height: 31px;
							position: absolute;
							right: 24px;
							top: 14px;
							cursor: pointer;
						}
					}
					.right-bottom-content3-content {
						width: 1022px;
						height: 114px;
						padding: 12px 24px 12px 78px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 30px;
						color: rgb(59, 65, 75);
						border-bottom: 1px solid rgb(234, 236, 238);
					}
				}
			}
		}
	}
}
</style>
