<template>
	<div class="reslib-page">
		<div class="nav">
			<div
				v-for="item in navList"
				:key="item"
				class="nav-item"
				:class="{ active: item === activeItem }"
				@click="handleClickNav(item)"
			>
				{{ item }}
			</div>
		</div>
		<el-select v-model="value" placeholder="Select" class="select">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
		</el-select>
		<div class="main" v-show="isShow">
			<div class="left">
				<div class="left-ti1"></div>
				<div class="left-ti2"></div>
				<div class="left-title">发布时间</div>
				<div class="left-content">
					<div v-for="(item, i) in dataList" :key="item.id" class="left-item">
						<input type="checkbox" :checked="i === 0" />{{ item.name }}
					</div>
				</div>
				<div class="left-title cl1">涉及领域</div>
				<div class="left-content">
					<div v-for="(item, i) in dataList2" :key="item.id" class="left-item">
						<input type="checkbox" :checked="i === 0" />{{ item.name }}
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon01.png" alt="" />
					<div>规则限制历程</div>
				</div>
				<div class="right-main">
					<div class="main-content">
						<div v-for="item in mainDataList" :key="item.id" class="main-item">
							<div class="date">{{ item.date }}</div>
							<img :src="item.img" alt="" class="img" />
							<div class="box">
								<div class="title" @click="handleClick(item)">{{ item.title }}</div>
								<div class="content" @click="handleClick(item)">{{ item.content }}</div>
								<div class="domain">
									<div v-for="(domain, i) in item.domain" :key="i" class="domain-item">{{ domain }}</div>
								</div>
								<div
									class="type"
									:class="{
										type1: item.type === '行政令',
										type2: item.type === '法案',
										type3: item.type === '301调查'
									}"
								>
									{{ item.type }}
								</div>
							</div>
						</div>
					</div>
					<div class="line"></div>
					<div class="page">
						<div class="count">共1205项调查</div>
						<el-pagination
							v-model:current-page="currentPage"
							:page-size="pageSize"
							:total="total"
							layout="prev, pager, next"
							background
							@current-change="handlePageChange"
						/>
					</div>
				</div>
			</div>
		</div>
		<div class="main" v-show="!isShow">
			<div class="left-unshow">
				<div class="left-ti1"></div>
				<div class="left-ti2"></div>
				<div class="left-ti3"></div>
				<div class="left-title">发布时间</div>
				<div class="left-content">
					<div v-for="(item, i) in dataList" :key="item.id" class="left-item">
						<input type="checkbox" :checked="i === 0" />{{ item.name }}
					</div>
				</div>
				<div class="left-title cl1">涉及领域</div>
				<div class="left-content">
					<div v-for="(item, i) in dataList2" :key="item.id" class="left-item">
						<input type="checkbox" :checked="i === 0" />{{ item.name }}
					</div>
				</div>
				<div class="left-title cl2">涉及国家</div>
				<div class="left-content">
					<div v-for="(item, i) in dataList3" :key="item.id" class="left-item">
						<input type="checkbox" :checked="i === 0" />{{ item.name }}
					</div>
				</div>
			</div>
			<div class="right-unshow">
				<div class="top">
					<div v-for="item in unionDataList" :key="item.id" class="top-item">
						<div class="title">
							<img :src="item.img" alt="">
							<div>
								<span class="name">{{ item.name }}</span><span class="abb">{{ item.abb }}</span>
								<div class="compose">{{ item.compose }}</div>
							</div>
							<div class="type" :class="{ type1: item.type === '通信网络', type2: item.type === '集成电路', type3: item.type === '' }">{{ item.type }}</div>
						</div>
						<div class="content">{{ item.content }}</div>
					</div>
				</div>
				<div class="bottom">
					<div class="count">共1205项调查</div>
					<el-pagination
						v-model:current-page="currentPage"
						:page-size="pageSize"
						:total="total"
						layout="prev, pager, next"
						background
						@current-change="handlePageChange"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

