<template>
	<div class="introduction-page">
		<div class="left">
			<div class="left-top">
				<div class="title">
					<div class="box"></div>
					<div class="text">基本信息</div>
					<div class="btn">
						<img src="../../../../assets/下载按钮.png" alt />
						<img src="../../../../assets/收藏按钮.png" alt />
					</div>
				</div>
				<div class="left-top-main">
					<div class="left-top-main-title">{{ CCLInfo.description }}</div>
					<div class="left-top-main-content">
						<div class="content-item">
							<span class="label">法律依据：</span>
							<span class="text">{{ CCLInfo.legalBasis }}</span>
						</div>
						<div class="content-item">
							<span class="label">管制对象：</span>
							<span class="text">{{ CCLInfo.controlledObject }}</span>
						</div>
						<div class="content-item">
							<span class="label">核心限制措施：</span>
							<span class="text">{{ CCLInfo.restrictiveMeasure }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="left-center">
				<div class="title">
					<div class="box"></div>
					<div class="text">出口管制分类编码（ECCN）</div>
					<div class="btn">
						<img src="../../../../assets/下载按钮.png" alt />
						<img src="../../../../assets/收藏按钮.png" alt />
					</div>
				</div>
				<div class="button-list">
					<div
						:class="['button', {'click': item.isClick}]"
						@click="changeECCN(item)"
						v-for="(item, i) in ECCNList"
					>
						<span>第{{ item.ranking }}位 {{ item.name }}</span>
					</div>
				</div>
				<div class="description">
					<li>{{ currentECCN.description }}</li>
				</div>
				<el-table :data="tableData" stripe class="table-class">
					<el-table-column prop="categoryCode" label="第一项" />
					<el-table-column prop="name" label="物项类别" width="460" />
					<el-table-column prop="nameZh" label="说明" width="460" />
				</el-table>
			</div>
			<div class="left-bottom">
				<div class="title">
					<div class="box"></div>
					<div class="text">商业管制清单更新历史</div>
					<div class="filters">
						<el-select
							v-model="selectedDomain"
							placeholder="Select"
							style="width: 150px; height: 32px; margin-right: 16px"
						>
							<el-option
								v-for="item in domainOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						<!-- <el-checkbox v-model="onlyChina">只看涉华动态</el-checkbox> -->
					</div>
					<div class="btn">
						<img src="../../../../assets/下载按钮.png" alt />
						<img src="../../../../assets/收藏按钮.png" alt />
					</div>
				</div>
				<div class="left-bottom-main">
					<div class="sanction-list" v-for="(item, i) in sanctionList" :key="item.id">
						<div class="time">
							<div class="year">{{ item.year }}</div>
							<div class="date">{{ item.date }}</div>
						</div>
						<div class="img-zone">
							<img :src="item.icon || title" alt />
							<div :class="['img-line', {'img-line-last': i === sanctionList.length - 1}]"></div>
						</div>
						<div class="main">
							<div class="main-title">{{ item.name }}</div>
							<!-- <div class="main-title" @click="handleClick(item)">{{ item.name }}</div> -->
							<el-tooltip
								effect="dark"
								:content="item.summary"
								popper-class="common-prompt-popper"
								placement="top"
								:show-after="500"
							>
								<div class="main-desc">{{ item.summary }}</div>
							</el-tooltip>
							<div class="tag-box">
								<div v-for="tag in item.techDomainList" :key="tag" class="tag-item">{{ tag }}</div>
							</div>

							<div
								:class="{ 'count-tag': item.cnEntityCount }"
							>{{ item.cnEntityCount ? `${item.cnEntityCount}家中国实体` : "" }}</div>
						</div>
					</div>
				</div>
				<div class="left-footer">
					<div class="total-count">共 {{ totalAll }} 项</div>
					<el-pagination
						v-model:current-page="currentPageAll"
						:page-size="pageSizeAll"
						:total="totalAll"
						layout="prev, pager, next"
						background
						@current-change="handlePageChangeAll"
					/>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="title">
				<div class="box"></div>
				<div class="text">发布机构</div>
				<div class="btn">
					<img src="../../../../assets/下载按钮.png" alt />
					<img src="../../../../assets/收藏按钮.png" alt />
				</div>
			</div>
			<div class="right-main">
				<div class="right-main-title">
					<img :src="publishInfo.imageUrl" alt />
					<div class="title-zone">
						<div class="title-line">
							<div class="title-text">{{ publishInfo.orgNameZh }} ></div>
							<div class="title-detail" @click="handleClickOrg(publishInfo)">
								<span>查看官网</span>
								<img src="../../../../assets/dakai.png" alt />
							</div>
						</div>
						<div class="title-entext">{{ publishInfo.orgName }}</div>
					</div>
				</div>
				<!-- 关键人物 -->
				<div class="right-main-key-person">
					<div class="key-person-title">
						<img :src="icon01" alt />
						<span>关键人物</span>
					</div>
					<div class="key-person-list">
						<div
							class="person-item"
							v-for="(item, index) in publishInfo.personList"
							:key="index"
							@click="handlePerClick(item)"
						>
							<img :src="item.imageUrl" alt />
              
							<div class="person-info">
                <el-tooltip
								effect="dark"
								:content="item.name"
								popper-class="common-prompt-popper"
								placement="top"
								:show-after="500"
							>
								<div class="name">{{ item.name }}</div>
							</el-tooltip>
              <el-tooltip
								effect="dark"
								:content="item.position"
								popper-class="common-prompt-popper"
								placement="top"
								:show-after="500"
							>
								<div class="title1">{{ item.position }}</div>
							</el-tooltip>
							</div>
						</div>
					</div>
				</div>
				<!-- 机构动态 -->
				<div class="right-main-dynamic">
					<div class="dynamic-title">
						<img :src="icon02" alt />
						<span>机构动态</span>
					</div>
					<div class="dynamic-list">
						<div class="dynamic-item" v-for="(item, index) in publishOrgInfo" :key="item.newsId">
							<div class="dot-line">
								<div class="dot"></div>
								<div class="line" v-if="index !== publishOrgInfo.length - 1"></div>
							</div>
							<div class="content-box">
								<div class="date">{{ item.publishDate }}</div>
								<div class="text">{{ item.newsContent }}</div>
							</div>
						</div>
					</div>
					<div
						class="more-btn"
						v-if="publishOrgInfo.length < dynamicTotal"
						@click="handleLoadMoreDynamic"
					>
						<span>查看更多</span>
						<el-icon>
							<ArrowDown />
						</el-icon>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeMount } from "vue";
