<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">
					<el-checkbox
						v-for="(item, index) in dataList"
						:key="index"
						v-model="item.checked"
						:label="item.label"
						@change="handleFilterChange(item, dataList)"
					/>
				</div>
				<div class="left-title cl1">涉及领域</div>
				<div class="left-content">
					<el-checkbox
						v-for="(item, index) in techFields"
						:key="index"
						v-model="item.checked"
						:label="item.label"
						@change="handleFilterChange(item, techFields)"
					/>
				</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">{{ getDate(item) }}</div>
							<img :src="item.ORGPICTURE" alt class="img" />
							<div class="box">
								<div class="title">{{ item.RULENAME }}</div>
								<div class="content">{{ item.RULEINTRODUCTION }}</div>
								<div class="domain">
									<div v-for="(domain, i) in item.ruleAreas" :key="i" class="domain-item">{{ domain }}</div>
								</div>
								<div
									class="type"
									:class="{
										type1: item.RULEMEANS === '行政令',
										type2: item.RULEMEANS === '法案',
										type3: item.RULEMEANS === '301调查'
									}"
								>{{ item.RULEMEANS }}</div>
							</div>
						</div>
					</div>
					<div class="line"></div>
					<div class="page">
						<div class="count">共{{ total }}项调查</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">
					<el-checkbox
						v-for="(item, index) in dataList"
						:key="index"
						v-model="item.checked"
						:label="item.label"
						@change="handleFilterChange(item, dataList)"
					/>
				</div>
				<div class="left-title cl1">涉及领域</div>
				<div class="left-content">
					<el-checkbox
						v-for="(item, index) in techFields"
						:key="index"
						v-model="item.checked"
						:label="item.label"
						@change="handleFilterChange(item, techFields)"
					/>
				</div>
				<div class="left-title cl2">涉及国家</div>
				<div class="left-content">
					<el-checkbox
						v-for="(item, index) in dataList3"
						:key="index"
						v-model="item.checked"
						:label="item.label"
						@change="handleFilterChange(item, dataList3)"
					/>
				</div>
			</div>
			<div class="right-unshow">
				<div class="top">
					<div v-for="item in unionDataList" :key="item.id" class="top-item">
						<div class="title">
							<div class="img-list">
								<img class="img-style" :src="ele.COUNTRYIMAGE" v-for="ele in item.countries" alt />
							</div>
							<div style="width: calc(100% - 60px)">
								<div style="display: flex; justify-content: space-between;">
									<div>
										<span class="name">{{ item.ACTANAME }}</span>
										<span class="abb">{{ item.ACTASHORTNAMEEN }}</span>
									</div>
									<div class="type">
										<div
											v-for="(ele, index) in item.area"
											:key="index"
											:class="{ type1: ele !== '', type3: ele === '' }"
										>{{ ele }}</div>
									</div>
								</div>
								<div class="compose">{{ getCompose(item) }}</div>
							</div>
						</div>
						<div class="content">{{ item.ACTAINTRODUCTION }}</div>
					</div>
				</div>
				<div class="bottom">
					<div class="count">共{{ unionDataList.length }}项调查</div>
					<el-pagination
						v-model:current-page="currentPageACTA"
						:page-size="pageSizeACTA"
						:total="totalACTA"
						layout="prev, pager, next"
						background
						@current-change="handlePageChange"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

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

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"
import { getRuleLimitList, getACTAList, getAcTAAllcountry } from '@/api/ruleRestriction/index.js'

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

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

const value = ref("desc");

const options = [
  {
    value: "asc",
    label: "时间正序"
  },
  {
    value: "desc",
    label: "时间倒序"
  }
];
const dataList = ref([
  { label: "全部时间", value: "all", checked: true },
  { label: "2025年", value: "2025", checked: false },
  { label: "2024年", value: "2024", checked: false },
  { label: "2023年", value: "2023", checked: false },
  { label: "2022年", value: "2022", checked: false },
  { label: "2021年", value: "2021", checked: false }
]);
const techFields = ref([
  { label: "全部领域", value: "all", checked: true },
  { label: "人工智能", value: "1", checked: false },
  { label: "生物科技", value: "2", checked: false },
  { label: "新一代通信网络", value: "3", checked: false },
  { label: "量子科技", value: "4", checked: false },
  { label: "新能源", value: "5", checked: false },
  { label: "集成电路", value: "6", checked: false },
  { label: "海洋", value: "7", checked: false },
  { label: "先进制造", value: "8", checked: false },
  { label: "新材料", value: "9", checked: false },
  { label: "航空航天", value: "10", checked: false },
  { label: "深海", value: "11", checked: false },
  { label: "极地", value: "12", checked: false },
  { label: "太空", value: "13", checked: false },
  { label: "核", value: "14", checked: false },
  { label: "其他", value: "99", checked: false }
]);