// import whitehouse from "./assets/白宫.png";
// import guohui from "./assets/国会.png";
// import guotuanquanbu from "./assets/国土安全部.png";
// import guowuyuan from "./assets/国务院.png";
// import weishengyanjiuyuan from "./assets/卫生研究院.png";
// import zhongyiyuan from "./assets/众议院.png";
import fda from "./assets/FDA.png";
import swb from "./assets/商务部.png";
import fcc from "./assets/FCC.png";
import flag01 from "./assets/flag01.png"
import flag02 from "./assets/flag02.png"
import flag03 from "./assets/flag03.png"
import flag04 from "./assets/flag04.png"
import flag05 from "./assets/flag05.png"
import flag06 from "./assets/flag06.png"
import flag07 from "./assets/flag07.png"
import flag08 from "./assets/flag08.png"
import flag09 from "./assets/flag09.png"

const router = useRouter();
const handleClick = item => {
	router.push({
		path: "/ruleRestriction/detail",
		query: {
			id: item.id
		}
	});
};

const isShow = ref(true);
const navList = ref(["规则限制政令", "排华科技联盟"]);
const activeItem = ref("规则限制政令");
const handleClickNav = item => {
	activeItem.value = item;
	if (item === "规则限制政令") {
		isShow.value = true;
	} else {
		isShow.value = false;
	}
};

const value = ref("发布时间");

const options = [
	{
		value: "发布时间",
		label: "发布时间"
	},
	{
		value: "发布日期",
		label: "发布日期"
	}
];
const dataList = ref([
	{
		id: 1,
		name: "全部时间"
	},
	{
		id: 2,
		name: "2025年"
	},
	{
		id: 3,
		name: "2024年"
	},
	{
		id: 4,
		name: "2023年"
	},
	{
		id: 5,
		name: "2022年"
	},
	{
		id: 6,
		name: "2021年"
	},
	{
		id: 7,
		name: "2020年"
	},
	{
		id: 8,
		name: "更早"
	}
]);
const dataList2 = ref([
	{
		id: 1,
		name: "全部领域"
	},
	{
		id: 2,
		name: "人工智能"
	},
	{
		id: 3,
		name: "集成电路"
	},
	{
		id: 4,
		name: "通信网络"
	},
	{
		id: 5,
		name: "量子科技"
	},
	{
		id: 6,
		name: "能源"
	},
	{
		id: 7,
		name: "生物科技"
	},
	{
		id: 8,
		name: "航空航天"
	},
	{
		id: 9,
		name: "海洋"
	},
	{
		id: 10,
		name: "先进制造"
	}
]);
const dataList3 = ref([
	{
		id: 1,
		name: "全部国家"
	},
	{
		id: 2,
		name: "美国"
	},
	{
		id: 3,
		name: "日本"
	},
	{
		id: 4,
		name: "韩国"
	},
	{
		id: 5,
		name: "英国"
	},
	{
		id: 6,
		name: "澳大利亚"
	},
	{
		id: 7,
		name: "新西兰"
	},
	{
		id: 8,
		name: "加拿大"
	},
	{
		id: 9,
		name: "欧盟"
	},
	{
		id: 10,
		name: "中国台湾"
	}
]);