import router from "@/router";
import title from "../../../../assets/title.png";
import defaultIcon from "../../../../../assets/icons/default-avatar.png";
import icon01 from "../../assets/icon01.png";
import icon02 from "../../assets/icon02.png";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElTable, ElTableColumn, ElButton, ElSelect, ElOption, ElInput } from 'element-plus'
import { getCCLInfo, getECCN, getECCNList, getPublishInfo, getPublishOrgInfo, getEntityUpdateInfo } from "@/api/exportControlV2.0.js";

// 处理点击发布机构的方法
const handleClickOrg = item => {
  // console.log("点击了发布机构:", item);
  const route = router.resolve({
    path: "/institution",
    query: {
      id: item.id
    }
  });
  window.open(route.href, "_blank");
};

// 处理点击关键人物的方法
const handlePerClick = item => {
  console.log("点击了关键人物:", item);
  const route = router.resolve({
    path: "/characterPage",
    query: {
      type: item.type,
      personId: item.id
    }
  });
  window.open(route.href, "_blank");
};

// 处理点击实体名称的方法
const handleClick = item => {
  // console.log("点击了实体名称:", item);
  const route = router.resolve({
    path: "/exportControl/singleSanction",
    query: {
      id: item.id
    }
  });
  window.open(route.href, "_blank");
};

const selectedDomain = ref(0);
const onlyChina = ref(false);
const domainOptions = [
  { label: "全部领域", value: 0 },
  { label: "人工智能", value: 1 },
  { label: "生物科技", value: 2 },
  { label: "新一代信息技术", value: 3 },
  { label: "量子科技", value: 4 },
  { label: "新能源", value: 5 },
  { label: "集成电路", value: 6 },
  { label: "海洋", value: 7 },
  { label: "先进制造", value: 8 },
  { label: "新材料", value: 9 },
  { label: "航空航天", value: 10 },
  { label: "深海", value: 11 },
  { label: "极地", value: 12 },
  { label: "太空", value: 13 },
  { label: "核", value: 14 }
];

