<template>
	<div class="cooperation-restrictions-detail">
		<div class="nav">
			<div class="nav-main">
				<div style="display: flex; align-items: center">
					<img src="./assets/image01.png" alt />
					<div class="content">
						<div class="cl1">{{ overviewInfo.RULENAMEZH }}</div>
						<div class="cl2">{{ overviewInfo.RULENAME || '暂无' }}</div>
						<div class="cl3">{{ getTime(overviewInfo.PUBLISHDATE) }} · {{ overviewInfo.ORGNAME }}</div>
					</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">当前规则限制数据已关联至{{ getRelation?.TYPE }}：</span>
			<span class="title-two">{{ getRelation?.RELATIONNAME }} &nbsp;{{ getRelation?.RELATIONDATE }}</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>{{ overviewInfo.RULENAMEZH }}</span>
					</div>
					<div class="left-top-bottom">
						<div>
							<span class="tit">限制时间：</span>
							<span class="tit1">{{ getTime(overviewInfo.PUBLISHDATE) }}</span>
						</div>
						<div>
							<span class="tit">限制机构：</span>
							<span class="tit1 tit2">{{ overviewInfo.ORGNAME }}</span>
						</div>
						<div>
							<span class="tit">限制手段：</span>
							<span class="tit1">{{ overviewInfo.RULEMEANS }}</span>
						</div>
						<div>
							<span class="tit">限制领域：</span>
							<span class="tit3" :class="getClassName(ele)" v-for="ele in overviewInfo.Area">{{ ele }}</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 overviewInfo.Entities" :key="item.ORGID" class="main-box">
							<img :src="item.ORGPICTURE" alt />
							<div class="name">{{ item.ORGNAME }}</div>
							<!-- <div class="type">{{ item.type }}</div> -->
						</div>
						<!-- <img src="./assets/注意.png" alt /> -->
					</div>
				</div>
				<!-- 规则限制事件脉络 -->
				<div class="left-bottom-B">
					<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, index) in overviewInfo.Context" :key="index" class="main-box">
							<img :src="cycle" alt />
							<div class="time">{{ item.CONTDATE }}</div>
							<div class="name">{{ item.CONTENT }}</div>
						</div>
						<div class="btn">
							查看更多
							<img src="./assets/doubleLine.png" alt />
						</div>
						<div class="line"></div>
					</div>
				</div>
			</div>
			<div class="right">
				<!-- 背景分析 -->
				<div class="right-bottom">
					<div style="width: 100%; height: 60px;">
						<img class="img1" src="./assets/bluetitle.png" alt />
						<div class="right-bottom-title">背景分析</div>
						<img class="img2" src="./assets/收藏按钮.png" alt />
					</div>
					<div class="width: 100%; height: calc(100% - 60px); overflow-y: auto;">
						<div class="right-bottom-content1" v-for="(item, index) in backgroundInfo" :key="index">
							<div class="right-bottom-content1-title">
								<span>{{ item.TITLE }}</span>
								<img src="./assets/打开按钮.png" alt />
							</div>
							<div class="right-bottom-content1-content">{{ item.CONTENT }}</div>
						</div>
					</div>
				</div>
				<!-- 限制条款 -->
				<div class="right-top">
					<img class="img1" src="./assets/bluetitle.png" alt />
					<div class="right-top-title">限制条款</div>
					<div class="right-top-content">
						<div v-for="(item, index) in limitClauseInfo" :key="index" class="right-top-item">
							<span class="id">{{ index + 1 }}</span>
							<span class="name">{{ item }}</span>
							<img src="./assets/打开按钮.png" alt />
						</div>
					</div>
				</div>
				<!-- 相关举措 -->
				<div class="right-top-b">
					<img class="img1" src="./assets/bluetitle.png" alt />
					<div class="right-top-title">相关举措</div>
					<div class="right-top-content">
						<div v-for="item in relevantMeasureInfo" :key="item.RELATIONID" class="right-top-item">
							<img :src="item.IMAGEURL" alt />
							<div class="name">{{ item.RELATIONNAME }}</div>
							<div class="time">{{ getTime(item.RELATIONDATE) }}</div>
							<div class="type" :class="{ type1: item.TYPE === '行政令', type2: item.TYPE === '法案' }">{{ item.TYPE }}</div>
							<div class="content">{{ item.RELATIONCONTENT }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from "vue";
import ningbo from "./assets/ningbo.png";
import deguo from "./assets/deguo.png";
import cycle from "./assets/cycle.png";

import swb from "./assets/商务部.png";
import bg from "./assets/白宫.png";
import czb from "./assets/财政部.png";
import gh from "./assets/国会.png";
import { getSanctionOverview, getBackGround, getLimitClause, getRelevantMeasures } from '@/api/ruleRestriction/index.js'

const dataList = ref([
	{
		id: 1,
		name: "中国检验认证集团（宁波）有限公司",
		type: "",
		img: ningbo
	},
	{
		id: 2,
		name: "德国莱茵 TÜV 集团",
		type: "",
		img: deguo
	}
]);

const objList = ref([
	{
		id: 1,
		name: "撤销多家中国实验室对进入美国市场电子产品的测试认证许可。",
		time: "2025-08-30",
		img: cycle
	},
	{
		id: 2,
		name: "禁止被认定存在“国家安全风险”的中国实验室为进入美国市场的电子设备（如手机、电脑）提供FCC要求的合规性测试与认...",
		time: "2025-08-30",
		img: cycle
	},
	{
		id: 3,
		name: "禁止授权进口或销售任何新设备。新规进一步禁止新设备中使用这些清单内公司的零部件，并允许FCC撤销已授权设备的许可。",
		time: "2025-08-30",
		img: cycle
	},
	{
		id: 4,
		name: "撤销或终止中国电信运营商在美国提供国际电信服务的授权。",
		time: "2025-08-30",
		img: cycle
	},
	{
		id: 5,
		name: "禁止使用特定中国技术和设备的公司建造或运营连接美国的通信电缆。",
		time: "2025-08-30",
		img: cycle
	}
]);

const dataList2 = ref([
	{
		id: 1,
		name: "根据本命令，OET认定TUV/宁波没有说明委员会为何不应开始撤销其作为认可测试实验室资格的程序。在其回应中，TUV/宁波声称其不受委员会规则下的禁止实体控制或指挥，但未说明其被禁止实体持有的股权。TUV/宁波的公司治理文件显示，CCIC是公司的股东，并出资占公司创立资本的49%."
	},
	{
		id: 2,
		name: "TUV/宁波必须在本命令发布后三十五（35）天内提交回复，说明委员会为何不应撤销其认可。如果未能及时回复或提交说明委员会不应撤销其认可的合理依据的回复，可能会导致撤销认可。公司的回复必须包含一份书面详细事实说明，充分说明公司是否由中华人民共和国拥有、控制或受其指示。"
	},
	{
		id: 3,
		name: "OET 根据《法案》第302(e)条以及委员会规则第2.951(d)和(e)条启动了一个程序，以最终确定是否撤销对TUV/Ningbo作为认可测试实验室的认可。此程序为公司提供了额外的通知和机会，以提交书面回应，说明委员会为何不应撤销其当前的认可。"
	}
]);

const dataList3 = ref([
	{
		id: 1,
		name: "美国商务部工业与安全局发布实体清单，涉及多家中国半导体企业",
		time: "2025年9月12日",
		content:
			"23家中国实体，包括复旦微电旗下多家公司、华岭股份等，指控这些实体“违背美国国家安全或外交政策利益”，包括为中国的...",
		type: "行政令",
		img: swb
	},
	{
		id: 2,
		name: "美国白宫发布总统政令，提出将发展美国人工智能产业硬件支持放在新任期的科技首要地位",
		time: "2025年9月11日",
		content:
			"9个中国实体​（8家企业和1名个人），例如湖北奇卡工业有限公司、广州雅凯国际货运代理有限公司等，指控这些实体为也门胡塞...",
		type: "行政令",
		img: bg
	},
	{
		id: 3,
		name: "美国财政部外国资产控制办公室指控中国企业及船只",
		time: "2025年3月13日",
		content:
			"​4家中国企业和3艘关联船只​（如香港和顺运贸有限公司、华夏贸易有限公司等）,指控这些公司拥有或运营向中国运送伊朗石油或...",
		type: "行政令",
		img: czb
	},
	{
		id: 4,
		name: "美国国会通过《芯片科学》法案",
		time: "2025年1月3日",
		content:
			"​多家中国实体，包括成都雷电微力科技股份有限公司、中国科学院长春光学精密机械与物理研究所等，指控这些实体与中国高超音...",
		type: "法案",
		img: gh
	}
]);

const overviewInfo = ref({})
const sanRecordId = ref('')
const backgroundInfo = ref([])
const limitClauseInfo = ref([])
const relevantMeasureInfo = ref([])

const getUrlParams = () => {
	const urlParams = new URLSearchParams(window.location.search);
	sanRecordId.value = urlParams.get("id") || ""
}

const getSanctionOverviewInfo = async () => {
	try {
		const res = await getSanctionOverview(sanRecordId.value);
		console.log('------getSanctionOverviewInfo res', res)
		if (res && res.code === 200) {
			console.log('----getSanctionOverviewInfo', res.data)
			overviewInfo.value = res.data
		}
	} catch (error) {
		console.error("获取规则限制基本详情接口失败:", error);
	}
}

const getBackGroundInfo = async () => {
	try {
		const res = await getBackGround(sanRecordId.value);
		console.log('------getBackGroundInfo res', res)
		if (res && res.code === 200) {
			console.log('----getBackGroundInfo', res.data)
			backgroundInfo.value = res.data
		}
	} catch (error) {
		console.error("获取背景分析接口失败:", error);
	}
}

const getLimitClauseInfo = async () => {
	try {
		const res = await getLimitClause(sanRecordId.value);
		console.log('------getLimitClauseInfo res', res)
		if (res && res.code === 200) {
			console.log('----getLimitClauseInfo', res.data)
			limitClauseInfo.value = res.data
		}
	} catch (error) {
		console.error("获取限制条款接口失败:", error);
	}
}

const getRelevantMeasuresInfo = async () => {
	try {
		const res = await getRelevantMeasures(sanRecordId.value);
		console.log('------getRelevantMeasuresInfo res', res)
		if (res && res.code === 200) {
			console.log('----getRelevantMeasuresInfo', res.data)
			relevantMeasureInfo.value = res.data
		}
	} catch (error) {
		console.error("获取限制条款接口失败:", error);
	}
}



const getTime = (time) => {
	if (time) {
		const array = time.split('-')
		return `${array[0]}年${array[1]}月${array[2]}日`
	}
}

const getClassName = (type) => {
	let className = ''

	switch (type) {
		case '人工智能':
			className = 'ai'
			break
		case '新材料':
			className = 'material'
			break
		case '量子科技':
			className = 'technology'
			break
		case '生物科技':
			className = 'organism'
			break
		case '航空航天':
			className = 'aerospace'
			break
		case '能源':
			className = 'energy'
			break
		case '集成电路':
			className = 'integrated'
			break
		case '':
			className = 'none-class'
			break
		default:
			className = 'other'
	}

	return className
}
const getRelation = ref({})
watch(overviewInfo, () => {
	getRelation.value = overviewInfo.value?.Relation ? overviewInfo.value?.Relation[0] : {}
}, {
	deep: true
})

onMounted(async () => {
	getUrlParams()
	await getSanctionOverviewInfo()
	await getBackGroundInfo()
	await getLimitClauseInfo()
	await getRelevantMeasuresInfo()
})
</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;

	// 领域样式
	// 人工智能
	.ai {
		border: 1px solid rgba(255, 163, 158, 1);
		background: rgba(255, 241, 240, 1);
		color: rgba(245, 34, 45, 1);
	}

	// 新材料
	.material {
		border: 1px solid rgba(135, 232, 222, 1);
		background: rgba(230, 255, 251, 1);
		color: rgba(19, 168, 168, 1);
	}

	// 量子科技
	.technology {
		border: 1px solid rgba(211, 173, 247, 1);
		background: rgba(249, 240, 255, 1);
		color: rgba(114, 46, 209, 1);
	}

	// 生物科技
	.organism {
		border: 1px solid rgba(145, 202, 255, 1);
		background: rgba(230, 244, 255, 1);
		color: rgba(22, 119, 255, 1);
	}

	// 航空航天
	.aerospace {
		border: 1px solid rgba(173, 198, 255, 1);
		background: rgba(240, 245, 255, 1);
		color: rgba(22, 119, 255, 1);
	}

	// 能源
	.energy {
		border: 1px solid rgba(217, 247, 190, 1);
		background: rgba(246, 255, 237, 1);
		color: rgba(56, 158, 13, 1);
	}

	// 集成电路
	.integrated {
		border: 1px solid rgba(186, 224, 255, 1);
		background: rgba(230, 244, 255, 1);
		color: rgba(9, 88, 217, 1);
	}

	// 其他
	.other {
		border: 1px solid rgba(186, 224, 255, 1);
		background: rgba(230, 244, 255, 1);
		color: rgba(9, 88, 217, 1);
	}

	// 无类型
	.none-class {
		background: transparent;
		border: none;
	}

	.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);
		position: sticky;
		top: 0;
		z-index: 99999999;

		.nav-main {
			width: 1600px;
			height: 81px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			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: 1157px;
			margin-right: 17px;

			.left-top {
				margin-bottom: 16px;
				width: 520px;
				height: 368px;
				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: 122px;
					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: 144px;
					position: absolute;
					top: 200px;
					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;
							margin-right: 8px;
							// background-color: rgba(255, 241, 240, 1);
							// border: 1px solid rgba(255, 163, 158, 1);
							// color: rgba(245, 34, 45, 1);
							padding: 2px 8px;
						}
					}
				}
			}

			.left-bottom {
				width: 520px;
				height: 190px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				margin-bottom: 16px;

				.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: 108px;
					position: absolute;
					top: 60px;
					left: 21px;

					img {
						position: absolute;
						top: 12px;
						right: 12px;
					}

					.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);
						}
					}
				}
			}

			.left-bottom-B {
				width: 520px;
				height: 567px;
				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: 446px;
					position: absolute;
					top: 60px;
					left: 24px;

					.main-box {
						width: 495px;
						margin-bottom: 16px;
						padding: 0 22px 0 0px;
						position: relative;

						img {
							width: 10px;
							height: 10px;
							position: absolute;
							top: 6px;
							left: 0;
							z-index: 100;
						}

						.time {
							margin-left: 21px;
							margin-bottom: 4px;
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(5, 95, 194);
						}

						.name {
							margin-left: 21px;
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 30px;
							color: rgb(59, 65, 75);
						}
					}

					.btn {
						cursor: pointer;
						width: 100%;
						margin-top: 3px;
						text-align: center;
						font-size: 14px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 22px;
						color: rgb(5, 95, 194);

						img {
							width: 16px;
							height: 16px;
						}
					}

					.line {
						position: absolute;
						height: 360px;
						border: 2px solid rgb(235, 238, 242);
						top: 5px;
						left: 2.5px;
					}
				}
			}
		}

		.right {
			width: 1063px;
			height: 1800px;

			.right-top {
				margin-bottom: 16px;
				width: 1063px;
				height: 396px;
				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: 312px;
					overflow-y: auto;
					overflow-x: hidden;

					.right-top-item {
						width: 1022px;
						padding: 12px 0px;
						position: relative;
						display: flex;
						align-items: center;
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
					}

					// .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: 817px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				margin-bottom: 16px;

				.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;
				}

				.img2 {
					width: 28px;
					height: 28px;
					position: absolute;
					top: 14px;
					right: 12px;
					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-content1 {
					width: 1022px;
					height: auto;
					// position: absolute;
					// top: 60px;
					// left: 22px;
					margin-bottom: 16px;

					.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: 229px;
					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: 174px;
						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-content3 {
					width: 1022px;
					height: 169px;
					position: absolute;
					top: 536px;
					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);
					}
				}
			}

			.right-top-b {
				margin-bottom: 50px;
				width: 1063px;
				height: 509px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				padding: 60px 19px 28px 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: 421px;
					overflow-y: auto;
					overflow-x: hidden;

					.right-top-item {
						width: 1022px;
						height: 104px;
						border-bottom: 1px solid rgb(234, 236, 238);
						border-top: 1px solid rgb(234, 236, 238);
						padding: 12px 0;
						position: relative;

						img {
							width: 24px;
							height: 24px;
							position: absolute;
							left: 26px;
							top: 12px;
						}

						.type {
							position: absolute;
							right: 48px;
							top: 11px;
							padding: 2px 8px;
							border-radius: 20px;
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
						}

						.type1 {
							background-color: rgba(232, 189, 11, 0.1);
							color: rgb(232, 189, 11);
						}

						.type2 {
							background-color: rgba(231, 243, 255, 1);
							color: rgb(5, 95, 194);
						}

						.name {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
							margin-left: 65px;
							margin-bottom: 4px;
						}

						.time {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(95, 101, 108);
							margin-left: 65px;
						}

						.content {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 30px;
							color: rgb(95, 101, 108);
							margin-left: 65px;
						}
					}
				}
			}
		}
	}
}
</style>