const dataList3 = ref([
  {
    "value": "all",
    "label": "全部国家",
    checked: true
  },
  {
    "value": "0103",
    "label": "韩国",
    checked: false
  },
  {
    "value": "0104",
    "label": "日本",
    checked: false
  },
  {
    "label": "印度",
    "value": "0119",
    checked: false
  },
  {
    "value": "0203",
    "label": "瑞典",
    checked: false
  },
  {
    "value": "0204",
    "label": "芬兰",
    checked: false
  },
  {
    "label": "英国",
    "value": "0217",
    checked: false
  },
  {
    "value": "0220",
    "label": "荷兰",
    checked: false
  },
  {
    "value": "0222",
    "label": "法国",
    checked: false
  },
  {
    "value": "0401",
    "label": "澳大利亚",
    checked: false
  },
  {
    "value": "0501",
    "label": "加拿大",
    checked: false
  },
  {
    "value": "0502",
    "label": "美国",
    checked: false
  },
  {
    "value": "010101",
    "label": "中国台湾",
    checked: false
  }
]);

const mainDataList = ref([]);

const unionDataList = ref([])

// 筛选逻辑处理
const handleFilterChange = (item, list) => {
  // 如果点击的是"全部"
  if (item.value === 'all') {
    if (item.checked) {
      // 选中全部，取消其他所有
      list.forEach(i => {
        if (i.value !== 'all') i.checked = false;
      });
    } else {
      // 取消全部（通常不允许全部取消，至少得选一个，这里如果取消全部，就默认为全部选中）
      item.checked = true;
    }
  } else {
    // 点击的是具体项
    if (item.checked) {
      // 选中具体项，取消"全部"
      const allItem = list.find(i => i.value === 'all');
      if (allItem) allItem.checked = false;
    } else {
      // 取消具体项，检查是否还有选中的
      const anyChecked = list.some(i => i.checked);
      if (!anyChecked) {
        const allItem = list.find(i => i.value === 'all');
        if (allItem) allItem.checked = true;
      }
    }
  }

  // 重置页码并查询
  currentPage.value = 0;
  if (isShow.value) {
    getRuleLimitListApi();
  } else {
    getACTAListInfo()
  }
};

const getRuleLimitListApi = async () => {
  // 处理科技领域筛选
  let techDomains = [];
  const allTech = techFields.value.find(item => item.value === 'all');
  if (!allTech || !allTech.checked) {
    techDomains = techFields.value
      .filter(item => item.checked && item.value !== 'all')
      .map(item => item.value);
  }

  // 处理发布时间时间筛选
  let years = [];
  const allTime = dataList.value.find(item => item.value === 'all');

  if (!allTime || !allTime.checked) {
    years = dataList.value
      .filter(item => item.checked && item.value !== 'all')
      .map(item => item.value);
  }

  const params = {
    areas: techDomains.length > 0 ? techDomains.join(',') : undefined,
    years: years.length > 0 ? years.join(',') : undefined,
    keywords: undefined,
    sortOrder: value.value,
    sortField: 'date',
    currentPage: currentPage.value,
    pageSize: pageSize.value
  };

  try {
    console.log('-----getRuleLimitList params', params)
    const res = await getRuleLimitList(params);
    console.log('-----getRuleLimitList res', res)
    if (res.code === 200) {
      console.log('-----getRuleLimitListApi', res.data)
      total.value = res.data.numberOfElements
      mainDataList.value = res.data.content
    }
  } catch (error) {
    console.error("获取规则限制政令列表查询接口接口失败:", error);
  }
}