const sanctionList = ref([]);
const currentPageAll = ref(1);
const pageSizeAll = ref(10);
const totalAll = ref(0);
// 获取商业管制清单更新历史
const getSanctionUpdate = async () => {
  // 传递的参数
  // {"isCn":false,"techDomainIds":[1],"typeName":"商业管制清单","pageNum":1,"pageSize":10}
  const data = {
    isCn: onlyChina.value,
    techDomainIds: selectedDomain.value ? [selectedDomain.value] : [],
    // typeName: "实体清单",
    typeName: "商业管制清单",
    pageNum: currentPageAll.value,
    pageSize: pageSizeAll.value
  };
  try {
    const res = await getEntityUpdateInfo(data);
    console.log('-----getSanctionUpdate', res)
    if (res && res.code === 200) {
      console.log(res.data.content);
      sanctionList.value = (res.data.content || []).map(item => ({
        ...item,
        year: item.postDate ? item.postDate.split("-")[0] : "",
        date: item.postDate ? `${item.postDate.split("-")[1]}月${item.postDate.split("-")[2]}日` : "",
        techDomainList: item.techDomainList || [],
        icon: ""
      }));
      totalAll.value = res.data.totalElements || 0;
    }
  } catch (error) {
    console.error("获取商业管制清单更新历史失败:", error);
  }
};

// 监听筛选条件变化
watch([selectedDomain, onlyChina], () => {
  currentPageAll.value = 1;
  getSanctionUpdate();
});

const handlePageChangeAll = val => {
  currentPageAll.value = val;
  getSanctionUpdate();
  const container = document.querySelector(".entity-list");
  const target = document.querySelector(".left-bottom");
  if (container && target) {
    const containerRect = container.getBoundingClientRect();
    const targetRect = target.getBoundingClientRect();
    // 148是吸顶头部的高度，减去它以避免标题被遮挡
    const top = targetRect.top - containerRect.top + container.scrollTop - 148;
    container.scrollTo({
      top: top,
      behavior: "smooth"
    });
  }
};

// 获取商业管制清单发布机构
const publishInfo = ref({});
const getPublishInfoFn = async () => {
  const params = {
    sanTypeId: 13 // 商业管制清单固定13
  };
  try {
    const res = await getPublishInfo(params);
    if (res && res.code === 200) {
      publishInfo.value = res.data;
      console.log('------getPublishInfoFn', res.data)
      // 获取发布机构动态
      getPublishOrgInfoFn();
    }
  } catch (error) {
    console.error("获取商业管制清单发布机构失败:", error);
  }
};
// 获取发布机构动态
const publishOrgInfo = ref([]);
const dynamicPage = ref(1);
const dynamicPageSize = ref(3);
const dynamicTotal = ref(0);

const getPublishOrgInfoFn = async (isLoadMore = false) => {
  if (publishInfo.value && !publishInfo.value.id) return;

  const params = {
    orgId: publishInfo.value.id,
    pageNum: dynamicPage.value,
    pageSize: dynamicPageSize.value
  };
  try {
    const res = await getPublishOrgInfo(params);
    if (res && res.code === 200) {
      const newRows = (res.data.content || []).map(item => ({
        ...item,
        publishDate: item.newsDate,
        title: item.newsTitle
      }));

      if (isLoadMore) {
        publishOrgInfo.value = [...publishOrgInfo.value, ...newRows];
      } else {
        publishOrgInfo.value = newRows;
      }
      dynamicTotal.value = res.data.totalElements || 0;
    }
  } catch (error) {
    console.error("获取发布机构动态失败:", error);
  }
};

const handleLoadMoreDynamic = () => {
  dynamicPage.value++;
  getPublishOrgInfoFn(true);
};

// 获取商业管制清单基本信息
// todo: 待对接后端接口
const CCLInfo = ref({
  description: "xxxxx",
  legalBasis: "法律依据",
  controlledObject: "管制对象",
  name: '',
  orgId: '',
  orgLogoUrl: '',
  orgName: '',
  originalName: '',
  shortName: '',
  restrictiveMeasure: "核心限制措施"
});
const getCCLInfoFn = async () => {
  try {
    const res = await getCCLInfo();
    if (res && res.code === 200) {
      CCLInfo.value = res.data;
      console.log('getCCLInfoFn', CCLInfo.value)
    }
  } catch (error) {
    console.error("获取商业管制清单基本信息失败:", error);
  }
};

