企业主页：被制裁情况:事件对接

src/api/companyPages/index.js

@@ -83,3 +83,12 @@ export function getEnterprisPatentField(params) {
 }
 
 
+//被制裁情况:事件
+export function getSanctionList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/getSanctionList/${params}`,
+  })
+}
+
+

src/router/modules/company.js

@@ -4,7 +4,7 @@ import companyPages from "@/views/companyPages/index.vue";
 const companyPagesRoutes = [
   // 智库系统的主要路由
   {
-    path: "/companyPages:id",
+    path: "/companyPages/:id",
     name: "companyPages",
     component: companyPages,
     meta: {

src/views/companyPages/component/SanctionsSituation‌.vue

@@ -30,9 +30,12 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, onMounted } from 'vue';
 import Timeline from './Timeline.vue';
 import process from './process.vue';
+import { useRouter } from "vue-router";
+import { getSanctionList } from "@/api/companyPages/index.js";
+const router = useRouter();
 const sanctionTimeData = ref([
   {
     "title": "初步限制与“实体清单”",
@@ -60,6 +63,24 @@ const sanctionTimeData = ref([
     "time": "2025年10月"
   }
 ])
+
+// 获取制裁事件
+const handleGetSanctionList = async () => {
+  try {
+    const res = await getSanctionList(router.currentRoute._value.params.id);
+    console.log("获取制裁事件", res);
+    if (res.code === 200 && res.data) {
+      sanctionTimeData.value = res.data
+    }
+  } catch (error) {
+    console.error("获取制裁事件error", error);
+  }
+};
+
+onMounted(async () => {
+  handleGetSanctionList()
+
+});
 </script>
 
 <style scoped>

src/views/companyPages/component/Timeline.vue

@@ -15,13 +15,13 @@
         <div class="node" :style="leftOffset(i)">
           <!-- 圆环 -->
           <div class="dot" :class="linePos(i, flip)" :style="{
-            marginTop: linePos(i, flip) === 'down' ? '-5px' : '35px'
+            marginTop: linePos(i, flip) === 'down' ? '-5px' : '-5px'
           }"></div>
 
           <div class="time" :style="{
             marginTop: linePos(i, flip) === 'down' ? '-50px' : '10px'
           }" v-if="type === 'normal'">
-            {{ item.time }}
+            {{ item.sanctionDate }}
           </div>
           <!-- 卡片：放到线右侧 -->
           <div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)" :style="{
@@ -31,7 +31,7 @@
             <div class="time" :style="{
               marginLeft: 0
             }" v-if="type !== 'normal'">
-              {{ item.time }}
+              {{ item.sanctionDate }}
             </div>
             <div class="title">
               {{ item.title }}

src/views/exportControl/index.vue

@@ -66,17 +66,9 @@
 					</div>
 				</div>
 				<div class="home-main-header-footer-info">
-					<InfoCard
-						v-for="(item, index) in infoList"
-						:key="item.id"
-						:title="item.nameZh"
-						:subtitle="item.nameAbbr"
-						:description="item.description"
-						:quantity="item.postCount"
-						unit="次"
-						:color="infoListColor[index]"
-						@click="handleToEntityListNoId(item)"
-					/>
+					<InfoCard v-for="(item, index) in infoList" :key="item.id" :title="item.nameZh" :subtitle="item.nameAbbr"
+						:description="item.description" :quantity="item.postCount" unit="次" :color="infoListColor[index]"
+						@click="handleToEntityListNoId(item)" />
 				</div>
 			</div>
 
@@ -102,15 +94,8 @@
 										<img src="./assets/images/box1-right.png" alt="" />
 									</div>
 								</div>
-								<el-carousel
-									ref="carouselRef"
-									height="350px"
-									:autoplay="true"
-									:interval="3000"
-									arrow="never"
-									indicator-position="none"
-									@change="handleCarouselChange"
-								>
+								<el-carousel ref="carouselRef" height="350px" :autoplay="true" :interval="3000" arrow="never"
+									indicator-position="none" @change="handleCarouselChange">
 									<el-carousel-item v-for="(item, index) in entitiesDataInfoList" :key="item.id + index">
 										<div>
 											<div class="box1-top">
@@ -128,11 +113,8 @@
 													</div>
 													<div class="box1-top-content-item">
 														<span class="box1-top-content-item-title">· 涉及领域：</span>
-														<div
-															class="box1-top-content-item-tags"
-															v-for="(domainItem, index) in item.domains"
-															:key="index"
-														>
+														<div class="box1-top-content-item-tags" v-for="(domainItem, index) in item.domains"
+															:key="index">
 															<el-tag :type="getTagType(domainItem)">{{ domainItem }}</el-tag>
 														</div>
 													</div>
@@ -141,18 +123,10 @@
 											<div class="box1-bottom">
 												<div class="box1-bottom-title">· 涉及主要实体：</div>
 												<div class="box1-bottom-content">
-													<div
-														class="box1-bottom-content-item"
-														v-for="(ett, index) in item.sanEntities"
-														:key="index"
-														@click="handleEntityClick(ett)"
-													>
-														<el-image
-															v-if="ett.img"
-															class="box1-bottom-content-item-img"
-															:src="ett.img"
-															alt=""
-														></el-image>
+													<div class="box1-bottom-content-item" v-for="(ett, index) in item.sanEntities" :key="index"
+														@click="handleEntityClick(ett)">
+														<el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img"
+															alt=""></el-image>
 														<div v-else class="box1-bottom-content-item-imgUndefined">
 															{{
 																(ett.entityNameZh || ett.enName)?.match(
@@ -168,7 +142,9 @@
 											</div>
 											<div class="box1-absolute">
 												<div class="box1-absolute-des">
-													<el-icon><Warning color="rgba(206, 79, 81, 1)" /></el-icon>
+													<el-icon>
+														<Warning color="rgba(206, 79, 81, 1)" />
+													</el-icon>
 													<span>新增中国实体</span>
 												</div>
 												<div class="box1-absolute-num">{{ item.cnEntityCount }}家</div>
@@ -181,23 +157,16 @@
 					</custom-container>
 				</el-col>
 				<el-col :span="8">
-					<custom-container
-						titleType="danger"
-						title="风险信号"
-						:headerNum="warningList.length"
-						:titleIcon="dangerIcon"
-						height="450px"
-					>
+					<custom-container titleType="danger" title="风险信号" :headerNum="warningList.length" :titleIcon="dangerIcon"
+						height="450px">
 						<template #default>
 							<div class="box2-main">
-								<div class="box2-main-item" v-for="(item, index) in warningList" :key="index" @click="handleToRiskSignalDetail(item)">
-									<div
-										class="item-left"
-										:class="{
+								<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"
+									@click="handleToRiskSignalDetail(item)">
+									<div class="item-left" :class="{
 										itemLeftStatus1: item.status === '一般风险',
 										itemLeftStatus2: item.status === '重大风险'
-										}"
-									>
+									}">
 										{{ item.status }}
 									</div>
 									<div class="item-right">
@@ -242,17 +211,9 @@
 					<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
 						<template #default>
 							<div class="dialog-list">
-								<MessageBubble
-									v-for="(item, index) in socialMediaList"
-									@click="handlePerClick(item)"
-									@info-click="handleMediaClick(item)"
-									:key="index"
-									:avatar="item.avatar"
-									:name="item.name"
-									:time="item.time"
-									:source="item.source"
-									:content="item.content"
-								/>
+								<MessageBubble v-for="(item, index) in socialMediaList" @click="handlePerClick(item)"
+									@info-click="handleMediaClick(item)" :key="index" :avatar="item.avatar" :name="item.name"
+									:time="item.time" :source="item.source" :content="item.content" />
 								<!-- <MessageBubble
 									:avatar="customMessage.avatar"
 									:name="customMessage.name"
@@ -304,19 +265,14 @@
 											<template #default="scope">
 												<div style="display: flex; align-items: center">
 													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
-													<el-progress
-														:percentage="scope.row.percent * 100"
-														:show-text="false"
-														:status="getStatus(scope.row.percent)"
-													/>
+													<el-progress :percentage="scope.row.percent * 100" :show-text="false"
+														:status="getStatus(scope.row.percent)" />
 												</div>
 											</template>
 										</el-table-column>
 										<el-table-column label="重点领域" width="280" align="center">
 											<template #default="scope">
-												<div
-													style="display: flex; justify-content: center; align-items: center; gap: 5px"
-												>
+												<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
 													<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
 														tag
 													}}</el-tag>
@@ -333,19 +289,14 @@
 											<template #default="scope">
 												<div style="display: flex; align-items: center">
 													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
-													<el-progress
-														:percentage="scope.row.percent * 100"
-														:show-text="false"
-														:status="getStatus(scope.row.percent)"
-													/>
+													<el-progress :percentage="scope.row.percent * 100" :show-text="false"
+														:status="getStatus(scope.row.percent)" />
 												</div>
 											</template>
 										</el-table-column>
 										<el-table-column label="重点领域" width="280" align="center">
 											<template #default="scope">
-												<div
-													style="display: flex; justify-content: center; align-items: center; gap: 5px"
-												>
+												<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
 													<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
 														tag
 													}}</el-tag>
@@ -362,11 +313,8 @@
 											<template #default="scope">
 												<div style="display: flex; align-items: center">
 													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
-													<el-progress
-														:percentage="scope.row.percent * 100"
-														:show-text="false"
-														:status="getStatus(scope.row.percent)"
-													/>
+													<el-progress :percentage="scope.row.percent * 100" :show-text="false"
+														:status="getStatus(scope.row.percent)" />
 												</div>
 											</template>
 										</el-table-column>
@@ -413,13 +361,9 @@
 			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
 				<CustomTitle id="position4" title="资源库" style="margin-top: 54px" />
 				<div class="resource-tabs">
-					<div
-						v-for="tab in resourceTabs"
-						:key="tab.value"
-						class="resource-tab-item"
+					<div v-for="tab in resourceTabs" :key="tab.value" class="resource-tab-item"
 						:class="{ active: activeResourceTab === tab.value, disabled: tab.disabled }"
-						@click="handleResourceTabClick(tab)"
-					>
+						@click="handleResourceTabClick(tab)">
 						{{ tab.label }}
 					</div>
 				</div>
@@ -432,25 +376,15 @@
 										<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
 											<div class="box4-item-left">
 												<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
-												<div
-													class="box4-item-left-line"
-													v-if="idx + 1 != sanctionProcessList.length"
-												></div>
+												<div class="box4-item-left-line" v-if="idx + 1 != sanctionProcessList.length"></div>
 											</div>
 											<div class="box4-item-right">
 												<div class="box4-item-right-header" @click="handleSanc(item)">
-													<span class="box4-item-right-header-title"
-														>{{ item.postDate }}—{{ item.title }}</span
-													>
+													<span class="box4-item-right-header-title">{{ item.postDate }}—{{ item.title }}</span>
 													<span class="box4-item-right-header-desc">{{ item.desc }}</span>
 												</div>
-												<el-tooltip
-													effect="dark"
-													:content="item.content"
-													popper-class="common-prompt-popper"
-													placement="top"
-													:show-after="500"
-												>
+												<el-tooltip effect="dark" :content="item.content" popper-class="common-prompt-popper"
+													placement="top" :show-after="500">
 													<div class="box4-item-right-content">
 														{{ item.content }}
 													</div>
@@ -458,13 +392,11 @@
 											</div>
 										</div>
 									</div>
-									<div
-										class="box4-footer"
-										:style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }"
-									>
-										<el-button type="primary" link @click="handleGetMore"
-											>查看更多
-											<el-icon><DArrowRight /></el-icon>
+									<div class="box4-footer" :style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }">
+										<el-button type="primary" link @click="handleGetMore">查看更多
+											<el-icon>
+												<DArrowRight />
+											</el-icon>
 										</el-button>
 									</div>
 								</div>
@@ -478,15 +410,8 @@
 							</template>
 							<template #default>
 								<div class="box5">
-									<el-table
-										:data="entitiesList"
-										class="sanction-table"
-										stripe
-										empty-text="暂无数据"
-										height="700px"
-										header-row-class-name="table-header"
-										row-class-name="table-row"
-									>
+									<el-table :data="entitiesList" class="sanction-table" stripe empty-text="暂无数据" height="700px"
+										header-row-class-name="table-header" row-class-name="table-row">
 										<!-- <el-table-column prop="index" label="序号" width="80" align="center">
 										<template #default="scope">
 											{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
@@ -496,12 +421,8 @@
 										<el-table-column prop="name" label="实体名称" min-width="200">
 											<template #default="scope">
 												<div class="tableName" @click="handleCompClick(scope.row)">
-													<el-image
-														v-if="scope.row.img"
-														class="box1-bottom-content-item-img"
-														:src="scope.row.img"
-														alt=""
-													></el-image>
+													<el-image v-if="scope.row.img" class="box1-bottom-content-item-img" :src="scope.row.img"
+														alt=""></el-image>
 													<div v-else class="box1-bottom-content-item-imgUndefined">
 														{{
 															(scope.row.name || scope.row.enName)?.match(
@@ -552,19 +473,13 @@
 										<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
 											<template #default="scope">
 												<div class="num-item" v-if="scope.row.ruleOrgCount > 0">
-													<div
-														class="name-item"
-														:class="[
+													<div class="name-item" :class="[
 														'revenue-cell',
 														scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
-														]"
-													>
+													]">
 														{{ scope.row.ruleOrgList[0].orgName }}...等
 													</div>
-													<div
-														style="width: 50px; color: #409eff; cursor: pointer"
-														@click="handleOrgClick(scope.row)"
-													>
+													<div style="width: 50px; color: #409eff; cursor: pointer" @click="handleOrgClick(scope.row)">
 														{{ scope.row.ruleOrgCount }}家>
 													</div>
 												</div>
@@ -576,15 +491,8 @@
 										<!-- <div class="pagination-info">
                     第{{ currentPage }}页，共{{ totalPages }}页
                   </div> -->
-										<el-pagination
-											v-model:current-page="currentPage"
-											:page-size="pageSize"
-											:total="total"
-											:pager-count="5"
-											layout="prev, pager, next"
-											background
-											@current-change="handlePageChange"
-										/>
+										<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
+											:pager-count="5" layout="prev, pager, next" background @current-change="handlePageChange" />
 									</div>
 								</div>
 							</template>
@@ -650,14 +558,8 @@
 								</div>
 								<div class="right-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"
-									/>
+									<el-pagination v-model:current-page="currentPageAll" :page-size="pageSizeAll" :total="totalAll"
+										layout="prev, pager, next" background @current-change="handlePageChangeAll" />
 								</div>
 							</div>
 						</div>
@@ -670,12 +572,8 @@
 				<div class="dialog-title">50%规则子企业</div>
 			</template>
 			<div class="dialog-ett-wrpper">
-				<div
-					class="box1-bottom-content-item"
-					v-for="(ett, index) in currentOrgList"
-					:key="index"
-					@click="handleEntityClick(ett)"
-				>
+				<div class="box1-bottom-content-item" v-for="(ett, index) in currentOrgList" :key="index"
+					@click="handleEntityClick(ett)">
 					<el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img" alt=""></el-image>
 					<div v-else class="box1-bottom-content-item-imgUndefined">
 						{{ (ett.orgName || ett.enName)?.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] }}
@@ -1281,7 +1179,7 @@ const fetchSanctionList = async () => {
 			});
 			totalAll.value = res.totalElements;
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const handlePageChangeAll = val => {
@@ -1447,7 +1345,7 @@ const fetchRiskSignals = async () => {
 				time: item.signalTime,
 				status: item.signalLevel,
 				id: item.signalId,
-				sanId:item.sanId
+				sanId: item.sanId
 			}));
 		}
 	} catch (err) {
@@ -1552,7 +1450,7 @@ const handleGetHylyList = async () => {
 			hylymc: "全部分类"
 		};
 		categoryList.value = [obj, ...categoryList.value];
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const chart1Data = ref({
@@ -1703,6 +1601,7 @@ const handleMediaClick = item => {
 	margin: 0;
 	padding: 0;
 }
+
 :deep(.el-input__wrapper) {
 	box-shadow: none;
 }
@@ -1719,11 +1618,14 @@ const handleMediaClick = item => {
 	box-sizing: border-box;
 	padding-left: 160px;
 	display: flex;
+
 	.header-item {
 		margin: 0 3px;
 	}
+
 	.back-item {
 		cursor: pointer;
+
 		&:hover {
 			color: #ccc;
 		}
@@ -1735,6 +1637,7 @@ const handleMediaClick = item => {
 	flex-direction: column;
 	gap: 20px;
 	position: relative;
+
 	.box1-left-arrow {
 		position: absolute;
 		z-index: 9999;
@@ -1747,15 +1650,18 @@ const handleMediaClick = item => {
 		justify-content: center;
 		align-items: center;
 		cursor: pointer;
+
 		.icon {
 			width: 11px;
 			height: 18px;
+
 			img {
 				width: 100%;
 				height: 100%;
 			}
 		}
 	}
+
 	.box1-right-arrow {
 		position: absolute;
 		z-index: 9999;
@@ -1768,15 +1674,18 @@ const handleMediaClick = item => {
 		justify-content: center;
 		align-items: center;
 		cursor: pointer;
+
 		.icon {
 			width: 11px;
 			height: 18px;
+
 			img {
 				width: 100%;
 				height: 100%;
 			}
 		}
 	}
+
 	.box1-absolute {
 		position: absolute;
 		width: 240px;
@@ -1790,6 +1699,7 @@ const handleMediaClick = item => {
 		padding-right: 50px;
 		box-sizing: border-box;
 		background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3));
+
 		&-des {
 			display: flex;
 			gap: 5px;
@@ -1798,18 +1708,21 @@ const handleMediaClick = item => {
 			font-weight: 700;
 			color: rgba(206, 79, 81, 1);
 		}
+
 		&-num {
 			font-size: 32px;
 			font-weight: 700;
 			color: rgba(206, 79, 81, 1);
 		}
 	}
+
 	.box1-top {
 		// display: flex;
 		// flex-direction: column;
 		// gap: 10px;
 		padding-left: 30px;
 		border-bottom: 1px solid rgba(234, 236, 238, 1);
+
 		&-title {
 			font-size: 20px;
 			font-weight: 700;
@@ -1817,14 +1730,17 @@ const handleMediaClick = item => {
 			margin-top: 10px;
 			margin-bottom: 15px;
 		}
+
 		&-content {
 			display: flex;
 			flex-direction: column;
 			gap: 10px;
 			margin-bottom: 20px;
+
 			&-item {
 				display: flex;
 				gap: 5px;
+
 				&-title {
 					font-size: 16px;
 					font-weight: 700;
@@ -1833,6 +1749,7 @@ const handleMediaClick = item => {
 			}
 		}
 	}
+
 	.box1-bottom {
 		padding-left: 30px;
 
@@ -1842,6 +1759,7 @@ const handleMediaClick = item => {
 			color: rgba(59, 65, 75, 1);
 			margin-bottom: 15px;
 		}
+
 		&-content {
 			display: flex;
 			gap: 15px;
@@ -1850,20 +1768,24 @@ const handleMediaClick = item => {
 			padding-left: 10px;
 			height: 156px;
 			overflow: auto;
+
 			&-item {
 				display: flex;
 				align-items: center;
 				justify-content: flex-start;
-				width: 48%; /* 留出2%的间距 */
+				width: 48%;
+				/* 留出2%的间距 */
 				// margin-bottom: 6px;
 				box-sizing: border-box;
 				gap: 10px;
 				cursor: pointer;
+
 				&-img {
 					width: 24px;
 					height: 24px;
 					flex-shrink: 0;
 				}
+
 				&-imgUndefined {
 					width: 24px;
 					height: 24px;
@@ -1876,6 +1798,7 @@ const handleMediaClick = item => {
 					text-align: center;
 					border-radius: 12px;
 				}
+
 				&-txt {
 					font-size: 16px;
 					font-weight: 400;
@@ -1884,30 +1807,36 @@ const handleMediaClick = item => {
 			}
 		}
 	}
+
 	.box1-right {
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
+
 		.box1-right-title {
 			font-size: 20px;
 			font-weight: 700;
 			color: $base-color;
 		}
+
 		.box1-right-tags {
 			display: flex;
 			gap: 10px;
 		}
+
 		.box1-right-content {
 			color: rgba(59, 65, 75, 1);
 			font-size: 16px;
 			font-weight: 400;
 			line-height: 28px;
 		}
+
 		.box1-right-footer {
 			margin-top: auto;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
+
 			.box1-right-footer-time {
 				color: rgba(95, 101, 108, 1);
 				font-size: 14px;
@@ -1920,6 +1849,7 @@ const handleMediaClick = item => {
 .box2-main {
 	height: 320px;
 	overflow-y: auto;
+
 	.box2-main-item {
 		display: flex;
 		justify-content: space-between;
@@ -1928,17 +1858,21 @@ const handleMediaClick = item => {
 		box-sizing: border-box;
 		padding-right: 3px;
 		cursor: pointer;
+
 		&:hover {
 			background: var(--color-bg-hover);
 		}
+
 		.itemLeftStatus1 {
 			color: rgba(82, 196, 26, 1) !important;
 			background: rgba(246, 255, 237, 1) !important;
 		}
+
 		.itemLeftStatus2 {
 			color: rgba(250, 140, 22, 1) !important;
 			background: rgba(255, 247, 230, 1) !important;
 		}
+
 		.item-left {
 			display: flex;
 			align-items: center;
@@ -1956,6 +1890,7 @@ const handleMediaClick = item => {
 			text-align: center;
 			flex-shrink: 0;
 		}
+
 		.item-right {
 			margin-left: 13px;
 			width: 100%;
@@ -1965,6 +1900,7 @@ const handleMediaClick = item => {
 			gap: 8px;
 			height: 47px;
 			border-bottom: 1px solid rgba(240, 242, 244, 1);
+
 			.text {
 				font-family: Microsoft YaHei;
 				line-height: 47px;
@@ -1976,6 +1912,7 @@ const handleMediaClick = item => {
 				white-space: nowrap;
 				text-overflow: ellipsis;
 			}
+
 			.time {
 				margin-left: 10px;
 				line-height: 47px;
@@ -1987,6 +1924,7 @@ const handleMediaClick = item => {
 		}
 	}
 }
+
 .box2-footer {
 	position: absolute;
 	left: 0;
@@ -2002,14 +1940,17 @@ const handleMediaClick = item => {
 	background: var(--color-main-active);
 	margin: 0 auto;
 	cursor: pointer;
+
 	.icon {
 		width: 16px;
 		height: 16px;
+
 		img {
 			width: 100%;
 			height: 100%;
 		}
 	}
+
 	.text {
 		margin-left: 8px;
 		color: rgba(255, 255, 255, 1);
@@ -2025,6 +1966,7 @@ const handleMediaClick = item => {
 	justify-content: center;
 	// align-items: flex-start;
 	gap: 100px;
+
 	.box3-content-title {
 		font-size: 18px;
 		font-weight: 700;
@@ -2038,7 +1980,9 @@ const handleMediaClick = item => {
 		color: $base-color;
 		margin-bottom: 15px;
 	}
+
 	.box3-content {
+
 		// flex: 1;
 		.el-progress--line {
 			width: 82px;
@@ -2055,20 +1999,24 @@ const handleMediaClick = item => {
 	padding-top: 16px;
 	// padding-bottom: 50px;
 	position: relative;
+
 	.box4-item {
 		display: flex;
 		gap: 10px;
 		align-items: flex-start;
 		padding-bottom: 35px;
 		position: relative;
+
 		.box4-item-left {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+
 			.box4-item-left-icon {
 				width: 10px;
 				height: 10px;
 			}
+
 			.box4-item-left-line {
 				width: 1px;
 				height: 100%;
@@ -2076,9 +2024,11 @@ const handleMediaClick = item => {
 				border-left: 1px solid rgba(10, 87, 166, 0.3);
 			}
 		}
+
 		.box4-item-right {
 			display: flex;
 			flex-direction: column;
+
 			.box4-item-right-header {
 				display: flex;
 				justify-content: space-between;
@@ -2088,17 +2038,20 @@ const handleMediaClick = item => {
 				top: -7.5px;
 				padding-bottom: 8px;
 				cursor: pointer;
+
 				&-title {
 					font-size: 18px;
 					color: $base-color;
 					font-weight: 700;
 				}
+
 				&-desc {
 					font-size: 16px;
 					font-weight: 700;
 					color: rgba(59, 65, 75, 1);
 				}
 			}
+
 			.box4-item-right-content {
 				font-size: 16px;
 				font-weight: 400;
@@ -2112,6 +2065,7 @@ const handleMediaClick = item => {
 			}
 		}
 	}
+
 	.box4-footer {
 		position: absolute;
 		// margin-top: auto;
@@ -2132,15 +2086,18 @@ const handleMediaClick = item => {
 	justify-content: space-between;
 	align-items: center;
 }
+
 :deep(.table-header) {
 	font-size: 16px;
 	font-weight: 700;
 
 	color: rgba(59, 65, 75, 1);
 }
+
 :deep(.table-row) {
 	height: 64px;
 }
+
 .domain-tags {
 	display: flex;
 	gap: 8px;
@@ -2161,17 +2118,20 @@ const handleMediaClick = item => {
 	height: calc(100vh - 96px);
 	position: relative;
 	overflow-y: hidden;
+
 	.home-main {
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
 		background: url("./assets/images/background.png");
 		background-size: 100% 100%;
+
 		.home-main-header {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			margin-bottom: 20px;
+
 			.home-main-header-center {
 				margin-top: 51px;
 				width: 960px;
@@ -2183,9 +2143,11 @@ const handleMediaClick = item => {
 				padding: 1px;
 				position: relative;
 				border: 1px solid transparent;
+
 				&:hover {
 					border: 1px solid var(--color-main-active);
 				}
+
 				.search {
 					position: absolute;
 					right: -1px;
@@ -2198,14 +2160,17 @@ const handleMediaClick = item => {
 					justify-content: center;
 					align-items: center;
 					cursor: pointer;
+
 					.search-icon {
 						width: 18px;
 						height: 18px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.search-text {
 						margin-left: 8px;
 						height: 22px;
@@ -2217,6 +2182,7 @@ const handleMediaClick = item => {
 					}
 				}
 			}
+
 			.home-main-header-footer {
 				margin-top: 64px;
 				width: 700px;
@@ -2225,9 +2191,11 @@ const handleMediaClick = item => {
 				padding: 0 108px;
 				display: flex;
 				justify-content: space-between;
+
 				.home-main-header-footer-item {
 					padding: 0 10px;
 					text-align: center;
+
 					.item-top {
 						height: 22px;
 						color: rgba(20, 89, 187, 1);
@@ -2236,6 +2204,7 @@ const handleMediaClick = item => {
 						font-weight: 700;
 						line-height: 22px;
 					}
+
 					.item-footer {
 						margin-top: 10px;
 						height: 30px;
@@ -2247,6 +2216,7 @@ const handleMediaClick = item => {
 					}
 				}
 			}
+
 			.home-main-header-footer-link,
 			.home-main-header-footer-info {
 				width: 100%;
@@ -2255,15 +2225,18 @@ const handleMediaClick = item => {
 				gap: 16px;
 				padding: 30px 0;
 			}
-			.home-main-header-footer-info{
+
+			.home-main-header-footer-info {
 				margin-top: 34px;
 			}
+
 			.home-main-header-btn-box {
 				width: 688px;
 				margin: 0 auto;
 				margin-top: 39px;
 				display: flex;
 				justify-content: space-between;
+
 				.btn {
 					display: flex;
 					align-items: center;
@@ -2276,9 +2249,11 @@ const handleMediaClick = item => {
 					background: #e7f3ff;
 					cursor: pointer;
 					position: relative;
+
 					&:hover {
 						background: #cae3fc;
 					}
+
 					.btn-text {
 						width: 80px;
 						color: var(--color-main-active);
@@ -2289,12 +2264,14 @@ const handleMediaClick = item => {
 						margin-left: 36px;
 						text-align: center;
 					}
+
 					.btn-icon {
 						position: absolute;
 						top: 16px;
 						right: 19px;
 						width: 6px;
 						height: 12px;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -2303,12 +2280,15 @@ const handleMediaClick = item => {
 				}
 			}
 		}
+
 		.home-main-center {
 			margin-top: 34px;
+
 			.center-top {
 				height: 450px;
 				display: flex;
 				gap: 20px;
+
 				.box1 {
 					display: flex;
 					gap: 10px;
@@ -2319,17 +2299,21 @@ const handleMediaClick = item => {
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
 						display: flex;
 						justify-content: space-between;
+
 						.box1-header-left {
 							display: flex;
+
 							.icon {
 								width: 18px;
 								height: 18px;
 								margin-top: 19px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.title {
 								height: 22px;
 								margin-left: 18px;
@@ -2341,6 +2325,7 @@ const handleMediaClick = item => {
 								line-height: 22px;
 							}
 						}
+
 						.box1-header-right {
 							margin-top: 19px;
 							height: 16px;
@@ -2352,14 +2337,17 @@ const handleMediaClick = item => {
 							cursor: pointer;
 						}
 					}
+
 					.box1-main {
 						display: flex;
 						height: 354px;
 						margin-top: 22px;
+
 						.box1-main-top {
 							height: 68px;
 							display: flex;
 							justify-content: space-between;
+
 							.box1-main-top-left {
 								color: rgba(20, 89, 187, 1);
 								font-family: Microsoft YaHei;
@@ -2369,9 +2357,11 @@ const handleMediaClick = item => {
 								letter-spacing: 0px;
 								text-align: left;
 							}
+
 							.box1-main-top-right {
 								margin-left: 20px;
 								display: flex;
+
 								.num {
 									padding: 1px 8px;
 									height: 24px;
@@ -2380,6 +2370,7 @@ const handleMediaClick = item => {
 									border-radius: 4px;
 									background: rgba(230, 244, 255, 1);
 								}
+
 								.tag {
 									box-sizing: border-box;
 									border: 1px solid rgba(135, 232, 222, 1);
@@ -2390,6 +2381,7 @@ const handleMediaClick = item => {
 						}
 					}
 				}
+
 				.box2 {
 					flex: 1;
 					padding-right: 20px;
@@ -2397,19 +2389,23 @@ const handleMediaClick = item => {
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
 					background: rgba(255, 255, 255, 1);
 					position: relative;
+
 					.box2-header {
 						height: 54px;
 						display: flex;
+
 						.icon {
 							width: 24px;
 							height: 22px;
 							margin-left: 33px;
 							margin-top: 18px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.text {
 							margin-left: 22px;
 							margin-top: 16px;
@@ -2420,6 +2416,7 @@ const handleMediaClick = item => {
 							font-weight: 700;
 							line-height: 22px;
 						}
+
 						.num {
 							width: 24px;
 							height: 16px;
@@ -2433,6 +2430,7 @@ const handleMediaClick = item => {
 							border-radius: 100px;
 							background: rgba(255, 77, 79, 1);
 						}
+
 						.more {
 							margin-top: 19px;
 							margin-left: 256px;
@@ -2443,22 +2441,27 @@ const handleMediaClick = item => {
 							line-height: 16px;
 						}
 					}
+
 					.box2-main {
 						height: 282px;
 						overflow-y: auto;
+
 						.box2-main-item {
 							margin-left: 23px;
 							height: 47px;
 							width: 464px;
 							display: flex;
+
 							.itemLeftStatus1 {
 								color: rgba(82, 196, 26, 1) !important;
 								background: rgba(246, 255, 237, 1) !important;
 							}
+
 							.itemLeftStatus2 {
 								color: rgba(250, 140, 22, 1) !important;
 								background: rgba(255, 247, 230, 1) !important;
 							}
+
 							.item-left {
 								margin-top: 4px;
 								margin-left: 2px;
@@ -2475,6 +2478,7 @@ const handleMediaClick = item => {
 								padding: 6px 4px;
 								text-align: center;
 							}
+
 							.item-right {
 								margin-left: 13px;
 								width: 408px;
@@ -2482,6 +2486,7 @@ const handleMediaClick = item => {
 								border-top: 1px solid rgba(240, 242, 244, 1);
 								border-bottom: 1px solid rgba(240, 242, 244, 1);
 								display: flex;
+
 								.text {
 									width: 348px;
 									color: rgba(59, 65, 75, 1);
@@ -2490,6 +2495,7 @@ const handleMediaClick = item => {
 									font-weight: 400;
 									line-height: 47px;
 								}
+
 								.time {
 									margin-left: 10px;
 									line-height: 47px;
@@ -2501,6 +2507,7 @@ const handleMediaClick = item => {
 							}
 						}
 					}
+
 					.box2-footer {
 						position: absolute;
 						left: 26px;
@@ -2514,14 +2521,17 @@ const handleMediaClick = item => {
 						border-radius: 6px;
 						background: rgba(22, 119, 255, 1);
 						cursor: pointer;
+
 						.icon {
 							width: 16px;
 							height: 16px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.text {
 							margin-left: 8px;
 							color: rgba(255, 255, 255, 1);
@@ -2533,15 +2543,18 @@ const handleMediaClick = item => {
 					}
 				}
 			}
+
 			.center-footer {
 				margin-top: 21px;
 				height: 450px;
 				display: flex;
+
 				.box3 {
 					width: 900px;
 					height: 450px;
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
 					background: rgba(255, 255, 255, 1);
+
 					.box3-header {
 						height: 53px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
@@ -2549,17 +2562,21 @@ const handleMediaClick = item => {
 						display: flex;
 						justify-content: space-between;
 						padding: 0 20px;
+
 						.box3-header-left {
 							display: flex;
+
 							.box3-header-icon {
 								margin-top: 15px;
 								width: 13px;
 								height: 13px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.box3-header-title {
 								margin-top: 16px;
 								margin-left: 22px;
@@ -2571,17 +2588,20 @@ const handleMediaClick = item => {
 								line-height: 22px;
 							}
 						}
+
 						.box3-header-right {
 							display: flex;
 							justify-content: flex-end;
 							width: 178px;
 							height: 22px;
+
 							.right-box {
 								display: flex;
 								margin-top: 16px;
 								width: 89px;
 								height: 22px;
 								justify-content: flex-end;
+
 								.icon1 {
 									margin-top: 5px;
 									width: 12px;
@@ -2589,6 +2609,7 @@ const handleMediaClick = item => {
 									border-radius: 6px;
 									background: rgba(20, 89, 187, 1);
 								}
+
 								.icon2 {
 									margin-top: 5px;
 									width: 12px;
@@ -2596,6 +2617,7 @@ const handleMediaClick = item => {
 									border-radius: 6px;
 									background: rgba(250, 140, 22, 1);
 								}
+
 								.text {
 									margin-left: 5px;
 									color: rgba(95, 101, 108, 1);
@@ -2607,31 +2629,37 @@ const handleMediaClick = item => {
 							}
 						}
 					}
+
 					.box3-main {
 						height: 397px;
 					}
 				}
+
 				.box4 {
 					margin-left: 20px;
 					width: 521px;
 					height: 450px;
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
 					background: rgba(255, 255, 255, 1);
+
 					.box4-header {
 						width: 452px;
 						margin: 0 auto;
 						height: 53px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
 						display: flex;
+
 						.header-icon {
 							margin-top: 18px;
 							width: 18px;
 							height: 18px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.header-title {
 							margin-top: 16px;
 							margin-left: 26px;
@@ -2643,22 +2671,27 @@ const handleMediaClick = item => {
 							line-height: 22px;
 						}
 					}
+
 					.box4-main {
 						width: 452px;
 						margin: 0 auto;
 						margin-top: 8px;
 						height: 360px;
 						overflow-y: auto;
+
 						.box4-main-item {
 							margin-top: 6px;
 							height: 30px;
 							display: flex;
+
 							.leftStatus3 {
 								color: rgba(255, 197, 61, 1) !important;
 							}
+
 							.leftStatus2 {
 								color: rgba(255, 169, 64, 1) !important;
 							}
+
 							.left {
 								width: 44px;
 								text-align: left;
@@ -2668,6 +2701,7 @@ const handleMediaClick = item => {
 								line-height: 30px;
 								color: rgba(206, 79, 81, 1);
 							}
+
 							.center {
 								width: 300px;
 								color: rgba(95, 101, 108, 1);
@@ -2676,6 +2710,7 @@ const handleMediaClick = item => {
 								font-weight: 400;
 								line-height: 30px;
 							}
+
 							.right {
 								width: 108px;
 								color: rgba(132, 136, 142, 1);
@@ -2690,10 +2725,12 @@ const handleMediaClick = item => {
 				}
 			}
 		}
+
 		.home-main-footer {
 			// width: 100%;
 			height: 911px;
 			background: rgba(248, 249, 250, 1);
+
 			.home-main-footer-header {
 				margin-top: 37px;
 				margin-bottom: 36px;
@@ -2702,10 +2739,12 @@ const handleMediaClick = item => {
 				// background: orange;
 				display: flex;
 				justify-content: space-between;
+
 				.btn-box {
 					width: 1300px;
 					display: flex;
 					justify-content: space-between;
+
 					.btn {
 						color: rgba(95, 101, 108, 1);
 						font-family: Microsoft YaHei;
@@ -2716,32 +2755,38 @@ const handleMediaClick = item => {
 						border-radius: 21px;
 						background: rgba(20, 89, 187, 0);
 						cursor: pointer;
+
 						&:hover {
 							background: rgba(20, 89, 187, 0.1);
 						}
 					}
+
 					.btnActive {
 						padding: 0 24px;
 						border-radius: 21px;
 						background: rgba(20, 89, 187, 1);
 						color: #fff;
+
 						&:hover {
 							color: #fff;
 							background: rgba(20, 89, 187, 1);
 						}
 					}
 				}
+
 				.select-box {
 					height: 42px;
 					box-sizing: border-box;
 					padding: 5px 0;
 				}
 			}
+
 			.home-main-footer-main {
 				width: 100%;
 				// background: orange;
 				display: flex;
 				flex-wrap: wrap;
+
 				// justify-content: space-between;
 				// justify-content: center;
 				.main-item {
@@ -2751,6 +2796,7 @@ const handleMediaClick = item => {
 					background: #fff;
 					margin-bottom: 24px;
 					margin-right: 25px;
+
 					.main-item-box1 {
 						margin-top: 20px;
 						margin-left: 45px;
@@ -2764,6 +2810,7 @@ const handleMediaClick = item => {
 							height: 100%;
 						}
 					}
+
 					.main-item-box2 {
 						margin-top: 26px;
 						text-align: center;
@@ -2774,6 +2821,7 @@ const handleMediaClick = item => {
 						font-weight: 700;
 						line-height: 30px;
 					}
+
 					.main-item-box3 {
 						text-align: center;
 						height: 30px;
@@ -2788,6 +2836,7 @@ const handleMediaClick = item => {
 		}
 	}
 }
+
 .tableName {
 	color: rgba(59, 65, 75, 1);
 	font-family: Microsoft YaHei;
@@ -2818,6 +2867,7 @@ const handleMediaClick = item => {
 .num-item {
 	width: 280px;
 	display: flex;
+
 	.name-item {
 		width: 215px;
 		overflow: hidden;
@@ -2825,6 +2875,7 @@ const handleMediaClick = item => {
 		white-space: nowrap;
 	}
 }
+
 .dialog-title {
 	text-align: center;
 	font-size: 24px;
@@ -2833,11 +2884,13 @@ const handleMediaClick = item => {
 	padding-bottom: 10px;
 	border-bottom: 1px solid #eee;
 }
+
 .dialog-ett-wrpper {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 10px;
 	height: 500px;
+
 	.box1-bottom-content {
 		display: flex;
 		gap: 15px;
@@ -2846,20 +2899,24 @@ const handleMediaClick = item => {
 		padding-left: 10px;
 		height: 156px;
 		overflow: auto;
+
 		&-item {
 			display: flex;
 			// align-items: center;
 			justify-content: flex-start;
-			width: 48%; /* 留出2%的间距 */
+			width: 48%;
+			/* 留出2%的间距 */
 			// margin-bottom: 6px;
 			box-sizing: border-box;
 			gap: 10px;
 			cursor: pointer;
+
 			&-img {
 				width: 24px;
 				height: 24px;
 				flex-shrink: 0;
 			}
+
 			&-imgUndefined {
 				width: 24px;
 				height: 24px;
@@ -2872,6 +2929,7 @@ const handleMediaClick = item => {
 				text-align: center;
 				border-radius: 12px;
 			}
+
 			&-txt {
 				font-size: 16px;
 				font-weight: 400;
@@ -2885,6 +2943,7 @@ const handleMediaClick = item => {
 	box-shadow: none;
 	border-radius: 10px;
 }
+
 :deep(.el-input__wrapper:hover) {
 	box-shadow: none !important;
 }
@@ -2902,6 +2961,7 @@ const handleMediaClick = item => {
 	letter-spacing: 0px;
 	text-align: left;
 }
+
 :deep(.el-table tr) {
 	color: rgba(59, 65, 75, 1);
 	font-family: Microsoft YaHei;
@@ -2952,6 +3012,7 @@ const handleMediaClick = item => {
 		}
 	}
 }
+
 .all-content {
 	width: 100%;
 	height: auto;
@@ -2960,6 +3021,7 @@ const handleMediaClick = item => {
 	justify-content: space-between;
 	// align-items: center;
 	gap: 16px;
+
 	.left {
 		width: 360px;
 		height: auto;
@@ -2967,12 +3029,14 @@ const handleMediaClick = item => {
 		background: #fff;
 		border-radius: 10px;
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+
 		.title {
 			width: 100%;
 			height: 56px;
 			display: flex;
 			align-items: center;
 			padding: 14px 12px 16px 0;
+
 			.box {
 				width: 8px;
 				height: 20px;
@@ -2981,6 +3045,7 @@ const handleMediaClick = item => {
 				border-top-right-radius: 4px;
 				margin-right: 14px;
 			}
+
 			.text {
 				font-size: 20px;
 				font-weight: 700;
@@ -2989,20 +3054,24 @@ const handleMediaClick = item => {
 				color: rgb(5, 95, 194);
 			}
 		}
+
 		.left-main {
 			width: 100%;
 			height: auto;
 			padding-left: 24px;
+
 			.checkbox-grid {
 				display: grid;
 				grid-template-columns: repeat(2, 1fr);
 				row-gap: 16px;
 				padding-bottom: 16px;
 			}
+
 			:deep(.el-checkbox) {
 				margin-right: 0;
 				height: auto;
 			}
+
 			:deep(.el-checkbox__label) {
 				font-size: 16px;
 				color: #666666;
@@ -3010,6 +3079,7 @@ const handleMediaClick = item => {
 			}
 		}
 	}
+
 	.right {
 		width: 1224px;
 		height: auto;
@@ -3017,17 +3087,20 @@ const handleMediaClick = item => {
 		border-radius: 4px;
 		border-radius: 10px;
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+
 		.right-title {
 			width: 100%;
 			height: 48px;
 			border-bottom: 1px solid rgb(234, 236, 238);
 			display: flex;
 			align-items: center;
+
 			img {
 				width: 22px;
 				height: 18px;
 				margin-left: 19px;
 			}
+
 			div {
 				font-size: 20px;
 				font-weight: 700;
@@ -3037,14 +3110,17 @@ const handleMediaClick = item => {
 				margin-left: 19px;
 			}
 		}
+
 		.right-main {
 			width: 100%;
 			height: auto;
 			padding: 24px 35px 0 20px;
+
 			.sanction-list {
 				width: 1169px;
 				padding: 0px 0 12px 0;
 				display: flex;
+
 				// justify-content: flex-start;
 				.time {
 					width: 80px;
@@ -3071,6 +3147,7 @@ const handleMediaClick = item => {
 						line-height: 24px;
 					}
 				}
+
 				img {
 					width: 30px;
 					height: 30px;
@@ -3078,10 +3155,12 @@ const handleMediaClick = item => {
 					margin-top: 14px;
 					margin-right: 16px;
 				}
+
 				.main {
 					width: 1027px;
 					padding-top: 14px;
 					position: relative;
+
 					.main-title {
 						width: 800px;
 						font-size: 20px;
@@ -3092,6 +3171,7 @@ const handleMediaClick = item => {
 						margin-bottom: 11px;
 						cursor: pointer;
 					}
+
 					.main-desc {
 						font-size: 16px;
 						font-weight: 400;
@@ -3100,8 +3180,10 @@ const handleMediaClick = item => {
 						color: rgb(95, 101, 108);
 						margin-bottom: 9px;
 					}
+
 					.tag-box {
 						display: flex;
+
 						.tag-item {
 							padding: 1px 8px;
 							margin-right: 8px;
@@ -3114,6 +3196,7 @@ const handleMediaClick = item => {
 							background-color: rgba(231, 243, 255, 1);
 						}
 					}
+
 					.count-tag {
 						position: absolute;
 						padding: 2px 8px;
@@ -3130,6 +3213,7 @@ const handleMediaClick = item => {
 				}
 			}
 		}
+
 		.right-footer {
 			width: 100%;
 			height: 73px;

src/views/exportControl/v2.0EntityList/components/sanctionsOverview/components/listPage/index.vue

@@ -13,29 +13,27 @@
 					<div class="text">科技领域</div>
 				</div>
 				<div class="checkbox-group">
-					<el-checkbox v-for="(item, index) in techFields" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, techFields, 'tech')" />
+					<el-checkbox v-for="(item, index) in techFields" :key="index" v-model="item.checked" :label="item.label"
+						@change="handleFilterChange(item, techFields, 'tech')" />
 				</div>
 				<div class="title">
 					<div class="box"></div>
 					<div class="text">实体类型</div>
 				</div>
 				<div class="checkbox-group">
-					<el-checkbox v-for="(item, index) in entityTypes" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, entityTypes, 'type')" />
+					<el-checkbox v-for="(item, index) in entityTypes" :key="index" v-model="item.checked" :label="item.label"
+						@change="handleFilterChange(item, entityTypes, 'type')" />
 				</div>
 				<div class="title">
 					<div class="box"></div>
 					<div class="text">制裁时间</div>
 				</div>
 				<div class="checkbox-group">
-					<el-checkbox v-for="(item, index) in sanctionTimes" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, sanctionTimes, 'time')" />
+					<el-checkbox v-for="(item, index) in sanctionTimes" :key="index" v-model="item.checked" :label="item.label"
+						@change="handleFilterChange(item, sanctionTimes, 'time')" />
 					<div v-if="sanctionTimes.find(i => i.value === 'custom' && i.checked)" class="custom-date-picker">
-						<el-date-picker
-							v-model="customDateRange"
-							type="daterange"
-							range-separator="-"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-						/>
+						<el-date-picker v-model="customDateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
+							end-placeholder="结束日期" />
 					</div>
 				</div>
 			</div>
@@ -48,8 +46,8 @@
 					<div class="right-wrapper">
 						<div class="stats">
 							<div class="dot"></div>
-							<div class="count-text">共 <span class="highlight">{{ruleCount.totalCount}}</span> 家</div>
-							<div class="rule-text">(50%规则涉及<span class="highlight">{{ruleCount.ruleCount}}</span>家)</div>
+							<div class="count-text">共 <span class="highlight">{{ ruleCount.totalCount }}</span> 家</div>
+							<div class="rule-text">(50%规则涉及<span class="highlight">{{ ruleCount.ruleCount }}</span>家)</div>
 						</div>
 						<div class="btn">
 							<img src="../../../../assets/下载按钮.png" alt="" />
@@ -58,21 +56,12 @@
 					</div>
 				</div>
 				<div class="right-table">
-					<el-table
-						:data="entityRows"
-						table-layout="fixed"
-						:row-class-name="tableRowClassName"
-						:header-cell-style="{ background: '#fff' }"
-					>
+					<el-table :data="entityRows" table-layout="fixed" :row-class-name="tableRowClassName"
+						:header-cell-style="{ background: '#fff' }">
 						<el-table-column label="实体名称" min-width="200">
 							<template #default="{ row }">
 								<div class="entity-name-cell" @click="handleCompClick(row)">
-									<el-image
-										v-if="row.img"
-										class="avatar"
-										:src="row.img"
-										alt=""
-									></el-image>
+									<el-image v-if="row.img" class="avatar" :src="row.img" alt=""></el-image>
 									<div v-else class="avatar-undefined">
 										{{
 											(row.entityNameZh || row.entityName)?.match(
@@ -87,14 +76,8 @@
 						<el-table-column label="涉及领域" min-width="150">
 							<template #default="{ row }">
 								<div class="domain-cell">
-									<el-tag
-										v-for="tag in row.techDomains"
-										:key="tag"
-										class="domain-tag"
-										effect="plain"
-										:disable-transitions="true"
-										:style="getTagStyle(tag)"
-									>
+									<el-tag v-for="tag in row.techDomains" :key="tag" class="domain-tag" effect="plain"
+										:disable-transitions="true" :style="getTagStyle(tag)">
 										{{ tag }}
 									</el-tag>
 								</div>
@@ -107,7 +90,8 @@
 									<div class="rule-text" :title="row.ruleOrgList?.[0]?.orgName || ''">
 										{{ row.ruleOrgList?.[0]?.orgName || '' }}...等
 									</div>
-									<el-link class="rule-link" type="primary" :underline="false" @click="handleRuleClick(row)">{{ row.ruleOrgCount }}家 ></el-link>
+									<el-link class="rule-link" type="primary" :underline="false" @click="handleRuleClick(row)">{{
+										row.ruleOrgCount }}家 ></el-link>
 								</div>
 							</template>
 						</el-table-column>
@@ -115,25 +99,14 @@
 				</div>
 				<div class="tight-footer">
 					<div class="total-text">共{{ total }}项</div>
-					<el-pagination
-						:current-page="currentPage"
-						v-model:page-size="pageSize"
-						:total="total"
-						layout="prev, pager, next"
-						prev-text="<"
-						next-text=">"
-						@current-change="handleCurrentChange"
-					/>
+					<el-pagination :current-page="currentPage" v-model:page-size="pageSize" :total="total"
+						layout="prev, pager, next" prev-text="<" next-text=">" @current-change="handleCurrentChange" />
 				</div>
 			</div>
 		</div>
 	</div>
-	<RuleSubsidiaryDialog
-		v-model="ruleDialogVisible"
-		:company-name="currentRuleCompany"
-		:total-count="currentRuleCount"
-		:data-list="currentRuleList"
-	/>
+	<RuleSubsidiaryDialog v-model="ruleDialogVisible" :company-name="currentRuleCompany" :total-count="currentRuleCount"
+		:data-list="currentRuleList" />
 </template>
 
 <script setup>
@@ -307,7 +280,7 @@ let abortController = null;
 const getExportControlListApi = async () => {
 	// 取消上一轮未完成的请求
 	if (abortController) {
-		try { abortController.abort(); } catch {}
+		try { abortController.abort(); } catch { }
 	}
 	abortController = new AbortController();
 	isFetching.value = true;
@@ -416,22 +389,27 @@ watch(customDateRange, () => {
 	margin: 0;
 	padding: 0;
 }
+
 .list-page {
 	width: 1601px;
 	padding-bottom: 50px;
 	margin: 0 auto;
 	padding-top: 16px;
+
 	.search-box {
 		margin-bottom: 16px;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+
 		.search-input {
 			width: 388px;
 			height: 32px;
+
 			:deep(.el-input__wrapper) {
 				padding: 0 11px;
 			}
+
 			:deep(.el-input__inner) {
 				font-size: 16px;
 				font-weight: 400;
@@ -440,24 +418,29 @@ watch(customDateRange, () => {
 				color: rgb(95, 101, 108);
 			}
 		}
+
 		.filters {
 			display: flex;
 			align-items: center;
+
 			.el-checkbox {
 				margin-right: 20px;
 				color: rgb(59, 65, 75);
 			}
+
 			.time-select {
 				width: 160px;
 				height: 32px;
 			}
 		}
 	}
+
 	.main {
 		width: 100%;
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-start;
+
 		.left {
 			padding-bottom: 20px;
 			width: 388px;
@@ -465,10 +448,12 @@ watch(customDateRange, () => {
 			border-radius: 10px;
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background-color: #fff;
+
 			.checkbox-group {
 				display: flex;
 				flex-wrap: wrap;
 				padding: 0 0 0 24px;
+
 				.el-checkbox {
 					width: 50%;
 					margin-right: 0;
@@ -479,11 +464,13 @@ watch(customDateRange, () => {
 					line-height: 24px;
 					color: rgb(95, 101, 108);
 				}
+
 				.custom-date-picker {
 					width: 100%;
 					margin-top: 8px;
 					padding-right: 24px;
 					box-sizing: border-box;
+
 					:deep(.el-date-editor) {
 						width: 100%;
 						height: 32px;
@@ -491,21 +478,26 @@ watch(customDateRange, () => {
 						border: 1px solid #dcdfe6;
 						border-radius: 4px;
 						padding: 0 10px;
+
 						&:hover {
 							border-color: #c0c4cc;
 						}
+
 						&.is-active {
 							border-color: #409eff;
 						}
+
 						.el-range-input {
 							font-size: 14px;
 							font-family: "Microsoft YaHei";
 							color: rgb(95, 101, 108);
 						}
+
 						.el-range-separator {
 							color: rgb(95, 101, 108);
 							line-height: 30px;
 						}
+
 						.el-input__icon {
 							line-height: 32px;
 							color: rgb(95, 101, 108);
@@ -514,12 +506,14 @@ watch(customDateRange, () => {
 				}
 			}
 		}
+
 		.right {
 			width: 1196px;
 			height: auto;
 			border-radius: 10px;
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background-color: #fff;
+
 			.title {
 				width: 100%;
 				height: 56px;
@@ -528,9 +522,11 @@ watch(customDateRange, () => {
 				align-items: center;
 				padding: 14px 12px 16px 0;
 				box-sizing: border-box;
+
 				.left-wrapper {
 					display: flex;
 					align-items: center;
+
 					.box {
 						width: 8px;
 						height: 20px;
@@ -539,6 +535,7 @@ watch(customDateRange, () => {
 						border-top-right-radius: 4px;
 						margin-right: 14px;
 					}
+
 					.text {
 						font-size: 20px;
 						font-weight: 700;
@@ -547,13 +544,16 @@ watch(customDateRange, () => {
 						color: rgb(5, 95, 194);
 					}
 				}
+
 				.right-wrapper {
 					display: flex;
 					align-items: center;
+
 					.stats {
 						display: flex;
 						align-items: center;
 						margin-right: 24px;
+
 						.dot {
 							width: 8px;
 							height: 8px;
@@ -561,50 +561,61 @@ watch(customDateRange, () => {
 							border-radius: 50%;
 							margin-right: 8px;
 						}
+
 						.count-text {
 							font-size: 16px;
 							font-weight: 700;
 							color: #3b414b;
 							font-family: "Microsoft YaHei";
 							margin-right: 16px;
+
 							.highlight {
 								color: #cd4246;
 								margin: 0 4px;
 							}
 						}
+
 						.rule-text {
 							font-size: 14px;
 							color: #5f656c;
 							font-family: "Microsoft YaHei";
+
 							.highlight {
 								color: #cd4246;
 							}
 						}
 					}
+
 					.btn {
 						width: 60px;
 						height: 28px;
+
 						img {
 							width: 28px;
 							height: 28px;
 							cursor: pointer;
 						}
+
 						img:first-child {
 							margin-right: 4px;
 						}
 					}
 				}
 			}
+
 			.right-table {
 				padding: 5px 21px 0 21px;
+
 				:deep(.el-table) {
 					--el-table-header-bg-color: #fff;
 					--el-table-border-color: transparent;
 					--el-table-row-hover-bg-color: rgba(248, 249, 250, 1);
 				}
+
 				:deep(.el-table__inner-wrapper::before) {
 					background-color: transparent;
 				}
+
 				:deep(.el-table__header-wrapper th) {
 					height: 60px;
 					background-color: #fff;
@@ -615,15 +626,19 @@ watch(customDateRange, () => {
 					border-bottom: 1px solid rgba(230, 231, 232, 1);
 					border-top: 1px solid rgba(230, 231, 232, 1);
 				}
+
 				:deep(.el-table__header-wrapper .cell) {
 					line-height: 22px;
 				}
+
 				:deep(.el-table__header-wrapper th:first-child .cell) {
 					padding-left: 39px;
 				}
+
 				:deep(.el-table__row) {
 					height: 64px;
 				}
+
 				:deep(.el-table__cell) {
 					border-bottom: 0;
 					font-size: 16px;
@@ -631,21 +646,26 @@ watch(customDateRange, () => {
 					color: rgb(95, 101, 108);
 					font-family: "Microsoft YaHei";
 				}
+
 				:deep(.el-table__row .el-table__cell:first-child .cell) {
 					padding-left: 39px;
 				}
+
 				:deep(.odd-row td.el-table__cell) {
 					background-color: rgba(248, 249, 250, 1);
 				}
+
 				.entity-name-cell {
 					display: flex;
 					align-items: center;
+
 					.avatar {
 						width: 24px;
 						height: 24px;
 						margin-right: 8px;
 						border-radius: 4px;
 					}
+
 					.avatar-undefined {
 						width: 24px;
 						height: 24px;
@@ -659,6 +679,7 @@ watch(customDateRange, () => {
 						font-size: 14px;
 						font-weight: 500;
 					}
+
 					.name {
 						font-size: 16px;
 						font-weight: 700;
@@ -668,10 +689,12 @@ watch(customDateRange, () => {
 						text-overflow: ellipsis;
 					}
 				}
+
 				.domain-cell {
 					display: flex;
 					align-items: center;
 					gap: 8px;
+
 					:deep(.el-tag) {
 						height: auto;
 						padding: 2px 8px;
@@ -683,16 +706,19 @@ watch(customDateRange, () => {
 						border: 1px solid;
 					}
 				}
+
 				.rule-cell {
 					display: flex;
 					align-items: center;
 					gap: 12px;
+
 					.rule-text {
 						flex: 1;
 						overflow: hidden;
 						white-space: nowrap;
 						text-overflow: ellipsis;
 					}
+
 					.rule-link {
 						font-size: 16px;
 						font-weight: 400;
@@ -702,6 +728,7 @@ watch(customDateRange, () => {
 					}
 				}
 			}
+
 			.tight-footer {
 				padding: 16px 24px;
 				display: flex;
@@ -768,12 +795,14 @@ watch(customDateRange, () => {
 		}
 	}
 }
+
 .title {
 	width: 100%;
 	height: 56px;
 	display: flex;
 	align-items: center;
 	padding: 14px 12px 16px 0;
+
 	.box {
 		width: 8px;
 		height: 16px;
@@ -782,6 +811,7 @@ watch(customDateRange, () => {
 		border-top-right-radius: 4px;
 		margin-right: 14px;
 	}
+
 	.text {
 		font-size: 16px;
 		font-weight: 700;

src/views/exportControl/v2.0SingleSanction/components/sanctionsOverview/index.vue

@@ -45,32 +45,21 @@
             <div class="info-row">
               <div class="label">制裁领域：</div>
               <div class="value tags">
-                <span 
-                  class="tag" 
-                  v-for="(domain, index) in formattedData.domains" 
-                  :key="index"
-                >{{ domain }}</span>
+                <span class="tag" v-for="(domain, index) in formattedData.domains" :key="index">{{ domain }}</span>
               </div>
             </div>
           </div>
           <div class="left-top-content">
             <div class="content-title">制裁实体分布：</div>
             <div class="distribution-list">
-              <div 
-                class="list-item" 
-                v-for="(item, index) in entityDistribution" 
-                :key="index"
-              >
+              <div class="list-item" v-for="(item, index) in entityDistribution" :key="index">
                 <img :src="flag" alt="" class="flag">
                 <div class="country-name">{{ item.name }}</div>
                 <div class="progress-bar-container">
-                  <div 
-                    class="progress-bar" 
-                    :style="{ 
+                  <div class="progress-bar" :style="{
                     width: item.width,
                     background: item.gradient
-                    }"
-                  ></div>
+                  }"></div>
                 </div>
                 <div class="count" :class="{ 'highlight': index === 0 }">{{ item.count }}家</div>
               </div>
@@ -88,11 +77,7 @@
           </div>
           <div class="left-bottom-content">
             <div class="timeline-list">
-              <div 
-                class="timeline-item" 
-                v-for="(item, index) in timelineData" 
-                :key="index"
-              >
+              <div class="timeline-item" v-for="(item, index) in timelineData" :key="index">
                 <div class="date-row">
                   <div class="dot"></div>
                   <div class="date">{{ item.date }}</div>
@@ -101,7 +86,9 @@
               </div>
             </div>
             <div class="view-more" v-if="hasMore" @click="loadMore">
-              查看更多 <el-icon class="icon-more"><DArrowRight /></el-icon>
+              查看更多 <el-icon class="icon-more">
+                <DArrowRight />
+              </el-icon>
             </div>
           </div>
         </div>
@@ -128,12 +115,7 @@
                 <el-option label="全部领域" value="" />
                 <el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
-              <el-input
-                v-model="searchKeyword"
-                placeholder="搜索实体"
-                style="width: 150px"
-                :suffix-icon="Search"
-              />
+              <el-input v-model="searchKeyword" placeholder="搜索实体" style="width: 150px" :suffix-icon="Search" />
             </div>
           </div>
           <div class="stats-row">
@@ -144,7 +126,8 @@
             <div class="stats-info">
               <div class="stat-item">
                 <span class="dot red"></span>
-              <span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{ addRuleCount }}</span>家)</span>
+                <span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{
+                  addRuleCount }}</span>家)</span>
               </div>
               <!-- <div class="stat-item">
               <span class="dot green"></span>
@@ -156,10 +139,7 @@
         <div class="right-content">
           <div class="sanction-group-list">
             <div class="sanction-group" v-for="(group, index) in sanctionList" :key="index">
-              <el-table 
-                :data="group.entities" 
-                style="width: 100%"
-              >
+              <el-table :data="group.entities" style="width: 100%">
                 <el-table-column label="实体名称" min-width="280">
                   <template #default="scope">
                     <div class="name-cell">
@@ -171,13 +151,8 @@
                 </el-table-column>
                 <el-table-column label="涉及领域" width="180" align="center">
                   <template #default="scope">
-                    <span 
-                      v-for="(item, index) in scope.row.fields" 
-                      :key="index"
-                      class="tag" 
-                      :style="getTagStyle(item)"
-                      style="margin: 0 2px;"
-                    >{{ item }}</span>
+                    <span v-for="(item, index) in scope.row.fields" :key="index" class="tag" :style="getTagStyle(item)"
+                      style="margin: 0 2px;">{{ item }}</span>
                   </template>
                 </el-table-column>
                 <el-table-column prop="location" label="上市地点" width="90" align="center" />
@@ -185,7 +160,8 @@
                 <el-table-column prop="revenue" label="营收(亿元)" width="110" align="center" />
                 <el-table-column label="50%规则子企业" width="180" align="center">
                   <template #default="scope">
-                    <span v-if="scope.row.subsidiaryCount" class="subsidiary-link" @click="handleSubsidiaryClick(scope.row)">
+                    <span v-if="scope.row.subsidiaryCount" class="subsidiary-link"
+                      @click="handleSubsidiaryClick(scope.row)">
                       {{ scope.row.subsidiaryText }} <span class="blue-text">{{ scope.row.subsidiaryCount }}家 ></span>
                     </span>
                     <span v-else>--</span>
@@ -201,12 +177,8 @@
       </div>
     </div>
     <!-- 50%规则子企业弹框 -->
-    <RuleSubsidiaryDialog
-      v-model="subsidiaryDialogVisible"
-      :company-name="currentSubsidiaryCompanyName"
-      :total-count="currentSubsidiaryCount"
-      :data-list="currentSubsidiaryList"
-    />
+    <RuleSubsidiaryDialog v-model="subsidiaryDialogVisible" :company-name="currentSubsidiaryCompanyName"
+      :total-count="currentSubsidiaryCount" :data-list="currentSubsidiaryList" />
   </div>
 </template>
 
@@ -223,14 +195,16 @@ import RuleSubsidiaryDialog from "../../../v2.0EntityList/components/sanctionsOv
 
 // 跳转公司详情页
 const handleCompClick = item => {
-  console.log("item", item);
-  const route = router.resolve({
-    path: "/companyPages",
-    query: {
-      id: item.id
-    }
-  });
-  window.open(route.href, "_blank");
+  // console.log("item", item);
+  // const route = router.resolve({
+  //   path: "/companyPages",
+  //   query: {
+  //     id: item.entityId
+  //   }
+  // });
+  // window.open(route.href, "_blank");
+  const curRoute = router.resolve({ name: "companyPages", params: { id: item.entityId } });
+  window.open(curRoute.href, "_blank");
 };
 
 // 跳转发布机构详情页
@@ -394,7 +368,7 @@ const props = defineProps({
 });
 // 跳转到人物页
 const handleClick = () => {
-const route = router.resolve({
+  const route = router.resolve({
     path: "/characterPage",
     query: {
       // type: props.data.type,
@@ -534,19 +508,23 @@ onMounted(() => {
   margin: 0;
   padding: 0;
 }
+
 .sanctions-overview {
   width: 1601px;
   margin: 0 auto;
   padding-top: 16px;
   padding-bottom: 50px;
+
   .main {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: space-between;
+
     .left {
       width: 520px;
       height: 1119px;
+
       .left-top {
         width: 100%;
         height: 582px;
@@ -555,6 +533,7 @@ onMounted(() => {
         box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
         background-color: #fff;
         margin-bottom: 16px;
+
         .left-top-title {
           padding: 22px 20px 22px 27px;
           width: 100%;
@@ -620,10 +599,12 @@ onMounted(() => {
                 &::-webkit-scrollbar {
                   height: 4px;
                 }
+
                 &::-webkit-scrollbar-thumb {
                   background: #ccc;
                   border-radius: 2px;
                 }
+
                 &::-webkit-scrollbar-track {
                   background: transparent;
                 }
@@ -642,11 +623,13 @@ onMounted(() => {
             }
           }
         }
+
         .left-top-content {
           width: 100%;
           height: 234px;
           padding: 19px 29px 22px 27px;
           overflow: auto;
+
           .content-title {
             font-size: 16px;
             font-weight: 700;
@@ -662,6 +645,7 @@ onMounted(() => {
             flex-direction: column;
             gap: 16px;
             overflow: auto;
+
             .list-item {
               display: flex;
               align-items: center;
@@ -720,6 +704,7 @@ onMounted(() => {
           }
         }
       }
+
       .left-bottom {
         width: 100%;
         height: 521px;
@@ -727,6 +712,7 @@ onMounted(() => {
         border-radius: 10px;
         box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
         background-color: #fff;
+
         .left-bottom-content {
           padding: 26px 30px 0 25px;
           height: calc(100% - 56px); // 减去标题高度
@@ -746,10 +732,12 @@ onMounted(() => {
             &::-webkit-scrollbar {
               width: 6px;
             }
+
             &::-webkit-scrollbar-thumb {
               background: #ccc;
               border-radius: 3px;
             }
+
             &::-webkit-scrollbar-track {
               background: transparent;
             }
@@ -833,12 +821,14 @@ onMounted(() => {
         }
       }
     }
+
     .right {
       width: 1064px;
       height: auto;
       border-radius: 10px;
       box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
       background-color: #fff;
+
       .right-title {
         width: 100%;
         // height: 107px;
@@ -920,6 +910,7 @@ onMounted(() => {
               font-family: "Microsoft YaHei";
               line-height: 24px;
               margin-right: 34px;
+
               .dot {
                 width: 8px;
                 height: 8px;
@@ -929,6 +920,7 @@ onMounted(() => {
                 &.red {
                   background-color: rgb(206, 79, 81);
                 }
+
                 &.green {
                   background-color: rgb(33, 129, 57);
                 }
@@ -940,11 +932,14 @@ onMounted(() => {
                 line-height: 24px;
                 font-family: "Microsoft YaHei";
                 color: rgb(59, 65, 75);
+
                 .num {
                   font-weight: 700;
+
                   &.red {
                     color: rgb(206, 79, 81);
                   }
+
                   &.green {
                     color: rgb(33, 129, 57);
                   }
@@ -954,6 +949,7 @@ onMounted(() => {
           }
         }
       }
+
       .right-content {
         padding: 0 20px 17px 20px;
 
@@ -978,9 +974,11 @@ onMounted(() => {
                 font-family: "Microsoft YaHei";
                 border-bottom: none;
               }
+
               th:first-child {
                 border-top-left-radius: 8px;
               }
+
               th:last-child {
                 border-top-right-radius: 8px;
               }
@@ -990,9 +988,11 @@ onMounted(() => {
               tr:nth-child(odd) td {
                 background-color: rgba(248, 249, 250, 1);
               }
+
               tr:nth-child(even) td {
                 background-color: #fff;
               }
+
               td {
                 height: 48px;
                 padding: 0;
@@ -1068,12 +1068,14 @@ onMounted(() => {
     }
   }
 }
+
 .title-com {
   width: 100%;
   height: 56px;
   display: flex;
   align-items: center;
   padding: 14px 12px 16px 0;
+
   .box {
     width: 8px;
     height: 20px;
@@ -1082,6 +1084,7 @@ onMounted(() => {
     border-top-right-radius: 4px;
     margin-right: 14px;
   }
+
   .text {
     font-size: 20px;
     font-weight: 700;
@@ -1089,15 +1092,18 @@ onMounted(() => {
     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;
     }