const mainDataList = ref([
	{
		id: 1,
		title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动",
		content:
			"FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏州大学卫生与环境技术研究所）正式发出“一般信函”。",
		date: "2025年10月15日",
		domain: ["生物科技"],
		type: "行政令",
		img: fda
	},
	{
		id: 2,
		title: "美国商务部：扩大实体清单制裁范围，对中企子公司实施同等管制",
		content:
			"任何被列入美国出口管制“实体清单”或“军事最终用户清单”的企业，如果其直接或间接持有另一家公司 ​50%或以上的股权，那么这家被控股的公司也将自动受到与清单上母公司同等的出口管制限制",
		date: "2025年9月30日",
		domain: ["生物科技"],
		type: "301调查",
		img: swb
	},
	{
		id: 3,
		title: "美国商务部：出台全面半导体出口管制",
		content: "美国商务部宣称将“至少每年”更新一次管制规则，以堵塞已发现的政策“漏洞”。",
		date: "2025年9月15日",
		domain: ["生物科技"],
		type: "行政令",
		img: swb
	},
	{
		id: 4,
		title: "美国FCC：出台电信设备市场准入认证新规",
		content: "将国家安全审查全面嵌入设备授权程序，对实验室资质、测试标准以及供应链设置严格限制。",
		date: "2025年9月8日",
		domain: ["生物科技", "通信网络"],
		type: "行政令",
		img: fcc
	},
	{
		id: 5,
		title: "美国FCC：发布“清洁购物车”行动，要求电商平台下架违规中国电子产品",
		content:
			"在亚马逊、eBay等美国主流电商平台销售的华为、海康威视、中兴、大华等中国品牌的消费电子产品（如家用监控摄像头、智能手表）。",
		date: "2025年9月1日",
		domain: ["集成电路", "人工智能", "通信网络"],
		type: "行政令",
		img: fcc
	},
	{
		id: 6,
		title: "美国FDA：紧急叫停涉及将美国公民活体细胞送往中国等“敌对国家”实验室的临床试验",
		content: "涉及将人类生物样本（如活体细胞）转移至中国进行基因工程等研究的临床试验项目，相关研究被叫停。",
		date: "2025年8月26日",
		domain: ["生物科技"],
		type: "行政令",
		img: fda
	},
	{
		id: 7,
		title: "美国FDA：更新进口预警措施，对多家中国食品企业产品实施​“自动扣留”​​",
		content:
			"多家中国食品及农产品出口企业（如广东企业罗非鱼、辽宁企业宠物零食等），被扣留的货物必须在FDA或其认可的实验室内检验合格后方可放行。",
		date: "2025年8月22日",
		domain: ["生物科技"],
		type: "行政令",
		img: fda
	},
	{
		id: 8,
		title: "美国FCC：禁止使用清单内企业零部件的新设备获得授权，并首次可追溯撤销已获批设备的销售许可",
		content: "对“受管制清单”实施技术性补封，建立​“回溯机制”​​ 并封闭​“模块发射器”漏洞。",
		date: "2025年8月15日",
		domain: ["通信网络"],
		type: "行政令",
		img: fcc
	},
	{
		id: 9,
		title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动",
		content:
			"FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏州大学卫生与环境技术研究所）正式发出“一般信函”。",
		date: "2025年10月15日",
		domain: ["生物科技"],
		type: "行政令",
		img: fda
	},
	{
		id: 10,
		title: "美国商务部：出台全面半导体出口管制",
		content: "美国商务部宣称将“至少每年”更新一次管制规则，以堵塞已发现的政策“漏洞”。",
		date: "2025年9月15日",
		domain: ["生物科技"],
		type: "行政令",
		img: swb
	}
]);