// 定义ECCN列表
const ECCNList = ref([
  {
    name: '第1位: 物项类别',
    isClick: true,
    description: 'ECCN的第一位是一个数字，它指明了受控物项所属的技术或行业类别，对于快速定位物项在《商业管制清单》中的位置至关重要',
    key: 'wxlb' // 用于和后端对接的
  }
])

const getCCL_ECCN_Type = async () => {
  try {
    const res = await getECCN();
    if (res && res.code === 200) {
      ECCNList.value = res.data;
      console.log('getCCL_ECCN_Type', ECCNList.value)
      // 为每个对象增加是否点击对象
      ECCNList.value.forEach((item) => {
        item.isClick = false
      })
      // 默认点击第一个
      ECCNList.value[0].isClick = true
      // 默认将第一个赋值给currentECCN
      currentECCN.value = ECCNList.value[0]
    }
  } catch (error) {
    console.error("获取商业管制清单出口管制分类编码失败:", error);
  }
};

// 表格数据
const tableData = ref([
  {
    categoryCode: '0',
    categoryId: 1,
    code: null,
    description: null,
    descriptionZh: null,
    id: 1,
    name: 'Nuclear Materials, Facilities and Equipment and Miscellaneous',
    nameZh: "核材料、设备设施及其他类似物项"
  }
])
const currentECCN = ref({
  name: '第1位: 物项类别',
  isClick: true,
  description: 'ECCN的第一位是一个数字，它指明了受控物项所属的技术或行业类别，对于快速定位物项在《商业管制清单》中的位置至关重要',
  id: 1,
  ranking: 1
})

/**
 * 修改ECCN
 */
function changeECCN(item) {
  ECCNList.value.forEach((i) => i.isClick = false)
  item.isClick = true
  currentECCN.value = item
}

// 监听当前的ECCN，更新获取列表数据
watch(
  () => currentECCN.value,
  async (newValue) => {
    // 调用接口更新table数据
    const params = {
      id: currentECCN.value.id
    }
    try {
      const res = await getECCNList(params);
      if (res && res.code === 200) {
        tableData.value = res.data;
        console.log('getECCNList', tableData.value)
      }
    } catch (error) {
      console.error("获取商业管制清单出口管制分类编码信息列表列表数据:", error);
    }
  },
  { deep: true }
);