const getACTAListInfo = async () => {
  // 处理科技领域筛选
  let techDomains = [];
  const allTech = techFields.value.find(item => item.value === 'all');
  if (!allTech || !allTech.checked) {
    techDomains = techFields.value
      .filter(item => item.checked && item.value !== 'all')
      .map(item => item.value);
  }

  // 处理发布时间时间筛选
  let years = [];
  const allTime = dataList.value.find(item => item.value === 'all');

  if (!allTime || !allTime.checked) {
    years = dataList.value
      .filter(item => item.checked && item.value !== 'all')
      .map(item => item.value);
  }

  // 处理国家筛选
  let countries = []
  const allCountry = dataList3.value.find(item => item.value === 'all')
  if (!allCountry || !allCountry.checked) {
    countries = dataList3.value.filter(item => item.checked && item.value !== 'all').map(item => item.value)
  }

  const params = {
    areas: techDomains.length > 0 ? techDomains.join(',') : undefined,
    years: years.length > 0 ? years.join(',') : undefined,
    keywords: undefined,
    countries: countries,
    sortOrder: value.value,
    sortField: 'date',
    currentPage: currentPageACTA.value,
    pageSize: pageSizeACTA.value
  };

  try {
    console.log('-----getACTAList params', params)
    const res = await getACTAList(params);
    console.log('-----getACTAList res', res)
    if (res.code === 200) {
      console.log('-----getACTAListInfo', res.data)
      unionDataList.value = res.data.content
      totalACTA.value = res.data.numberOfElements
    }
  } catch (error) {
    console.error("获取规则限制政令列表查询接口接口失败:", error);
  }
}

const getCompose = (item) => {
  if (item) {
    const countries = item.countries.map(i => i.COUNTRYNAME)
    return item.ACTAYEAR + '年成立 · ' + countries.join('、')
  }
}

watch(value, () => {
  if (isShow.value) {
    getRuleLimitListApi()
  } else {
    getACTAListInfo()
  }

})

const getDate = (item) => {
  if (item && item.PUBLISHDATE) {
    let year = item.PUBLISHDATE.split('-')[0]
    let month = item.PUBLISHDATE.split('-')[1]
    let day = +item.PUBLISHDATE.split('-')[2]
    return year + '年' + month + '月' + day + '日'
  }
}

onMounted(async () => {
  await getRuleLimitListApi()
  try {
    const res = await getAcTAAllcountry();
    console.log('-----getAcTAAllcountry res', res)
    if (res.code === 200) {
      console.log('-----getAcTAAllcountry', res.data)
    }
  } catch (error) {
    console.error("获取规则限制政令列表查询接口接口失败:", error);
  }
})

const total = ref(1205);
const pageSize = ref(10);
const currentPage = ref(0);
const totalACTA = ref(1205);
const pageSizeACTA = ref(10);
const currentPageACTA = ref(0);
const handlePageChange = p => {
  currentPage.value = p;
};
const handlePageChangeACTA = p => {
  currentPageACTA.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;
				height: auto;
				margin-left: 25px;
				margin-top: 13px;
				display: flex;
				flex-wrap: wrap;

				.el-checkbox {
					width: 50%;
					margin-right: 0;
					margin-bottom: 4px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
				}
				.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 {
                position: absolute;
                top: 0;
                right: 0;
								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(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: 55px;
					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-list {
							width: 60px;
							height: 46px;
							overflow: hidden;
							text-align: center;
							.img-style {
								width: 22px;
								height: 22px;
								border-radius: 50%;
							}
						}
						.type {
							display: flex;
						}
						.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);
							border-radius: 4px;
							border: 1px solid;
							padding: 2px 8px;
							font-size: 14px;
							font-weight: 400;
							width: auto;
							font-family: "Microsoft YaHei";
							line-height: 20px;
							margin-right: 4px;
						}
						.type2 {
							border-color: rgba(255, 163, 158, 1);
							color: rgba(245, 34, 45, 1);
							background-color: rgba(255, 241, 240, 1);
						}
						.type3 {
							border: none;
							border-radius: 4px;
							border: 1px solid;
							padding: 2px 8px;
							font-size: 14px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 20px;
						}
					}
					.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>