const unionDataList = ref([
	{
		id:1,
		name:"AI-RAN联盟",
		abb:"QUAD",
		compose:"2024年成立 · 美国、英国、日本、韩国、法国、加拿大等10国",
		content:"由英伟达牵头，联合软银、亚马逊云科技、微软、爱立信、诺基亚、三星、T-Mobile等多家行业领导者成立了的人工智能无线接入网络技术联盟。",
		type:"通信网络",
		img:flag01
	},
	{
		id:2,
		name:"Next G联盟",
		abb:"",
		compose:"2021年成立 · 美国、瑞典、芬兰、韩国",
		content:"在6G技术研发和未来标准制定上抢先布局，旨在主导6G发展方向，其联盟的排他性被解读为针对中国。",
		type:"通信网络",
		img:flag02
	},
	{
		id:3,
		name:"美日印澳“四边机制”",
		abb:"QUAD",
		compose:"2021年成立 · 美国、日本、印度、澳大利亚",
		content:"在地区安全、基础设施、新兴技术和供应链（特别是半导体）等领域开展排他性合作，筹备构建“印太版北约” 。",
		type:"集成电路",
		img:flag03
	},
	{
		id:4,
		name:"美国半导体联盟",
		abb:"SIAC",
		compose:"2021年成立 · 美国、韩国、中国台湾、荷兰",
		content:"初始核心任务是游说美国政府对本土芯片产业提供补贴（如500亿美元的《芯片法案》），但其成员构成未纳入中国大陆企业，具有明显的“排华”倾向。",
		type:"集成电路",
		img:flag04
	},
	{
		id:5,
		name:"Next G联盟",
		abb:"",
		compose:"2021年成立 · 美国、瑞典、芬兰、韩国",
		content:"在6G技术研发和未来标准制定上抢先布局，旨在主导6G发展方向，其联盟的排他性被解读为针对中国。",
		type:"通信网络",
		img:flag05
	},
	{
		id:6,
		name:"芯片四方联盟",
		abb:"Chip 4",
		compose:"2020年成立 · 美国、日本、韩国、中国台湾",
		content:"构建将中国大陆排除在外的半导体供应链体系，意图在芯片设计、生产到供应环节形成闭环，限制先进芯片技术对华出口。",
		type:"集成电路",
		img:flag06
	},
	{
		id:7,
		name:"美英澳三边安全伙伴关系",
		abb:"AUKUS",
		compose:"2020年成立 · 美国、英国、澳大利亚",
		content:"美英两国支持澳大利亚建立核潜艇部队，旨在深化三国在安全和防务能力上的合作。",
		type:"",
		img:flag07
	},
	{
		id:8,
		name:"印太经济框架",
		abb:"IPEF",
		compose:"2020年成立 · 美国、英国、澳大利亚",
		content:"重点在供应链领域制定新协议，增强透明度与安全性，确保对半导体等关键产品和技术的获取，推动供应链“去中国化”。",
		type:"集成电路",
		img:flag08
	},
	{
		id:9,
		name:"清洁网络计划",
		abb:"",
		compose:"2019年成立 · 美国、英国、荷兰",
		content:"在全球5G网络部署和软件应用生态中排除中国的企业和设备，涉及电信运营商、移动应用、应用商店、云服务和海底光缆等多个层面。",
		type:"通信网络",
		img:flag09
	},
	{
		id:10,
		name:"清洁网络计划",
		abb:"",
		compose:"2019年成立 · 美国、英国、荷兰",
		content:"在全球5G网络部署和软件应用生态中排除中国的企业和设备，涉及电信运营商、移动应用、应用商店、云服务和海底光缆等多个层面。",
		type:"通信网络",
		img:flag09
	}
])