onMounted(() => {
  // 获取商业管制清单基本信息
  getCCLInfoFn();
  // 获取商业管制清单的分类编码
  getCCL_ECCN_Type()
  // 获取商业管制清单发布机构
  getPublishInfoFn();
  // 获取商业管制清单更新历史
  getSanctionUpdate();


});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
	user-select: none;
}
.introduction-page {
	width: 1601px;
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 50px;
	display: flex;
	justify-content: space-between;
	.left {
		width: 1064px;
		.left-top {
			width: 100%;
			height: auto;
			padding-bottom: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;
			margin-bottom: 16px;
			.left-top-main {
				width: 100%;
				padding: 8px 26px 0 26px;
				.left-top-main-title {
					padding: 16px 24px;
					border-radius: 4px;
					border: 1px solid rgba(231, 243, 255, 1);
					background: linear-gradient(to bottom right, rgba(231, 243, 255, 1), rgba(231, 243, 255, 0));
					font-size: 16px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 30px;
					color: rgb(5, 95, 194);
					margin-bottom: 17px;
				}
				.left-top-main-content {
					.content-item {
						margin-bottom: 13px;
						font-size: 16px;
						font-family: "Microsoft YaHei";
						display: flex;

						.label {
							width: 120px;
							flex-shrink: 0;
							font-weight: 700;
							color: rgb(59, 65, 75);
							white-space: nowrap;
						}

						.text {
							color: rgb(59, 65, 75);
							text-align: justify;
						}
					}
				}
			}
		}
		.left-center {
			width: 100%;
			// height: 705px;
			height: auto;
			border-radius: 10px;
			background-color: #fff;
			margin-bottom: 16px;

			.button-list {
				width: 1012px;
				height: 32px;
				margin-left: 26px;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.button {
					width: 196px;
					height: 32px;
					border-radius: 4px;
					border: 1px solid rgba($color: #eeeeee, $alpha: 0.8);
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgb(59, 65, 75);

					span {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						letter-spacing: 0px;
						font-style: Regular;
					}
				}

				.click {
					background: rgba(231, 243, 255, 1);
					border: 1px solid rgba(231, 243, 255, 1);
					color: rgb(5, 95, 194);
				}
			}
			.description {
				width: 991px;
				height: auto;
				min-height: 30px;
				margin-top: 16px;
				margin-left: 63px;
			}

			.table-class {
				width: 1013px;
				height: auto;
				margin-top: 16px;
				margin-left: 24px;
				color: rgb(59, 65, 75);
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				letter-spacing: 0px;
				font-style: Regular;
			}
		}
		.left-bottom {
			width: 100%;
			min-height: 1000px;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;
			.title {
				border-bottom: 1px solid rgb(234, 236, 238);
				.filters {
					margin-left: auto;
					display: flex;
					align-items: center;
					margin-right: 20px;
				}
				.btn {
					margin-left: 0;
				}
			}
			.left-bottom-main {
				padding: 16px 42px 0 25px;
				.sanction-list {
					width: 1169px;
					// padding: 0px 0 12px 0;
					display: flex;
					// justify-content: flex-start;
					height: 154px;
					.time {
						width: 80px;
						height: 50px;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: center;
						margin-right: 16px;
						font-family: "Microsoft YaHei";
						color: rgb(5, 95, 194);
						font-weight: 700;

						.year {
							font-size: 16px;
							line-height: 24px;
						}

						.date {
							font-size: 16px;
							line-height: 24px;
						}
					}
					.img-zone {
						display: flex;
						flex-direction: column;
						align-items: center;
						// justify-content: center;
						// width: 30px;
						margin-top: 14px;
						// margin-right: 16px;
						// height: calc(100% - 16px);
						margin-right: 16px;
						img {
							width: 30px;
							height: 30px;
							border-radius: 50%;
							z-index: 2;
						}

						.img-line {
							width: 1px;
							border: 1px solid rgba($color: #eeeeee, $alpha: 1);
							// height: calc(100% - 30px);
							position: absolute;
							height: 154px;
						}

						.img-line-last {
							height: 140px;
						}
					}

					.main {
						width: 855px;
						padding-top: 14px;
						position: relative;
						.main-title {
							cursor: pointer;
							width: 700px;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
							font-family: "Microsoft YaHei";
							color: rgb(59, 65, 75);
							margin-bottom: 11px;
						}
						.main-desc {
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							font-family: "Microsoft YaHei";
							color: rgb(95, 101, 108);
							margin-bottom: 9px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.tag-box {
							display: flex;
							.tag-item {
								padding: 1px 8px;
								margin-right: 8px;
								border-radius: 4px;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
								font-family: "Microsoft YaHei";
								color: rgb(5, 95, 194);
								background-color: rgba(231, 243, 255, 1);
							}
						}
						.count-tag {
							position: absolute;
							padding: 2px 8px;
							top: 0;
							right: 0;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							font-family: "Microsoft YaHei";
							color: rgb(206, 79, 81);
							border-radius: 20px;
							background-color: rgba(206, 79, 81, 0.1);
						}
					}
				}
			}
			.left-footer {
				width: 100%;
				height: 73px;
				border-top: 1px solid rgb(234, 236, 238);
				padding: 0 31px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.total-count {
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					font-family: "Microsoft YaHei";
					color: rgb(59, 65, 75);
				}
			}
		}
	}
	.right {
		width: 520px;
		height: 1020px;
		border-radius: 10px;
		padding-bottom: 20px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background-color: #fff;
		.right-main {
			padding: 7px 24px 0px 23px;
			.right-main-title {
				cursor: pointer;
				width: 473px;
				height: auto;
				border-radius: 4px;
				background-color: rgb(247, 248, 249);
				border: 1px solid rgb(234, 236, 238);
				display: flex;
				margin-bottom: 20px;
				padding: 16px;
				.title-zone {
					width: calc(100% - 64px);
				}
				img {
					width: 64px;
					height: 64px;
					margin-right: 14px;
				}
				.title-line {
					display: flex;
					height: 26px;
					margin-bottom: 6px;
					justify-content: space-between;
					align-items: center;
				}
				.title-detail {
					display: flex;
					align-items: center;
					justify-content: center;
					span {
						font-family: Microsoft YaHei;
						color: rgba(5, 95, 194, 1);
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: center;
						margin-top: 1px;
					}
					img {
						width: 16px;
						height: 16px;
						margin-right: 0px;
					}
				}
				.title-text {
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					font-family: "Microsoft YaHei";
					color: rgb(59, 65, 75);
				}
				.title-entext {
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					font-family: "Microsoft YaHei";
					color: rgb(95, 101, 108);
				}
			}
			.right-main-key-person {
				width: 100%;
				padding-bottom: 20px;
				border-bottom: 1px solid rgb(234, 236, 238);
				margin-bottom: 18px;
				.key-person-title {
					display: flex;
					align-items: center;
					margin-bottom: 19px;
					img {
						width: 14px;
						height: 14px;
						margin-right: 12px;
					}
					span {
						font-size: 18px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						color: rgb(59, 65, 75);
					}
				}
				.key-person-list {
					display: flex;
					flex-wrap: wrap;

					.person-item {
						width: 185px;
						cursor: pointer;
						display: flex;
						align-items: center;
						margin-bottom: 16px;
						&:nth-child(2n-1) {
							margin-left: 28px;
							margin-right: 39px;
						}
						img {
							width: 48px;
							height: 48px;
							border-radius: 50%;
							margin-right: 8px;
							object-fit: cover;
							flex-shrink: 0;
						}
						.person-info {
              width: calc(100% - 48px - 8px);
							overflow: hidden;
							text-overflow: ellipsis;
              white-space: nowrap; /* 防止文本换行 */
							.name {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgb(59, 65, 75);
								margin-bottom: 1px;
								white-space: nowrap;
							}
							.title1 {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								color: rgb(95, 101, 108);
								line-height: 1.2;
								// white-space: nowrap;
							}
						}
					}
				}
			}
			.right-main-dynamic {
				width: 100%;
				.dynamic-title {
					display: flex;
					align-items: center;
					margin-bottom: 19px;
					img {
						width: 14px;
						height: 14px;
						margin-right: 12px;
					}
					span {
						font-size: 18px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						color: rgb(59, 65, 75);
					}
				}
				.dynamic-list {
					max-height: 500px;
					overflow-y: auto;
					padding-right: 10px;

					/* 滚动条样式 */
					&::-webkit-scrollbar {
						width: 6px;
					}
					&::-webkit-scrollbar-track {
						background: #f1f1f1;
						border-radius: 3px;
					}
					&::-webkit-scrollbar-thumb {
						background: #c1c1c1;
						border-radius: 3px;
						&:hover {
							background: #a8a8a8;
						}
					}

					.dynamic-item {
						display: flex;
						position: relative;
						padding-bottom: 24px;
						.dot-line {
							width: 12px;
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-right: 12px;
							margin-top: 6px;
							.dot {
								width: 8px;
								height: 8px;
								border-radius: 50%;
								border: 2px solid rgb(5, 95, 194);
								background-color: #fff;
								z-index: 1;
							}
							.line {
								width: 1px;
								height: calc(100% - 2px);
								background-color: rgb(234, 236, 238);
								position: absolute;
								top: 12px;
								left: 5px;
							}
						}
						.content-box {
							flex: 1;
							.date {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgb(5, 95, 194);
								margin-bottom: 8px;
							}
							.text {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								color: rgb(59, 65, 75);
								line-height: 30px;
								text-align: justify;
							}
						}
					}
				}
				.more-btn {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 14px;
					color: rgb(5, 95, 194);
					cursor: pointer;
					margin-top: 8px;

					span {
						margin-right: 4px;
					}
				}
			}
		}
	}
}

.title {
	width: 100%;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 14px 12px 16px 0;
	.box {
		width: 8px;
		height: 20px;
		background-color: rgb(5, 95, 194);
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-right: 14px;
	}
	.text {
		font-size: 20px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 26px;
		color: rgb(5, 95, 194);
	}
	.btn {
		width: 60px;
		height: 28px;
		margin-left: auto;
		img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}
		img:first-child {
			margin-right: 4px;
		}
	}
}
</style>
<style scoped>
.common-prompt-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;
	max-width: 500px !important;
}

.common-prompt-popper.el-popper .el-popper__arrow::before {
	background-color: rgb(59, 65, 75) !important;
	border-color: rgb(59, 65, 75) !important;
}

:deep(.el-table thead) {
	color: rgb(59, 65, 75);
}

:deep(.el-table tr) {
	height: 48px;
}
</style>