const total = ref(1205);
const pageSize = ref(121);
const currentPage = ref(5);
const handlePageChange = p => {
	currentPage.value = p;
};
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.reslib-page {
	width: 1600px;
	height: 1565px;
	position: relative;
	.nav {
		width: 332px;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 34px;
		.nav-item {
			cursor: pointer;
			padding: 8px 20px;
			font-size: 20px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 26px;
			color: rgb(59, 65, 75);
		}
		.active {
			background-color: rgb(5, 95, 194);
			border-radius: 21px;
			color: #fff;
			font-weight: 700;
		}
	}
	.select {
		width: 128px;
		position: absolute;
		top: 7px;
		right: 0px;
	}
	.main {
		width: 1600px;
		height: 1489px;
		display: flex;
		.left {
			width: 300px;
			height: 429px;
			margin-right: 16px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			position: relative;
			.left-ti1 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 17px;
				left: 0px;
			}
			.left-ti2 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 207px;
				left: 0px;
			}
			.left-title {
				margin-left: 25px;
				color: rgb(5, 95, 194);
				font-size: 16px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				margin-top: 13px;
			}
			.left-content {
				width: 253px;
				height: 132px;
				margin-left: 25px;
				margin-top: 13px;
				display: flex;
				flex-wrap: wrap;
				.left-item {
					width: 120px;
					height: 30px;
					margin-bottom: 4px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
					input[type="checkbox"] {
						-webkit-appearance: none;
						appearance: none;
						width: 14px;
						height: 14px;
						margin-right: 8px;
						border: 1px solid rgb(200, 204, 210);
						border-radius: 4px;
						background-color: #fff;
						vertical-align: middle;
					}
					input[type="checkbox"]:checked {
						background-color: rgb(5, 95, 194);
						border-color: rgb(5, 95, 194);
					}
					input[type="checkbox"]:checked::after {
						content: "";
						display: block;
						width: 4px;
						height: 8px;
						margin: 1px auto 0;
						border: 2px solid #fff;
						border-top: none;
						border-left: none;
						transform: rotate(45deg);
					}
				}
			}
			.cl1 {
				margin-top: 21px;
			}
		}
		.right {
			width: 1284px;
			height: 1489px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			.right-title {
				width: 1284px;
				height: 48px;
				border-bottom: 1px solid rgb(235, 238, 242);
				position: relative;
				img {
					width: 22px;
					height: 19px;
					position: absolute;
					top: 15px;
					left: 20px;
				}
				div {
					width: 120px;
					height: 48px;
					margin-left: 60px;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 26px;
					color: rgb(5, 95, 194);
					padding: 11px 0;
				}
			}
			.right-main {
				width: 1284px;
				height: 1441px;
				padding: 22px 43px 15px 20px;
				position: relative;
				.main-content {
					width: 1221px;
					height: 1345px;
					.main-item {
						width: 1221px;
						min-height: 116px;
						max-height: 140px;
						margin-bottom: 16px;
						position: relative;
						.date {
							position: absolute;
							top: 4px;
							left: 10px;
							width: 62px;
							height: 68px;
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(5, 95, 194);
							text-align: right;
						}
						.img {
							width: 24px;
							height: 24px;
							position: absolute;
							top: 13px;
							left: 90px;
							z-index: 100;
						}
						.box {
							width: 1086px;
							min-height: 91px;
							max-height: 114px;
							position: absolute;
							top: 10px;
							left: 135px;
							.title {
								font-size: 20px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 26px;
								color: rgb(59, 65, 75);
								margin-bottom: 8px;
								cursor: pointer;
							}
							.content {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(95, 101, 108);
								margin-bottom: 9px;
								cursor: pointer;
							}
							.type {
								padding: 2px 8px;
								border-radius: 20px;
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								position: absolute;
								top: 0px;
								right: 0px;
							}
							.type1 {
								background-color: rgba(232, 189, 11, 0.1);
								color: rgb(232, 189, 11);
							}
							.type2 {
								background-color: rgba(206, 79, 81, 0.1);
								color: rgb(206, 79, 81);
							}
							.type3 {
								background-color: rgba(255, 149, 77, 0.1);
								color: rgb(255, 149, 77);
							}
							.domain {
								margin-bottom: 15px;
								display: flex;
								.domain-item {
									padding: 2px 8px;
									border-radius: 4px;
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 20px;
									margin-right: 8px;
									color: rgb(5, 95, 194);
									background-color: rgba(231, 243, 255, 1);
								}
							}
						}
					}
				}
				.line {
					height: 1150px;
					border: 2px solid rgb(235, 238, 242);
					position: absolute;
					top: 75px;
					left: 120px;
					z-index: 1;
				}
				.page {
					width: 1221px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: absolute;
					bottom: 20px;
					left: 20px;
					padding-left: 11px;
					.count {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
					}
					:deep(.el-pagination) {
						display: flex;
						align-items: center;
					}
					:deep(.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(.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);
						// box-shadow: 0 0 0 2px rgba(47, 122, 229, 0.15) inset;
					}
					:deep(.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(.el-pagination.is-background .btn-prev),
					:deep(.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(.el-pagination.is-background .btn-prev.is-disabled),
					:deep(.el-pagination.is-background .btn-next.is-disabled) {
						color: rgba(95, 101, 108, 0.45);
						border-color: rgb(235, 238, 242);
						background-color: #fff;
					}
				}
			}
		}
		.left-unshow {
			width: 300px;
			height: 654px;
			margin-right: 16px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			position: relative;
			.left-ti1 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 17px;
				left: 0px;
			}
			.left-ti2 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 207px;
				left: 0px;
			}
			.left-ti3 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 434px;
				left: 0px;
			}
			.left-title {
				margin-left: 25px;
				color: rgb(5, 95, 194);
				font-size: 16px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				margin-top: 13px;
			}
			.left-content {
				width: 253px;
				height: 132px;
				margin-left: 25px;
				margin-top: 13px;
				display: flex;
				flex-wrap: wrap;
				.left-item {
					width: 120px;
					height: 30px;
					margin-bottom: 4px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
					input[type="checkbox"] {
						-webkit-appearance: none;
						appearance: none;
						width: 14px;
						height: 14px;
						margin-right: 8px;
						border: 1px solid rgb(200, 204, 210);
						border-radius: 4px;
						background-color: #fff;
						vertical-align: middle;
					}
					input[type="checkbox"]:checked {
						background-color: rgb(5, 95, 194);
						border-color: rgb(5, 95, 194);
					}
					input[type="checkbox"]:checked::after {
						content: "";
						display: block;
						width: 4px;
						height: 8px;
						margin: 1px auto 0;
						border: 2px solid #fff;
						border-top: none;
						border-left: none;
						transform: rotate(45deg);
					}
				}
			}
			.cl1 {
				margin-top: 21px;
			}
			.cl2 {
				margin-top: 58px;
			}
		}
		.right-unshow {
			width: 1284px;
			height: 1020px;
			position: relative;
			.top {
				width: 1284px;
				height: 964px;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 24px;
				.top-item {
					width: 634px;
					height: 180px;
					background-color: #fff;
					margin-bottom: 16px;
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					padding: 18px 33px 18px 26px;
					.title {
						width: 574px;
						height: 72px;
						display: flex;
						position: relative;
						border-bottom: 1px solid rgb(234, 236, 238);
						margin-bottom: 12px;
						img {
							width: 52px;
							height: 52px;
							margin-right: 16px;
						}
						.type {
							position: absolute;
							top: 0;
							right: 0;
							border-radius: 4px;
							border: 1px solid;
							padding: 2px 8px;
							font-size: 14px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 20px;
						}
						.name {
							font-size: 20px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 26px;
							color: rgb(59, 65, 75);
							display: inline-block;
							margin-bottom: 4px;
							margin-right: 10px;
						}
						.abb {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(95, 101, 108);
						}
						.compose {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(95, 101, 108);
						}
						.type1 {
							border-color: rgba(145, 202, 255, 1);
							color: rgba(22, 119, 255, 1);
							background-color: rgba(230, 244, 255, 1);
						}
						.type2 {
							border-color: rgba(255, 163, 158, 1);
							color: rgba(245, 34, 45, 1);
							background-color: rgba(255, 241, 240, 1);
						}
						.type3 {
							border: none;
						}
					}
					.content {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 30px;
						color: rgb(95, 101, 108);
					}
				}
				.top-item:nth-child(2n) {
					margin-right: 0px;
				}
				.top-item:nth-child(2n-1) {
					margin-right: 16px;
				}
			}
			.bottom {
				width: 1284px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				bottom: 0px;
				left: 0px;
				.count {
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
				}
				:deep(.el-pagination) {
					display: flex;
					align-items: center;
				}
				:deep(.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(.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);
					// box-shadow: 0 0 0 2px rgba(47, 122, 229, 0.15) inset;
				}
				:deep(.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(.el-pagination.is-background .btn-prev),
				:deep(.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(.el-pagination.is-background .btn-prev.is-disabled),
				:deep(.el-pagination.is-background .btn-next.is-disabled) {
					color: rgba(95, 101, 108, 0.45);
					border-color: rgb(235, 238, 242);
					background-color: #fff;
				}
			}
		}
	}
}
</style>
