update

src/App.vue

@@ -533,7 +533,8 @@ body {
 			.menu-content {
 				width: 562px;
 				height: 348px;
-				margin-top: 20px;
+				margin-top: 8px;
+
 				margin-left: 72px;
 				display: flex;
 				flex-wrap: wrap;

src/api/allUnion.js

-import request from "@/api/request.js";
-
-// 全联盟-获取联盟列表
-/**
- * @header token
- * @param {Object} params
- * @param {String} params.date - 日期
- */
-export function getAllUnionList(params) {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/unionList/${params.date}`
-  })
-}
-
-// 全联盟-获取排华数量
-/**
- * @header token
- */
-export function getUnionCount() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/unionCount`
-  })
-}
-
-// 全联盟-获取排华联盟动态
-/**
- * @header token
- */
-export function getDynamic() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/dynamic`
-  })
-}
-
-// 全联盟-获取排华联盟预警
-/**
- * @param {Object} params
- * @param {Integer} params.id - 上一接口查询的EccnCategoryID
- * @header token
- */
-export function getPrediction() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/prediction`
-  })
-}
-
-// 全联盟-获取排华联盟领域分布
-/**
- * @param {Object} params
- * @param {Integer} params.id - 上一接口查询的EccnCategoryID
- * @header token
- */
-export function getIndustry() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/industry`
-  })
-}
-
-// 全联盟-获取排华联盟国家紧密度
-/**
- * @param {Object} params
- * @param {Integer} params.id - 上一接口查询的EccnCategoryID
- * @header token
- */
-export function getCountryRelation() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/countryRelation`
-  })
+import request from "@/api/request.js";
+
+// 全联盟-获取联盟列表
+/**
+ * @header token
+ * @param {Object} params
+ * @param {String} params.date - 日期
+ */
+export function getAllUnionList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/union/union/unionList/${params.date}`
+  })
+}
+
+// 全联盟-获取排华数量
+/**
+ * @header token
+ */
+export function getUnionCount() {
+  return request({
+    method: 'GET',
+    url: `/api/union/union/unionCount`
+  })
+}
+
+// 全联盟-获取排华联盟动态
+/**
+ * @header token
+ */
+export function getDynamic() {
+  return request({
+    method: 'GET',
+    url: `/api/union/union/dynamic`
+  })
+}
+
+// 全联盟-获取排华联盟预警
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 上一接口查询的EccnCategoryID
+ * @header token
+ */
+export function getPrediction() {
+  return request({
+    method: 'GET',
+    url: `/api/union/union/prediction`
+  })
+}
+
+// 全联盟-获取排华联盟领域分布
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 上一接口查询的EccnCategoryID
+ * @header token
+ */
+export function getIndustry() {
+  return request({
+    method: 'GET',
+    url: `/api/union/union/industry`
+  })
+}
+
+// 全联盟-获取排华联盟国家紧密度
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 上一接口查询的EccnCategoryID
+ * @header token
+ */
+export function getCountryRelation() {
+  return request({
+    method: 'GET',
+    url: `/api/union/union/countryRelation`
+  })
 }
\ No newline at end of file

src/api/ruleRestriction/index.js

-import request from "@/api/request.js";
-
-// 规则限制-首页统计接口
-export function getStatCount() {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/statCount`
-  })
-}
-
-// 规则限制-查询最新动态接口
-export function getLatestUpdates() {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getLatestUpdates`
-  })
-}
-
-// 规则限制-风险信号
-export function getRiskSignal(params) {
-  return request({
-    method: 'GET',
-    url: `/api/commonFeature/riskSignal/${params}`
-  })
-}
-
-// 规则限制-查询新闻资讯
-export function getNews(params) {
-  return request({
-    method: 'GET',
-    url: `/api/commonFeature/news/${params}`
-  })
-}
-
-// 规则限制-查询社交媒体
-export function getRemarks(params) {
-  return request({
-    method: 'GET',
-    url: `/api/commonFeature/remarks/${params}`
-  })
-}
-
-// 规则限制-限制领域分布情况
-/**
- * @param {Object} params
- * @param {string} params.year
- * @header token
- */
-export function getAreaDistribution(params) {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getAreaDistribution`,
-    params
-  })
-}
-
-// 规则限制-受限实体数量变化趋势
-/**
- * @param {Object} params
- * @param {Integer} params.year
- * @param {String} params.type
- * @header token
- */
-export function getEntityChangeTrend(params) {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getEntityChangeTrend`,
-    params
-  })
-}
-
-// 规则限制-规则限制政令列表查询接口
-/**
- * @param {Object} params
- * @param {Integer} params.currentPage
- * @param {Integer} params.pageSize
- * @param {List<String>} params.years
- * @param {List<String>} params.areas
- * @param {String} params.keywords
- * @param {String} params.sortField
- * @param {String} params.sortOrder
- * @header token
- */
-export function getRuleLimitList(params) {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getRuleLimitList`,
-    params
-  })
-}
-
-// 规则限制-排华科技联盟列表接口
-/**
- * @param {Object} params
- * @param {Integer} params.currentPage
- * @param {Integer} params.pageSize
- * @param {List<String>} params.years
- * @param {List<String>} params.countries
- * @param {List<String>} params.areas
- * @param {String} params.keywords
- * @param {String} params.sortField
- * @param {String} params.sortOrder
- * @header token
- */
-export function getACTAList(params) {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getACTAList`,
-    params
-  })
-}
-
-export function getAcTAAllcountry() {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getACTAAllCountry/`
-  })
-}
-
-
-// 规则限制-规则限制基本详情
-export function getSanctionOverview(params) {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getSanctionOverview/${params}`
-  })
-}
-
-// 规则限制-背景分析
-export function getBackGround(params) {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getBackGround/${params}`
-  })
-}
-
-// 规则限制-限制条款
-export function getLimitClause(params) {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getLimitClause/${params}`
-  })
-}
-
-// 规则限制-相关举措
-export function getRelevantMeasures(params) {
-  return request({
-    method: 'GET',
-    url: `/api/ruleLimitInfo/getRelevantMeasures/${params}`
-  })
-}
-
-
-
-// // 实体清单-制裁概况-获取发布机构机构动态
-// /**
-//  * @param {Object} data
-//  * @param {string} data.orgId
-//  * @header token
-//  */
-// export function getPublishOrgInfo(data) {
-//   return request({
-//     method: 'POST',
-//     url: `/api/organization/relate/news`,
-//     data,
-//   })
+import request from "@/api/request.js";
+
+// 规则限制-首页统计接口
+export function getStatCount() {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/statCount`
+  })
+}
+
+// 规则限制-查询最新动态接口
+export function getLatestUpdates() {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getLatestUpdates`
+  })
+}
+
+// 规则限制-风险信号
+export function getRiskSignal(params) {
+  return request({
+    method: 'GET',
+    url: `/api/commonFeature/riskSignal/${params}`
+  })
+}
+
+// 规则限制-查询新闻资讯
+export function getNews(params) {
+  return request({
+    method: 'GET',
+    url: `/api/commonFeature/news/${params}`
+  })
+}
+
+// 规则限制-查询社交媒体
+export function getRemarks(params) {
+  return request({
+    method: 'GET',
+    url: `/api/commonFeature/remarks/${params}`
+  })
+}
+
+// 规则限制-限制领域分布情况
+/**
+ * @param {Object} params
+ * @param {string} params.year
+ * @header token
+ */
+export function getAreaDistribution(params) {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getAreaDistribution`,
+    params
+  })
+}
+
+// 规则限制-受限实体数量变化趋势
+/**
+ * @param {Object} params
+ * @param {Integer} params.year
+ * @param {String} params.type
+ * @header token
+ */
+export function getEntityChangeTrend(params) {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getEntityChangeTrend`,
+    params
+  })
+}
+
+// 规则限制-规则限制政令列表查询接口
+/**
+ * @param {Object} params
+ * @param {Integer} params.currentPage
+ * @param {Integer} params.pageSize
+ * @param {List<String>} params.years
+ * @param {List<String>} params.areas
+ * @param {String} params.keywords
+ * @param {String} params.sortField
+ * @param {String} params.sortOrder
+ * @header token
+ */
+export function getRuleLimitList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getRuleLimitList`,
+    params
+  })
+}
+
+// 规则限制-排华科技联盟列表接口
+/**
+ * @param {Object} params
+ * @param {Integer} params.currentPage
+ * @param {Integer} params.pageSize
+ * @param {List<String>} params.years
+ * @param {List<String>} params.countries
+ * @param {List<String>} params.areas
+ * @param {String} params.keywords
+ * @param {String} params.sortField
+ * @param {String} params.sortOrder
+ * @header token
+ */
+export function getACTAList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getACTAList`,
+    params
+  })
+}
+
+export function getAcTAAllcountry() {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getACTAAllCountry/`
+  })
+}
+
+
+// 规则限制-规则限制基本详情
+export function getSanctionOverview(params) {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getSanctionOverview/${params}`
+  })
+}
+
+// 规则限制-背景分析
+export function getBackGround(params) {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getBackGround/${params}`
+  })
+}
+
+// 规则限制-限制条款
+export function getLimitClause(params) {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getLimitClause/${params}`
+  })
+}
+
+// 规则限制-相关举措
+export function getRelevantMeasures(params) {
+  return request({
+    method: 'GET',
+    url: `/api/ruleLimitInfo/getRelevantMeasures/${params}`
+  })
+}
+
+
+
+// // 实体清单-制裁概况-获取发布机构机构动态
+// /**
+//  * @param {Object} data
+//  * @param {string} data.orgId
+//  * @header token
+//  */
+// export function getPublishOrgInfo(data) {
+//   return request({
+//     method: 'POST',
+//     url: `/api/organization/relate/news`,
+//     data,
+//   })
 // }
\ No newline at end of file

src/components/dialog.vue

@@ -7,7 +7,7 @@
 			<div class="bubble">
 				<div class="bubble-header">
 					<span class="name">{{ name }}</span>
-					<span class="meta">{{ time }} · {{ source }}</span>
+					<span class="meta">{{ formattedTime }} · {{ source }}</span>
 				</div>
 				<div class="bubble-content" @click="handleInfoClick">
 					{{ content }}
@@ -19,10 +19,11 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import avatarUser from "@/assets/images/avatar_user.png";
 
 const emit = defineEmits(["click", "info-click"]);
-defineProps({
+const props = defineProps({
 	avatar: {
 		type: String,
 		default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
@@ -46,6 +47,21 @@ defineProps({
 	}
 });
 
+const formattedTime = computed(() => {
+	const date = new Date(props.time);
+	if (isNaN(date.getTime())) {
+		return props.time; // 如果不是有效日期，返回原值
+	}
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const day = String(date.getDate());
+	const hours = String(date.getHours()).padStart(2, '0');
+	const minutes = String(date.getMinutes()).padStart(2, '0');
+	const seconds = String(date.getSeconds()).padStart(2, '0');
+	// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
+	return `${month}月${day}日 ${hours}:${minutes}`;
+});
+
 const handleClick = () => {
 	emit("click");
 };
@@ -57,9 +73,9 @@ const handleInfoClick = () => {
 <style scoped>
 .message-bubble {
 	display: flex;
-	max-width: 720px;
+	max-width: 750px;
 	margin-top: 5px;
-	margin-bottom: 16px;
+	margin-bottom: 12px;
 }
 
 .avatar-container {
@@ -71,8 +87,8 @@ const handleInfoClick = () => {
 }
 
 .avatar {
-	width: 40px;
-	height: 40px;
+	width: 48px;
+	height: 48px;
 	border-radius: 50%;
 	object-fit: cover;
 }
@@ -85,7 +101,7 @@ const handleInfoClick = () => {
 .bubble {
 	background-color: rgba(246, 250, 255, 1);
 	border-radius: 12px;
-	padding: 10px 16px;
+	padding: 12px 12px;
 	position: relative;
 	border: 1px solid rgba(231, 243, 255, 1);
 	/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */

src/styles/main.css

@@ -13,24 +13,51 @@
   --btn-active-bg-color: rgba(231, 243, 255, 1);
   --btn-active-text-color: var(--color-main-active);
 
-
+  
   /* 标签按钮颜色 */
   --tag-btn1-bg-color: rgba(255, 241, 240, 1);
   --tag-btn1-border-color: rgba(255, 204, 199, 1);
   --tag-btn1-text-color: rgba(255, 77, 79, 1);
-
+  
   --tag-btn2-bg-color: rgba(255, 251, 230, 1);
   --tag-btn2-border-color: rgba(255, 241, 184, 1);
   --tag-btn2-text-color: rgba(250, 173, 20, 1);
-
+  
   --tag-btn2-bg-color: rgba(230, 244, 255, 1);
   --tag-btn2-border-color: rgba(186, 224, 255, 1);
   --tag-btn2-text-color: rgba(22, 119, 255, 1);
-
+  
   --tag-btn3-bg-color: rgba(246, 255, 237, 1);
   --tag-btn3-border-color: rgba(217, 247, 190, 1);
   --tag-btn3-text-color: rgba(82, 196, 26, 1);
+  
+
+
+  /* 文字颜色 设计定义*/
+  --text-primary-90-color: #222934;
+  --text-primary-80-color: #3b414b;
+  --text-primary-65-color: #5f656c;
+  --text-primary-50-color: #84888e;
+
+  /* 背景颜色 设计定义*/
+  --bg-black-10: #E6E7E8;
+  --bg-black-5: #EAECEE;
+  --bg-black-2: #F7F8F9;
+  --bg-white-100: #FFFFFF;
+  --bg-white-65: rgba(255, 255, 255, 0.65);
+  --bg-white-50: rgba(255, 255, 255, 0.5);
+  --bg-white-35: rgba(255, 255, 255, 0.35);
+
+    /* 描边颜色 设计定义*/
+  --border-black-10: #E6E7E8;
+  --border-black-5: #EAECEE;
 
+  /* 主色 设计定义*/
+  --color-primary-100: #055FC2;
+  --color-primary-50: #82AFE0;
+  --color-primary-35: #AED6FF;
+  --color-primary-10: #E7F3FF;
+  --color-primary-2: #F6FAFF;
 }
 
 .hover-dialog {

src/views/bill/billHome/assets/images/box1-left.svg

+<svg viewBox="0 0 24 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="48.000000" fill="none" customFrame="#000000">
+	<rect id="左右切换按钮" width="24.000000" height="48.000000" x="0.000000" y="0.000000" />
+	<path id="矩形 161" d="M20 0C22.2091 0 24 1.79086 24 4L24 44C24 46.2091 22.2091 48 20 48L0 48L0 0L20 0Z" fill="rgb(231,243,255)" fill-rule="evenodd" />
+	<path id="矢量 466" d="M14 18L8 24L14 30" stroke="rgb(5,95,194)" stroke-width="1.500000" />
+</svg>

src/views/bill/billHome/assets/images/box1-right.svg

+<svg viewBox="0 0 24 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="48.000000" fill="none">
+	<rect id="左右切换按钮" width="24.000000" height="48.000000" x="0.000000" y="0.000000" />
+	<path id="矩形 161" d="M24 0L24 48L4 48C1.79086 48 0 46.2091 0 44L0 4C0 1.79086 1.79086 0 4 0L24 0Z" fill="rgb(231,243,255)" fill-rule="evenodd" />
+	<path id="矢量 466" d="M6 0L0 6L6 12" stroke="rgb(5,95,194)" stroke-width="1.500000" transform="matrix(-1,0,0,1,16,18)" />
+</svg>

src/views/bill/billHome/index.vue

 <template>
 	<div class="home-wrapper">
 		<div class="search-header" v-show="isShow">
-			<div class="home-main-header-center">
-				<el-input
-					v-model="searchBillText"
-					@keyup.enter="handleSearch"
-					style="width: 680px; height: 100%"
-					placeholder="搜索科技法案"
-				/>
-				<div class="search">
-					<div class="search-icon">
-						<img src="./assets/images/search-icon.png" alt="" />
+			<div class="search-header-container">
+
+				<div class="home-main-header-center">
+					<el-input
+						v-model="searchBillText"
+						@keyup.enter="handleSearch"
+						style="width: 680px; height: 100%"
+						placeholder="搜索科技法案"
+					/>
+					<div class="search">
+						<div class="search-icon">
+							<img src="./assets/images/search-icon.png" alt="" />
+						</div>
+						<div class="search-text" @click="handleSearch">搜索</div>
 					</div>
-					<div class="search-text" @click="handleSearch">搜索</div>
 				</div>
-			</div>
-			<div class="home-main-header-btn-box">
-				<div class="btn" @click="handleToPosi('position1')">
-					<div class="btn-text">{{ "最新动态" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+				<div class="home-main-header-btn-box">
+					<div class="btn" @click="handleToPosi('position1')">
+						<div class="btn-text">{{ "最新动态" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position2')">
-					<div class="btn-text">{{ "资讯要闻" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position2')">
+						<div class="btn-text">{{ "资讯要闻" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position3')">
-					<div class="btn-text">{{ "数据总览" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position3')">
+						<div class="btn-text">{{ "数据总览" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position4')">
-					<div class="btn-text">{{ "资源库" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position4')">
+						<div class="btn-text">{{ "资源库" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="home-box" :class="{ scrollHomeBox: isShow }" ref="containerRef">
+		<div class="home-top-bg"></div>
+
 			<!-- <div class="home-header" v-show="!isShow">
 				<div class="header-left">
 					<HeaderMenu></HeaderMenu>
@@ -122,12 +127,12 @@
 						<div class="box1">
 							<div class="box1-left" @click="handleSwithCurBill('left')">
 								<div class="icon">
-									<img src="./assets/images/box1-left.png" alt="" />
+									<img src="./assets/images/box1-left.svg" alt="" />
 								</div>
 							</div>
 							<div class="box1-right" @click="handleSwithCurBill('right')">
 								<div class="icon">
-									<img src="./assets/images/box1-right.png" alt="" />
+									<img src="./assets/images/box1-right.svg" alt="" />
 								</div>
 							</div>
 							<div class="box1-header">
@@ -390,7 +395,7 @@
 								}"
 							>
 								<el-empty v-if="!box5HasData" description="暂无数据" :image-size="100" />
-								<div v-else id="box5Chart" style="width: 100%; height: 100%"></div>
+								<div v-else id="box5Chart" style="width: 100%; height: 100%;"></div>
 							</div>
 						</div>
 						<div class="box6">
@@ -1767,22 +1772,28 @@ onUnmounted(() => {
 	overflow-y: hidden;
 	.search-header {
 		width: 100%;
-		height: 144px;
+		// height: 144px;
 		background: #fff;
-		overflow: hidden;
-		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.3);
+
+		// overflow: hidden;
+		box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+		.search-header-container {
+			width: 1600px;
+			margin: 0 auto;
+			padding: 16px 0px 16px 0px;
+		}
 		.home-main-header-center {
-			margin-top: 20px;
-			margin-left: 200px;
+			// margin-top: 20px;
+			// margin-left: 200px;
 			width: 800px;
 			height: 48px;
 			border-radius: 10px;
-			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+			// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+			border: 1px solid var(--color-primary-35);
 			background: rgba(255, 255, 255, 1);
 			box-sizing: border-box;
 			padding: 1px;
 			position: relative;
-			border: 1px solid transparent;
 			&:hover {
 				border: 1px solid var(--color-main-active);
 			}
@@ -1818,16 +1829,16 @@ onUnmounted(() => {
 			}
 		}
 		.home-main-header-btn-box {
-			margin-top: 20px;
-			margin-left: 200px;
+			margin-top: 16px;
+			// margin-left: 200px;
 			display: flex;
 			gap: 16px;
 			.btn {
 				display: flex;
 				align-items: center;
 				gap: 9px;
-				width: 160px;
-				height: 48px;
+				width: 140px;
+				height: 36px;
 				border: 1px solid #aed6ff;
 				box-sizing: border-box;
 				border-radius: 24px;
@@ -1844,12 +1855,12 @@ onUnmounted(() => {
 					font-size: 20px;
 					font-weight: 400;
 					line-height: 48px;
-					margin-left: 36px;
+					margin-left: 24px;
 					text-align: center;
 				}
 				.btn-icon {
 					position: absolute;
-					top: 16px;
+					top: 10px;
 					right: 19px;
 					width: 6px;
 					height: 12px;
@@ -1864,12 +1875,21 @@ onUnmounted(() => {
 	.scrollHomeBox {
 		height: calc(100% - 144px);
 	}
+	.home-top-bg{
+		background: url("./assets/images/background.png"),linear-gradient(180.00deg, rgba(229, 241, 254, 1) 0%,rgba(246, 251, 255, 0) 30%);
+		background-size: 100% 100%;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		z-index: -100;
+		top: -64px;
+	}
 	.home-box {
 		position: relative;
 		width: 100%;
 		height: 100%;
-		background: url("./assets/images/background.png");
-		background-size: 100% 100%;
+		// background: url("./assets/images/background.png"),linear-gradient(180.00deg, rgba(229, 241, 254, 1) 0%,rgba(246, 251, 255, 0) 100%);
+		// background-size: 100% 100%;
 		overflow-y: auto;
 		.home-header {
 			height: 64px;
@@ -1892,11 +1912,11 @@ onUnmounted(() => {
 					height: 48px;
 					border-radius: 10px;
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
-					background: rgba(255, 255, 255, 1);
+					background: rgba(255, 255, 255, 0.65);
 					box-sizing: border-box;
 					padding: 1px;
 					position: relative;
-					border: 1px solid transparent;
+					border: 1px solid rgba(255,255,255,1);
 					&:hover {
 						border: 1px solid var(--color-main-active);
 					}
@@ -2030,15 +2050,14 @@ onUnmounted(() => {
 							top: 200px;
 							width: 24px;
 							height: 48px;
-							background: #e7f1ff;
 							display: flex;
 							justify-content: center;
 							align-items: center;
 							cursor: pointer;
 							z-index: 10;
 							.icon {
-								width: 11px;
-								height: 18px;
+								width: 24px;
+								height: 48px;
 								img {
 									width: 100%;
 									height: 100%;
@@ -2051,15 +2070,14 @@ onUnmounted(() => {
 							top: 200px;
 							width: 24px;
 							height: 48px;
-							background: #e7f1ff;
 							display: flex;
 							justify-content: center;
 							align-items: center;
 							cursor: pointer;
 							z-index: 10;
 							.icon {
-								width: 11px;
-								height: 18px;
+								width: 24px;
+								height: 48px;
 								img {
 									width: 100%;
 									height: 100%;
@@ -2559,6 +2577,9 @@ onUnmounted(() => {
 								margin-left: 21px;
 								border-bottom: 1px solid rgba(240, 242, 244, 1);
 								cursor: pointer;
+								&:last-child {
+									border-bottom: 0px;
+								}
 								&:hover {
 									background: var(--color-bg-hover);
 								}
@@ -2674,7 +2695,7 @@ onUnmounted(() => {
 							box-sizing: border-box;
 							padding-top: 8px;
 							padding-bottom: 20px;
-							padding-left: 31px;
+							padding-left: 24px;
 							// .box4-main-item {
 							// 	margin-top: 16px;
 							// 	display: flex;
@@ -2799,6 +2820,7 @@ onUnmounted(() => {
 						}
 						.box5-main {
 							height: 397px;
+							padding: 8px 16px 8px 16px;
 						}
 					}
 					.box6 {

src/views/bill/billHome/utils/multiLineChart.js

@@ -19,10 +19,12 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
       }
     },
     grid: {
+      width: '96%',
+      height: '83%',
       top: '15%',
-      right: '5%',
-      bottom: '5%',
-      left: '5%',
+      right: '2%',
+      bottom: '2%',
+      left: '2%',
       containLabel: true
     },
     legend: {
@@ -41,7 +43,22 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
       {
         type: 'category',
         boundaryGap: false,
-        data: dataX
+        data: dataX,
+
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#e7f3ff',
+            },
+          },
+          axisLabel: {
+        show: true,
+        textStyle: {
+          color: 'rgba(95, 101, 108, 1)',
+          fontFamily: 'Microsoft YaHei',
+          fontsize: 14,
+        }
+      }
       }
     ],
     yAxis: [
@@ -63,8 +80,11 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
             color: '#666'
         },
         splitLine: {
-            show: false
-        }
+            show: true,
+            lineStyle: {
+                color: '#e7f3ff',
+            }
+        },
       }
     ],
     series: [

src/views/bill/billLayout/assets/icons/icon1.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon图标/Line/file-text-outlined" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="形状" d="M9.99063 1.14688L13.3531 4.50937C13.4469 4.60312 13.5 4.73125 13.5 4.86406L13.5 14.5C13.5 14.7766 13.2766 15 13 15L3 15C2.72344 15 2.5 14.7766 2.5 14.5L2.5 1.5C2.5 1.22344 2.72344 1 3 1L9.6375 1C9.77031 1 9.89688 1.05313 9.99063 1.14688ZM3.625 13.875L12.375 13.875L12.375 6.15625L9 6.15625C8.6375 6.15625 8.34375 5.8625 8.34375 5.5L8.34375 2.125L3.625 2.125L3.625 13.875ZM12.3469 5.09375L9.40627 5.09375L9.40627 2.15312L12.3469 5.09375ZM4.875 8.40625L4.875 7.65625C4.875 7.5875 4.93125 7.53125 5 7.53125L11 7.53125C11.0688 7.53125 11.125 7.5875 11.125 7.65625L11.125 8.40625C11.125 8.475 11.0688 8.53125 11 8.53125L5 8.53125C4.93125 8.53125 4.875 8.475 4.875 8.40625ZM7.875 9.65625L5 9.65625C4.93125 9.65625 4.875 9.7125 4.875 9.78125L4.875 10.5312C4.875 10.6 4.93125 10.6562 5 10.6562L7.875 10.6562C7.94375 10.6562 8 10.6 8 10.5312L8 9.78125C8 9.7125 7.94375 9.65625 7.875 9.65625Z" fill="rgb(59,65,75)" fill-rule="evenodd" />
+</svg>

src/views/bill/billLayout/assets/icons/icon1_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon图标/Line/file-text-outlined" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="形状" d="M9.99063 1.14688L13.3531 4.50937C13.4469 4.60312 13.5 4.73125 13.5 4.86406L13.5 14.5C13.5 14.7766 13.2766 15 13 15L3 15C2.72344 15 2.5 14.7766 2.5 14.5L2.5 1.5C2.5 1.22344 2.72344 1 3 1L9.6375 1C9.77031 1 9.89688 1.05313 9.99063 1.14688ZM3.625 13.875L12.375 13.875L12.375 6.15625L9 6.15625C8.6375 6.15625 8.34375 5.8625 8.34375 5.5L8.34375 2.125L3.625 2.125L3.625 13.875ZM12.3469 5.09375L9.40627 5.09375L9.40627 2.15312L12.3469 5.09375ZM4.875 8.40625L4.875 7.65625C4.875 7.5875 4.93125 7.53125 5 7.53125L11 7.53125C11.0688 7.53125 11.125 7.5875 11.125 7.65625L11.125 8.40625C11.125 8.475 11.0688 8.53125 11 8.53125L5 8.53125C4.93125 8.53125 4.875 8.475 4.875 8.40625ZM7.875 9.65625L5 9.65625C4.93125 9.65625 4.875 9.7125 4.875 9.78125L4.875 10.5312C4.875 10.6 4.93125 10.6562 5 10.6562L7.875 10.6562C7.94375 10.6562 8 10.6 8 10.5312L8 9.78125C8 9.7125 7.94375 9.65625 7.875 9.65625Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
+</svg>

src/views/bill/billLayout/assets/icons/icon2.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
+	<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<g id="check" opacity="0">
+		<rect id="矩形" width="16.000000" height="16.000000" x="0.000000" y="0.000000" opacity="0" fill="rgb(0,0,0)" />
+		<path id="路径" d="M14.25 2.96875L13.1578 2.96875C13.0047 2.96875 12.8594 3.03906 12.7656 3.15937L6.32345 11.3203L3.23438 7.40625C3.13907 7.28594 2.99532 7.21562 2.8422 7.21562L1.75001 7.21562C1.64532 7.21562 1.58751 7.33594 1.65157 7.41719L5.93126 12.8391C6.13126 13.0922 6.51563 13.0922 6.7172 12.8391L14.3484 3.16875C14.4125 3.08906 14.3547 2.96875 14.25 2.96875Z" fill="rgb(0,0,0)" fill-opacity="0.650980413" fill-rule="evenodd" />
+		<path id="路径" d="M13.1578 2.96875C13.0047 2.96875 12.8594 3.03906 12.7656 3.15937L6.32345 11.3203L3.23438 7.40625C3.13907 7.28594 2.99532 7.21562 2.8422 7.21562L1.75001 7.21562C1.64532 7.21562 1.58751 7.33594 1.65157 7.41719L5.93126 12.8391C6.13126 13.0922 6.51563 13.0922 6.7172 12.8391L14.3484 3.16875C14.4125 3.08906 14.3547 2.96875 14.25 2.96875L13.1578 2.96875Z" fill-rule="evenodd" stroke="rgb(151,151,151)" stroke-opacity="0" stroke-width="1.000000" />
+	</g>
+	<g id="ant-design">
+		<rect id="矩形" width="11.988293" height="11.988293" x="2.000000" y="2.000000" opacity="0" fill="rgb(59,65,75)" />
+		<path id="形状" d="M10.7277 4.4243C10.9819 4.67718 10.9819 5.08928 10.7277 5.34216C10.4748 5.59637 10.0627 5.59637 9.80848 5.34216L8.13333 3.66835C8.06911 3.60412 7.97278 3.59877 7.9032 3.65363C7.89785 3.65898 7.89116 3.66299 7.88581 3.66835L3.6792 7.87228C3.60963 7.94185 3.60963 8.05023 3.6792 8.1198L7.88715 12.3237C7.95672 12.3933 8.0651 12.3933 8.13467 12.3237L9.80715 10.6486C10.0613 10.3957 10.4721 10.3957 10.7263 10.6486C10.9806 10.9015 10.9806 11.3136 10.7263 11.5664L8.51733 13.7741C8.23454 14.0564 7.77657 14.0564 7.49378 13.7741L2.22616 8.51049C2.09 8.37526 2.01343 8.19129 2.01343 7.99938C2.01343 7.80748 2.09 7.62351 2.22616 7.48828L7.49512 2.22333C7.77609 1.94235 8.23502 1.93968 8.51867 2.21664C9.11968 2.81631 9.54471 3.24134 9.79243 3.48906L9.79377 3.49039L10.7277 4.4243ZM12.1406 5.87317L13.785 7.50952C13.921 7.64474 13.9976 7.82855 13.9979 8.02035C13.9981 8.21216 13.922 8.39617 13.7863 8.53174L12.1566 10.1601C11.9024 10.413 11.4916 10.413 11.2374 10.1601C11.1154 10.0385 11.0468 9.87338 11.0468 9.70113C11.0468 9.52888 11.1154 9.36373 11.2374 9.2422L12.3319 8.14908C12.4015 8.0795 12.4015 7.97112 12.3319 7.90155L11.2214 6.79236C11.0993 6.67084 11.0307 6.50569 11.0307 6.33344C11.0307 6.16119 11.0993 5.99604 11.2214 5.87451C11.4743 5.62029 11.8864 5.62029 12.1406 5.87317ZM6.61072 8.02612C6.61072 8.53377 6.8818 9.00286 7.32185 9.25668C7.76191 9.51051 8.30407 9.51051 8.74413 9.25668C9.18418 9.00286 9.45526 8.53377 9.45526 8.02612C9.45526 7.24136 8.81849 6.60518 8.03299 6.60518C7.24749 6.60518 6.61072 7.24136 6.61072 8.02612Z" fill="rgb(59,65,75)" fill-rule="evenodd" />
+		<path id="形状" d="M10.7277 4.4243C10.9819 4.67718 10.9819 5.08928 10.7277 5.34216C10.4748 5.59637 10.0627 5.59637 9.80848 5.34216L8.13333 3.66835C8.06911 3.60412 7.97278 3.59877 7.9032 3.65363C7.89785 3.65898 7.89116 3.66299 7.88581 3.66835L3.6792 7.87228C3.60963 7.94185 3.60963 8.05023 3.6792 8.1198L7.88715 12.3237C7.95672 12.3933 8.0651 12.3933 8.13467 12.3237L9.80715 10.6486C10.0613 10.3957 10.4721 10.3957 10.7263 10.6486C10.9806 10.9015 10.9806 11.3136 10.7263 11.5664L8.51733 13.7741C8.23454 14.0564 7.77657 14.0564 7.49378 13.7741L2.22616 8.51049C2.09 8.37526 2.01343 8.19129 2.01343 7.99938C2.01343 7.80748 2.09 7.62351 2.22616 7.48828L7.49512 2.22333C7.77609 1.94235 8.23502 1.93968 8.51867 2.21664C9.11968 2.81631 9.54471 3.24134 9.79243 3.48906L9.79377 3.49039L10.7277 4.4243ZM12.1406 5.87317L13.785 7.50952C13.921 7.64474 13.9976 7.82855 13.9979 8.02035C13.9981 8.21216 13.922 8.39617 13.7863 8.53174L12.1566 10.1601C11.9024 10.413 11.4916 10.413 11.2374 10.1601C11.1154 10.0385 11.0468 9.87338 11.0468 9.70113C11.0468 9.52888 11.1154 9.36373 11.2374 9.2422L12.3319 8.14908C12.4015 8.0795 12.4015 7.97112 12.3319 7.90155L11.2214 6.79236C11.0993 6.67084 11.0307 6.50569 11.0307 6.33344C11.0307 6.16119 11.0993 5.99604 11.2214 5.87451C11.4743 5.62029 11.8864 5.62029 12.1406 5.87317ZM6.61072 8.02612C6.61072 8.53377 6.8818 9.00286 7.32185 9.25668C7.76191 9.51051 8.30407 9.51051 8.74413 9.25668C9.18418 9.00286 9.45526 8.53377 9.45526 8.02612C9.45526 7.24136 8.81849 6.60518 8.03299 6.60518C7.24749 6.60518 6.61072 7.24136 6.61072 8.02612Z" fill-rule="evenodd" stroke="rgb(151,151,151)" stroke-opacity="0" stroke-width="1.000000" />
+	</g>
+</svg>

src/views/bill/billLayout/assets/icons/icon2_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
+	<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<g id="check" opacity="0">
+		<rect id="矩形" width="16.000000" height="16.000000" x="0.000000" y="0.000000" opacity="0" fill="rgb(0,0,0)" />
+		<path id="路径" d="M14.25 2.96875L13.1578 2.96875C13.0047 2.96875 12.8594 3.03906 12.7656 3.15937L6.32345 11.3203L3.23438 7.40625C3.13907 7.28594 2.99532 7.21562 2.8422 7.21562L1.75001 7.21562C1.64532 7.21562 1.58751 7.33594 1.65157 7.41719L5.93126 12.8391C6.13126 13.0922 6.51563 13.0922 6.7172 12.8391L14.3484 3.16875C14.4125 3.08906 14.3547 2.96875 14.25 2.96875Z" fill="rgb(0,0,0)" fill-opacity="0.650980413" fill-rule="evenodd" />
+		<path id="路径" d="M13.1578 2.96875C13.0047 2.96875 12.8594 3.03906 12.7656 3.15937L6.32345 11.3203L3.23438 7.40625C3.13907 7.28594 2.99532 7.21562 2.8422 7.21562L1.75001 7.21562C1.64532 7.21562 1.58751 7.33594 1.65157 7.41719L5.93126 12.8391C6.13126 13.0922 6.51563 13.0922 6.7172 12.8391L14.3484 3.16875C14.4125 3.08906 14.3547 2.96875 14.25 2.96875L13.1578 2.96875Z" fill-rule="evenodd" stroke="rgb(151,151,151)" stroke-opacity="0" stroke-width="1.000000" />
+	</g>
+	<g id="ant-design">
+		<rect id="矩形" width="11.988293" height="11.988293" x="2.000000" y="2.000000" opacity="0" fill="rgb(5,95,194)" />
+		<path id="形状" d="M10.7277 4.4243C10.9819 4.67718 10.9819 5.08928 10.7277 5.34216C10.4748 5.59637 10.0627 5.59637 9.80848 5.34216L8.13333 3.66835C8.06911 3.60412 7.97278 3.59877 7.9032 3.65363C7.89785 3.65898 7.89116 3.66299 7.88581 3.66835L3.6792 7.87228C3.60963 7.94185 3.60963 8.05023 3.6792 8.1198L7.88715 12.3237C7.95672 12.3933 8.0651 12.3933 8.13467 12.3237L9.80715 10.6486C10.0613 10.3957 10.4721 10.3957 10.7263 10.6486C10.9806 10.9015 10.9806 11.3136 10.7263 11.5664L8.51733 13.7741C8.23454 14.0564 7.77657 14.0564 7.49378 13.7741L2.22616 8.51049C2.09 8.37526 2.01343 8.19129 2.01343 7.99938C2.01343 7.80748 2.09 7.62351 2.22616 7.48828L7.49512 2.22333C7.77609 1.94235 8.23502 1.93968 8.51867 2.21664C9.11968 2.81631 9.54471 3.24134 9.79243 3.48906L9.79377 3.49039L10.7277 4.4243ZM12.1406 5.87317L13.785 7.50952C13.921 7.64474 13.9976 7.82855 13.9979 8.02035C13.9981 8.21216 13.922 8.39617 13.7863 8.53174L12.1566 10.1601C11.9024 10.413 11.4916 10.413 11.2374 10.1601C11.1154 10.0385 11.0468 9.87338 11.0468 9.70113C11.0468 9.52888 11.1154 9.36373 11.2374 9.2422L12.3319 8.14908C12.4015 8.0795 12.4015 7.97112 12.3319 7.90155L11.2214 6.79236C11.0993 6.67084 11.0307 6.50569 11.0307 6.33344C11.0307 6.16119 11.0993 5.99604 11.2214 5.87451C11.4743 5.62029 11.8864 5.62029 12.1406 5.87317ZM6.61072 8.02612C6.61072 8.53377 6.8818 9.00286 7.32185 9.25668C7.76191 9.51051 8.30407 9.51051 8.74413 9.25668C9.18418 9.00286 9.45526 8.53377 9.45526 8.02612C9.45526 7.24136 8.81849 6.60518 8.03299 6.60518C7.24749 6.60518 6.61072 7.24136 6.61072 8.02612Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
+		<path id="形状" d="M10.7277 4.4243C10.9819 4.67718 10.9819 5.08928 10.7277 5.34216C10.4748 5.59637 10.0627 5.59637 9.80848 5.34216L8.13333 3.66835C8.06911 3.60412 7.97278 3.59877 7.9032 3.65363C7.89785 3.65898 7.89116 3.66299 7.88581 3.66835L3.6792 7.87228C3.60963 7.94185 3.60963 8.05023 3.6792 8.1198L7.88715 12.3237C7.95672 12.3933 8.0651 12.3933 8.13467 12.3237L9.80715 10.6486C10.0613 10.3957 10.4721 10.3957 10.7263 10.6486C10.9806 10.9015 10.9806 11.3136 10.7263 11.5664L8.51733 13.7741C8.23454 14.0564 7.77657 14.0564 7.49378 13.7741L2.22616 8.51049C2.09 8.37526 2.01343 8.19129 2.01343 7.99938C2.01343 7.80748 2.09 7.62351 2.22616 7.48828L7.49512 2.22333C7.77609 1.94235 8.23502 1.93968 8.51867 2.21664C9.11968 2.81631 9.54471 3.24134 9.79243 3.48906L9.79377 3.49039L10.7277 4.4243ZM12.1406 5.87317L13.785 7.50952C13.921 7.64474 13.9976 7.82855 13.9979 8.02035C13.9981 8.21216 13.922 8.39617 13.7863 8.53174L12.1566 10.1601C11.9024 10.413 11.4916 10.413 11.2374 10.1601C11.1154 10.0385 11.0468 9.87338 11.0468 9.70113C11.0468 9.52888 11.1154 9.36373 11.2374 9.2422L12.3319 8.14908C12.4015 8.0795 12.4015 7.97112 12.3319 7.90155L11.2214 6.79236C11.0993 6.67084 11.0307 6.50569 11.0307 6.33344C11.0307 6.16119 11.0993 5.99604 11.2214 5.87451C11.4743 5.62029 11.8864 5.62029 12.1406 5.87317ZM6.61072 8.02612C6.61072 8.53377 6.8818 9.00286 7.32185 9.25668C7.76191 9.51051 8.30407 9.51051 8.74413 9.25668C9.18418 9.00286 9.45526 8.53377 9.45526 8.02612C9.45526 7.24136 8.81849 6.60518 8.03299 6.60518C7.24749 6.60518 6.61072 7.24136 6.61072 8.02612Z" fill-rule="evenodd" stroke="rgb(151,151,151)" stroke-opacity="0" stroke-width="1.000000" />
+	</g>
+</svg>

src/views/bill/billLayout/assets/icons/icon3.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 349" d="M3.3334 13.3335C2.96673 13.3335 2.66673 13.0335 2.66673 12.6668L2.66673 10.0001C2.66673 9.63348 2.96673 9.33348 3.3334 9.33348C3.70006 9.33348 4.00006 9.63348 4.00006 10.0001L4.00006 12.6668C4.00006 13.0335 3.70006 13.3335 3.3334 13.3335L3.3334 13.3335ZM6.4334 13.3335C6.06673 13.3335 5.76673 13.0335 5.76673 12.6668L5.76673 7.66681C5.76673 7.30014 6.06673 7.00014 6.4334 7.00014C6.80006 7.00014 7.10006 7.30014 7.10006 7.66681L7.10006 12.6668C7.10006 13.0335 6.80006 13.3335 6.4334 13.3335ZM9.56673 13.3335C9.20006 13.3335 8.90006 13.0335 8.90006 12.6668L8.90006 9.00014C8.90006 8.63348 9.20006 8.33348 9.56673 8.33348C9.9334 8.33348 10.2334 8.63348 10.2334 9.00014L10.2334 12.6668C10.2334 13.0335 9.9334 13.3335 9.56673 13.3335L9.56673 13.3335ZM12.6667 13.3335C12.3001 13.3335 12.0001 13.0335 12.0001 12.6668L12.0001 8.00014C12.0001 7.63348 12.3001 7.33348 12.6667 7.33348C13.0334 7.33348 13.3334 7.63348 13.3334 8.00014L13.3334 12.6668C13.3334 13.0335 13.0334 13.3335 12.6667 13.3335ZM3.3334 8.00014C3.16673 8.00014 2.96673 7.93348 2.8334 7.76681C2.60006 7.50014 2.60006 7.06681 2.86673 6.83348L6.5334 3.50014C6.80006 3.26681 7.2334 3.26681 7.46673 3.53348C7.70006 3.80014 7.70006 4.23348 7.4334 4.46681L3.76673 7.80014C3.66673 7.93348 3.50006 8.00014 3.3334 8.00014Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	<path id="矢量 350" d="M9.6667 6.99979C9.50003 6.99979 9.3667 6.93312 9.23337 6.83312L6.5667 4.49979C6.30003 4.26645 6.2667 3.83312 6.50003 3.56645C6.73337 3.29979 7.1667 3.26645 7.43337 3.49979L10.1 5.83312C10.3667 6.06645 10.4 6.49979 10.1667 6.76645C10.0334 6.93312 9.8667 6.99979 9.6667 6.99979L9.6667 6.99979Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	<path id="矢量 351" d="M9.66667 7.00033C9.5 7.00033 9.33333 6.93366 9.2 6.80033C8.93333 6.53366 8.93333 6.13366 9.2 5.86699L12.2 2.86699C12.4667 2.60033 12.8667 2.60033 13.1333 2.86699C13.4 3.13366 13.4 3.53366 13.1333 3.80033L10.1333 6.80033C10 6.93366 9.83333 7.00033 9.66667 7.00033L9.66667 7.00033Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	<path id="矢量 352" d="M12.6667 4.00033L10.6667 4.00033C10.3 4.00033 10 3.70033 10 3.33366C10 2.96699 10.3 2.66699 10.6667 2.66699L12.6667 2.66699C13.0333 2.66699 13.3333 2.96699 13.3333 3.33366C13.3333 3.70033 13.0333 4.00033 12.6667 4.00033L12.6667 4.00033Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	<path id="矢量 353" d="M12.6667 6.00033C12.3 6.00033 12 5.70033 12 5.33366L12 3.33366C12 2.96699 12.3 2.66699 12.6667 2.66699C13.0333 2.66699 13.3333 2.96699 13.3333 3.33366L13.3333 5.33366C13.3333 5.70033 13.0333 6.00033 12.6667 6.00033Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+</svg>

src/views/bill/billLayout/assets/icons/icon3_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 349" d="M3.3334 13.3335C2.96673 13.3335 2.66673 13.0335 2.66673 12.6668L2.66673 10.0001C2.66673 9.63348 2.96673 9.33348 3.3334 9.33348C3.70006 9.33348 4.00006 9.63348 4.00006 10.0001L4.00006 12.6668C4.00006 13.0335 3.70006 13.3335 3.3334 13.3335L3.3334 13.3335ZM6.4334 13.3335C6.06673 13.3335 5.76673 13.0335 5.76673 12.6668L5.76673 7.66681C5.76673 7.30014 6.06673 7.00014 6.4334 7.00014C6.80006 7.00014 7.10006 7.30014 7.10006 7.66681L7.10006 12.6668C7.10006 13.0335 6.80006 13.3335 6.4334 13.3335ZM9.56673 13.3335C9.20006 13.3335 8.90006 13.0335 8.90006 12.6668L8.90006 9.00014C8.90006 8.63348 9.20006 8.33348 9.56673 8.33348C9.9334 8.33348 10.2334 8.63348 10.2334 9.00014L10.2334 12.6668C10.2334 13.0335 9.9334 13.3335 9.56673 13.3335L9.56673 13.3335ZM12.6667 13.3335C12.3001 13.3335 12.0001 13.0335 12.0001 12.6668L12.0001 8.00014C12.0001 7.63348 12.3001 7.33348 12.6667 7.33348C13.0334 7.33348 13.3334 7.63348 13.3334 8.00014L13.3334 12.6668C13.3334 13.0335 13.0334 13.3335 12.6667 13.3335ZM3.3334 8.00014C3.16673 8.00014 2.96673 7.93348 2.8334 7.76681C2.60006 7.50014 2.60006 7.06681 2.86673 6.83348L6.5334 3.50014C6.80006 3.26681 7.2334 3.26681 7.46673 3.53348C7.70006 3.80014 7.70006 4.23348 7.4334 4.46681L3.76673 7.80014C3.66673 7.93348 3.50006 8.00014 3.3334 8.00014Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<path id="矢量 350" d="M9.6667 6.99979C9.50003 6.99979 9.3667 6.93312 9.23337 6.83312L6.5667 4.49979C6.30003 4.26645 6.2667 3.83312 6.50003 3.56645C6.73337 3.29979 7.1667 3.26645 7.43337 3.49979L10.1 5.83312C10.3667 6.06645 10.4 6.49979 10.1667 6.76645C10.0334 6.93312 9.8667 6.99979 9.6667 6.99979L9.6667 6.99979Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<path id="矢量 351" d="M9.66667 7.00033C9.5 7.00033 9.33333 6.93366 9.2 6.80033C8.93333 6.53366 8.93333 6.13366 9.2 5.86699L12.2 2.86699C12.4667 2.60033 12.8667 2.60033 13.1333 2.86699C13.4 3.13366 13.4 3.53366 13.1333 3.80033L10.1333 6.80033C10 6.93366 9.83333 7.00033 9.66667 7.00033L9.66667 7.00033Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<path id="矢量 352" d="M12.6667 4.00033L10.6667 4.00033C10.3 4.00033 10 3.70033 10 3.33366C10 2.96699 10.3 2.66699 10.6667 2.66699L12.6667 2.66699C13.0333 2.66699 13.3333 2.96699 13.3333 3.33366C13.3333 3.70033 13.0333 4.00033 12.6667 4.00033L12.6667 4.00033Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<path id="矢量 353" d="M12.6667 6.00033C12.3 6.00033 12 5.70033 12 5.33366L12 3.33366C12 2.96699 12.3 2.66699 12.6667 2.66699C13.0333 2.66699 13.3333 2.96699 13.3333 3.33366L13.3333 5.33366C13.3333 5.70033 13.0333 6.00033 12.6667 6.00033Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/bill/billLayout/assets/icons/icon4.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
+	<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<g id="组合 105">
+		<path id="矩形 142" d="M2.08338 6.66666L1.00001 6.66667C0.447718 6.66667 0 6.21895 0 5.66666L0 1C0 0.447715 0.447715 0 1 0L5.66667 0C6.21895 0 6.66667 0.447715 6.66667 1L6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667L4.58328 6.66667" stroke="rgb(59,65,75)" stroke-width="1.200000" transform="matrix(0.707107,-0.707107,0.707107,0.707107,1.00024,8.07129)" />
+		<path id="矩形 143" d="M2.08338 6.66666L1.00001 6.66667C0.447718 6.66667 0 6.21895 0 5.66666L0 1C0 0.447715 0.447715 0 1 0L5.66667 0C6.21895 0 6.66667 0.447715 6.66667 1L6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667L4.58328 6.66667" stroke="rgb(59,65,75)" stroke-width="1.200000" transform="matrix(0.707107,-0.707107,-0.707107,-0.707107,10.4282,12.7852)" />
+	</g>
+</svg>

src/views/bill/billLayout/assets/icons/icon4_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
+	<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<g id="组合 105">
+		<path id="矩形 142" d="M2.08338 6.66666L1.00001 6.66667C0.447718 6.66667 0 6.21895 0 5.66666L0 1C0 0.447715 0.447715 0 1 0L5.66667 0C6.21895 0 6.66667 0.447715 6.66667 1L6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667L4.58328 6.66667" stroke="rgb(5,95,194)" stroke-width="1.200000" transform="matrix(0.707107,-0.707107,0.707107,0.707107,1.00024,8.07129)" />
+		<path id="矩形 143" d="M2.08338 6.66666L1.00001 6.66667C0.447718 6.66667 0 6.21895 0 5.66666L0 1C0 0.447715 0.447715 0 1 0L5.66667 0C6.21895 0 6.66667 0.447715 6.66667 1L6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667L4.58328 6.66667" stroke="rgb(5,95,194)" stroke-width="1.200000" transform="matrix(0.707107,-0.707107,-0.707107,-0.707107,10.4282,12.7852)" />
+	</g>
+</svg>

src/views/bill/billLayout/assets/icons/icon5.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 1651" d="M10.0503 2C10.3384 2 10.619 2.09657 10.852 2.27586C11.0851 2.45516 11.2585 2.70798 11.3475 2.99809C11.4366 3.28819 11.4366 3.6007 11.3475 3.8908C11.2585 4.18091 11.0851 4.43373 10.852 4.61303C10.619 4.79232 10.3384 4.88889 10.0503 4.88889L5.9583 4.88889C5.69558 4.88873 5.43848 4.80822 5.21793 4.65703C4.99737 4.50585 4.82274 4.29043 4.71502 4.03667C4.35984 4.08328 4.0252 4.23849 3.752 4.48332C3.4788 4.72814 3.27889 5.05197 3.17673 5.41519C3.07456 5.77842 3.07456 6.1653 3.17673 6.52853C3.27889 6.89176 3.4788 7.21558 3.752 7.46041C4.0252 7.70523 4.35984 7.86044 4.71502 7.90706C4.82284 7.65343 4.99751 7.43816 5.21806 7.28711C5.43861 7.13606 5.69565 7.05566 5.9583 7.05556L10.0503 7.05556C10.3175 7.05563 10.5789 7.13883 10.8019 7.29483C11.0248 7.45084 11.1996 7.67276 11.3045 7.93306C11.8894 7.98317 12.4467 8.21802 12.9042 8.60722C13.3618 8.99642 13.6985 9.52206 13.8708 10.1161C14.0431 10.7102 14.0431 11.3454 13.8708 11.9394C13.6985 12.5335 13.3618 13.0591 12.9042 13.4483C12.4467 13.8375 11.8894 14.0724 11.3045 14.1225C11.1996 14.3828 11.0248 14.6047 10.8019 14.7607C10.5789 14.9167 10.3175 14.9999 10.0503 15L5.9583 15C5.71881 15.0001 5.48352 14.9334 5.27608 14.8067C5.06865 14.6799 4.89638 14.4976 4.77661 14.2779C4.65684 14.0583 4.59378 13.8092 4.59378 13.5556C4.59378 13.3019 4.65684 13.0528 4.77661 12.8332C4.89638 12.6136 5.06865 12.4312 5.27608 12.3044C5.48352 12.1777 5.71881 12.111 5.9583 12.1111L10.0503 12.1111C10.6041 12.1111 11.0794 12.4607 11.2929 12.9626C11.6488 12.9171 11.9845 12.7624 12.2585 12.5177C12.5326 12.273 12.7333 11.9488 12.8358 11.585C12.9384 11.2212 12.9384 10.8336 12.8358 10.4698C12.7333 10.106 12.5326 9.78186 12.2585 9.53714C11.9845 9.29241 11.6488 9.13778 11.2929 9.09222C11.1853 9.34593 11.0108 9.56132 10.7904 9.71251C10.5699 9.86369 10.3129 9.94423 10.0503 9.94444L5.9583 9.94444C5.69087 9.94445 5.42933 9.86121 5.20622 9.70506C4.9831 9.54892 4.80826 9.32676 4.70342 9.06622C4.11732 9.01784 3.55849 8.78394 3.09952 8.39491C2.64055 8.00587 2.30265 7.47968 2.12971 6.88468C1.95676 6.28967 1.95676 5.65334 2.12971 5.05833C2.30265 4.46332 2.64055 3.93713 3.09952 3.54809C3.55849 3.15906 4.11732 2.92516 4.70342 2.87678C4.80847 2.61651 4.9834 2.39465 5.2065 2.23878C5.4296 2.0829 5.69102 1.99987 5.9583 2L10.0503 2Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+</svg>

src/views/bill/billLayout/assets/icons/icon5_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 1651" d="M10.0503 2C10.3384 2 10.619 2.09657 10.852 2.27586C11.0851 2.45516 11.2585 2.70798 11.3475 2.99809C11.4366 3.28819 11.4366 3.6007 11.3475 3.8908C11.2585 4.18091 11.0851 4.43373 10.852 4.61303C10.619 4.79232 10.3384 4.88889 10.0503 4.88889L5.9583 4.88889C5.69558 4.88873 5.43848 4.80822 5.21793 4.65703C4.99737 4.50585 4.82274 4.29043 4.71502 4.03667C4.35984 4.08328 4.0252 4.23849 3.752 4.48332C3.4788 4.72814 3.27889 5.05197 3.17673 5.41519C3.07456 5.77842 3.07456 6.1653 3.17673 6.52853C3.27889 6.89176 3.4788 7.21558 3.752 7.46041C4.0252 7.70523 4.35984 7.86044 4.71502 7.90706C4.82284 7.65343 4.99751 7.43816 5.21806 7.28711C5.43861 7.13606 5.69565 7.05566 5.9583 7.05556L10.0503 7.05556C10.3175 7.05563 10.5789 7.13883 10.8019 7.29483C11.0248 7.45084 11.1996 7.67276 11.3045 7.93306C11.8894 7.98317 12.4467 8.21802 12.9042 8.60722C13.3618 8.99642 13.6985 9.52206 13.8708 10.1161C14.0431 10.7102 14.0431 11.3454 13.8708 11.9394C13.6985 12.5335 13.3618 13.0591 12.9042 13.4483C12.4467 13.8375 11.8894 14.0724 11.3045 14.1225C11.1996 14.3828 11.0248 14.6047 10.8019 14.7607C10.5789 14.9167 10.3175 14.9999 10.0503 15L5.9583 15C5.71881 15.0001 5.48352 14.9334 5.27608 14.8067C5.06865 14.6799 4.89638 14.4976 4.77661 14.2779C4.65684 14.0583 4.59378 13.8092 4.59378 13.5556C4.59378 13.3019 4.65684 13.0528 4.77661 12.8332C4.89638 12.6136 5.06865 12.4312 5.27608 12.3044C5.48352 12.1777 5.71881 12.111 5.9583 12.1111L10.0503 12.1111C10.6041 12.1111 11.0794 12.4607 11.2929 12.9626C11.6488 12.9171 11.9845 12.7624 12.2585 12.5177C12.5326 12.273 12.7333 11.9488 12.8358 11.585C12.9384 11.2212 12.9384 10.8336 12.8358 10.4698C12.7333 10.106 12.5326 9.78186 12.2585 9.53714C11.9845 9.29241 11.6488 9.13778 11.2929 9.09222C11.1853 9.34593 11.0108 9.56132 10.7904 9.71251C10.5699 9.86369 10.3129 9.94423 10.0503 9.94444L5.9583 9.94444C5.69087 9.94445 5.42933 9.86121 5.20622 9.70506C4.9831 9.54892 4.80826 9.32676 4.70342 9.06622C4.11732 9.01784 3.55849 8.78394 3.09952 8.39491C2.64055 8.00587 2.30265 7.47968 2.12971 6.88468C1.95676 6.28967 1.95676 5.65334 2.12971 5.05833C2.30265 4.46332 2.64055 3.93713 3.09952 3.54809C3.55849 3.15906 4.11732 2.92516 4.70342 2.87678C4.80847 2.61651 4.9834 2.39465 5.2065 2.23878C5.4296 2.0829 5.69102 1.99987 5.9583 2L10.0503 2Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/bill/billLayout/index.vue

@@ -3,6 +3,7 @@
 		<!-- 导航菜单 -->
 		<div class="layout-main">
 			<div class="header-main">
+				
 				<div class="layout-main-header">
 				<div class="layout-main-header-left-box">
 					<div class="left-box-top">
@@ -139,14 +140,14 @@ import { getBillInfoGlobal, getBillFullText } from "@/api/bill";
 
 const route = useRoute();
 
-import icon1 from "./assets/icons/icon1.png";
-import icon1Active from "./assets/icons/icon1_active.png";
-import icon2 from "./assets/icons/icon2.png";
-import icon2Active from "./assets/icons/icon2_active.png";
-import icon3 from "./assets/icons/icon3.png";
-import icon3Active from "./assets/icons/icon3_active.png";
-import icon4 from "./assets/icons/icon4.png";
-import icon4Active from "./assets/icons/icon4_active.png";
+import icon1 from "./assets/icons/icon1.svg";
+import icon1Active from "./assets/icons/icon1_active.svg";
+import icon2 from "./assets/icons/icon2.svg";
+import icon2Active from "./assets/icons/icon2_active.svg";
+import icon3 from "./assets/icons/icon3.svg";
+import icon3Active from "./assets/icons/icon3_active.svg";
+import icon4 from "./assets/icons/icon4.svg";
+import icon4Active from "./assets/icons/icon4_active.svg";
 import USALogo from "./assets/images/USA-logo.png";
 
 
@@ -280,31 +281,36 @@ onMounted(() => {
 				.left-box-top {
 					height: 64px;
 					display: flex;
+					align-items: center;
+					justify-content: left;
 					.icon {
 						width: 64px;
 						height: 64px;
 					}
 					.info {
-						margin-left: 9px;
+						margin-left: 8px;
+						display: flex;
+						align-items: left;
+						flex-direction: column;
 						.info-box1 {
 							color: rgba(59, 65, 75, 1);
 							font-family: "Microsoft YaHei";
 							font-size: 20px;
 							font-weight: 600;
-							line-height: 22px;
+							// line-height: 22px;
 							letter-spacing: 0px;
 							text-align: left;
-							margin-top: 5px;
+							// margin-top: 5px;
 						}
 						.info-box2 {
-							margin-top: 5px;
+							margin-top: 4px;
 							// height: 22px;
-							line-height: 22px;
+							// line-height: 22px;
 							color: rgba(132, 136, 142, 1);
 							font-family: "Microsoft YaHei";
 							font-size: 14px;
 							font-weight: 400;
-							line-height: 22px;
+							// line-height: 22px;
 							letter-spacing: 0px;
 							text-align: left;
 							display: -webkit-box;
@@ -323,7 +329,7 @@ onMounted(() => {
 						display: flex;
 						margin-right: 32px;
 						margin-top: 3px;
-						height: 35px;
+						height: 36px;
 						cursor: pointer;
 						// &:hover{
 						//   .name {
@@ -361,10 +367,23 @@ onMounted(() => {
 			}
 			.layout-main-header-right-box {
 				width: 600px;
+
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				align-items: right;
+				// margin-right: 150px;
+				// margin-top: 19px;
 				.right-box-top {
+
+					height: 64px;
+					display: flex;
+						align-items: right;
+						flex-direction: column;
+						justify-content: center;
 					.time {
-						height: 24px;
-						line-height: 24px;
+						// height: 24px;
+						// line-height: 24px;
 						color: rgba(95, 101, 108, 1);
 						font-family: Microsoft YaHei;
 						font-size: 16px;
@@ -374,8 +393,9 @@ onMounted(() => {
 						text-align: right;
 					}
 					.name {
-						height: 24px;
-						line-height: 24px;
+						// height: 24px;
+						// line-height: 24px;
+						margin-top: 4px;
 						color: rgba(95, 101, 108, 1);
 						font-family: Microsoft YaHei;
 						font-size: 16px;
@@ -386,7 +406,7 @@ onMounted(() => {
 					}
 				}
 				.right-box-bottom {
-					margin-top: 24px;
+					margin-bottom: 8px;
 					display: flex;
 					justify-content: flex-end;
 					gap: 8px;

src/views/bill/deepDig/index.vue

@@ -70,7 +70,7 @@ const handleClickLeftSiderBtn = (item,index) => {
   .sider {
     width: 160px;
     position: absolute;
-    top: 0;
+    top: 8px;
     left: -160px;
     .sider-btn {
       margin-top: 20px;

src/views/bill/deepDig/processOverview/index.vue

@@ -682,9 +682,10 @@ onMounted(() => {
 		}
   }
   .main {
-    margin-left: 59px;
-    height: 740px;
-    padding: 3px 10px 60px 10px;
+    margin-left: 24px;
+    margin-right: 24px;
+    height: 790px;
+    padding: 3px 10px 0px 10px;
     overflow-x: auto;
     overflow-y: hidden;
 

src/views/bill/index.vue

@@ -170,7 +170,7 @@ onMounted(() => {});
     .home-sider {
       width: 160px;
       position: absolute;
-      top: 0;
+      top: 8px;
       left: -160px;
       .sider-btn {
         margin-top: 20px;

src/views/bill/introdoction/STimeline.vue

@@ -326,7 +326,7 @@ export default {
 		.date {
 			color: rgb(5, 95, 194);
 			font-weight: 700;
-			font-size: 14px;
+			font-size: 16px;
 			line-height: 22px;
 			margin-bottom: 0px; 
 			margin-top: 6px;
@@ -335,7 +335,7 @@ export default {
 		.title {
 			color: rgb(59, 65, 75);
 			font-weight: 700;
-			font-size: 14px;
+			font-size: 16px;
 			line-height: 22px;
 			margin-bottom: 0px;
             white-space: nowrap;      /* Keep text on one line */
@@ -347,7 +347,7 @@ export default {
 
 		.votes {
 			color: rgb(95, 101, 108);
-			font-size: 14px;
+			font-size: 16px;
             font-weight: 400;
             line-height: 22px;
 		}

src/views/bill/introdoction/assets/images/right-main-box3-header-icon.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="21J日程 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 354" d="M10.7802 8.04334L10.1216 7.38477L7.13611 10.3703L5.84563 9.0798L5.18705 9.73838L7.13953 11.6909L10.7802 8.04334L10.7802 8.04334ZM12.2747 3.10861L11.6729 3.10861L11.6729 1.875L10.4392 1.875L10.4392 3.10861L5.56139 3.10861L5.56139 1.875L4.32777 1.875L4.32777 3.10861L3.72594 3.10861C3.38154 3.10861 3.09074 3.22906 2.84998 3.46641C2.60922 3.70717 2.49219 3.99797 2.49219 4.34236L2.49219 12.8913C2.49219 13.2356 2.6125 13.5264 2.84998 13.7672C3.09074 14.008 3.38154 14.125 3.72594 14.125L12.2748 14.125C12.6192 14.125 12.91 14.0046 13.1508 13.7672C13.3915 13.5264 13.5086 13.2356 13.5086 12.8913L13.5086 4.34236C13.5086 3.99797 13.3883 3.70717 13.1508 3.46641C12.9099 3.22893 12.6191 3.10861 12.2747 3.10861L12.2747 3.10861ZM12.2747 12.8911L3.72594 12.8911L3.72594 6.17768L12.2748 6.17768L12.2748 12.8911L12.2747 12.8911Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/bill/introdoction/index.vue

@@ -222,7 +222,7 @@
 				<div class="right-main-box3">
 					<div class="right-main-box3-header">
 						<div class="icon">
-							<img src="./assets/images/right-main-box3-header-icon.png" alt="" />
+							<img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
 						</div>
 						<div class="title">人物动态</div>
 					</div>
@@ -231,7 +231,7 @@
 							<el-timeline-item
 								:timestamp="item.newsDate"
 								placement="top"
-								v-for="(item, index) in curPerson.newsList"
+								v-for="(item, index) in curPerson.newsList?.slice(0,3)"
 								:key="index"
 							>
 								<div class="timeline-content">
@@ -519,11 +519,14 @@ onMounted(() => {
 				height: 394px;
 				.box1-left {
 					margin-left: 23px;
-					width: 247px;
-					height: 350px;
+					width: 280px;
+					height: 340px;
+					border-radius: 4px;
+					border: 1px solid var(--border-black-5);
 					img {
 						width: 100%;
 						height: 100%;
+						object-fit: cover;
 					}
 				}
 				.box1-right {
@@ -696,7 +699,6 @@ onMounted(() => {
 				width: 100%;
 				.box2-main-center {
 					margin-left: 23px;
-					border-top: 1px solid rgba(243, 243, 244, 1);
 					width: calc(100% - 46px); // Subtract margin
 					height: 100%;
 					// background: orange;
@@ -901,7 +903,7 @@ onMounted(() => {
 							left: 18px;
 							width: 48px;
 							height: 48px;
-							border-radius: 16px;
+							border-radius: 24px;
 							background: rgba(255, 255, 255, 0.9);
 							box-sizing: border-box;
 							padding: 4px;
@@ -916,7 +918,7 @@ onMounted(() => {
 							right: 18px;
 							width: 48px;
 							height: 48px;
-							border-radius: 16px;
+							border-radius: 24px;
 							background: rgba(255, 255, 255, 0.9);
 							box-sizing: border-box;
 							padding: 4px;
@@ -931,6 +933,7 @@ onMounted(() => {
 
 						.info-right-title {
 							height: 22px;
+							margin-bottom: 24px;
 							color: var(--color-main-active);
 							font-family: Microsoft YaHei;
 							font-size: 16px;
@@ -1010,7 +1013,10 @@ onMounted(() => {
 					margin-left: 22px;
 					margin-top: 24px;
 					display: flex;
+					align-items: center;
 					.icon {
+						width: 16px;
+						height: 16px;
 					}
 					.title {
 						margin-left: 12px;
@@ -1070,14 +1076,14 @@ onMounted(() => {
 					}
 					.usr-icon1 {
 						position: absolute;
-						bottom: -15px;
+						// bottom: -15px;
 						left: 55px;
 						width: 48px;
 						height: 48px;
 						border-radius: 24px;
 						background: rgba(255, 255, 255, 0.9);
 						box-sizing: border-box;
-						padding: 4px;
+						padding: 0px;
 						img {
 							width: 100%;
 							height: 100%;
@@ -1085,14 +1091,14 @@ onMounted(() => {
 					}
 					.usr-icon2 {
 						position: absolute;
-						bottom: -15px;
+						// bottom: -15px;
 						right: 55px;
 						width: 48px;
 						height: 48px;
 						border-radius: 24px;
 						background: rgba(255, 255, 255, 0.9);
 						box-sizing: border-box;
-						padding: 4px;
+						padding: 0px;
 						img {
 							width: 100%;
 							height: 100%;
@@ -1244,21 +1250,30 @@ onMounted(() => {
 :deep(.el-steps--simple) {
 	padding: 6px 10px;
 }
+:deep(.el-timeline) {
+	padding: 8px 0px 0px 25px !important;
+}
+:deep(.el-timeline-item__node){
+	border: 4px solid var(--color-main-active) !important;
+	background-color: #fff;
+}
+
 :deep(.el-timeline-item) {
-	padding-bottom: 5px !important;
+	padding-bottom: 12px !important;
 }
 :deep(.el-timeline-item__timestamp) {
 	color: var(--color-main-active) !important;
 	font-family: Microsoft YaHei !important;
 	font-size: 16px !important;
 	font-weight: 600 !important;
+	padding-top: 0px  !important;
 }
 .timeline-content {
-	color: rgba(132, 136, 142, 1);
+	color: var(--text-primary-65-color);
 	font-family: Microsoft YaHei;
 	font-size: 14px;
 	font-weight: 400;
-	line-height: 22px;
+	line-height: 26px;
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 3;
@@ -1266,7 +1281,7 @@ onMounted(() => {
 	text-overflow: ellipsis;
 }
 .timeline-content1 {
-	color: rgba(132, 136, 142, 1);
+	color: var(--text-primary-65-color);
 	font-family: Microsoft YaHei;
 	font-size: 14px;
 	font-weight: 400;

src/views/bill/template/index.vue

@@ -15,7 +15,7 @@
 				</div>
 			</div>
 			<div class="left-top">
-				<el-select v-model="curBill" placeholder="请选择" style="width: 240px" @change="handleChangeBill">
+				<el-select v-model="curBill" placeholder="请选择" @change="handleChangeBill">
 					<el-option v-for="item in billList" :key="item.id" :label="item.label" :value="item.value" />
 				</el-select>
 				<el-checkbox
@@ -26,10 +26,10 @@
 					@change="handleChangeCheckbox"
 				/>
 				<div class="search" style="width: 240px; margin-left: 475px">
-					<el-input v-model="searchValue" style="width: 240px" placeholder="搜索条款" />
-					<div class="icon">
-						<img src="./assets/icons/search-icon.png" alt="" />
-					</div>
+					<el-input v-model="searchValue"  placeholder="搜索条款" :suffix-icon="Search" clearable/>
+					<!-- <div class="icon"> -->
+						<!-- <img src="./assets/icons/search-icon.png" alt="" /> -->
+					<!-- </div> -->
 				</div>
 			</div>
 			<div class="left-main">
@@ -404,25 +404,22 @@ onMounted(async () => {
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 		background: rgba(255, 255, 255, 1);
 		.left-top {
-			height: 45px;
-			margin-top: 2px;
-			margin-left: 22px;
-			margin-right: 24px;
+			// height: 45px;
+
+			margin: 0px 24px 8px 24px;
 			display: flex;
-			.search {
-				position: relative;
-				.icon {
-					position: absolute;
-					right: 10px;
-					top: 5px;
-					width: 16px;
-					height: 16px;
-					img {
-						width: 100%;
-						height: 100%;
-					}
-				}
+			align-items: center;
+			:deep(.el-input){
+				width: 240px;
+				border-radius: 4px;
+				border: 1px solid var(--border-black-10);
+			}
+			:deep(.el-select){
+				width: 240px;
+				border-radius: 4px;
+				// border: 1px solid var(--border-black-10);
 			}
+			
 		}
 		.left-main {
 			height: 660px;
@@ -580,8 +577,10 @@ onMounted(async () => {
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background: rgba(255, 255, 255, 1);
 			.right-box1-main {
-				width: 520px;
-				height: 310px;
+				
+				width: 100%;
+				height: calc(100% - 100px);
+				padding: 16px;
 			}
 			.right-box1-footer {
 				width: 493px;
@@ -638,8 +637,9 @@ onMounted(async () => {
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background: rgba(255, 255, 255, 1);
 			.right-box2-main {
-				width: 520px;
-				height: 310px;
+				width: 100%;
+				height: calc(100% - 100px);
+				padding: 16px;
 			}
 			.right-box2-footer {
 				width: 493px;

src/views/decree/decreeHome/assets/images/box1-left.svg

+<svg viewBox="0 0 24 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="48.000000" fill="none" customFrame="#000000">
+	<rect id="左右切换按钮" width="24.000000" height="48.000000" x="0.000000" y="0.000000" />
+	<path id="矩形 161" d="M20 0C22.2091 0 24 1.79086 24 4L24 44C24 46.2091 22.2091 48 20 48L0 48L0 0L20 0Z" fill="rgb(231,243,255)" fill-rule="evenodd" />
+	<path id="矢量 466" d="M14 18L8 24L14 30" stroke="rgb(5,95,194)" stroke-width="1.500000" />
+</svg>

src/views/decree/decreeHome/assets/images/box1-right.svg

+<svg viewBox="0 0 24 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="48.000000" fill="none">
+	<rect id="左右切换按钮" width="24.000000" height="48.000000" x="0.000000" y="0.000000" />
+	<path id="矩形 161" d="M24 0L24 48L4 48C1.79086 48 0 46.2091 0 44L0 4C0 1.79086 1.79086 0 4 0L24 0Z" fill="rgb(231,243,255)" fill-rule="evenodd" />
+	<path id="矢量 466" d="M6 0L0 6L6 12" stroke="rgb(5,95,194)" stroke-width="1.500000" transform="matrix(-1,0,0,1,16,18)" />
+</svg>

src/views/decree/decreeHome/index.vue

 <template>
 	<div class="home-wrapper">
 		<div class="search-header" v-show="isShow">
-			<div class="home-main-header-center">
-				<el-input
-					v-model="searchDecreeText"
-					@keyup.enter="handleSearch"
-					style="width: 680px; height: 100%"
-					placeholder="搜索科技政令"
-				/>
-				<div class="search">
-					<div class="search-icon">
-						<img src="./assets/images/search-icon.png" alt="" />
+			<div class="search-header-container">
+
+				<div class="home-main-header-center">
+					<el-input v-model="searchDecreeText" @keyup.enter="handleSearch" style="width: 680px; height: 100%"
+						placeholder="搜索科技政令" />
+					<div class="search">
+						<div class="search-icon">
+							<img src="./assets/images/search-icon.png" alt="" />
+						</div>
+						<div class="search-text" @click="handleSearch">搜索</div>
 					</div>
-					<div class="search-text" @click="handleSearch">搜索</div>
 				</div>
-			</div>
-			<div class="home-main-header-btn-box">
-				<div class="btn" @click="handleToPosi('position1')">
-					<div class="btn-text">{{ "最新动态" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+				<div class="home-main-header-btn-box">
+					<div class="btn" @click="handleToPosi('position1')">
+						<div class="btn-text">{{ "最新动态" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position2')">
-					<div class="btn-text">{{ "资讯要闻" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position2')">
+						<div class="btn-text">{{ "资讯要闻" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position3')">
-					<div class="btn-text">{{ "数据总览" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position3')">
+						<div class="btn-text">{{ "数据总览" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position4')">
-					<div class="btn-text">{{ "资源库" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position4')">
+						<div class="btn-text">{{ "资源库" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
 				</div>
+
 			</div>
 		</div>
 		<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
+			<div class="home-top-bg"></div>
 			<div class="home-main-header">
-				<div class="home-main-header-center">
-					<el-input
-						v-model="searchDecreeText"
-						@keyup.enter="handleSearch"
-						style="width: 838px; height: 100%"
-						placeholder="搜索政令"
-					/>
+
+				<!-- <div class="home-main-header-top" v-show="!isShow">
+					<div class="header-left">
+						<HeaderMenu></HeaderMenu>
+					</div>
+					<div class="header-right">
+						<headerInfo curTitleName="政令"></headerInfo>
+					</div>
+				</div> -->
+				<div class="home-main-header-center" v-show="!isShow">
+					<el-input v-model="searchDecreeText" @keyup.enter="handleSearch" style="width: 838px; height: 100%"
+						placeholder="搜索政令" />
 					<div class="search">
 						<div class="search-icon">
 							<img src="./assets/images/search-icon.png" alt="" />
@@ -107,7 +113,8 @@
 					</div>
 				</div>
 				<div class="home-main-header-item-box">
-					<div class="item" v-for="(item, index) in govInsList" :key="index" @click="handleToInstitution(item)">
+					<div class="item" v-for="(item, index) in govInsList" :key="index"
+						@click="handleToInstitution(item)">
 						<div class="item-left">
 							<img :src="item.img ? item.img : DefaultIcon2" alt="" />
 						</div>
@@ -121,12 +128,12 @@
 					<div class="box1">
 						<div class="box1-left" @click="handleSwithCurDecree('left')">
 							<div class="icon">
-								<img src="./assets/images/box1-left.png" alt="" />
+								<img src="./assets/images/box1-left.svg" alt="" />
 							</div>
 						</div>
 						<div class="box1-right" @click="handleSwithCurDecree('right')">
 							<div class="icon">
-								<img src="./assets/images/box1-right.png" alt="" />
+								<img src="./assets/images/box1-right.svg" alt="" />
 							</div>
 						</div>
 						<div class="box1-header">
@@ -140,34 +147,29 @@
 								{{ "查看详情 >" }}
 							</div>
 						</div>
-						<el-carousel
-							ref="carouselRef"
-							height="395px"
-							:autoplay="true"
-							:interval="3000"
-							arrow="never"
-							indicator-position="none"
-						>
+						<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
+							indicator-position="none">
 							<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
 								<div class="box1-main">
 									<div class="box1-main-left">
-										<img :src="item.imageUrl" alt="" />
+										<img v-if="item.imageUrl" :src="item.imageUrl" alt="" />
+										<div v-else class="box1-main-left-img-mock">
+											<img class="img-mock-badge-img" src="./assets/images/badge.png">
+											<p class="img-mock-badge-title">行政令</p>
+											<p class="img-mock-badge-title">{{item.name}}</p>
+											<!-- <p class="img-mock-badge-org">The White House</p> -->
+										</div>
 									</div>
 									<div class="box1-main-right">
 										<div class="box1-main-right-title">
 											{{ item.name }}
 										</div>
 										<div class="box1-main-right-info">
-											<div
-												class="tag"
-												:class="{
-													tag1: tag.status == 1,
-													tag2: tag.status == 2,
-													tag3: tag.status == 3
-												}"
-												v-for="(tag, index) in item.industryList"
-												:key="index"
-											>
+											<div class="tag" :class="{
+												tag1: tag.status == 1,
+												tag2: tag.status == 2,
+												tag3: tag.status == 3
+											}" v-for="(tag, index) in item.industryList" :key="index">
 												{{ tag.industryName }}
 											</div>
 										</div>
@@ -201,19 +203,12 @@
 							</div>
 						</div>
 						<div class="box2-main">
-							<div
-								class="box2-main-item"
-								v-for="(item, index) in warningList"
-								:key="index"
-								@click="handleClickToDetail()"
-							>
-								<div
-									class="item-left"
-									:class="{
-										itemLeftStatus3: item.riskLevel === '特别重大',
-										itemLeftStatus2: item.riskLevel === '重大风险'
-									}"
-								>
+							<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"
+								@click="handleClickToDetail()">
+								<div class="item-left" :class="{
+									itemLeftStatus3: item.riskLevel === '特别重大',
+									itemLeftStatus2: item.riskLevel === '重大风险'
+								}">
 									{{ item.riskLevel ? item.riskLevel : "暂无数据" }}
 								</div>
 								<div class="item-right">
@@ -245,12 +240,8 @@
 							</div>
 						</div>
 						<div class="box3-main">
-							<div
-								class="box3-item"
-								v-for="(news, index) in newsList"
-								:key="index"
-								@click="handleToNewsAnalysis(news)"
-							>
+							<div class="box3-item" v-for="(news, index) in newsList" :key="index"
+								@click="handleToNewsAnalysis(news)">
 								<div class="left">
 									<img :src="news.img ? news.img : DefaultIconNews" alt="" />
 								</div>
@@ -264,7 +255,7 @@
 										<template #reference>
 											<div class="right-footer">{{ news.content }}</div>
 										</template>
-									</el-popover> -->
+</el-popover> -->
 								</div>
 							</div>
 						</div>
@@ -277,17 +268,10 @@
 							<div class="header-title">{{ "社交媒体" }}</div>
 						</div>
 						<div class="box4-main">
-							<MessageBubble
-								v-for="(item, index) in messageList"
-								@click="handleClickPerson(item)"
-								@info-click="handleMediaClick(item)"
-								:key="index"
-								:avatar="item.img ? item.img : DefaultIcon1"
-								:name="item.name"
-								:time="item.time"
-								:source="item.source"
-								:content="item.content"
-							/>
+							<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
+								@info-click="handleMediaClick(item)" :key="index"
+								:avatar="item.img ? item.img : DefaultIcon1" :name="item.name" :time="item.time"
+								:source="item.source" :content="item.content" />
 							<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
 								<div class="left" @click="handleClickPerson(item)">
 									<img :src="item.img ? item.img : DefaultIcon1" alt="" />
@@ -314,18 +298,10 @@
 								<div class="box5-header-title">{{ "行政令发布频度" }}</div>
 							</div>
 							<div class="box5-selectbox">
-								<el-select
-									@change="handleBox5YearChange"
-									v-model="box5SelectedYear"
-									placeholder="选择时间"
-									style="width: 120px"
-								>
-									<el-option
-										v-for="item in box5YearList"
-										:key="item.value"
-										:label="item.label"
-										:value="item.value"
-									/>
+								<el-select @change="handleBox5YearChange" v-model="box5SelectedYear" placeholder="选择时间"
+									style="width: 120px">
+									<el-option v-for="item in box5YearList" :key="item.value" :label="item.label"
+										:value="item.value" />
 								</el-select>
 							</div>
 						</div>
@@ -341,18 +317,10 @@
 							</div>
 							<div class="header-title">{{ "政令涉及领域" }}</div>
 							<div class="box6-selectbox">
-								<el-select
-									@change="handleBox6YearChange"
-									v-model="box6SelectedYear"
-									placeholder="选择时间"
-									style="width: 120px"
-								>
-									<el-option
-										v-for="item in box6YearList"
-										:key="item.value"
-										:label="item.label"
-										:value="item.value"
-									/>
+								<el-select @change="handleBox6YearChange" v-model="box6SelectedYear" placeholder="选择时间"
+									style="width: 120px">
+									<el-option v-for="item in box6YearList" :key="item.value" :label="item.label"
+										:value="item.value" />
 								</el-select>
 							</div>
 						</div>
@@ -368,12 +336,8 @@
 							<div class="header-title">{{ "关键行政令" }}</div>
 						</div>
 						<div class="box7-main">
-							<div
-								class="box7-item"
-								v-for="(item, index) in keyDecreeList"
-								:key="index"
-								@click="handleKeyDecree(item)"
-							>
+							<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index"
+								@click="handleKeyDecree(item)">
 								<div class="icon">
 									<img src="./assets/images/warning.png" alt="" />
 								</div>
@@ -429,15 +393,9 @@
 							</div>
 							<div class="select-main">
 								<div class="checkbox-group">
-									<el-checkbox
-										v-for="type in decreeTypeList"
-										:key="type.id"
-										v-model="checkedDecreeType"
-										:label="type.typeId"
-										style="width: 180px"
-										class="filter-checkbox"
-										@change="handleChangeCheckedDecreeType"
-									>
+									<el-checkbox v-for="type in decreeTypeList" :key="type.id"
+										v-model="checkedDecreeType" :label="type.typeId" style="width: 180px"
+										class="filter-checkbox" @change="handleChangeCheckedDecreeType">
 										{{ type.typeName }}
 									</el-checkbox>
 								</div>
@@ -450,15 +408,9 @@
 							</div>
 							<div class="select-main">
 								<div class="checkbox-group">
-									<el-checkbox
-										v-for="cate in govInsList"
-										:key="cate.id"
-										v-model="checkedGovIns"
-										:label="cate.id"
-										style="width: 180px"
-										class="filter-checkbox"
-										@change="handleChangeCheckedGovIns"
-									>
+									<el-checkbox v-for="cate in govInsList" :key="cate.id" v-model="checkedGovIns"
+										:label="cate.id" style="width: 180px" class="filter-checkbox"
+										@change="handleChangeCheckedGovIns">
 										{{ cate.name }}
 									</el-checkbox>
 								</div>
@@ -471,14 +423,8 @@
 							</div>
 							<div class="select-main">
 								<div class="checkbox-group">
-									<el-checkbox
-										v-for="time in pubTime"
-										:key="time.id"
-										v-model="activePubTime"
-										:label="time.id"
-										style="width: 100px"
-										class="filter-checkbox"
-									>
+									<el-checkbox v-for="time in pubTime" :key="time.id" v-model="activePubTime"
+										:label="time.id" style="width: 100px" class="filter-checkbox">
 										{{ time.name }}
 									</el-checkbox>
 								</div>
@@ -491,13 +437,8 @@
 							</div>
 							<div class="select-main select-main1">
 								<div class="checkbox-group">
-									<el-checkbox
-										v-for="area in areaList"
-										:key="area.id"
-										v-model="activeAreaList"
-										:label="area.id"
-										style="width: 100px"
-									>
+									<el-checkbox v-for="area in areaList" :key="area.id" v-model="activeAreaList"
+										:label="area.id" style="width: 100px">
 										{{ area.name }}
 									</el-checkbox>
 								</div>
@@ -512,14 +453,11 @@
 							<div class="title">{{ "政令库" }}</div>
 						</div>
 						<div class="content-box" v-show="curDecreeList">
-							<div
-								class="main-item"
-								v-for="(item, index) in curDecreeList"
-								:key="index"
-								@click="handleClickDecree(item)"
-							>
+							<div class="main-item" v-for="(item, index) in curDecreeList" :key="index"
+								@click="handleClickDecree(item)">
 								<div class="main-item-left">
-									<div class="left-left">{{ item.time }}</div>
+									
+									<div class="left-left">{{ item.time.split('-')[0] }}<br>{{ item.time.split('-')[1]}}月{{ item.time.split('-')[2] }}日</div>
 									<div class="left-right">
 										<div class="icon">
 											<img :src="item.orgImage ? item.orgImage : DefaultIcon2" alt="" />
@@ -555,14 +493,9 @@
 								{{ `共 ${totalDecreesNum} 项` }}
 							</div>
 							<div class="footer-right">
-								<el-pagination
-									@current-change="handleCurrentChange"
-									:pageSize="10"
-									:current-page="currentPage"
-									background
-									layout="prev, pager, next"
-									:total="totalDecreesNum"
-								/>
+								<el-pagination @current-change="handleCurrentChange" :pageSize="10"
+									:current-page="currentPage" background layout="prev, pager, next"
+									:total="totalDecreesNum" />
 							</div>
 						</div>
 					</div>
@@ -673,7 +606,7 @@ const govInsList = ref([
 ]);
 const checkedGovIns = ref([]);
 
-const handleChangeCheckedGovIns = val => {};
+const handleChangeCheckedGovIns = val => { };
 
 const handleGetDepartmentList = async () => {
 	try {
@@ -894,7 +827,7 @@ const handleGetMessage = async () => {
 				remarksId: item.remarksId
 			};
 		});
-	} catch (error) {}
+	} catch (error) { }
 };
 handleGetMessage();
 
@@ -952,7 +885,7 @@ const handleClickPerson = async item => {
 			ElMessage.warning("找不到当前人员的类型值！");
 			return;
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 // 行政令发布频度
@@ -1106,7 +1039,7 @@ const handleGetKeyDecree = async () => {
 				};
 			});
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 handleGetKeyDecree();
@@ -1193,7 +1126,7 @@ const handleGetAreaList = async () => {
 			});
 			console.log("areaList", areaList.value);
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 // 政令类型
@@ -1207,7 +1140,7 @@ const handleGetDecreeTypeList = async () => {
 		if (res.code === 200 && res.data) {
 			decreeTypeList.value = res.data;
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const handleChangeCheckedDecreeType = () => {
@@ -1341,32 +1274,43 @@ onMounted(async () => {
 :deep(.el-input__wrapper) {
 	box-shadow: none;
 }
+
 .home-wrapper {
 	width: 100%;
 	height: 100%;
 	position: relative;
 	overflow-y: hidden;
+
 	.search-header {
 		width: 100%;
-		height: 144px;
+		// height: 144px;
 		background: #fff;
 		overflow: hidden;
-		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.3);
+		box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+
+		.search-header-container {
+			width: 1600px;
+			margin: 0 auto;
+			padding: 16px 0px 16px 0px;
+		}
+
 		.home-main-header-center {
-			margin-top: 20px;
-			margin-left: 200px;
+			// margin-top: 20px;
+			// margin-left: 200px;
 			width: 800px;
 			height: 48px;
 			border-radius: 10px;
-			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+			// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+			border: 1px solid var(--color-primary-35);
 			background: rgba(255, 255, 255, 1);
 			box-sizing: border-box;
 			padding: 1px;
 			position: relative;
-			border: 1px solid transparent;
+
 			&:hover {
 				border: 1px solid var(--color-main-active);
 			}
+
 			.search {
 				position: absolute;
 				right: -1px;
@@ -1379,14 +1323,17 @@ onMounted(async () => {
 				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;
@@ -1398,42 +1345,49 @@ onMounted(async () => {
 				}
 			}
 		}
+
 		.home-main-header-btn-box {
-			margin-top: 20px;
-			margin-left: 200px;
+			margin-top: 16px;
+			// margin-left: 200px;
 			display: flex;
 			gap: 16px;
+
 			.btn {
 				display: flex;
 				align-items: center;
 				gap: 9px;
-				width: 160px;
-				height: 48px;
+				width: 140px;
+				height: 36px;
 				border: 1px solid #aed6ff;
 				box-sizing: border-box;
 				border-radius: 24px;
 				background: #e7f3ff;
 				cursor: pointer;
 				position: relative;
+
 				&:hover {
 					background: #cae3fc;
 				}
+
 				.btn-text {
+
 					width: 80px;
 					color: var(--color-main-active);
 					font-family: Microsoft YaHei;
 					font-size: 20px;
 					font-weight: 400;
 					line-height: 48px;
-					margin-left: 36px;
+					margin-left: 24px;
 					text-align: center;
 				}
+
 				.btn-icon {
 					position: absolute;
-					top: 16px;
+					top: 10px;
 					right: 19px;
 					width: 6px;
 					height: 12px;
+
 					img {
 						width: 100%;
 						height: 100%;
@@ -1442,21 +1396,35 @@ onMounted(async () => {
 			}
 		}
 	}
+
 	.scrollHomeMain {
 		width: 100%;
 		height: calc(100% - 144px);
 		overflow-y: auto;
 	}
+
 	.home-main {
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
-		background: url("./assets/images/background.png");
-		background-size: 100% 100%;
+		// background: url("./assets/images/background.png");
+		// background-size: 100% 100%;
+
+		.home-top-bg {
+			background: url("./assets/images/background.png"), linear-gradient(180.00deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
+			background-size: 100% 100%;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
+
 		.home-main-header {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+
 			.home-main-header-top {
 				width: 100%;
 				height: 64px;
@@ -1466,20 +1434,23 @@ onMounted(async () => {
 				justify-content: space-between;
 				padding: 0 160px;
 			}
+
 			.home-main-header-center {
 				margin-top: 48px;
 				width: 960px;
 				height: 48px;
 				border-radius: 10px;
 				box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
-				background: rgba(255, 255, 255, 1);
+				background: rgba(255, 255, 255, 0.65);
 				box-sizing: border-box;
 				padding: 1px;
 				position: relative;
-				border: 1px solid transparent;
+				border: 1px solid rgba(255, 255, 255, 1);
+
 				&:hover {
 					border: 1px solid var(--color-main-active);
 				}
+
 				.search {
 					position: absolute;
 					right: -1px;
@@ -1492,14 +1463,17 @@ onMounted(async () => {
 					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;
@@ -1511,6 +1485,7 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.home-main-header-footer {
 				margin-top: 38px;
 				width: 960px;
@@ -1519,9 +1494,11 @@ onMounted(async () => {
 				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);
@@ -1530,6 +1507,7 @@ onMounted(async () => {
 						font-weight: 700;
 						line-height: 22px;
 					}
+
 					.item-footer {
 						margin-top: 10px;
 						height: 30px;
@@ -1541,12 +1519,14 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.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;
@@ -1559,9 +1539,11 @@ onMounted(async () => {
 					background: #e7f3ff;
 					cursor: pointer;
 					position: relative;
+
 					&:hover {
 						background: #cae3fc;
 					}
+
 					.btn-text {
 						width: 80px;
 						color: var(--color-main-active);
@@ -1572,12 +1554,14 @@ onMounted(async () => {
 						margin-left: 36px;
 						text-align: center;
 					}
+
 					.btn-icon {
 						position: absolute;
 						top: 16px;
 						right: 19px;
 						width: 6px;
 						height: 12px;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -1585,39 +1569,45 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.home-main-header-item-box {
 				margin-top: 48px;
 				margin-bottom: 64px;
 				width: 1600px;
 				display: flex;
 				flex-wrap: wrap;
+
 				.item {
 					width: 254px;
 					height: 72px;
 					display: flex;
 					box-sizing: border-box;
+					background: rgba(255, 255, 255, 0.65);
 					border: 1px solid rgba(255, 255, 255, 1);
 					border-radius: 10px;
 					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-					background: rgba(255, 255, 255, 0.65);
 					align-items: center;
 					gap: 17px;
 					margin: 0 6px 16px 6px;
 					cursor: pointer;
 					transition: transform 0.3s ease, box-shadow 0.3s ease;
+
 					&:hover {
 						transform: translateY(-3px);
 						box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 					}
+
 					.item-left {
 						margin-left: 24px;
 						width: 48px;
 						height: 48px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.item-right {
 						width: 140px;
 						color: rgba(59, 65, 75, 1);
@@ -1629,13 +1619,16 @@ onMounted(async () => {
 				}
 			}
 		}
+
 		.home-main-center {
 			margin-top: 34px;
+
 			.center-top {
 				height: 450px;
 				display: flex;
 				justify-content: center;
 				gap: 20px;
+
 				.box1 {
 					width: 1064px;
 					height: 450px;
@@ -1644,6 +1637,7 @@ onMounted(async () => {
 					background: #fff;
 					box-sizing: border-box;
 					position: relative;
+
 					.box1-left {
 						position: absolute;
 						z-index: 9999;
@@ -1651,20 +1645,22 @@ onMounted(async () => {
 						top: 200px;
 						width: 24px;
 						height: 48px;
-						background: #e7f1ff;
 						display: flex;
 						justify-content: center;
 						align-items: center;
 						cursor: pointer;
+
 						.icon {
-							width: 11px;
-							height: 18px;
+							width: 24px;
+							height: 48px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
 					}
+
 					.box1-right {
 						position: absolute;
 						z-index: 9999;
@@ -1672,37 +1668,43 @@ onMounted(async () => {
 						top: 200px;
 						width: 24px;
 						height: 48px;
-						background: #e7f1ff;
 						display: flex;
 						justify-content: center;
 						align-items: center;
 						cursor: pointer;
+
 						.icon {
-							width: 11px;
-							height: 18px;
+							width: 24px;
+							height: 48px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
 					}
+
 					.box1-header {
 						height: 48px;
 						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-left: 19px;
 								margin-top: 14px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.title {
 								width: 152px;
 								height: 48px;
@@ -1716,6 +1718,7 @@ onMounted(async () => {
 								text-align: center;
 							}
 						}
+
 						.box1-header-right {
 							margin-top: 16px;
 							height: 16px;
@@ -1728,6 +1731,7 @@ onMounted(async () => {
 							margin-right: 39px;
 						}
 					}
+
 					.box1-main {
 						display: flex;
 						width: 1064px;
@@ -1736,17 +1740,51 @@ onMounted(async () => {
 						padding-left: 31px;
 						padding-right: 41px;
 						box-sizing: border-box;
+
 						.box1-main-left {
 							width: 458px;
 							height: 353px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
+
+							.box1-main-left-img-mock {
+								height: 100%;
+								margin-left: 24px;
+								border-radius: 4px;
+								background-color: #0b1932;
+								display: flex;
+								align-items: center;
+								flex-direction: column;
+								justify-content: space-around;
+								padding: 24px;
+
+								.img-mock-badge-img {
+									width: 80px;
+									height: 80px;
+								}
+
+								.img-mock-badge-title {
+									text-align: center;
+									font-size: 24px;
+									line-height: 36px;
+									color: #fff;
+								}
+
+								// .img-mock-badge-org {
+								// 	text-align: center;
+								// 	font-size: 14px;
+								// 	color: #fff;
+								// }
+							}
 						}
+
 						.box1-main-right {
 							margin-left: 28px;
 							flex: 1;
+
 							.box1-main-right-title {
 								width: 100%;
 								// height: 26px;
@@ -1759,10 +1797,12 @@ onMounted(async () => {
 								text-overflow: ellipsis;
 								white-space: nowrap;
 							}
+
 							.box1-main-right-info {
 								margin-top: 14px;
 								display: flex;
 								height: 24px;
+
 								.tag {
 									height: 24px;
 									line-height: 24px;
@@ -1774,27 +1814,32 @@ onMounted(async () => {
 									color: rgba(245, 34, 45, 1);
 									background: rgba(255, 241, 240, 1);
 								}
+
 								.tag1 {
 									border: 1px solid rgba(135, 232, 222, 1);
 									color: rgba(19, 168, 168, 1);
 									background: rgba(230, 255, 251, 1);
 								}
+
 								.tag2 {
 									border: 1px solid rgba(186, 224, 255, 1);
 									background: rgba(230, 244, 255, 1);
 									color: rgba(22, 119, 255, 1);
 								}
+
 								.tag3 {
 									border: 1px solid rgba(255, 229, 143, 1);
 									color: rgba(250, 173, 20, 1);
 									background: rgba(255, 251, 230, 1);
 								}
+
 								.tag4 {
 									border: 1px solid rgba(255, 163, 158, 1);
 									color: rgba(245, 34, 45, 1);
 									background: rgba(255, 241, 240, 1);
 								}
 							}
+
 							.box1-main-right-center {
 								margin-top: 10px;
 								height: 200px;
@@ -1804,11 +1849,13 @@ onMounted(async () => {
 								font-weight: 400;
 								line-height: 30px;
 							}
+
 							.box1-main-right-footer {
 								margin-top: 50px;
 								height: 24px;
 								display: flex;
 								justify-content: space-between;
+
 								.footer-left {
 									height: 24px;
 									line-height: 24px;
@@ -1818,8 +1865,10 @@ onMounted(async () => {
 									font-weight: 400;
 									line-height: 24px;
 								}
+
 								.footer-right {
 									display: flex;
+
 									.footer-right-item1 {
 										height: 24px;
 										color: var(--color-main-active);
@@ -1828,11 +1877,13 @@ onMounted(async () => {
 										font-weight: 400;
 										line-height: 24px;
 									}
+
 									.footer-right-item2 {
 										width: 16px;
 										height: 16px;
 										margin-top: 4px;
 										margin-left: 11px;
+
 										img {
 											width: 100%;
 											height: 100%;
@@ -1843,6 +1894,7 @@ onMounted(async () => {
 						}
 					}
 				}
+
 				.box2 {
 					width: 521px;
 					height: 450px;
@@ -1850,25 +1902,30 @@ onMounted(async () => {
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
 					background: rgba(255, 255, 255, 1);
 					position: relative;
+
 					.box2-header {
 						height: 48px;
 						display: flex;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
+
 						.icon {
 							width: 24px;
 							height: 22px;
 							margin-left: 18px;
 							margin-top: 14px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.title {
 							display: flex;
 							width: 148px;
 							background: rgba(206, 79, 81, 1);
 							margin-left: 18px;
+
 							.text {
 								margin-left: 16px;
 								height: 48px;
@@ -1878,6 +1935,7 @@ onMounted(async () => {
 								font-weight: 700;
 								line-height: 48px;
 							}
+
 							.num {
 								width: 24px;
 								height: 20px;
@@ -1893,28 +1951,34 @@ onMounted(async () => {
 							}
 						}
 					}
+
 					.box2-main {
 						box-sizing: border-box;
 						padding-right: 20px;
 						height: 282px;
 						overflow-y: auto;
+
 						.box2-main-item {
 							margin-left: 23px;
 							height: 47px;
 							width: 464px;
 							display: flex;
 							cursor: pointer;
+
 							&:hover {
 								background: var(--color-bg-hover);
 							}
+
 							.itemLeftStatus3 {
 								color: rgba(245, 34, 45, 1) !important;
 								background: rgba(255, 241, 240) !important;
 							}
+
 							.itemLeftStatus2 {
 								color: rgba(250, 140, 22, 1) !important;
 								background: rgba(255, 247, 230, 1) !important;
 							}
+
 							.item-left {
 								margin-top: 4px;
 								margin-left: 2px;
@@ -1931,12 +1995,14 @@ onMounted(async () => {
 								padding: 6px 4px;
 								text-align: center;
 							}
+
 							.item-right {
 								margin-left: 13px;
 								width: 408px;
 								height: 47px;
 								border-bottom: 1px solid rgba(240, 242, 244, 1);
 								display: flex;
+
 								.text {
 									width: 318px;
 									color: rgba(59, 65, 75, 1);
@@ -1948,6 +2014,7 @@ onMounted(async () => {
 									text-overflow: ellipsis;
 									white-space: nowrap;
 								}
+
 								.time {
 									width: 90px;
 									line-height: 47px;
@@ -1960,6 +2027,7 @@ onMounted(async () => {
 							}
 						}
 					}
+
 					.box2-footer {
 						position: absolute;
 						left: 45px;
@@ -1973,14 +2041,17 @@ onMounted(async () => {
 						border-radius: 6px;
 						background: var(--color-main-active);
 						cursor: pointer;
+
 						.icon {
 							width: 16px;
 							height: 16px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.text {
 							margin-left: 8px;
 							color: rgba(255, 255, 255, 1);
@@ -1992,24 +2063,28 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.divide2 {
 				width: 1600px;
 				margin: 0 auto;
 				margin-top: 68px;
 				margin-bottom: 36px;
 			}
+
 			.center-center {
 				width: 1600px;
 				margin: 0 auto;
 				margin-top: 21px;
 				height: 450px;
 				display: flex;
+
 				.box3 {
 					width: 792px;
 					height: 450px;
 					border-radius: 10px;
 					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
 					background: rgba(255, 255, 255, 1);
+
 					.box3-header {
 						height: 48px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
@@ -2017,18 +2092,22 @@ onMounted(async () => {
 						display: flex;
 						justify-content: space-between;
 						position: relative;
+
 						.box3-header-left {
 							display: flex;
+
 							.box3-header-icon {
 								margin-left: 21px;
 								margin-top: 16px;
 								width: 19px;
 								height: 19px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.box3-header-title {
 								margin-top: 11px;
 								margin-left: 20px;
@@ -2040,6 +2119,7 @@ onMounted(async () => {
 								line-height: 26px;
 							}
 						}
+
 						.more {
 							width: 49px;
 							height: 24px;
@@ -2054,11 +2134,13 @@ onMounted(async () => {
 							cursor: pointer;
 						}
 					}
+
 					.box3-main {
 						height: 402px;
 						overflow-y: auto;
 						overflow-x: hidden;
 						padding: 6px 0;
+
 						.box3-item {
 							display: flex;
 							height: 77px;
@@ -2066,25 +2148,31 @@ onMounted(async () => {
 							margin-left: 21px;
 							border-bottom: 1px solid rgba(240, 242, 244, 1);
 							cursor: pointer;
+
 							&:hover {
 								background: var(--color-bg-hover);
 							}
+
 							.left {
 								width: 72px;
 								height: 48px;
 								margin-top: 15px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.right {
 								width: 657px;
 								margin-left: 20px;
+
 								.right-top {
 									width: 657px;
 									display: flex;
 									justify-content: space-between;
+
 									.title {
 										margin-top: 13px;
 										width: 500px;
@@ -2098,6 +2186,7 @@ onMounted(async () => {
 										text-overflow: ellipsis;
 										white-space: nowrap;
 									}
+
 									.time {
 										width: 157px;
 										text-align: right;
@@ -2113,6 +2202,7 @@ onMounted(async () => {
 										white-space: nowrap;
 									}
 								}
+
 								.right-footer {
 									width: 657px;
 									height: 24px;
@@ -2129,6 +2219,7 @@ onMounted(async () => {
 						}
 					}
 				}
+
 				.box4 {
 					margin-left: 20px;
 					width: 792px;
@@ -2136,6 +2227,7 @@ onMounted(async () => {
 					border-radius: 10px;
 					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
 					background: rgba(255, 255, 255, 1);
+
 					.box4-header {
 						width: 792px;
 						height: 48px;
@@ -2143,16 +2235,19 @@ onMounted(async () => {
 						display: flex;
 						box-sizing: border-box;
 						position: relative;
+
 						.header-icon {
 							margin-left: 21px;
 							margin-top: 17px;
 							width: 20px;
 							height: 20px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.header-title {
 							margin-top: 11px;
 							margin-left: 20px;
@@ -2164,12 +2259,13 @@ onMounted(async () => {
 							line-height: 26px;
 						}
 					}
+
 					.box4-main {
 						height: 402px;
 						overflow-y: auto;
 						box-sizing: border-box;
 						padding-bottom: 8px;
-						padding-left: 31px;
+						padding-left: 24px;
 						padding-top: 5px;
 						// .box4-main-item {
 						// 	margin-top: 16px;
@@ -2227,6 +2323,7 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.center-center1 {
 				margin: 0 auto;
 				margin-top: 24px;
@@ -2239,27 +2336,33 @@ onMounted(async () => {
 				justify-content: space-between;
 				box-sizing: border-box;
 				padding: 4px 5px;
+
 				.center1-item {
 					width: 351px;
 					height: 92px;
 					border-radius: 48px;
 					display: flex;
 					cursor: pointer;
+
 					&:hover {
 						background: rgba(231, 243, 255, 1);
 					}
+
 					.left {
 						margin-top: 15px;
 						margin-left: 39px;
 						width: 60px;
 						height: 60px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.right {
 						margin-left: 8px;
+
 						.name {
 							height: 31px;
 							margin-top: 16px;
@@ -2270,9 +2373,11 @@ onMounted(async () => {
 							font-weight: 700;
 							line-height: 31px;
 						}
+
 						.nameActive {
 							color: var(--color-main-active);
 						}
+
 						.time {
 							margin-top: 1px;
 							height: 30px;
@@ -2282,15 +2387,18 @@ onMounted(async () => {
 							font-weight: 400;
 							line-height: 30px;
 						}
+
 						.timeActive {
 							color: var(--color-main-active);
 						}
 					}
 				}
+
 				.center1ItemActive {
 					background: rgba(231, 243, 255, 1);
 				}
 			}
+
 			.center-center2 {
 				margin: 0 auto;
 				margin-top: 24px;
@@ -2299,12 +2407,15 @@ onMounted(async () => {
 				border-radius: 4px;
 				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
 				background: rgba(255, 255, 255, 1);
+
 				.center2-header {
 					display: flex;
 					justify-content: space-between;
+
 					.center2-header-left {
 						margin-left: 62px;
 						display: flex;
+
 						.left {
 							width: 140px;
 							height: 175px;
@@ -2318,14 +2429,17 @@ onMounted(async () => {
 								border-radius: 75px;
 								margin-top: 41px;
 								margin-left: 6px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
 						}
+
 						.right {
 							margin-left: 29px;
+
 							.right-item1 {
 								margin-top: 41px;
 								height: 31px;
@@ -2335,17 +2449,21 @@ onMounted(async () => {
 								font-weight: 700;
 								line-height: 32px;
 							}
+
 							.right-item2 {
 								display: flex;
 								margin-top: 7px;
+
 								.icon {
 									width: 24px;
 									height: 24px;
+
 									img {
 										width: 100%;
 										height: 100%;
 									}
 								}
+
 								.text {
 									margin-left: 8px;
 									height: 24px;
@@ -2356,6 +2474,7 @@ onMounted(async () => {
 									line-height: 24px;
 								}
 							}
+
 							.right-item3 {
 								margin-top: 10px;
 								height: 24px;
@@ -2365,6 +2484,7 @@ onMounted(async () => {
 								font-weight: 400;
 								line-height: 24px;
 							}
+
 							.right-item4 {
 								margin-top: 8px;
 								height: 24px;
@@ -2376,15 +2496,19 @@ onMounted(async () => {
 							}
 						}
 					}
+
 					.center2-header-right {
 						margin-right: 59px;
 						margin-top: 47px;
+
 						.top {
 							display: flex;
+
 							.top-box {
 								width: 180px;
 								height: 72px;
 								margin-left: 50px;
+
 								.item1 {
 									height: 26px;
 									color: rgba(59, 65, 75, 1);
@@ -2394,18 +2518,21 @@ onMounted(async () => {
 									line-height: 26px;
 									text-align: right;
 								}
+
 								.item2 {
 									margin-top: 4px;
 									font-family: Microsoft YaHei;
 									font-weight: 700;
 									display: flex;
 									justify-content: flex-end;
+
 									.item2-3 {
 										height: 42px;
 										color: var(--color-main-active);
 										font-size: 32px;
 										line-height: 42px;
 									}
+
 									.item2-2 {
 										height: 24px;
 										margin-top: 9px;
@@ -2417,6 +2544,7 @@ onMounted(async () => {
 										font-weight: 700;
 										line-height: 24px;
 									}
+
 									.item2-1 {
 										height: 42px;
 										color: rgba(206, 79, 81, 1);
@@ -2426,21 +2554,25 @@ onMounted(async () => {
 								}
 							}
 						}
+
 						.bottom {
 							height: 22px;
 							margin-top: 29px;
 							display: flex;
 							justify-content: flex-end;
+
 							.icon {
 								margin-top: 4px;
 								width: 14px;
 								height: 14px;
 								margin-right: 8px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.text {
 								height: 22px;
 								color: rgba(132, 136, 142, 1);
@@ -2452,6 +2584,7 @@ onMounted(async () => {
 						}
 					}
 				}
+
 				.center2-mid {
 					width: 1479px;
 					height: 189px;
@@ -2460,26 +2593,32 @@ onMounted(async () => {
 					border-radius: 4px;
 					margin: 40px auto 0;
 				}
+
 				.center2-footer {
 					display: flex;
+
 					.center2-footer-left {
 						width: 732px;
 						margin-left: 58px;
 						margin-top: 21px;
+
 						.header {
 							display: flex;
 							height: 48px;
 							border-bottom: 1px solid rgba(234, 236, 238, 1);
+
 							.icon {
 								margin-top: 15px;
 								margin-left: 20px;
 								width: 20px;
 								height: 20px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.text {
 								margin-left: 20px;
 								color: var(--color-main-active);
@@ -2489,6 +2628,7 @@ onMounted(async () => {
 								line-height: 48px;
 							}
 						}
+
 						.main {
 							width: 732px;
 							height: 470px;
@@ -2498,23 +2638,28 @@ onMounted(async () => {
 							flex-wrap: wrap;
 							box-sizing: border-box;
 							padding-top: 9px;
+
 							.item {
 								width: 50%;
 								height: 80px;
 								display: flex;
 								margin-top: 8px;
+
 								.item-left {
 									width: 60px;
 									height: 60px;
 									margin-top: 10px;
 									margin-left: 16px;
+
 									img {
 										width: 100%;
 										height: 100%;
 									}
 								}
+
 								.item-right {
 									margin-left: 13px;
+
 									.item-right-box1 {
 										margin-top: 15px;
 										height: 24px;
@@ -2524,6 +2669,7 @@ onMounted(async () => {
 										font-weight: 700;
 										line-height: 24px;
 									}
+
 									.item-right-box2 {
 										margin-top: 1px;
 										height: 24px;
@@ -2537,28 +2683,34 @@ onMounted(async () => {
 							}
 						}
 					}
+
 					.center2-footer-right {
 						margin-left: 21px;
 						margin-top: 16px;
 						width: 730px;
+
 						.header {
 							height: 54px;
 							border-bottom: 1px solid rgba(234, 236, 238, 1);
 							display: flex;
+
 							.icon {
 								width: 24px;
 								height: 24px;
 								margin-left: 16px;
 								margin-top: 16px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.tab-box {
 								margin-left: 20px;
 								width: 500px;
 								display: flex;
+
 								.tab {
 									height: 54px;
 									margin-right: 24px;
@@ -2570,21 +2722,25 @@ onMounted(async () => {
 									padding: 0 2px;
 									box-sizing: border-box;
 								}
+
 								.tabActive {
 									font-weight: 700;
 									color: var(--color-main-active);
 									border-bottom: 3px solid var(--color-main-active);
 								}
 							}
+
 							.right {
 								width: 80px;
 								margin-left: 90px;
 								display: flex;
 								justify-content: space-between;
+
 								.btn {
 									width: 28px;
 									height: 28px;
 									margin-top: 13px;
+
 									img {
 										width: 100%;
 										height: 100%;
@@ -2592,13 +2748,16 @@ onMounted(async () => {
 								}
 							}
 						}
+
 						.main {
 							height: 475px;
 							margin-top: 5px;
 							overflow-y: hidden;
+
 							.main-item {
 								display: flex;
 								margin-top: 20px;
+
 								.id {
 									margin-top: 3px;
 									margin-left: 2px;
@@ -2610,13 +2769,16 @@ onMounted(async () => {
 									text-align: center;
 									color: var(--color-main-active);
 								}
+
 								.info {
 									margin-left: 13px;
 									width: 672px;
+
 									.info-header {
 										display: flex;
 										justify-content: space-between;
 										height: 24px;
+
 										.title {
 											height: 24px;
 											margin-top: 1px;
@@ -2626,6 +2788,7 @@ onMounted(async () => {
 											font-weight: 700;
 											line-height: 24px;
 										}
+
 										.tag {
 											height: 24px;
 											line-height: 24px;
@@ -2638,6 +2801,7 @@ onMounted(async () => {
 											font-weight: 400;
 										}
 									}
+
 									.info-content {
 										margin-top: 3px;
 										color: rgba(95, 101, 108, 1);
@@ -2652,41 +2816,49 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.divide3 {
 				width: 1600px;
 				margin: 0 auto;
 				margin-top: 68px;
 				margin-bottom: 36px;
 			}
+
 			.center-footer {
 				margin-top: 21px;
 				height: 452px;
 				display: flex;
 				justify-content: center;
+
 				.box5 {
 					width: 792px;
 					height: 452px;
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
 					background: rgba(255, 255, 255, 1);
 					border-radius: 10px;
+
 					.box5-header {
 						height: 48px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
 						margin: 0 auto;
 						display: flex;
 						justify-content: space-between;
+
 						.box5-header-left {
 							display: flex;
+
 							.box5-header-icon {
 								margin-top: 17px;
 								margin-left: 24px;
 								width: 17px;
 								height: 17px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.box5-header-title {
 								margin-top: 11px;
 								margin-left: 19px;
@@ -2698,18 +2870,22 @@ onMounted(async () => {
 								line-height: 26px;
 							}
 						}
+
 						.box5-selectbox {
 							margin-right: 20px;
 							margin-top: 8px;
 						}
 					}
+
 					.box5-main {
 						height: 397px;
+
 						.box5-chart {
 							height: 397px;
 						}
 					}
 				}
+
 				.box6 {
 					margin-left: 16px;
 					width: 792px;
@@ -2717,22 +2893,26 @@ onMounted(async () => {
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
 					background: rgba(255, 255, 255, 1);
 					border-radius: 10px;
+
 					.box6-header {
 						margin: 0 auto;
 						height: 53px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
 						display: flex;
 						position: relative;
+
 						.header-icon {
 							margin-top: 16px;
 							margin-left: 22px;
 							width: 20px;
 							height: 20px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.header-title {
 							margin-top: 11px;
 							margin-left: 18px;
@@ -2743,44 +2923,52 @@ onMounted(async () => {
 							font-weight: 700;
 							line-height: 26px;
 						}
+
 						.box6-selectbox {
 							position: absolute;
 							right: 20px;
 							top: 8px;
 						}
 					}
+
 					.box6-main {
 						margin-top: 8px;
 						height: 390px;
 					}
 				}
 			}
+
 			.center-footer1 {
 				margin-top: 21px;
 				height: 450px;
 				display: flex;
 				justify-content: center;
+
 				.box7 {
 					width: 792px;
 					height: 450px;
 					border-radius: 10px;
 					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
 					background: rgba(255, 255, 255, 1);
+
 					.box7-header {
 						width: 792px;
 						height: 48px;
 						display: flex;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
+
 						.header-icon {
 							width: 22px;
 							height: 20px;
 							margin-left: 25px;
 							margin-top: 15px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.header-title {
 							height: 26px;
 							margin-top: 11px;
@@ -2792,38 +2980,46 @@ onMounted(async () => {
 							line-height: 26px;
 						}
 					}
+
 					.box7-main {
 						margin-top: 10px;
 						height: 380px;
 						box-sizing: border-box;
 						overflow-y: auto;
 						overflow-x: hidden;
+
 						.box7-item {
 							width: 730px;
 							margin-top: 16px;
 							margin-left: 25px;
 							display: flex;
 							cursor: pointer;
+
 							&:hover {
 								background: var(--color-bg-hover);
 							}
+
 							.icon {
 								margin-top: 6px;
 								width: 24px;
 								height: 22px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.info {
 								margin-left: 13px;
 								width: 100%;
+
 								.info-header {
 									height: 24px;
 									display: flex;
 									margin-top: 4px;
 									justify-content: space-between;
+
 									.title {
 										width: 600px;
 										height: 24px;
@@ -2836,6 +3032,7 @@ onMounted(async () => {
 										text-overflow: ellipsis;
 										white-space: nowrap;
 									}
+
 									.time {
 										width: 91px;
 										height: 24px;
@@ -2849,6 +3046,7 @@ onMounted(async () => {
 										white-space: nowrap;
 									}
 								}
+
 								.info-content {
 									min-height: 24px;
 									max-height: 48px;
@@ -2864,6 +3062,7 @@ onMounted(async () => {
 						}
 					}
 				}
+
 				.box8 {
 					margin-left: 16px;
 					width: 792px;
@@ -2871,21 +3070,25 @@ onMounted(async () => {
 					border-radius: 10px;
 					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
 					background: rgba(255, 255, 255, 1);
+
 					.box8-header {
 						width: 792px;
 						height: 48px;
 						display: flex;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
+
 						.header-icon {
 							width: 22px;
 							height: 20px;
 							margin-left: 25px;
 							margin-top: 15px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.header-title {
 							height: 26px;
 							margin-top: 11px;
@@ -2897,29 +3100,34 @@ onMounted(async () => {
 							line-height: 26px;
 						}
 					}
+
 					.box8-main {
 						height: 401px;
 					}
 				}
 			}
 		}
+
 		.home-main-footer {
 			margin-top: 34px;
 			max-height: 1860px;
 			padding-bottom: 160px;
 			background: rgba(248, 249, 250, 1);
 			overflow: hidden;
+
 			.divide4 {
 				margin: 0 auto;
 				margin-top: 52px;
 				margin-bottom: 6px;
 			}
+
 			.home-main-footer-header {
 				width: 1600px;
 				height: 50px;
 				margin: 0 auto 16px;
 				display: flex;
 				justify-content: flex-end;
+
 				.btn-box {
 					margin-top: 10px;
 					width: 1450px;
@@ -2941,25 +3149,30 @@ onMounted(async () => {
 						border-radius: 21px;
 						background: rgba(20, 89, 187, 0);
 						cursor: pointer;
+
 						&:hover {
 							background: rgba(20, 89, 187, 0.1);
 						}
 					}
+
 					.btnActive {
 						font-weight: 700;
 						background: rgba(20, 89, 187, 1);
 						color: #fff;
+
 						&:hover {
 							color: #fff;
 							background: rgba(20, 89, 187, 1);
 						}
 					}
 				}
+
 				.select-box {
 					margin-top: 5px;
 					height: 42px;
 					box-sizing: border-box;
 					padding: 5px 0;
+
 					.paixu-btn {
 						display: flex;
 						width: 120px;
@@ -2968,20 +3181,25 @@ onMounted(async () => {
 						border: 1px solid rgba(230, 231, 232, 1);
 						border-radius: 4px;
 						background: rgba(255, 255, 255, 1);
+
 						&:hover {
 							background: var(--color-bg-hover);
 						}
+
 						cursor: pointer;
+
 						.icon1 {
 							width: 11px;
 							height: 14px;
 							margin-top: 10px;
 							margin-left: 9px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.text {
 							height: 19px;
 							color: rgba(95, 101, 108, 1);
@@ -2994,11 +3212,13 @@ onMounted(async () => {
 							margin-top: 7px;
 							margin-left: 9px;
 						}
+
 						.icon2 {
 							width: 10px;
 							height: 5px;
 							margin-top: 5px;
 							margin-left: 13px;
+
 							img {
 								width: 100%;
 								height: 100%;
@@ -3007,11 +3227,13 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.home-main-footer-main {
 				width: 1600px;
 				margin: 0 auto;
 				display: flex;
 				gap: 16px;
+
 				.left {
 					width: 300px;
 					// height: 666px;
@@ -3019,11 +3241,14 @@ onMounted(async () => {
 					background: rgba(255, 255, 255, 1);
 					box-sizing: border-box;
 					border-radius: 10px;
+
 					.select-box {
 						margin-top: 21px;
+
 						.select-box-header {
 							display: flex;
 							gap: 17px;
+
 							.icon {
 								margin-top: 4px;
 								width: 8px;
@@ -3031,6 +3256,7 @@ onMounted(async () => {
 								background: var(--color-main-active);
 								border-radius: 0 4px 4px 0;
 							}
+
 							.title {
 								height: 24px;
 								color: var(--color-main-active);
@@ -3042,14 +3268,17 @@ onMounted(async () => {
 								text-align: left;
 							}
 						}
+
 						.select-main {
 							margin-left: 25px;
 						}
+
 						.select-main1 {
 							width: 260px;
 						}
 					}
 				}
+
 				.right {
 					width: 1284px;
 					max-height: 1489px;
@@ -3057,20 +3286,24 @@ onMounted(async () => {
 					background: rgba(255, 255, 255, 1);
 					box-sizing: border-box;
 					border-radius: 10px;
+
 					.content-header {
 						height: 48px;
 						display: flex;
 						border-bottom: 1px solid rgba(234, 236, 238, 1);
+
 						.icon {
 							width: 23px;
 							height: 18px;
 							margin-top: 16px;
 							margin-left: 20px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.title {
 							height: 26px;
 							margin-top: 11px;
@@ -3082,63 +3315,75 @@ onMounted(async () => {
 							line-height: 26px;
 						}
 					}
+
 					.content-box {
 						max-height: 1367px;
 						border-bottom: 1px solid rgba(234, 236, 238, 1);
 						overflow: hidden;
 						min-height: 790px;
+
 						.main-item {
 							display: flex;
 							min-height: 100px;
 							// height: 136px;
 							// background: orange;
 							box-sizing: border-box;
-							padding-top: 10px;
+							padding: 16px 36px 0px 0px;
 							cursor: pointer;
-							&:hover {
-								background: var(--color-bg-hover);
-							}
+
+							// &:hover {
+							// 	background: var(--color-bg-hover);
+							// }
+
 							.main-item-left {
 								display: flex;
 								gap: 18px;
 								justify-content: flex-end;
+
 								.left-left {
 									margin-left: 30px;
-									width: 54px;
+									width: 80px;
 									height: 48px;
 									color: var(--color-main-active);
 									font-family: Microsoft YaHei;
 									font-size: 16px;
 									font-weight: 700;
-									line-height: 24px;
+									line-height: 20px;
 									letter-spacing: 1px;
 									text-align: right;
 								}
+
 								.left-right {
 									.icon {
-										width: 24px;
-										height: 24px;
-										border-radius: 12px;
+										width: 30px;
+										height: 30px;
+										border-radius: 50%;
 										overflow: hidden;
+
 										img {
 											width: 100%;
 											height: 100%;
 										}
 									}
+
 									.line {
 										height: 100%;
 										width: 2px;
-										background: #ddd;
-										margin-left: 11px;
+										background: var(--border-black-5);
+										margin-left: 14px;
 									}
 								}
 							}
+
 							.main-item-center {
 								margin-left: 21px;
+								margin-bottom: 16px;
 								width: 1086px;
+
 								.center-header {
 									display: flex;
 									justify-content: space-between;
+
 									.title {
 										height: 26px;
 										color: rgba(59, 65, 75, 1);
@@ -3149,6 +3394,7 @@ onMounted(async () => {
 										letter-spacing: 0px;
 										text-align: left;
 									}
+
 									.type-box {
 										height: 28px;
 										line-height: 28px;
@@ -3160,35 +3406,44 @@ onMounted(async () => {
 										letter-spacing: 0px;
 										border-radius: 4px;
 									}
+
 									.type1 {
 										color: rgba(22, 119, 255, 1);
 										background: rgba(230, 244, 255, 1);
 									}
+
 									.type2 {
 										color: rgba(19, 168, 168, 1);
 										background: rgba(230, 255, 251, 1);
 									}
+
 									.type3 {
 										color: rgba(250, 140, 22, 1);
 										background: rgba(255, 247, 230, 1);
 									}
 								}
+
 								.desc {
 									margin-top: 8px;
 									color: rgba(95, 101, 108, 1);
 									font-family: Microsoft YaHei;
 									font-size: 16px;
 									font-weight: 400;
-									line-height: 24px;
+									line-height: 28px;
 									letter-spacing: 0px;
 									text-align: justify;
-									max-height: 48px;
+									
 									overflow: hidden;
+									display: -webkit-box;
+									-webkit-box-orient: vertical;
+									-webkit-line-clamp: 2;
 								}
+
 								.tag-box {
 									margin-top: 9px;
 									display: flex;
 									gap: 8px;
+
 									.tag {
 										height: 28px;
 										line-height: 28px;
@@ -3206,11 +3461,13 @@ onMounted(async () => {
 							}
 						}
 					}
+
 					.footer-box {
 						margin: 20px 30px;
 						height: 32px;
 						display: flex;
 						justify-content: space-between;
+
 						.footer-left {
 							color: rgba(59, 65, 75, 1);
 							font-family: Microsoft YaHei;
@@ -3233,6 +3490,7 @@ onMounted(async () => {
 	box-shadow: none;
 	border-radius: 10px;
 }
+
 :deep(.el-input__wrapper:hover) {
 	box-shadow: none !important;
 }

src/views/decree/decreeHome/utils/barChart.js

@@ -13,10 +13,17 @@ const getBarChart = (nameList, valueList) => {
     yAxis: {
       type: 'value',
       splitLine: {
-        show: false
+        show: true,
+        lineStyle: {
+          color: '#e7f3ff',
+        }
+        
       },
       axisLine: {
-        show: false
+        show: false,
+        lineStyle: {
+          color: 'rgba(95, 101, 108, 1)',
+        }
       },
       show: true,
       textStyle: {
@@ -32,10 +39,13 @@ const getBarChart = (nameList, valueList) => {
         show: false
       },
       axisTick: {
-        show: false
+        show: true
       },
       axisLine: {
-        show: true
+        show: true,
+        lineStyle: {
+          color: '#e7f3ff',
+        }
       },
       axisLabel: {
         show: true,

src/views/decree/decreeLayout/assets/icons/icon1.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon图标/Line/file-text-outlined" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="形状" d="M9.99063 1.14688L13.3531 4.50937C13.4469 4.60312 13.5 4.73125 13.5 4.86406L13.5 14.5C13.5 14.7766 13.2766 15 13 15L3 15C2.72344 15 2.5 14.7766 2.5 14.5L2.5 1.5C2.5 1.22344 2.72344 1 3 1L9.6375 1C9.77031 1 9.89688 1.05313 9.99063 1.14688ZM3.625 13.875L12.375 13.875L12.375 6.15625L9 6.15625C8.6375 6.15625 8.34375 5.8625 8.34375 5.5L8.34375 2.125L3.625 2.125L3.625 13.875ZM12.3469 5.09375L9.40627 5.09375L9.40627 2.15312L12.3469 5.09375ZM4.875 8.40625L4.875 7.65625C4.875 7.5875 4.93125 7.53125 5 7.53125L11 7.53125C11.0688 7.53125 11.125 7.5875 11.125 7.65625L11.125 8.40625C11.125 8.475 11.0688 8.53125 11 8.53125L5 8.53125C4.93125 8.53125 4.875 8.475 4.875 8.40625ZM7.875 9.65625L5 9.65625C4.93125 9.65625 4.875 9.7125 4.875 9.78125L4.875 10.5312C4.875 10.6 4.93125 10.6562 5 10.6562L7.875 10.6562C7.94375 10.6562 8 10.6 8 10.5312L8 9.78125C8 9.7125 7.94375 9.65625 7.875 9.65625Z" fill="rgb(59,65,75)" fill-rule="evenodd" />
+</svg>

src/views/decree/decreeLayout/assets/icons/icon1_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon图标/Line/file-text-outlined" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="形状" d="M9.99063 1.14688L13.3531 4.50937C13.4469 4.60312 13.5 4.73125 13.5 4.86406L13.5 14.5C13.5 14.7766 13.2766 15 13 15L3 15C2.72344 15 2.5 14.7766 2.5 14.5L2.5 1.5C2.5 1.22344 2.72344 1 3 1L9.6375 1C9.77031 1 9.89688 1.05313 9.99063 1.14688ZM3.625 13.875L12.375 13.875L12.375 6.15625L9 6.15625C8.6375 6.15625 8.34375 5.8625 8.34375 5.5L8.34375 2.125L3.625 2.125L3.625 13.875ZM12.3469 5.09375L9.40627 5.09375L9.40627 2.15312L12.3469 5.09375ZM4.875 8.40625L4.875 7.65625C4.875 7.5875 4.93125 7.53125 5 7.53125L11 7.53125C11.0688 7.53125 11.125 7.5875 11.125 7.65625L11.125 8.40625C11.125 8.475 11.0688 8.53125 11 8.53125L5 8.53125C4.93125 8.53125 4.875 8.475 4.875 8.40625ZM7.875 9.65625L5 9.65625C4.93125 9.65625 4.875 9.7125 4.875 9.78125L4.875 10.5312C4.875 10.6 4.93125 10.6562 5 10.6562L7.875 10.6562C7.94375 10.6562 8 10.6 8 10.5312L8 9.78125C8 9.7125 7.94375 9.65625 7.875 9.65625Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
+</svg>

src/views/decree/decreeLayout/assets/icons/icon2.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
+	<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<g id="check" opacity="0">
+		<rect id="矩形" width="16.000000" height="16.000000" x="0.000000" y="0.000000" opacity="0" fill="rgb(0,0,0)" />
+		<path id="路径" d="M14.25 2.96875L13.1578 2.96875C13.0047 2.96875 12.8594 3.03906 12.7656 3.15937L6.32345 11.3203L3.23438 7.40625C3.13907 7.28594 2.99532 7.21562 2.8422 7.21562L1.75001 7.21562C1.64532 7.21562 1.58751 7.33594 1.65157 7.41719L5.93126 12.8391C6.13126 13.0922 6.51563 13.0922 6.7172 12.8391L14.3484 3.16875C14.4125 3.08906 14.3547 2.96875 14.25 2.96875Z" fill="rgb(0,0,0)" fill-opacity="0.650980413" fill-rule="evenodd" />
+		<path id="路径" d="M13.1578 2.96875C13.0047 2.96875 12.8594 3.03906 12.7656 3.15937L6.32345 11.3203L3.23438 7.40625C3.13907 7.28594 2.99532 7.21562 2.8422 7.21562L1.75001 7.21562C1.64532 7.21562 1.58751 7.33594 1.65157 7.41719L5.93126 12.8391C6.13126 13.0922 6.51563 13.0922 6.7172 12.8391L14.3484 3.16875C14.4125 3.08906 14.3547 2.96875 14.25 2.96875L13.1578 2.96875Z" fill-rule="evenodd" stroke="rgb(151,151,151)" stroke-opacity="0" stroke-width="1.000000" />
+	</g>
+	<g id="ant-design">
+		<rect id="矩形" width="11.988293" height="11.988293" x="2.000000" y="2.000000" opacity="0" fill="rgb(59,65,75)" />
+		<path id="形状" d="M10.7277 4.4243C10.9819 4.67718 10.9819 5.08928 10.7277 5.34216C10.4748 5.59637 10.0627 5.59637 9.80848 5.34216L8.13333 3.66835C8.06911 3.60412 7.97278 3.59877 7.9032 3.65363C7.89785 3.65898 7.89116 3.66299 7.88581 3.66835L3.6792 7.87228C3.60963 7.94185 3.60963 8.05023 3.6792 8.1198L7.88715 12.3237C7.95672 12.3933 8.0651 12.3933 8.13467 12.3237L9.80715 10.6486C10.0613 10.3957 10.4721 10.3957 10.7263 10.6486C10.9806 10.9015 10.9806 11.3136 10.7263 11.5664L8.51733 13.7741C8.23454 14.0564 7.77657 14.0564 7.49378 13.7741L2.22616 8.51049C2.09 8.37526 2.01343 8.19129 2.01343 7.99938C2.01343 7.80748 2.09 7.62351 2.22616 7.48828L7.49512 2.22333C7.77609 1.94235 8.23502 1.93968 8.51867 2.21664C9.11968 2.81631 9.54471 3.24134 9.79243 3.48906L9.79377 3.49039L10.7277 4.4243ZM12.1406 5.87317L13.785 7.50952C13.921 7.64474 13.9976 7.82855 13.9979 8.02035C13.9981 8.21216 13.922 8.39617 13.7863 8.53174L12.1566 10.1601C11.9024 10.413 11.4916 10.413 11.2374 10.1601C11.1154 10.0385 11.0468 9.87338 11.0468 9.70113C11.0468 9.52888 11.1154 9.36373 11.2374 9.2422L12.3319 8.14908C12.4015 8.0795 12.4015 7.97112 12.3319 7.90155L11.2214 6.79236C11.0993 6.67084 11.0307 6.50569 11.0307 6.33344C11.0307 6.16119 11.0993 5.99604 11.2214 5.87451C11.4743 5.62029 11.8864 5.62029 12.1406 5.87317ZM6.61072 8.02612C6.61072 8.53377 6.8818 9.00286 7.32185 9.25668C7.76191 9.51051 8.30407 9.51051 8.74413 9.25668C9.18418 9.00286 9.45526 8.53377 9.45526 8.02612C9.45526 7.24136 8.81849 6.60518 8.03299 6.60518C7.24749 6.60518 6.61072 7.24136 6.61072 8.02612Z" fill="rgb(59,65,75)" fill-rule="evenodd" />
+		<path id="形状" d="M10.7277 4.4243C10.9819 4.67718 10.9819 5.08928 10.7277 5.34216C10.4748 5.59637 10.0627 5.59637 9.80848 5.34216L8.13333 3.66835C8.06911 3.60412 7.97278 3.59877 7.9032 3.65363C7.89785 3.65898 7.89116 3.66299 7.88581 3.66835L3.6792 7.87228C3.60963 7.94185 3.60963 8.05023 3.6792 8.1198L7.88715 12.3237C7.95672 12.3933 8.0651 12.3933 8.13467 12.3237L9.80715 10.6486C10.0613 10.3957 10.4721 10.3957 10.7263 10.6486C10.9806 10.9015 10.9806 11.3136 10.7263 11.5664L8.51733 13.7741C8.23454 14.0564 7.77657 14.0564 7.49378 13.7741L2.22616 8.51049C2.09 8.37526 2.01343 8.19129 2.01343 7.99938C2.01343 7.80748 2.09 7.62351 2.22616 7.48828L7.49512 2.22333C7.77609 1.94235 8.23502 1.93968 8.51867 2.21664C9.11968 2.81631 9.54471 3.24134 9.79243 3.48906L9.79377 3.49039L10.7277 4.4243ZM12.1406 5.87317L13.785 7.50952C13.921 7.64474 13.9976 7.82855 13.9979 8.02035C13.9981 8.21216 13.922 8.39617 13.7863 8.53174L12.1566 10.1601C11.9024 10.413 11.4916 10.413 11.2374 10.1601C11.1154 10.0385 11.0468 9.87338 11.0468 9.70113C11.0468 9.52888 11.1154 9.36373 11.2374 9.2422L12.3319 8.14908C12.4015 8.0795 12.4015 7.97112 12.3319 7.90155L11.2214 6.79236C11.0993 6.67084 11.0307 6.50569 11.0307 6.33344C11.0307 6.16119 11.0993 5.99604 11.2214 5.87451C11.4743 5.62029 11.8864 5.62029 12.1406 5.87317ZM6.61072 8.02612C6.61072 8.53377 6.8818 9.00286 7.32185 9.25668C7.76191 9.51051 8.30407 9.51051 8.74413 9.25668C9.18418 9.00286 9.45526 8.53377 9.45526 8.02612C9.45526 7.24136 8.81849 6.60518 8.03299 6.60518C7.24749 6.60518 6.61072 7.24136 6.61072 8.02612Z" fill-rule="evenodd" stroke="rgb(151,151,151)" stroke-opacity="0" stroke-width="1.000000" />
+	</g>
+</svg>

src/views/decree/decreeLayout/assets/icons/icon2_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
+	<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<g id="check" opacity="0">
+		<rect id="矩形" width="16.000000" height="16.000000" x="0.000000" y="0.000000" opacity="0" fill="rgb(0,0,0)" />
+		<path id="路径" d="M14.25 2.96875L13.1578 2.96875C13.0047 2.96875 12.8594 3.03906 12.7656 3.15937L6.32345 11.3203L3.23438 7.40625C3.13907 7.28594 2.99532 7.21562 2.8422 7.21562L1.75001 7.21562C1.64532 7.21562 1.58751 7.33594 1.65157 7.41719L5.93126 12.8391C6.13126 13.0922 6.51563 13.0922 6.7172 12.8391L14.3484 3.16875C14.4125 3.08906 14.3547 2.96875 14.25 2.96875Z" fill="rgb(0,0,0)" fill-opacity="0.650980413" fill-rule="evenodd" />
+		<path id="路径" d="M13.1578 2.96875C13.0047 2.96875 12.8594 3.03906 12.7656 3.15937L6.32345 11.3203L3.23438 7.40625C3.13907 7.28594 2.99532 7.21562 2.8422 7.21562L1.75001 7.21562C1.64532 7.21562 1.58751 7.33594 1.65157 7.41719L5.93126 12.8391C6.13126 13.0922 6.51563 13.0922 6.7172 12.8391L14.3484 3.16875C14.4125 3.08906 14.3547 2.96875 14.25 2.96875L13.1578 2.96875Z" fill-rule="evenodd" stroke="rgb(151,151,151)" stroke-opacity="0" stroke-width="1.000000" />
+	</g>
+	<g id="ant-design">
+		<rect id="矩形" width="11.988293" height="11.988293" x="2.000000" y="2.000000" opacity="0" fill="rgb(5,95,194)" />
+		<path id="形状" d="M10.7277 4.4243C10.9819 4.67718 10.9819 5.08928 10.7277 5.34216C10.4748 5.59637 10.0627 5.59637 9.80848 5.34216L8.13333 3.66835C8.06911 3.60412 7.97278 3.59877 7.9032 3.65363C7.89785 3.65898 7.89116 3.66299 7.88581 3.66835L3.6792 7.87228C3.60963 7.94185 3.60963 8.05023 3.6792 8.1198L7.88715 12.3237C7.95672 12.3933 8.0651 12.3933 8.13467 12.3237L9.80715 10.6486C10.0613 10.3957 10.4721 10.3957 10.7263 10.6486C10.9806 10.9015 10.9806 11.3136 10.7263 11.5664L8.51733 13.7741C8.23454 14.0564 7.77657 14.0564 7.49378 13.7741L2.22616 8.51049C2.09 8.37526 2.01343 8.19129 2.01343 7.99938C2.01343 7.80748 2.09 7.62351 2.22616 7.48828L7.49512 2.22333C7.77609 1.94235 8.23502 1.93968 8.51867 2.21664C9.11968 2.81631 9.54471 3.24134 9.79243 3.48906L9.79377 3.49039L10.7277 4.4243ZM12.1406 5.87317L13.785 7.50952C13.921 7.64474 13.9976 7.82855 13.9979 8.02035C13.9981 8.21216 13.922 8.39617 13.7863 8.53174L12.1566 10.1601C11.9024 10.413 11.4916 10.413 11.2374 10.1601C11.1154 10.0385 11.0468 9.87338 11.0468 9.70113C11.0468 9.52888 11.1154 9.36373 11.2374 9.2422L12.3319 8.14908C12.4015 8.0795 12.4015 7.97112 12.3319 7.90155L11.2214 6.79236C11.0993 6.67084 11.0307 6.50569 11.0307 6.33344C11.0307 6.16119 11.0993 5.99604 11.2214 5.87451C11.4743 5.62029 11.8864 5.62029 12.1406 5.87317ZM6.61072 8.02612C6.61072 8.53377 6.8818 9.00286 7.32185 9.25668C7.76191 9.51051 8.30407 9.51051 8.74413 9.25668C9.18418 9.00286 9.45526 8.53377 9.45526 8.02612C9.45526 7.24136 8.81849 6.60518 8.03299 6.60518C7.24749 6.60518 6.61072 7.24136 6.61072 8.02612Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
+		<path id="形状" d="M10.7277 4.4243C10.9819 4.67718 10.9819 5.08928 10.7277 5.34216C10.4748 5.59637 10.0627 5.59637 9.80848 5.34216L8.13333 3.66835C8.06911 3.60412 7.97278 3.59877 7.9032 3.65363C7.89785 3.65898 7.89116 3.66299 7.88581 3.66835L3.6792 7.87228C3.60963 7.94185 3.60963 8.05023 3.6792 8.1198L7.88715 12.3237C7.95672 12.3933 8.0651 12.3933 8.13467 12.3237L9.80715 10.6486C10.0613 10.3957 10.4721 10.3957 10.7263 10.6486C10.9806 10.9015 10.9806 11.3136 10.7263 11.5664L8.51733 13.7741C8.23454 14.0564 7.77657 14.0564 7.49378 13.7741L2.22616 8.51049C2.09 8.37526 2.01343 8.19129 2.01343 7.99938C2.01343 7.80748 2.09 7.62351 2.22616 7.48828L7.49512 2.22333C7.77609 1.94235 8.23502 1.93968 8.51867 2.21664C9.11968 2.81631 9.54471 3.24134 9.79243 3.48906L9.79377 3.49039L10.7277 4.4243ZM12.1406 5.87317L13.785 7.50952C13.921 7.64474 13.9976 7.82855 13.9979 8.02035C13.9981 8.21216 13.922 8.39617 13.7863 8.53174L12.1566 10.1601C11.9024 10.413 11.4916 10.413 11.2374 10.1601C11.1154 10.0385 11.0468 9.87338 11.0468 9.70113C11.0468 9.52888 11.1154 9.36373 11.2374 9.2422L12.3319 8.14908C12.4015 8.0795 12.4015 7.97112 12.3319 7.90155L11.2214 6.79236C11.0993 6.67084 11.0307 6.50569 11.0307 6.33344C11.0307 6.16119 11.0993 5.99604 11.2214 5.87451C11.4743 5.62029 11.8864 5.62029 12.1406 5.87317ZM6.61072 8.02612C6.61072 8.53377 6.8818 9.00286 7.32185 9.25668C7.76191 9.51051 8.30407 9.51051 8.74413 9.25668C9.18418 9.00286 9.45526 8.53377 9.45526 8.02612C9.45526 7.24136 8.81849 6.60518 8.03299 6.60518C7.24749 6.60518 6.61072 7.24136 6.61072 8.02612Z" fill-rule="evenodd" stroke="rgb(151,151,151)" stroke-opacity="0" stroke-width="1.000000" />
+	</g>
+</svg>

src/views/decree/decreeLayout/assets/icons/icon3.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 349" d="M3.3334 13.3335C2.96673 13.3335 2.66673 13.0335 2.66673 12.6668L2.66673 10.0001C2.66673 9.63348 2.96673 9.33348 3.3334 9.33348C3.70006 9.33348 4.00006 9.63348 4.00006 10.0001L4.00006 12.6668C4.00006 13.0335 3.70006 13.3335 3.3334 13.3335L3.3334 13.3335ZM6.4334 13.3335C6.06673 13.3335 5.76673 13.0335 5.76673 12.6668L5.76673 7.66681C5.76673 7.30014 6.06673 7.00014 6.4334 7.00014C6.80006 7.00014 7.10006 7.30014 7.10006 7.66681L7.10006 12.6668C7.10006 13.0335 6.80006 13.3335 6.4334 13.3335ZM9.56673 13.3335C9.20006 13.3335 8.90006 13.0335 8.90006 12.6668L8.90006 9.00014C8.90006 8.63348 9.20006 8.33348 9.56673 8.33348C9.9334 8.33348 10.2334 8.63348 10.2334 9.00014L10.2334 12.6668C10.2334 13.0335 9.9334 13.3335 9.56673 13.3335L9.56673 13.3335ZM12.6667 13.3335C12.3001 13.3335 12.0001 13.0335 12.0001 12.6668L12.0001 8.00014C12.0001 7.63348 12.3001 7.33348 12.6667 7.33348C13.0334 7.33348 13.3334 7.63348 13.3334 8.00014L13.3334 12.6668C13.3334 13.0335 13.0334 13.3335 12.6667 13.3335ZM3.3334 8.00014C3.16673 8.00014 2.96673 7.93348 2.8334 7.76681C2.60006 7.50014 2.60006 7.06681 2.86673 6.83348L6.5334 3.50014C6.80006 3.26681 7.2334 3.26681 7.46673 3.53348C7.70006 3.80014 7.70006 4.23348 7.4334 4.46681L3.76673 7.80014C3.66673 7.93348 3.50006 8.00014 3.3334 8.00014Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	<path id="矢量 350" d="M9.6667 6.99979C9.50003 6.99979 9.3667 6.93312 9.23337 6.83312L6.5667 4.49979C6.30003 4.26645 6.2667 3.83312 6.50003 3.56645C6.73337 3.29979 7.1667 3.26645 7.43337 3.49979L10.1 5.83312C10.3667 6.06645 10.4 6.49979 10.1667 6.76645C10.0334 6.93312 9.8667 6.99979 9.6667 6.99979L9.6667 6.99979Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	<path id="矢量 351" d="M9.66667 7.00033C9.5 7.00033 9.33333 6.93366 9.2 6.80033C8.93333 6.53366 8.93333 6.13366 9.2 5.86699L12.2 2.86699C12.4667 2.60033 12.8667 2.60033 13.1333 2.86699C13.4 3.13366 13.4 3.53366 13.1333 3.80033L10.1333 6.80033C10 6.93366 9.83333 7.00033 9.66667 7.00033L9.66667 7.00033Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	<path id="矢量 352" d="M12.6667 4.00033L10.6667 4.00033C10.3 4.00033 10 3.70033 10 3.33366C10 2.96699 10.3 2.66699 10.6667 2.66699L12.6667 2.66699C13.0333 2.66699 13.3333 2.96699 13.3333 3.33366C13.3333 3.70033 13.0333 4.00033 12.6667 4.00033L12.6667 4.00033Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	<path id="矢量 353" d="M12.6667 6.00033C12.3 6.00033 12 5.70033 12 5.33366L12 3.33366C12 2.96699 12.3 2.66699 12.6667 2.66699C13.0333 2.66699 13.3333 2.96699 13.3333 3.33366L13.3333 5.33366C13.3333 5.70033 13.0333 6.00033 12.6667 6.00033Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+</svg>

src/views/decree/decreeLayout/assets/icons/icon3_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 349" d="M3.3334 13.3335C2.96673 13.3335 2.66673 13.0335 2.66673 12.6668L2.66673 10.0001C2.66673 9.63348 2.96673 9.33348 3.3334 9.33348C3.70006 9.33348 4.00006 9.63348 4.00006 10.0001L4.00006 12.6668C4.00006 13.0335 3.70006 13.3335 3.3334 13.3335L3.3334 13.3335ZM6.4334 13.3335C6.06673 13.3335 5.76673 13.0335 5.76673 12.6668L5.76673 7.66681C5.76673 7.30014 6.06673 7.00014 6.4334 7.00014C6.80006 7.00014 7.10006 7.30014 7.10006 7.66681L7.10006 12.6668C7.10006 13.0335 6.80006 13.3335 6.4334 13.3335ZM9.56673 13.3335C9.20006 13.3335 8.90006 13.0335 8.90006 12.6668L8.90006 9.00014C8.90006 8.63348 9.20006 8.33348 9.56673 8.33348C9.9334 8.33348 10.2334 8.63348 10.2334 9.00014L10.2334 12.6668C10.2334 13.0335 9.9334 13.3335 9.56673 13.3335L9.56673 13.3335ZM12.6667 13.3335C12.3001 13.3335 12.0001 13.0335 12.0001 12.6668L12.0001 8.00014C12.0001 7.63348 12.3001 7.33348 12.6667 7.33348C13.0334 7.33348 13.3334 7.63348 13.3334 8.00014L13.3334 12.6668C13.3334 13.0335 13.0334 13.3335 12.6667 13.3335ZM3.3334 8.00014C3.16673 8.00014 2.96673 7.93348 2.8334 7.76681C2.60006 7.50014 2.60006 7.06681 2.86673 6.83348L6.5334 3.50014C6.80006 3.26681 7.2334 3.26681 7.46673 3.53348C7.70006 3.80014 7.70006 4.23348 7.4334 4.46681L3.76673 7.80014C3.66673 7.93348 3.50006 8.00014 3.3334 8.00014Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<path id="矢量 350" d="M9.6667 6.99979C9.50003 6.99979 9.3667 6.93312 9.23337 6.83312L6.5667 4.49979C6.30003 4.26645 6.2667 3.83312 6.50003 3.56645C6.73337 3.29979 7.1667 3.26645 7.43337 3.49979L10.1 5.83312C10.3667 6.06645 10.4 6.49979 10.1667 6.76645C10.0334 6.93312 9.8667 6.99979 9.6667 6.99979L9.6667 6.99979Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<path id="矢量 351" d="M9.66667 7.00033C9.5 7.00033 9.33333 6.93366 9.2 6.80033C8.93333 6.53366 8.93333 6.13366 9.2 5.86699L12.2 2.86699C12.4667 2.60033 12.8667 2.60033 13.1333 2.86699C13.4 3.13366 13.4 3.53366 13.1333 3.80033L10.1333 6.80033C10 6.93366 9.83333 7.00033 9.66667 7.00033L9.66667 7.00033Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<path id="矢量 352" d="M12.6667 4.00033L10.6667 4.00033C10.3 4.00033 10 3.70033 10 3.33366C10 2.96699 10.3 2.66699 10.6667 2.66699L12.6667 2.66699C13.0333 2.66699 13.3333 2.96699 13.3333 3.33366C13.3333 3.70033 13.0333 4.00033 12.6667 4.00033L12.6667 4.00033Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<path id="矢量 353" d="M12.6667 6.00033C12.3 6.00033 12 5.70033 12 5.33366L12 3.33366C12 2.96699 12.3 2.66699 12.6667 2.66699C13.0333 2.66699 13.3333 2.96699 13.3333 3.33366L13.3333 5.33366C13.3333 5.70033 13.0333 6.00033 12.6667 6.00033Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/decree/decreeLayout/assets/icons/icon4.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
+	<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<g id="组合 105">
+		<path id="矩形 142" d="M2.08338 6.66666L1.00001 6.66667C0.447718 6.66667 0 6.21895 0 5.66666L0 1C0 0.447715 0.447715 0 1 0L5.66667 0C6.21895 0 6.66667 0.447715 6.66667 1L6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667L4.58328 6.66667" stroke="rgb(59,65,75)" stroke-width="1.200000" transform="matrix(0.707107,-0.707107,0.707107,0.707107,1.00024,8.07129)" />
+		<path id="矩形 143" d="M2.08338 6.66666L1.00001 6.66667C0.447718 6.66667 0 6.21895 0 5.66666L0 1C0 0.447715 0.447715 0 1 0L5.66667 0C6.21895 0 6.66667 0.447715 6.66667 1L6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667L4.58328 6.66667" stroke="rgb(59,65,75)" stroke-width="1.200000" transform="matrix(0.707107,-0.707107,-0.707107,-0.707107,10.4282,12.7852)" />
+	</g>
+</svg>

src/views/decree/decreeLayout/assets/icons/icon4_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
+	<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<g id="组合 105">
+		<path id="矩形 142" d="M2.08338 6.66666L1.00001 6.66667C0.447718 6.66667 0 6.21895 0 5.66666L0 1C0 0.447715 0.447715 0 1 0L5.66667 0C6.21895 0 6.66667 0.447715 6.66667 1L6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667L4.58328 6.66667" stroke="rgb(5,95,194)" stroke-width="1.200000" transform="matrix(0.707107,-0.707107,0.707107,0.707107,1.00024,8.07129)" />
+		<path id="矩形 143" d="M2.08338 6.66666L1.00001 6.66667C0.447718 6.66667 0 6.21895 0 5.66666L0 1C0 0.447715 0.447715 0 1 0L5.66667 0C6.21895 0 6.66667 0.447715 6.66667 1L6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667L4.58328 6.66667" stroke="rgb(5,95,194)" stroke-width="1.200000" transform="matrix(0.707107,-0.707107,-0.707107,-0.707107,10.4282,12.7852)" />
+	</g>
+</svg>

src/views/decree/decreeLayout/assets/icons/icon5.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 1651" d="M10.0503 2C10.3384 2 10.619 2.09657 10.852 2.27586C11.0851 2.45516 11.2585 2.70798 11.3475 2.99809C11.4366 3.28819 11.4366 3.6007 11.3475 3.8908C11.2585 4.18091 11.0851 4.43373 10.852 4.61303C10.619 4.79232 10.3384 4.88889 10.0503 4.88889L5.9583 4.88889C5.69558 4.88873 5.43848 4.80822 5.21793 4.65703C4.99737 4.50585 4.82274 4.29043 4.71502 4.03667C4.35984 4.08328 4.0252 4.23849 3.752 4.48332C3.4788 4.72814 3.27889 5.05197 3.17673 5.41519C3.07456 5.77842 3.07456 6.1653 3.17673 6.52853C3.27889 6.89176 3.4788 7.21558 3.752 7.46041C4.0252 7.70523 4.35984 7.86044 4.71502 7.90706C4.82284 7.65343 4.99751 7.43816 5.21806 7.28711C5.43861 7.13606 5.69565 7.05566 5.9583 7.05556L10.0503 7.05556C10.3175 7.05563 10.5789 7.13883 10.8019 7.29483C11.0248 7.45084 11.1996 7.67276 11.3045 7.93306C11.8894 7.98317 12.4467 8.21802 12.9042 8.60722C13.3618 8.99642 13.6985 9.52206 13.8708 10.1161C14.0431 10.7102 14.0431 11.3454 13.8708 11.9394C13.6985 12.5335 13.3618 13.0591 12.9042 13.4483C12.4467 13.8375 11.8894 14.0724 11.3045 14.1225C11.1996 14.3828 11.0248 14.6047 10.8019 14.7607C10.5789 14.9167 10.3175 14.9999 10.0503 15L5.9583 15C5.71881 15.0001 5.48352 14.9334 5.27608 14.8067C5.06865 14.6799 4.89638 14.4976 4.77661 14.2779C4.65684 14.0583 4.59378 13.8092 4.59378 13.5556C4.59378 13.3019 4.65684 13.0528 4.77661 12.8332C4.89638 12.6136 5.06865 12.4312 5.27608 12.3044C5.48352 12.1777 5.71881 12.111 5.9583 12.1111L10.0503 12.1111C10.6041 12.1111 11.0794 12.4607 11.2929 12.9626C11.6488 12.9171 11.9845 12.7624 12.2585 12.5177C12.5326 12.273 12.7333 11.9488 12.8358 11.585C12.9384 11.2212 12.9384 10.8336 12.8358 10.4698C12.7333 10.106 12.5326 9.78186 12.2585 9.53714C11.9845 9.29241 11.6488 9.13778 11.2929 9.09222C11.1853 9.34593 11.0108 9.56132 10.7904 9.71251C10.5699 9.86369 10.3129 9.94423 10.0503 9.94444L5.9583 9.94444C5.69087 9.94445 5.42933 9.86121 5.20622 9.70506C4.9831 9.54892 4.80826 9.32676 4.70342 9.06622C4.11732 9.01784 3.55849 8.78394 3.09952 8.39491C2.64055 8.00587 2.30265 7.47968 2.12971 6.88468C1.95676 6.28967 1.95676 5.65334 2.12971 5.05833C2.30265 4.46332 2.64055 3.93713 3.09952 3.54809C3.55849 3.15906 4.11732 2.92516 4.70342 2.87678C4.80847 2.61651 4.9834 2.39465 5.2065 2.23878C5.4296 2.0829 5.69102 1.99987 5.9583 2L10.0503 2Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+</svg>

src/views/decree/decreeLayout/assets/icons/icon5_active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 1651" d="M10.0503 2C10.3384 2 10.619 2.09657 10.852 2.27586C11.0851 2.45516 11.2585 2.70798 11.3475 2.99809C11.4366 3.28819 11.4366 3.6007 11.3475 3.8908C11.2585 4.18091 11.0851 4.43373 10.852 4.61303C10.619 4.79232 10.3384 4.88889 10.0503 4.88889L5.9583 4.88889C5.69558 4.88873 5.43848 4.80822 5.21793 4.65703C4.99737 4.50585 4.82274 4.29043 4.71502 4.03667C4.35984 4.08328 4.0252 4.23849 3.752 4.48332C3.4788 4.72814 3.27889 5.05197 3.17673 5.41519C3.07456 5.77842 3.07456 6.1653 3.17673 6.52853C3.27889 6.89176 3.4788 7.21558 3.752 7.46041C4.0252 7.70523 4.35984 7.86044 4.71502 7.90706C4.82284 7.65343 4.99751 7.43816 5.21806 7.28711C5.43861 7.13606 5.69565 7.05566 5.9583 7.05556L10.0503 7.05556C10.3175 7.05563 10.5789 7.13883 10.8019 7.29483C11.0248 7.45084 11.1996 7.67276 11.3045 7.93306C11.8894 7.98317 12.4467 8.21802 12.9042 8.60722C13.3618 8.99642 13.6985 9.52206 13.8708 10.1161C14.0431 10.7102 14.0431 11.3454 13.8708 11.9394C13.6985 12.5335 13.3618 13.0591 12.9042 13.4483C12.4467 13.8375 11.8894 14.0724 11.3045 14.1225C11.1996 14.3828 11.0248 14.6047 10.8019 14.7607C10.5789 14.9167 10.3175 14.9999 10.0503 15L5.9583 15C5.71881 15.0001 5.48352 14.9334 5.27608 14.8067C5.06865 14.6799 4.89638 14.4976 4.77661 14.2779C4.65684 14.0583 4.59378 13.8092 4.59378 13.5556C4.59378 13.3019 4.65684 13.0528 4.77661 12.8332C4.89638 12.6136 5.06865 12.4312 5.27608 12.3044C5.48352 12.1777 5.71881 12.111 5.9583 12.1111L10.0503 12.1111C10.6041 12.1111 11.0794 12.4607 11.2929 12.9626C11.6488 12.9171 11.9845 12.7624 12.2585 12.5177C12.5326 12.273 12.7333 11.9488 12.8358 11.585C12.9384 11.2212 12.9384 10.8336 12.8358 10.4698C12.7333 10.106 12.5326 9.78186 12.2585 9.53714C11.9845 9.29241 11.6488 9.13778 11.2929 9.09222C11.1853 9.34593 11.0108 9.56132 10.7904 9.71251C10.5699 9.86369 10.3129 9.94423 10.0503 9.94444L5.9583 9.94444C5.69087 9.94445 5.42933 9.86121 5.20622 9.70506C4.9831 9.54892 4.80826 9.32676 4.70342 9.06622C4.11732 9.01784 3.55849 8.78394 3.09952 8.39491C2.64055 8.00587 2.30265 7.47968 2.12971 6.88468C1.95676 6.28967 1.95676 5.65334 2.12971 5.05833C2.30265 4.46332 2.64055 3.93713 3.09952 3.54809C3.55849 3.15906 4.11732 2.92516 4.70342 2.87678C4.80847 2.61651 4.9834 2.39465 5.2065 2.23878C5.4296 2.0829 5.69102 1.99987 5.9583 2L10.0503 2Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/decree/decreeLayout/index.vue

@@ -2,61 +2,68 @@
 	<div class="layout-container">
 		<!-- 导航菜单 -->
 		<div class="layout-main">
-			<div class="layout-main-header">
-				<div class="layout-main-header-left-box">
-					<div class="left-box-top">
-						<div class="icon">
-							<img :src="summaryInfo.imageUrl" alt="" />
-						</div>
-						<div class="info">
-							<div class="info-box1">{{ summaryInfo.name }}</div>
-							<div class="info-box2">
-								<div class="info-box2-item item1">{{ summaryInfo.order }}</div>
-								|
-								<div class="info-box2-item item2">{{ summaryInfo.type }}</div>
-								|
-								<div class="info-box2-item item3">{{ summaryInfo.ename }}</div>
-							</div>
-						</div>
-					</div>
-					<div class="left-box-bottom">
-						<div
-							class="left-box-bottom-item"
-							:class="{ leftBoxBottomItemActive: activeTitle === item.name }"
-							v-for="(item, index) in mainHeaderBtnList"
-							:key="index"
-							@click="handleClickMainHeaderBtn(item)"
-						>
-							<div class="icon">
-								<img v-if="activeTitle === item.name" :src="item.activeIcon" alt="" />
-								<img v-else :src="item.icon" alt="" />
+			<div class="header-main">
+
+				<div class="layout-main-header">
+					<div class="layout-main-header-container">
+	
+						<div class="layout-main-header-left-box">
+							<div class="left-box-top">
+								<div class="icon">
+									
+									<img v-if="summaryInfo.imageUrl" :src="summaryInfo.imageUrl" alt="" style="height: 40px;margin-top: 12px;"/>
+									<img v-else :src="USALogo" alt="" />
+								</div>
+								<div class="info">
+									<div class="info-box1">{{ summaryInfo.name }}</div>
+									<div class="info-box2">
+										<div class="info-box2-item item1" v-if="summaryInfo.order">{{ summaryInfo.order +" | "}}</div>
+										
+										<div class="info-box2-item item2" v-if="summaryInfo.type">{{ summaryInfo.type + " | " }}</div>
+										<div class="info-box2-item item3" v-if="summaryInfo.ename">{{ summaryInfo.ename }}</div>
+									</div>
+								</div>
 							</div>
-							<div class="name" :class="{ nameActive: activeTitle === item.name }">
-								{{ item.name }}
+							<div class="left-box-bottom">
+								<div
+									class="left-box-bottom-item"
+									:class="{ leftBoxBottomItemActive: activeTitle === item.name }"
+									v-for="(item, index) in mainHeaderBtnList"
+									:key="index"
+									@click="handleClickMainHeaderBtn(item)"
+								>
+									<div class="icon">
+										<img v-if="activeTitle === item.name" :src="item.activeIcon" alt="" />
+										<img v-else :src="item.icon" alt="" />
+									</div>
+									<div class="name" :class="{ nameActive: activeTitle === item.name }">
+										{{ item.name }}
+									</div>
+								</div>
 							</div>
 						</div>
-					</div>
-				</div>
-				<div class="layout-main-header-right-box">
-					<div class="right-box-top">
-						<div class="time">{{ summaryInfo.postDate }}</div>
-						<div class="name">{{ summaryInfo.orgName }}</div>
-					</div>
-					<div class="right-box-bottom">
-						<div class="btn" @click="handleShowReport">
-							<div class="icon">
-								<img src="./assets/icons/report-icon.png" alt="" />
+						<div class="layout-main-header-right-box">
+							<div class="right-box-top">
+								<div class="time">{{ summaryInfo.postDate }}</div>
+								<div class="name">{{ summaryInfo.orgName }}</div>
 							</div>
-							<div class="text">{{ "政令原文" }}</div>
-						</div>
-						<div class="btn-active">
-							<div class="icon-active">
-								<img src="./assets/icons/edit-icon.png" alt="" />
+							<div class="right-box-bottom">
+								<div class="btn" @click="handleShowReport">
+									<div class="icon">
+										<img src="./assets/icons/report-icon.png" alt="" />
+									</div>
+									<div class="text">{{ "政令原文" }}</div>
+								</div>
+								<div class="btn-active">
+									<div class="icon-active">
+										<img src="./assets/icons/edit-icon.png" alt="" />
+									</div>
+									<div class="text-active">{{ "分析报告" }}</div>
+								</div>
+								<!-- <el-button type="plain" size="large" icon="Search" @click="handleShowReport">政令原文</el-button>
+								<el-button type="primary" size="large" icon="EditPen">分析报告</el-button> -->
 							</div>
-							<div class="text-active">{{ "分析报告" }}</div>
 						</div>
-						<!-- <el-button type="plain" size="large" icon="Search" @click="handleShowReport">政令原文</el-button>
-						<el-button type="primary" size="large" icon="EditPen">分析报告</el-button> -->
 					</div>
 				</div>
 			</div>
@@ -144,13 +151,13 @@ import { getDecreeSummary } from "@/api/decree/introduction";
 import { getDecreeReport } from "@/api/decree/introduction";
 import search from "./assets/images/search.png";
 
-import icon1 from "./assets/icons/icon1.png";
-import icon1Active from "./assets/icons/icon1_active.png";
-import icon2 from "./assets/icons/icon2.png";
-import icon2Active from "./assets/icons/icon2_active.png";
-import icon3 from "./assets/icons/icon3.png";
-import icon3Active from "./assets/icons/icon3_active.png";
-
+import icon1 from "./assets/icons/icon1.svg";
+import icon1Active from "./assets/icons/icon1_active.svg";
+import icon2 from "./assets/icons/icon2.svg";
+import icon2Active from "./assets/icons/icon2_active.svg";
+import icon3 from "./assets/icons/icon3.svg";
+import icon3Active from "./assets/icons/icon3_active.svg";
+import USALogo from "./assets/images/USA-logo.png";
 import DefaultIcon2 from "@/assets/icons/default-icon2.png";
 
 const route = useRoute();
@@ -347,6 +354,16 @@ onMounted(() => {
 	}
 	.layout-main {
 		width: 100%;
+		overflow-y: auto;
+		.header-main {
+			position: sticky;
+			top: 0;
+			z-index: 1000;
+			width: 100%;
+			background-color: #fff;
+			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+			overflow: hidden;
+		}
 		.layout-main-header {
 			width: 1600px;
 			height: 137px;
@@ -356,21 +373,29 @@ onMounted(() => {
 			justify-content: space-between;
 			position: sticky;
 			top: 0;
-			z-index: 99999999;
+			// z-index: 100;
+			.layout-main-header-container {
+				width: 1600px;
+				margin: 0 auto;
+				display: flex;
+				justify-content: space-between;
+			}
 			.layout-main-header-left-box {
 				width: 1100px;
 				margin-top: 13px;
 				.left-box-top {
 					height: 64px;
 					display: flex;
+					align-items: center;
 					.icon {
-						width: 122px;
+						width: 64px;
 						height: 64px;
 						border-radius: 4px;
 						overflow: hidden;
 						img {
 							width: 100%;
 							height: 100%;
+							object-fit: fill;
 						}
 					}
 					.info {
@@ -407,19 +432,19 @@ onMounted(() => {
 								padding: 0 10px;
 							}
 							.item1 {
-								width: 100px;
+								max-width: 100px;
 								overflow: hidden;
 								text-overflow: ellipsis;
 								white-space: nowrap;
 							}
 							.item2 {
-								width: 180px;
+								max-width: 180px;
 								overflow: hidden;
 								text-overflow: ellipsis;
 								white-space: nowrap;
 							}
 							.item3 {
-								width: 420px;
+								max-width: 420px;
 								overflow: hidden;
 								text-overflow: ellipsis;
 								white-space: nowrap;

src/views/decree/decreeLayout/overview/index.vue

@@ -69,7 +69,7 @@ onMounted(() => {
 	justify-content: center;
 	.left {
 		width: 160px;
-		padding-top: 16px;
+		padding-top: 8px;
 		.sider-btn {
 			margin-top: 20px;
 			margin-left: 20px;

src/views/decree/decreeLayout/overview/introduction/index.vue

@@ -3,7 +3,9 @@
 		<div class="left">
 			<div class="box1">
 				<div class="box-header">
-					<div class="header-left"></div>
+					<div class="header-left">
+
+					</div>
 					<div class="title">基本信息</div>
 
 					<div class="header-right">
@@ -16,8 +18,13 @@
 					</div>
 				</div>
 				<div class="box1-main">
-					<div class="box1-main-left">
-						<img :src="basicInfo.img" alt="" />
+					<div class="box1-main-left" v-if="basicInfo.img">
+						<img  :src="basicInfo.img" alt="" />
+					</div>
+					<div v-else class="box1-main-left-img-mock">
+						<img class="img-mock-badge-img" src="./assets/images/badge.png">
+						<p class="img-mock-badge-title">{{basicInfo.eName  }}</p>
+						<p class="img-mock-badge-org">The White House</p>
 					</div>
 					<div class="box1-main-right">
 						<div class="item">
@@ -29,7 +36,8 @@
 							<div class="item-right text" v-if="basicInfo.eName?.length < 60">
 								{{ basicInfo.eName }}
 							</div>
-							<el-popover v-else effect="dark" :width="500" :content="basicInfo.eName" placement="top-start">
+							<el-popover v-else effect="dark" :width="500" :content="basicInfo.eName"
+								placement="top-start">
 								<template #reference>
 									<div class="item-right text">
 										{{ basicInfo.eName }}
@@ -96,13 +104,8 @@
 				<div class="box2-footer">
 					<div class="box2-footer-left">{{ `共 ${majorListNum} 项` }}</div>
 					<div class="box2-footer-right">
-						<el-pagination
-							@current-change="handleCurrentChange"
-							:page-size="5"
-							background
-							layout="prev, pager, next"
-							:total="majorListNum"
-						/>
+						<el-pagination @current-change="handleCurrentChange" :page-size="5" background
+							layout="prev, pager, next" :total="majorListNum" />
 					</div>
 				</div>
 			</div>
@@ -166,12 +169,8 @@
 					</div>
 					<div class="box3-bottom-main">
 						<el-timeline style="max-width: 500px">
-							<el-timeline-item
-								:timestamp="item.newsDate"
-								placement="top"
-								v-for="(item, index) in eventList"
-								:key="index"
-							>
+							<el-timeline-item :timestamp="item.newsDate" placement="top"
+								v-for="(item, index) in eventList?.slice(0,3)" :key="index">
 								<div class="timeline-content">
 									{{ item.newsContent }}
 								</div>
@@ -274,7 +273,7 @@ const handleMajorList = async () => {
 			majorList.value = [];
 			majorListNum.value = 0;
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 handleMajorList();
 
@@ -289,6 +288,7 @@ const box3TopTopData = ref({
 
 const box3TopBottomData = ref([]);
 
+
 // 跳转行政机构主页
 const handleToInstitution = item => {
 	const curRoute = router.resolve({
@@ -330,6 +330,7 @@ const handleGetOrgnization = async () => {
 			box3TopTopData.value.eName = res.data.ename;
 			eventList.value = res.data.newsList;
 			box3TopBottomData.value = res.data.personList;
+
 		}
 	} catch (error) {
 		console.error("执行机构error", error);
@@ -338,6 +339,7 @@ const handleGetOrgnization = async () => {
 			logo: "",
 			name: "",
 			eName: ""
+
 		};
 		eventList.value = [];
 	}
@@ -351,10 +353,12 @@ onMounted(() => {
 <style lang="scss" scoped>
 .introduction-wrap {
 	display: flex;
+
 	.box-header {
 		height: 56px;
 		display: flex;
 		position: relative;
+
 		.header-left {
 			margin-top: 18px;
 			width: 8px;
@@ -362,6 +366,7 @@ onMounted(() => {
 			border-radius: 0 4px 4px 0;
 			background: var(--color-main-active);
 		}
+
 		.title {
 			margin-left: 14px;
 			margin-top: 14px;
@@ -372,6 +377,7 @@ onMounted(() => {
 			font-size: 20px;
 			font-weight: 700;
 		}
+
 		.header-btn-box {
 			position: absolute;
 			z-index: 9999;
@@ -387,6 +393,7 @@ onMounted(() => {
 			overflow: hidden;
 			overflow-y: auto;
 			padding-right: 5px;
+
 			.btn {
 				min-width: min-content;
 				height: 28px;
@@ -402,12 +409,14 @@ onMounted(() => {
 				line-height: 28px;
 				cursor: pointer;
 			}
+
 			.btnActive {
 				border: 1px solid var(--color-main-active);
 				color: var(--color-main-active);
 				background: rgba(231, 243, 255, 1);
 			}
 		}
+
 		.header-right {
 			position: absolute;
 			top: 14px;
@@ -415,9 +424,11 @@ onMounted(() => {
 			height: 28px;
 			display: flex;
 			gap: 4px;
+
 			.icon {
 				width: 28px;
 				height: 28px;
+
 				img {
 					width: 100%;
 					height: 100%;
@@ -425,8 +436,10 @@ onMounted(() => {
 			}
 		}
 	}
+
 	.left {
 		width: 1064px;
+
 		.box1 {
 			margin-top: 16px;
 			width: 1064px;
@@ -434,17 +447,46 @@ onMounted(() => {
 			border-radius: 10px;
 			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
 			background: rgba(255, 255, 255, 1);
+
 			.box1-main {
 				display: flex;
+
 				.box1-main-left {
 					width: 395px;
 					height: 332px;
-					margin-left: 42px;
+					margin-left: 24px;
+					
 					img {
 						width: 100%;
 						// height: 100%;
 					}
 				}
+				.box1-main-left-img-mock{
+					width: 240px;
+					height: 332px;
+					margin-left: 24px;
+					background-color: #0b1932;
+					display: flex;
+					align-items: center;
+					flex-direction: column;
+					padding: 16px;
+					.img-mock-badge-img{
+						width: 80px;
+						height: 80px;
+					}
+					.img-mock-badge-title{
+						text-align: center;
+						font-size: 20px;
+						line-height: 28px;
+						color: #fff;
+					}
+					.img-mock-badge-org{
+						text-align: center;
+						font-size: 14px;
+						color: #fff;
+					}
+				}
+
 				.box1-main-right {
 					width: 590px;
 					margin-left: 20px;
@@ -453,21 +495,26 @@ onMounted(() => {
 					font-size: 16px;
 					font-weight: 700;
 					line-height: 24px;
+
 					.item {
 						height: 30px;
 						display: flex;
 						margin-bottom: 17px;
+
 						.item-left {
 							width: 100px;
 						}
+
 						.item-right {
 							width: 470px;
 							overflow: hidden;
 							text-overflow: ellipsis;
 							white-space: nowrap;
 						}
+
 						.tag-box {
 							display: flex;
+
 							.tag {
 								height: 24px;
 								line-height: 24px;
@@ -483,6 +530,7 @@ onMounted(() => {
 								margin-right: 8px;
 							}
 						}
+
 						.text {
 							font-weight: normal !important;
 						}
@@ -490,6 +538,7 @@ onMounted(() => {
 				}
 			}
 		}
+
 		.box2 {
 			margin-top: 16px;
 			width: 1064px;
@@ -497,11 +546,13 @@ onMounted(() => {
 			border-radius: 10px;
 			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
 			background: rgba(255, 255, 255, 1);
+
 			.box2-main {
 				margin-left: 22px;
 				height: 280px;
 				overflow: hidden;
 				overflow-y: auto;
+
 				.box2-item {
 					width: 1015px;
 					// height: 48px;
@@ -513,9 +564,11 @@ onMounted(() => {
 					display: flex;
 					align-items: center;
 					padding: 12px 0;
+
 					&:nth-child(2n-1) {
 						background: rgba(247, 248, 249, 1);
 					}
+
 					.id {
 						margin-left: 15px;
 						width: 24px;
@@ -526,6 +579,7 @@ onMounted(() => {
 						background: #e7f3ff;
 						color: #0a57a6;
 					}
+
 					.title {
 						width: 1020px;
 						line-height: 24px;
@@ -538,10 +592,12 @@ onMounted(() => {
 						// text-overflow: ellipsis;
 						// white-space: nowrap;
 					}
+
 					.open {
 						width: 16px;
 						height: 16px;
 						margin-top: 16px;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -549,10 +605,12 @@ onMounted(() => {
 					}
 				}
 			}
+
 			.box2-footer {
 				margin: 20px 22px;
 				display: flex;
 				justify-content: space-between;
+
 				.box2-footer-left {
 					height: 20px;
 					color: rgba(132, 136, 142, 1);
@@ -564,9 +622,11 @@ onMounted(() => {
 			}
 		}
 	}
+
 	.right {
 		width: 520px;
 		margin-left: 16px;
+
 		.box3 {
 			margin-top: 16px;
 			width: 520px;
@@ -574,10 +634,12 @@ onMounted(() => {
 			border-radius: 10px;
 			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
 			background: rgba(255, 255, 255, 1);
+
 			.box3-top {
 				margin-top: 2px;
 				// height: 241px;
 				border-bottom: 1px solid rgba(234, 236, 238, 1);
+
 				.box3-top-top {
 					width: 473px;
 					height: 88px;
@@ -590,12 +652,14 @@ onMounted(() => {
 					margin: 0 auto;
 					position: relative;
 					cursor: pointer;
+
 					.more {
 						position: absolute;
 						right: 17px;
 						top: 17px;
 						display: flex;
 						gap: 3px;
+
 						.text {
 							height: 16px;
 							color: rgba(5, 95, 194, 1);
@@ -604,27 +668,33 @@ onMounted(() => {
 							font-weight: 400;
 							line-height: 16px;
 						}
+
 						.icon {
 							width: 16px;
 							height: 16px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
 					}
+
 					.left {
 						width: 64px;
 						height: 64px;
 						margin-left: 17px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.right {
 						width: 370px;
 						margin-left: 15px;
+
 						.name {
 							height: 26px;
 							color: rgba(59, 65, 75, 1);
@@ -633,6 +703,7 @@ onMounted(() => {
 							font-weight: 700;
 							line-height: 26px;
 						}
+
 						.ename {
 							margin-top: 6px;
 							height: 24px;
@@ -644,25 +715,30 @@ onMounted(() => {
 						}
 					}
 				}
+
 				.box3-top-bottom {
 					width: 473px;
 					height: 193px;
 					margin: 0 auto;
+
 					.box3-top-bottom-header {
 						height: 40px;
 						display: flex;
 						padding-top: 14px;
 						box-sizing: border-box;
 						gap: 12px;
+
 						.icon {
 							margin-top: 5px;
 							width: 14px;
 							height: 14px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.text {
 							width: 100px;
 							height: 24px;
@@ -676,6 +752,7 @@ onMounted(() => {
 							text-align: left;
 						}
 					}
+
 					.box3-top-bottom-main {
 						margin-top: 2px;
 						height: 130px;
@@ -684,23 +761,30 @@ onMounted(() => {
 						display: flex;
 						flex-wrap: wrap;
 						justify-content: space-between;
+
 						.box3-top-bottom-item {
 							margin-top: 12px;
 							height: 48px;
 							width: 200px;
 							display: flex;
 							justify-content: flex-start;
+
 							.box3-top-bottom-item-left {
 								width: 48px;
 								height: 48px;
+								border-radius: 24px;
+								overflow: hidden;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.box3-top-bottom-item-right {
 								margin-left: 8px;
 								width: 144px;
+
 								.name {
 									width: 144px;
 									height: 24px;
@@ -716,6 +800,7 @@ onMounted(() => {
 									text-overflow: ellipsis;
 									white-space: nowrap;
 								}
+
 								.position {
 									margin-top: 1px;
 									width: 144px;
@@ -737,20 +822,24 @@ onMounted(() => {
 					}
 				}
 			}
+
 			.box3-bottom {
 				.box3-bottom-header {
 					height: 59px;
 					display: flex;
+
 					.header-icon {
 						margin-left: 22px;
 						margin-top: 27px;
 						width: 16px;
 						height: 16px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.header-title {
 						margin-left: 12px;
 						margin-top: 23px;
@@ -762,15 +851,51 @@ onMounted(() => {
 						line-height: 24px;
 					}
 				}
+
 				.box3-bottom-main {
 					width: 510px;
 					height: 440px;
 					overflow: hidden;
 					overflow-y: auto;
+
+					:deep(.el-timeline) {
+						padding: 8px 0px 0px 25px !important;
+					}
+
+					:deep(.el-timeline-item__node) {
+						border: 4px solid var(--color-main-active) !important;
+						background-color: #fff;
+					}
+
+					:deep(.el-timeline-item) {
+						padding-bottom: 12px !important;
+					}
+
+					:deep(.el-timeline-item__timestamp) {
+						color: var(--color-main-active) !important;
+						font-family: Microsoft YaHei !important;
+						font-size: 16px !important;
+						font-weight: 600 !important;
+						padding-top: 0px !important;
+					}
+
+					.timeline-content {
+						color: var(--text-primary-65-color);
+						font-family: Microsoft YaHei;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 26px;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 3;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
 				}
 			}
 		}
 	}
+
 	.report {
 		padding: 10px 150px;
 		position: absolute;
@@ -780,6 +905,7 @@ onMounted(() => {
 		width: 100%;
 		height: 100%;
 		background: #f7f8f9;
+
 		.report-close {
 			position: absolute;
 			top: 20px;
@@ -787,11 +913,13 @@ onMounted(() => {
 			width: 20px;
 			height: 20px;
 			cursor: pointer;
+
 			img {
 				width: 100%;
 				height: 100%;
 			}
 		}
+
 		.report-header {
 			width: 100%;
 			height: 50px;
@@ -806,12 +934,15 @@ onMounted(() => {
 			padding-left: 30px;
 			border-bottom: 1px solid rgba(234, 236, 238, 1);
 		}
+
 		.report-main {
 			display: flex;
 			height: calc(100% - 100px);
 			justify-content: space-between;
+
 			.left {
 				width: 800px;
+
 				.noContent {
 					height: 100px;
 					line-height: 100px;
@@ -823,8 +954,10 @@ onMounted(() => {
 					font-weight: 400;
 				}
 			}
+
 			.right {
 				width: 800px;
+
 				.noContent {
 					height: 100px;
 					line-height: 100px;

src/views/exportControl/v2.0CommercialControlList/components/sanctionsOverview/components/introductionPage/index.vue

-<template>
-	<div class="introduction-page">
-		<div class="left">
-			<div class="left-top">
-				<div class="title">
-					<div class="box"></div>
-					<div class="text">基本信息</div>
-					<div class="btn">
-						<img src="../../../../assets/下载按钮.png" alt />
-						<img src="../../../../assets/收藏按钮.png" alt />
-					</div>
-				</div>
-				<div class="left-top-main">
-					<div class="left-top-main-title">{{ CCLInfo.description }}</div>
-					<div class="left-top-main-content">
-						<div class="content-item">
-							<span class="label">法律依据：</span>
-							<span class="text">{{ CCLInfo.legalBasis }}</span>
-						</div>
-						<div class="content-item">
-							<span class="label">管制对象：</span>
-							<span class="text">{{ CCLInfo.controlledObject }}</span>
-						</div>
-						<div class="content-item">
-							<span class="label">核心限制措施：</span>
-							<span class="text">{{ CCLInfo.restrictiveMeasure }}</span>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="left-center">
-				<div class="title">
-					<div class="box"></div>
-					<div class="text">出口管制分类编码（ECCN）</div>
-					<div class="btn">
-						<img src="../../../../assets/下载按钮.png" alt />
-						<img src="../../../../assets/收藏按钮.png" alt />
-					</div>
-				</div>
-				<div class="button-list">
-					<div
-						:class="['button', {'click': item.isClick}]"
-						@click="changeECCN(item)"
-						v-for="(item, i) in ECCNList"
-						:key="i"
-					>
-						<span>第{{ item.ranking }}位 {{ item.name }}</span>
-					</div>
-				</div>
-				<div class="description">
-					<li>{{ currentECCN.description }}</li>
-				</div>
-				<el-table :data="tableData" stripe class="table-class">
-					<el-table-column prop="categoryCode" label="第一项" />
-					<el-table-column prop="name" label="物项类别" width="460" />
-					<el-table-column prop="nameZh" label="说明" width="460" />
-				</el-table>
-			</div>
-			<div class="left-bottom">
-				<div class="title">
-					<div class="box"></div>
-					<div class="text">商业管制清单更新历史</div>
-					<div class="filters">
-						<el-select
-							v-model="selectedDomain"
-							placeholder="Select"
-							style="width: 150px; height: 32px; margin-right: 16px"
-						>
-							<el-option
-								v-for="item in domainOptions"
-								:key="item.value"
-								:label="item.label"
-								:value="item.value"
-							/>
-						</el-select>
-						<!-- <el-checkbox v-model="onlyChina">只看涉华动态</el-checkbox> -->
-					</div>
-					<div class="btn">
-						<img src="../../../../assets/下载按钮.png" alt />
-						<img src="../../../../assets/收藏按钮.png" alt />
-					</div>
-				</div>
-				<div class="left-bottom-main">
-					<div class="sanction-list" v-for="(item, i) in sanctionList" :key="item.id">
-						<div class="time">
-							<div class="year">{{ item.year }}</div>
-							<div class="date">{{ item.date }}</div>
-						</div>
-						<div class="img-zone">
-							<img :src="item.icon || title" alt />
-							<div v-if="i < sanctionList.length - 1" :class="['img-line', {'img-line-last': i === sanctionList.length - 1}]"></div>
-						</div>
-						<div class="main">
-							<div class="main-title">{{ item.name }}</div>
-							<!-- <div class="main-title" @click="handleClick(item)">{{ item.name }}</div> -->
-							<el-tooltip
-								effect="dark"
-								:content="item.summary"
-								popper-class="common-prompt-popper"
-								placement="top"
-								:show-after="500"
-							>
-								<div class="main-desc">{{ item.summary }}</div>
-							</el-tooltip>
-							<div class="tag-box">
-								<div v-for="tag in item.techDomainList" :key="tag" class="tag-item">{{ tag }}</div>
-							</div>
-
-							<div
-								:class="{ 'count-tag': item.cnEntityCount }"
-							>{{ item.cnEntityCount ? `${item.cnEntityCount}家中国实体` : "" }}</div>
-						</div>
-					</div>
-				</div>
-				<div class="left-footer">
-					<div class="total-count">共 {{ totalAll }} 项</div>
-					<el-pagination
-						v-model:current-page="currentPageAll"
-						:page-size="pageSizeAll"
-						:total="totalAll"
-						layout="prev, pager, next"
-						background
-						@current-change="handlePageChangeAll"
-					/>
-				</div>
-			</div>
-		</div>
-		<div class="right">
-			<div class="title">
-				<div class="box"></div>
-				<div class="text">发布机构</div>
-				<div class="btn">
-					<img src="../../../../assets/下载按钮.png" alt />
-					<img src="../../../../assets/收藏按钮.png" alt />
-				</div>
-			</div>
-			<div class="right-main">
-				<div class="right-main-title">
-					<img :src="publishInfo.imageUrl" alt />
-					<div class="title-zone">
-						<div class="title-line">
-							<div class="title-text">{{ publishInfo.orgNameZh }} ></div>
-							<div class="title-detail" @click="handleClickOrg(publishInfo)">
-								<span>查看官网</span>
-								<img src="../../../../assets/dakai.png" alt />
-							</div>
-						</div>
-						<div class="title-entext">{{ publishInfo.orgName }}</div>
-					</div>
-				</div>
-				<!-- 关键人物 -->
-				<div class="right-main-key-person">
-					<div class="key-person-title">
-						<img :src="icon01" alt />
-						<span>关键人物</span>
-					</div>
-					<div class="key-person-list">
-						<div
-							class="person-item"
-							v-for="(item, index) in publishInfo.personList"
-							:key="index"
-							@click="handlePerClick(item)"
-						>
-							<img :src="item.imageUrl" alt />
-
-							<div class="person-info">
-								<el-tooltip
-									effect="dark"
-									:content="item.name"
-									popper-class="common-prompt-popper"
-									placement="top"
-									:show-after="500"
-								>
-									<div class="name">{{ item.name }}</div>
-								</el-tooltip>
-								<el-tooltip
-									effect="dark"
-									:content="item.position"
-									popper-class="common-prompt-popper"
-									placement="top"
-									:show-after="500"
-								>
-									<div class="title1">{{ item.position }}</div>
-								</el-tooltip>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- 机构动态 -->
-				<div class="right-main-dynamic">
-					<div class="dynamic-title">
-						<img :src="icon02" alt />
-						<span>机构动态</span>
-					</div>
-					<div class="dynamic-list">
-						<div class="dynamic-item" v-for="(item, index) in publishOrgInfo" :key="item.newsId">
-							<div class="dot-line">
-								<div class="dot"></div>
-								<div class="line" v-if="index !== publishOrgInfo.length - 1"></div>
-							</div>
-							<div class="content-box">
-								<div class="date">{{ item.publishDate }}</div>
-								<div class="text">{{ item.newsContent }}</div>
-							</div>
-						</div>
-					</div>
-					<div
-						class="more-btn"
-						v-if="publishOrgInfo.length < dynamicTotal"
-						@click="handleLoadMoreDynamic"
-					>
-						<span>查看更多</span>
-						<el-icon>
-							<ArrowDown />
-						</el-icon>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch, onBeforeMount } from "vue";
-import router from "@/router";
-import title from "../../../../assets/title.png";
-import defaultIcon from "../../../../../assets/icons/default-avatar.png";
-import icon01 from "../../assets/icon01.png";
-import icon02 from "../../assets/icon02.png";
-import { ArrowDown } from "@element-plus/icons-vue";
-import { ElTable, ElTableColumn, ElButton, ElSelect, ElOption, ElInput } from 'element-plus'
-import { getCCLInfo, getECCN, getECCNList, getPublishInfo, getPublishOrgInfo, getEntityUpdateInfo } from "@/api/exportControlV2.0.js";
-
-// 处理点击发布机构的方法
-const handleClickOrg = item => {
-  // console.log("点击了发布机构:", item);
-  const route = router.resolve({
-    path: "/institution",
-    query: {
-      id: item.id
-    }
-  });
-  window.open(route.href, "_blank");
-};
-
-// 处理点击关键人物的方法
-const handlePerClick = item => {
-  console.log("点击了关键人物:", item);
-  const route = router.resolve({
-    path: "/characterPage",
-    query: {
-      type: item.type,
-      personId: item.id
-    }
-  });
-  window.open(route.href, "_blank");
-};
-
-// 处理点击实体名称的方法
-const handleClick = item => {
-  // console.log("点击了实体名称:", item);
-  const route = router.resolve({
-    path: "/exportControl/singleSanction",
-    query: {
-      id: item.id
-    }
-  });
-  window.open(route.href, "_blank");
-};
-
-const selectedDomain = ref(0);
-const onlyChina = ref(false);
-const domainOptions = [
-  { label: "全部领域", value: 0 },
-  { label: "人工智能", value: 1 },
-  { label: "生物科技", value: 2 },
-  { label: "新一代信息技术", value: 3 },
-  { label: "量子科技", value: 4 },
-  { label: "新能源", value: 5 },
-  { label: "集成电路", value: 6 },
-  { label: "海洋", value: 7 },
-  { label: "先进制造", value: 8 },
-  { label: "新材料", value: 9 },
-  { label: "航空航天", value: 10 },
-  { label: "深海", value: 11 },
-  { label: "极地", value: 12 },
-  { label: "太空", value: 13 },
-  { label: "核", value: 14 }
-];
-
-const sanctionList = ref([]);
-const currentPageAll = ref(1);
-const pageSizeAll = ref(10);
-const totalAll = ref(0);
-// 获取商业管制清单更新历史
-const getSanctionUpdate = async () => {
-  // 传递的参数
-  // {"isCn":false,"techDomainIds":[1],"typeName":"商业管制清单","pageNum":1,"pageSize":10}
-  const data = {
-    isCn: onlyChina.value,
-    techDomainIds: selectedDomain.value ? [selectedDomain.value] : [],
-    // typeName: "实体清单",
-    typeName: "商业管制清单",
-    pageNum: currentPageAll.value,
-    pageSize: pageSizeAll.value
-  };
-  try {
-    const res = await getEntityUpdateInfo(data);
-    console.log('-----getSanctionUpdate', res)
-    if (res && res.code === 200) {
-      console.log(res.data.content);
-      sanctionList.value = (res.data.content || []).map(item => ({
-        ...item,
-        year: item.postDate ? item.postDate.split("-")[0] : "",
-        date: item.postDate ? `${item.postDate.split("-")[1]}月${item.postDate.split("-")[2]}日` : "",
-        techDomainList: item.techDomainList || [],
-        icon: ""
-      }));
-      totalAll.value = res.data.totalElements || 0;
-    }
-  } catch (error) {
-    console.error("获取商业管制清单更新历史失败:", error);
-  }
-};
-
-// 监听筛选条件变化
-watch([selectedDomain, onlyChina], () => {
-  currentPageAll.value = 1;
-  getSanctionUpdate();
-});
-
-const handlePageChangeAll = val => {
-  currentPageAll.value = val;
-  getSanctionUpdate();
-  const container = document.querySelector(".entity-list");
-  const target = document.querySelector(".left-bottom");
-  if (container && target) {
-    const containerRect = container.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-    // 148是吸顶头部的高度，减去它以避免标题被遮挡
-    const top = targetRect.top - containerRect.top + container.scrollTop - 148;
-    container.scrollTo({
-      top: top,
-      behavior: "smooth"
-    });
-  }
-};
-
-// 获取商业管制清单发布机构
-const publishInfo = ref({});
-const getPublishInfoFn = async () => {
-  const params = {
-    sanTypeId: 13 // 商业管制清单固定13
-  };
-  try {
-    const res = await getPublishInfo(params);
-    if (res && res.code === 200) {
-      publishInfo.value = res.data;
-      console.log('------getPublishInfoFn', res.data)
-      // 获取发布机构动态
-      getPublishOrgInfoFn();
-    }
-  } catch (error) {
-    console.error("获取商业管制清单发布机构失败:", error);
-  }
-};
-// 获取发布机构动态
-const publishOrgInfo = ref([]);
-const dynamicPage = ref(1);
-const dynamicPageSize = ref(3);
-const dynamicTotal = ref(0);
-
-const getPublishOrgInfoFn = async (isLoadMore = false) => {
-  if (publishInfo.value && !publishInfo.value.id) return;
-
-  const params = {
-    orgId: publishInfo.value.id,
-    pageNum: dynamicPage.value,
-    pageSize: dynamicPageSize.value
-  };
-  try {
-    const res = await getPublishOrgInfo(params);
-    if (res && res.code === 200) {
-      const newRows = (res.data.content || []).map(item => ({
-        ...item,
-        publishDate: item.newsDate,
-        title: item.newsTitle
-      }));
-
-      if (isLoadMore) {
-        publishOrgInfo.value = [...publishOrgInfo.value, ...newRows];
-      } else {
-        publishOrgInfo.value = newRows;
-      }
-      dynamicTotal.value = res.data.totalElements || 0;
-    }
-  } catch (error) {
-    console.error("获取发布机构动态失败:", error);
-  }
-};
-
-const handleLoadMoreDynamic = () => {
-  dynamicPage.value++;
-  getPublishOrgInfoFn(true);
-};
-
-// 获取商业管制清单基本信息
-// todo: 待对接后端接口
-const CCLInfo = ref({
-  description: "xxxxx",
-  legalBasis: "法律依据",
-  controlledObject: "管制对象",
-  name: '',
-  orgId: '',
-  orgLogoUrl: '',
-  orgName: '',
-  originalName: '',
-  shortName: '',
-  restrictiveMeasure: "核心限制措施"
-});
-const getCCLInfoFn = async () => {
-  try {
-    const res = await getCCLInfo();
-    if (res && res.code === 200) {
-      CCLInfo.value = res.data;
-      console.log('getCCLInfoFn', CCLInfo.value)
-    }
-  } catch (error) {
-    console.error("获取商业管制清单基本信息失败:", error);
-  }
-};
-
-// 定义ECCN列表
-const ECCNList = ref([
-  {
-    name: '第1位: 物项类别',
-    isClick: true,
-    description: 'ECCN的第一位是一个数字，它指明了受控物项所属的技术或行业类别，对于快速定位物项在《商业管制清单》中的位置至关重要',
-    key: 'wxlb' // 用于和后端对接的
-  }
-])
-
-const getCCL_ECCN_Type = async () => {
-  try {
-    const res = await getECCN();
-    if (res && res.code === 200) {
-      ECCNList.value = res.data;
-      console.log('getCCL_ECCN_Type', ECCNList.value)
-      // 为每个对象增加是否点击对象
-      ECCNList.value.forEach((item) => {
-        item.isClick = false
-      })
-      // 默认点击第一个
-      ECCNList.value[0].isClick = true
-      // 默认将第一个赋值给currentECCN
-      currentECCN.value = ECCNList.value[0]
-    }
-  } catch (error) {
-    console.error("获取商业管制清单出口管制分类编码失败:", error);
-  }
-};
-
-// 表格数据
-const tableData = ref([
-  {
-    categoryCode: '0',
-    categoryId: 1,
-    code: null,
-    description: null,
-    descriptionZh: null,
-    id: 1,
-    name: 'Nuclear Materials, Facilities and Equipment and Miscellaneous',
-    nameZh: "核材料、设备设施及其他类似物项"
-  }
-])
-const currentECCN = ref({
-  name: '第1位: 物项类别',
-  isClick: true,
-  description: 'ECCN的第一位是一个数字，它指明了受控物项所属的技术或行业类别，对于快速定位物项在《商业管制清单》中的位置至关重要',
-  id: 1,
-  ranking: 1
-})
-
-/**
- * 修改ECCN
- */
-function changeECCN(item) {
-  ECCNList.value.forEach((i) => i.isClick = false)
-  item.isClick = true
-  currentECCN.value = item
-}
-
-// 监听当前的ECCN，更新获取列表数据
-watch(
-  () => currentECCN.value,
-  async (newValue) => {
-    // 调用接口更新table数据
-    const params = {
-      id: currentECCN.value.id
-    }
-    try {
-      const res = await getECCNList(params);
-      if (res && res.code === 200) {
-        tableData.value = res.data;
-        console.log('getECCNList', tableData.value)
-      }
-    } catch (error) {
-      console.error("获取商业管制清单出口管制分类编码信息列表列表数据:", error);
-    }
-  },
-  { deep: true }
-);
-
-onMounted(() => {
-  // 获取商业管制清单基本信息
-  getCCLInfoFn();
-  // 获取商业管制清单的分类编码
-  getCCL_ECCN_Type()
-  // 获取商业管制清单发布机构
-  getPublishInfoFn();
-  // 获取商业管制清单更新历史
-  getSanctionUpdate();
-
-
-});
-</script>
-
-<style scoped lang="scss">
-* {
-	margin: 0;
-	padding: 0;
-	user-select: none;
-}
-.introduction-page {
-	width: 1601px;
-	margin: 0 auto;
-	padding-top: 16px;
-	padding-bottom: 50px;
-	display: flex;
-	justify-content: space-between;
-	.left {
-		width: 1064px;
-		.left-top {
-			width: 100%;
-			height: auto;
-			padding-bottom: 20px;
-			border-radius: 10px;
-			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-			background-color: #fff;
-			margin-bottom: 16px;
-			.left-top-main {
-				width: 100%;
-				padding: 8px 26px 0 26px;
-				.left-top-main-title {
-					padding: 16px 24px;
-					border-radius: 4px;
-					border: 1px solid rgba(231, 243, 255, 1);
-					background: linear-gradient(to bottom right, rgba(231, 243, 255, 1), rgba(231, 243, 255, 0));
-					font-size: 16px;
-					font-weight: 700;
-					font-family: "Microsoft YaHei";
-					line-height: 30px;
-					color: rgb(5, 95, 194);
-					margin-bottom: 17px;
-				}
-				.left-top-main-content {
-					.content-item {
-						margin-bottom: 13px;
-						font-size: 16px;
-						font-family: "Microsoft YaHei";
-						display: flex;
-
-						.label {
-							width: 120px;
-							flex-shrink: 0;
-							font-weight: 700;
-							color: rgb(59, 65, 75);
-							white-space: nowrap;
-						}
-
-						.text {
-							color: rgb(59, 65, 75);
-							text-align: justify;
-						}
-					}
-				}
-			}
-		}
-		.left-center {
-			width: 100%;
-			// height: 705px;
-			height: auto;
-			border-radius: 10px;
-			background-color: #fff;
-			margin-bottom: 16px;
-
-			.button-list {
-				width: 1012px;
-				height: 32px;
-				margin-left: 26px;
-				display: flex;
-				align-items: center;
-				justify-content: space-around;
-
-				.button {
-					width: 196px;
-					height: 32px;
-					border-radius: 4px;
-					border: 1px solid rgba($color: #eeeeee, $alpha: 0.8);
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					color: rgb(59, 65, 75);
-
-					span {
-						font-size: 16px;
-						font-weight: 400;
-						font-family: "Microsoft YaHei";
-						line-height: 24px;
-						letter-spacing: 0px;
-						font-style: Regular;
-					}
-				}
-
-				.click {
-					background: rgba(231, 243, 255, 1);
-					border: 1px solid rgba(231, 243, 255, 1);
-					color: rgb(5, 95, 194);
-				}
-			}
-			.description {
-				width: 991px;
-				height: auto;
-				min-height: 30px;
-				margin-top: 16px;
-				margin-left: 63px;
-			}
-
-			.table-class {
-				width: 1013px;
-				height: auto;
-				padding-bottom: 10px;
-				margin-top: 16px;
-				margin-left: 24px;
-				color: rgb(59, 65, 75);
-				font-size: 16px;
-				font-weight: 400;
-				font-family: "Microsoft YaHei";
-				line-height: 24px;
-				letter-spacing: 0px;
-				font-style: Regular;
-			}
-		}
-		.left-bottom {
-			width: 100%;
-			// min-height: 1000px;
-			border-radius: 10px;
-			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-			background-color: #fff;
-			.title {
-				border-bottom: 1px solid rgb(234, 236, 238);
-				.filters {
-					margin-left: auto;
-					display: flex;
-					align-items: center;
-					margin-right: 20px;
-				}
-				.btn {
-					margin-left: 0;
-				}
-			}
-			.left-bottom-main {
-				padding: 16px 42px 20px 25px;
-				.sanction-list {
-					width: 1169px;
-					// padding: 0px 0 12px 0;
-					display: flex;
-					// justify-content: flex-start;
-					// height: 154px;
-					.time {
-						width: 80px;
-						height: 50px;
-						display: flex;
-						flex-direction: column;
-						align-items: flex-end;
-						justify-content: center;
-						margin-right: 16px;
-						font-family: "Microsoft YaHei";
-						color: rgb(5, 95, 194);
-						font-weight: 700;
-
-						.year {
-							font-size: 16px;
-							line-height: 24px;
-						}
-
-						.date {
-							font-size: 16px;
-							line-height: 24px;
-						}
-					}
-					.img-zone {
-						display: flex;
-						flex-direction: column;
-						align-items: center;
-						// justify-content: center;
-						// width: 30px;
-						margin-top: 14px;
-						// margin-right: 16px;
-						// height: calc(100% - 16px);
-						margin-right: 16px;
-						img {
-							width: 30px;
-							height: 30px;
-							border-radius: 50%;
-							z-index: 2;
-						}
-
-						.img-line {
-							width: 1px;
-							border: 1px solid rgba($color: #eeeeee, $alpha: 1);
-							// height: calc(100% - 30px);
-							position: absolute;
-							height: 154px;
-						}
-
-						.img-line-last {
-							height: 140px;
-						}
-					}
-
-					.main {
-						width: 855px;
-						padding-top: 14px;
-						position: relative;
-						.main-title {
-							cursor: pointer;
-							width: 700px;
-							font-size: 20px;
-							font-weight: 700;
-							line-height: 26px;
-							font-family: "Microsoft YaHei";
-							color: rgb(59, 65, 75);
-							margin-bottom: 11px;
-						}
-						.main-desc {
-							font-size: 16px;
-							font-weight: 400;
-							line-height: 30px;
-							font-family: "Microsoft YaHei";
-							color: rgb(95, 101, 108);
-							margin-bottom: 9px;
-							display: -webkit-box;
-							-webkit-box-orient: vertical;
-							-webkit-line-clamp: 2;
-							overflow: hidden;
-							text-overflow: ellipsis;
-						}
-						.tag-box {
-							display: flex;
-							.tag-item {
-								padding: 1px 8px;
-								margin-right: 8px;
-								border-radius: 4px;
-								font-size: 14px;
-								font-weight: 400;
-								line-height: 22px;
-								font-family: "Microsoft YaHei";
-								color: rgb(5, 95, 194);
-								background-color: rgba(231, 243, 255, 1);
-							}
-						}
-						.count-tag {
-							position: absolute;
-							padding: 2px 8px;
-							top: 0;
-							right: 0;
-							font-size: 16px;
-							font-weight: 400;
-							line-height: 24px;
-							font-family: "Microsoft YaHei";
-							color: rgb(206, 79, 81);
-							border-radius: 20px;
-							background-color: rgba(206, 79, 81, 0.1);
-						}
-					}
-				}
-			}
-			.left-footer {
-				width: 100%;
-				height: 73px;
-				border-top: 1px solid rgb(234, 236, 238);
-				padding: 0 31px;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				.total-count {
-					font-size: 16px;
-					font-weight: 400;
-					line-height: 24px;
-					font-family: "Microsoft YaHei";
-					color: rgb(59, 65, 75);
-				}
-			}
-		}
-	}
-	.right {
-		width: 520px;
-		height: 1020px;
-		border-radius: 10px;
-		padding-bottom: 20px;
-		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-		background-color: #fff;
-		.right-main {
-			padding: 7px 24px 0px 23px;
-			.right-main-title {
-				cursor: pointer;
-				width: 473px;
-				height: auto;
-				border-radius: 4px;
-				background-color: rgb(247, 248, 249);
-				border: 1px solid rgb(234, 236, 238);
-				display: flex;
-				margin-bottom: 20px;
-				padding: 16px;
-				.title-zone {
-					width: calc(100% - 64px);
-				}
-				img {
-					width: 64px;
-					height: 64px;
-					margin-right: 14px;
-				}
-				.title-line {
-					display: flex;
-					height: 26px;
-					margin-bottom: 6px;
-					justify-content: space-between;
-					align-items: center;
-				}
-				.title-detail {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					span {
-						font-family: Microsoft YaHei;
-						color: rgba(5, 95, 194, 1);
-						font-size: 14px;
-						font-weight: 400;
-						line-height: 22px;
-						letter-spacing: 0px;
-						text-align: center;
-						margin-top: 1px;
-					}
-					img {
-						width: 16px;
-						height: 16px;
-						margin-right: 0px;
-					}
-				}
-				.title-text {
-					font-size: 20px;
-					font-weight: 700;
-					line-height: 26px;
-					font-family: "Microsoft YaHei";
-					color: rgb(59, 65, 75);
-				}
-				.title-entext {
-					font-size: 16px;
-					font-weight: 400;
-					line-height: 24px;
-					font-family: "Microsoft YaHei";
-					color: rgb(95, 101, 108);
-				}
-			}
-			.right-main-key-person {
-				width: 100%;
-				padding-bottom: 20px;
-				border-bottom: 1px solid rgb(234, 236, 238);
-				margin-bottom: 18px;
-				.key-person-title {
-					display: flex;
-					align-items: center;
-					margin-bottom: 19px;
-					img {
-						width: 14px;
-						height: 14px;
-						margin-right: 12px;
-					}
-					span {
-						font-size: 18px;
-						font-weight: 700;
-						font-family: "Microsoft YaHei";
-						color: rgb(59, 65, 75);
-					}
-				}
-				.key-person-list {
-					display: flex;
-					flex-wrap: wrap;
-
-					.person-item {
-						width: 185px;
-						cursor: pointer;
-						display: flex;
-						align-items: center;
-						margin-bottom: 16px;
-						&:nth-child(2n-1) {
-							margin-left: 28px;
-							margin-right: 39px;
-						}
-						img {
-							width: 48px;
-							height: 48px;
-							border-radius: 50%;
-							margin-right: 8px;
-							object-fit: cover;
-							flex-shrink: 0;
-						}
-						.person-info {
-							width: calc(100% - 48px - 8px);
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap; /* 防止文本换行 */
-							.name {
-								font-size: 16px;
-								font-weight: 700;
-								font-family: "Microsoft YaHei";
-								color: rgb(59, 65, 75);
-								margin-bottom: 1px;
-								white-space: nowrap;
-							}
-							.title1 {
-								font-size: 16px;
-								font-weight: 400;
-								font-family: "Microsoft YaHei";
-								color: rgb(95, 101, 108);
-								line-height: 1.2;
-								// white-space: nowrap;
-							}
-						}
-					}
-				}
-			}
-			.right-main-dynamic {
-				width: 100%;
-				.dynamic-title {
-					display: flex;
-					align-items: center;
-					margin-bottom: 19px;
-					img {
-						width: 14px;
-						height: 14px;
-						margin-right: 12px;
-					}
-					span {
-						font-size: 18px;
-						font-weight: 700;
-						font-family: "Microsoft YaHei";
-						color: rgb(59, 65, 75);
-					}
-				}
-				.dynamic-list {
-					max-height: 500px;
-					overflow-y: auto;
-					padding-right: 10px;
-
-					/* 滚动条样式 */
-					&::-webkit-scrollbar {
-						width: 6px;
-					}
-					&::-webkit-scrollbar-track {
-						background: #f1f1f1;
-						border-radius: 3px;
-					}
-					&::-webkit-scrollbar-thumb {
-						background: #c1c1c1;
-						border-radius: 3px;
-						&:hover {
-							background: #a8a8a8;
-						}
-					}
-
-					.dynamic-item {
-						display: flex;
-						position: relative;
-						padding-bottom: 24px;
-						.dot-line {
-							width: 12px;
-							display: flex;
-							flex-direction: column;
-							align-items: center;
-							margin-right: 12px;
-							margin-top: 6px;
-							.dot {
-								width: 8px;
-								height: 8px;
-								border-radius: 50%;
-								border: 2px solid rgb(5, 95, 194);
-								background-color: #fff;
-								z-index: 1;
-							}
-							.line {
-								width: 1px;
-								height: calc(100% - 2px);
-								background-color: rgb(234, 236, 238);
-								position: absolute;
-								top: 12px;
-								left: 5px;
-							}
-						}
-						.content-box {
-							flex: 1;
-							.date {
-								font-size: 16px;
-								font-weight: 700;
-								font-family: "Microsoft YaHei";
-								color: rgb(5, 95, 194);
-								margin-bottom: 8px;
-							}
-							.text {
-								font-size: 16px;
-								font-weight: 400;
-								font-family: "Microsoft YaHei";
-								color: rgb(59, 65, 75);
-								line-height: 30px;
-								text-align: justify;
-							}
-						}
-					}
-				}
-				.more-btn {
-					width: 100%;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					font-size: 14px;
-					color: rgb(5, 95, 194);
-					cursor: pointer;
-					margin-top: 8px;
-
-					span {
-						margin-right: 4px;
-					}
-				}
-			}
-		}
-	}
-}
-
-.title {
-	width: 100%;
-	height: 56px;
-	display: flex;
-	align-items: center;
-	padding: 14px 12px 16px 0;
-	.box {
-		width: 8px;
-		height: 20px;
-		background-color: rgb(5, 95, 194);
-		border-bottom-right-radius: 4px;
-		border-top-right-radius: 4px;
-		margin-right: 14px;
-	}
-	.text {
-		font-size: 20px;
-		font-weight: 700;
-		font-family: "Microsoft YaHei";
-		line-height: 26px;
-		color: rgb(5, 95, 194);
-	}
-	.btn {
-		width: 60px;
-		height: 28px;
-		margin-left: auto;
-		img {
-			width: 28px;
-			height: 28px;
-			cursor: pointer;
-		}
-		img:first-child {
-			margin-right: 4px;
-		}
-	}
-}
-</style>
-<style scoped>
-.common-prompt-popper.el-popper {
-	padding: 8px 16px !important;
-	border-radius: 10px !important;
-	background-color: rgb(59, 65, 75) !important;
-	font-size: 16px !important;
-	font-weight: 400 !important;
-	font-family: "Microsoft YaHei" !important;
-	line-height: 30px !important;
-	color: #fff !important;
-	border: none !important;
-	max-width: 500px !important;
-}
-
-.common-prompt-popper.el-popper .el-popper__arrow::before {
-	background-color: rgb(59, 65, 75) !important;
-	border-color: rgb(59, 65, 75) !important;
-}
-
-:deep(.el-table thead) {
-	color: rgb(59, 65, 75);
-}
-
-:deep(.el-table tr) {
-	height: 48px;
-}
-</style>
+<template>
+	<div class="introduction-page">
+		<div class="left">
+			<div class="left-top">
+				<div class="title">
+					<div class="box"></div>
+					<div class="text">基本信息</div>
+					<div class="btn">
+						<img src="../../../../assets/下载按钮.png" alt />
+						<img src="../../../../assets/收藏按钮.png" alt />
+					</div>
+				</div>
+				<div class="left-top-main">
+					<div class="left-top-main-title">{{ CCLInfo.description }}</div>
+					<div class="left-top-main-content">
+						<div class="content-item">
+							<span class="label">法律依据：</span>
+							<span class="text">{{ CCLInfo.legalBasis }}</span>
+						</div>
+						<div class="content-item">
+							<span class="label">管制对象：</span>
+							<span class="text">{{ CCLInfo.controlledObject }}</span>
+						</div>
+						<div class="content-item">
+							<span class="label">核心限制措施：</span>
+							<span class="text">{{ CCLInfo.restrictiveMeasure }}</span>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="left-center">
+				<div class="title">
+					<div class="box"></div>
+					<div class="text">出口管制分类编码（ECCN）</div>
+					<div class="btn">
+						<img src="../../../../assets/下载按钮.png" alt />
+						<img src="../../../../assets/收藏按钮.png" alt />
+					</div>
+				</div>
+				<div class="button-list">
+					<div
+						:class="['button', {'click': item.isClick}]"
+						@click="changeECCN(item)"
+						v-for="(item, i) in ECCNList"
+						:key="i"
+					>
+						<span>第{{ item.ranking }}位 {{ item.name }}</span>
+					</div>
+				</div>
+				<div class="description">
+					<li>{{ currentECCN.description }}</li>
+				</div>
+				<el-table :data="tableData" stripe class="table-class">
+					<el-table-column prop="categoryCode" label="第一项" />
+					<el-table-column prop="name" label="物项类别" width="460" />
+					<el-table-column prop="nameZh" label="说明" width="460" />
+				</el-table>
+			</div>
+			<div class="left-bottom">
+				<div class="title">
+					<div class="box"></div>
+					<div class="text">商业管制清单更新历史</div>
+					<div class="filters">
+						<el-select
+							v-model="selectedDomain"
+							placeholder="Select"
+							style="width: 150px; height: 32px; margin-right: 16px"
+						>
+							<el-option
+								v-for="item in domainOptions"
+								:key="item.value"
+								:label="item.label"
+								:value="item.value"
+							/>
+						</el-select>
+						<!-- <el-checkbox v-model="onlyChina">只看涉华动态</el-checkbox> -->
+					</div>
+					<div class="btn">
+						<img src="../../../../assets/下载按钮.png" alt />
+						<img src="../../../../assets/收藏按钮.png" alt />
+					</div>
+				</div>
+				<div class="left-bottom-main">
+					<div class="sanction-list" v-for="(item, i) in sanctionList" :key="item.id">
+						<div class="time">
+							<div class="year">{{ item.year }}</div>
+							<div class="date">{{ item.date }}</div>
+						</div>
+						<div class="img-zone">
+							<img :src="item.icon || title" alt />
+							<div v-if="i < sanctionList.length - 1" :class="['img-line', {'img-line-last': i === sanctionList.length - 1}]"></div>
+						</div>
+						<div class="main">
+							<div class="main-title">{{ item.name }}</div>
+							<!-- <div class="main-title" @click="handleClick(item)">{{ item.name }}</div> -->
+							<el-tooltip
+								effect="dark"
+								:content="item.summary"
+								popper-class="common-prompt-popper"
+								placement="top"
+								:show-after="500"
+							>
+								<div class="main-desc">{{ item.summary }}</div>
+							</el-tooltip>
+							<div class="tag-box">
+								<div v-for="tag in item.techDomainList" :key="tag" class="tag-item">{{ tag }}</div>
+							</div>
+
+							<div
+								:class="{ 'count-tag': item.cnEntityCount }"
+							>{{ item.cnEntityCount ? `${item.cnEntityCount}家中国实体` : "" }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="left-footer">
+					<div class="total-count">共 {{ totalAll }} 项</div>
+					<el-pagination
+						v-model:current-page="currentPageAll"
+						:page-size="pageSizeAll"
+						:total="totalAll"
+						layout="prev, pager, next"
+						background
+						@current-change="handlePageChangeAll"
+					/>
+				</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="title">
+				<div class="box"></div>
+				<div class="text">发布机构</div>
+				<div class="btn">
+					<img src="../../../../assets/下载按钮.png" alt />
+					<img src="../../../../assets/收藏按钮.png" alt />
+				</div>
+			</div>
+			<div class="right-main">
+				<div class="right-main-title">
+					<img :src="publishInfo.imageUrl" alt />
+					<div class="title-zone">
+						<div class="title-line">
+							<div class="title-text">{{ publishInfo.orgNameZh }} ></div>
+							<div class="title-detail" @click="handleClickOrg(publishInfo)">
+								<span>查看官网</span>
+								<img src="../../../../assets/dakai.png" alt />
+							</div>
+						</div>
+						<div class="title-entext">{{ publishInfo.orgName }}</div>
+					</div>
+				</div>
+				<!-- 关键人物 -->
+				<div class="right-main-key-person">
+					<div class="key-person-title">
+						<img :src="icon01" alt />
+						<span>关键人物</span>
+					</div>
+					<div class="key-person-list">
+						<div
+							class="person-item"
+							v-for="(item, index) in publishInfo.personList"
+							:key="index"
+							@click="handlePerClick(item)"
+						>
+							<img :src="item.imageUrl" alt />
+
+							<div class="person-info">
+								<el-tooltip
+									effect="dark"
+									:content="item.name"
+									popper-class="common-prompt-popper"
+									placement="top"
+									:show-after="500"
+								>
+									<div class="name">{{ item.name }}</div>
+								</el-tooltip>
+								<el-tooltip
+									effect="dark"
+									:content="item.position"
+									popper-class="common-prompt-popper"
+									placement="top"
+									:show-after="500"
+								>
+									<div class="title1">{{ item.position }}</div>
+								</el-tooltip>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- 机构动态 -->
+				<div class="right-main-dynamic">
+					<div class="dynamic-title">
+						<img :src="icon02" alt />
+						<span>机构动态</span>
+					</div>
+					<div class="dynamic-list">
+						<div class="dynamic-item" v-for="(item, index) in publishOrgInfo" :key="item.newsId">
+							<div class="dot-line">
+								<div class="dot"></div>
+								<div class="line" v-if="index !== publishOrgInfo.length - 1"></div>
+							</div>
+							<div class="content-box">
+								<div class="date">{{ item.publishDate }}</div>
+								<div class="text">{{ item.newsContent }}</div>
+							</div>
+						</div>
+					</div>
+					<div
+						class="more-btn"
+						v-if="publishOrgInfo.length < dynamicTotal"
+						@click="handleLoadMoreDynamic"
+					>
+						<span>查看更多</span>
+						<el-icon>
+							<ArrowDown />
+						</el-icon>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeMount } from "vue";
+import router from "@/router";
+import title from "../../../../assets/title.png";
+import defaultIcon from "../../../../../assets/icons/default-avatar.png";
+import icon01 from "../../assets/icon01.png";
+import icon02 from "../../assets/icon02.png";
+import { ArrowDown } from "@element-plus/icons-vue";
+import { ElTable, ElTableColumn, ElButton, ElSelect, ElOption, ElInput } from 'element-plus'
+import { getCCLInfo, getECCN, getECCNList, getPublishInfo, getPublishOrgInfo, getEntityUpdateInfo } from "@/api/exportControlV2.0.js";
+
+// 处理点击发布机构的方法
+const handleClickOrg = item => {
+  // console.log("点击了发布机构:", item);
+  const route = router.resolve({
+    path: "/institution",
+    query: {
+      id: item.id
+    }
+  });
+  window.open(route.href, "_blank");
+};
+
+// 处理点击关键人物的方法
+const handlePerClick = item => {
+  console.log("点击了关键人物:", item);
+  const route = router.resolve({
+    path: "/characterPage",
+    query: {
+      type: item.type,
+      personId: item.id
+    }
+  });
+  window.open(route.href, "_blank");
+};
+
+// 处理点击实体名称的方法
+const handleClick = item => {
+  // console.log("点击了实体名称:", item);
+  const route = router.resolve({
+    path: "/exportControl/singleSanction",
+    query: {
+      id: item.id
+    }
+  });
+  window.open(route.href, "_blank");
+};
+
+const selectedDomain = ref(0);
+const onlyChina = ref(false);
+const domainOptions = [
+  { label: "全部领域", value: 0 },
+  { label: "人工智能", value: 1 },
+  { label: "生物科技", value: 2 },
+  { label: "新一代信息技术", value: 3 },
+  { label: "量子科技", value: 4 },
+  { label: "新能源", value: 5 },
+  { label: "集成电路", value: 6 },
+  { label: "海洋", value: 7 },
+  { label: "先进制造", value: 8 },
+  { label: "新材料", value: 9 },
+  { label: "航空航天", value: 10 },
+  { label: "深海", value: 11 },
+  { label: "极地", value: 12 },
+  { label: "太空", value: 13 },
+  { label: "核", value: 14 }
+];
+
+const sanctionList = ref([]);
+const currentPageAll = ref(1);
+const pageSizeAll = ref(10);
+const totalAll = ref(0);
+// 获取商业管制清单更新历史
+const getSanctionUpdate = async () => {
+  // 传递的参数
+  // {"isCn":false,"techDomainIds":[1],"typeName":"商业管制清单","pageNum":1,"pageSize":10}
+  const data = {
+    isCn: onlyChina.value,
+    techDomainIds: selectedDomain.value ? [selectedDomain.value] : [],
+    // typeName: "实体清单",
+    typeName: "商业管制清单",
+    pageNum: currentPageAll.value,
+    pageSize: pageSizeAll.value
+  };
+  try {
+    const res = await getEntityUpdateInfo(data);
+    console.log('-----getSanctionUpdate', res)
+    if (res && res.code === 200) {
+      console.log(res.data.content);
+      sanctionList.value = (res.data.content || []).map(item => ({
+        ...item,
+        year: item.postDate ? item.postDate.split("-")[0] : "",
+        date: item.postDate ? `${item.postDate.split("-")[1]}月${item.postDate.split("-")[2]}日` : "",
+        techDomainList: item.techDomainList || [],
+        icon: ""
+      }));
+      totalAll.value = res.data.totalElements || 0;
+    }
+  } catch (error) {
+    console.error("获取商业管制清单更新历史失败:", error);
+  }
+};
+
+// 监听筛选条件变化
+watch([selectedDomain, onlyChina], () => {
+  currentPageAll.value = 1;
+  getSanctionUpdate();
+});
+
+const handlePageChangeAll = val => {
+  currentPageAll.value = val;
+  getSanctionUpdate();
+  const container = document.querySelector(".entity-list");
+  const target = document.querySelector(".left-bottom");
+  if (container && target) {
+    const containerRect = container.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    // 148是吸顶头部的高度，减去它以避免标题被遮挡
+    const top = targetRect.top - containerRect.top + container.scrollTop - 148;
+    container.scrollTo({
+      top: top,
+      behavior: "smooth"
+    });
+  }
+};
+
+// 获取商业管制清单发布机构
+const publishInfo = ref({});
+const getPublishInfoFn = async () => {
+  const params = {
+    sanTypeId: 13 // 商业管制清单固定13
+  };
+  try {
+    const res = await getPublishInfo(params);
+    if (res && res.code === 200) {
+      publishInfo.value = res.data;
+      console.log('------getPublishInfoFn', res.data)
+      // 获取发布机构动态
+      getPublishOrgInfoFn();
+    }
+  } catch (error) {
+    console.error("获取商业管制清单发布机构失败:", error);
+  }
+};
+// 获取发布机构动态
+const publishOrgInfo = ref([]);
+const dynamicPage = ref(1);
+const dynamicPageSize = ref(3);
+const dynamicTotal = ref(0);
+
+const getPublishOrgInfoFn = async (isLoadMore = false) => {
+  if (publishInfo.value && !publishInfo.value.id) return;
+
+  const params = {
+    orgId: publishInfo.value.id,
+    pageNum: dynamicPage.value,
+    pageSize: dynamicPageSize.value
+  };
+  try {
+    const res = await getPublishOrgInfo(params);
+    if (res && res.code === 200) {
+      const newRows = (res.data.content || []).map(item => ({
+        ...item,
+        publishDate: item.newsDate,
+        title: item.newsTitle
+      }));
+
+      if (isLoadMore) {
+        publishOrgInfo.value = [...publishOrgInfo.value, ...newRows];
+      } else {
+        publishOrgInfo.value = newRows;
+      }
+      dynamicTotal.value = res.data.totalElements || 0;
+    }
+  } catch (error) {
+    console.error("获取发布机构动态失败:", error);
+  }
+};
+
+const handleLoadMoreDynamic = () => {
+  dynamicPage.value++;
+  getPublishOrgInfoFn(true);
+};
+
+// 获取商业管制清单基本信息
+// todo: 待对接后端接口
+const CCLInfo = ref({
+  description: "xxxxx",
+  legalBasis: "法律依据",
+  controlledObject: "管制对象",
+  name: '',
+  orgId: '',
+  orgLogoUrl: '',
+  orgName: '',
+  originalName: '',
+  shortName: '',
+  restrictiveMeasure: "核心限制措施"
+});
+const getCCLInfoFn = async () => {
+  try {
+    const res = await getCCLInfo();
+    if (res && res.code === 200) {
+      CCLInfo.value = res.data;
+      console.log('getCCLInfoFn', CCLInfo.value)
+    }
+  } catch (error) {
+    console.error("获取商业管制清单基本信息失败:", error);
+  }
+};
+
+// 定义ECCN列表
+const ECCNList = ref([
+  {
+    name: '第1位: 物项类别',
+    isClick: true,
+    description: 'ECCN的第一位是一个数字，它指明了受控物项所属的技术或行业类别，对于快速定位物项在《商业管制清单》中的位置至关重要',
+    key: 'wxlb' // 用于和后端对接的
+  }
+])
+
+const getCCL_ECCN_Type = async () => {
+  try {
+    const res = await getECCN();
+    if (res && res.code === 200) {
+      ECCNList.value = res.data;
+      console.log('getCCL_ECCN_Type', ECCNList.value)
+      // 为每个对象增加是否点击对象
+      ECCNList.value.forEach((item) => {
+        item.isClick = false
+      })
+      // 默认点击第一个
+      ECCNList.value[0].isClick = true
+      // 默认将第一个赋值给currentECCN
+      currentECCN.value = ECCNList.value[0]
+    }
+  } catch (error) {
+    console.error("获取商业管制清单出口管制分类编码失败:", error);
+  }
+};
+
+// 表格数据
+const tableData = ref([
+  {
+    categoryCode: '0',
+    categoryId: 1,
+    code: null,
+    description: null,
+    descriptionZh: null,
+    id: 1,
+    name: 'Nuclear Materials, Facilities and Equipment and Miscellaneous',
+    nameZh: "核材料、设备设施及其他类似物项"
+  }
+])
+const currentECCN = ref({
+  name: '第1位: 物项类别',
+  isClick: true,
+  description: 'ECCN的第一位是一个数字，它指明了受控物项所属的技术或行业类别，对于快速定位物项在《商业管制清单》中的位置至关重要',
+  id: 1,
+  ranking: 1
+})
+
+/**
+ * 修改ECCN
+ */
+function changeECCN(item) {
+  ECCNList.value.forEach((i) => i.isClick = false)
+  item.isClick = true
+  currentECCN.value = item
+}
+
+// 监听当前的ECCN，更新获取列表数据
+watch(
+  () => currentECCN.value,
+  async (newValue) => {
+    // 调用接口更新table数据
+    const params = {
+      id: currentECCN.value.id
+    }
+    try {
+      const res = await getECCNList(params);
+      if (res && res.code === 200) {
+        tableData.value = res.data;
+        console.log('getECCNList', tableData.value)
+      }
+    } catch (error) {
+      console.error("获取商业管制清单出口管制分类编码信息列表列表数据:", error);
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  // 获取商业管制清单基本信息
+  getCCLInfoFn();
+  // 获取商业管制清单的分类编码
+  getCCL_ECCN_Type()
+  // 获取商业管制清单发布机构
+  getPublishInfoFn();
+  // 获取商业管制清单更新历史
+  getSanctionUpdate();
+
+
+});
+</script>
+
+<style scoped lang="scss">
+* {
+	margin: 0;
+	padding: 0;
+	user-select: none;
+}
+.introduction-page {
+	width: 1601px;
+	margin: 0 auto;
+	padding-top: 16px;
+	padding-bottom: 50px;
+	display: flex;
+	justify-content: space-between;
+	.left {
+		width: 1064px;
+		.left-top {
+			width: 100%;
+			height: auto;
+			padding-bottom: 20px;
+			border-radius: 10px;
+			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+			background-color: #fff;
+			margin-bottom: 16px;
+			.left-top-main {
+				width: 100%;
+				padding: 8px 26px 0 26px;
+				.left-top-main-title {
+					padding: 16px 24px;
+					border-radius: 4px;
+					border: 1px solid rgba(231, 243, 255, 1);
+					background: linear-gradient(to bottom right, rgba(231, 243, 255, 1), rgba(231, 243, 255, 0));
+					font-size: 16px;
+					font-weight: 700;
+					font-family: "Microsoft YaHei";
+					line-height: 30px;
+					color: rgb(5, 95, 194);
+					margin-bottom: 17px;
+				}
+				.left-top-main-content {
+					.content-item {
+						margin-bottom: 13px;
+						font-size: 16px;
+						font-family: "Microsoft YaHei";
+						display: flex;
+
+						.label {
+							width: 120px;
+							flex-shrink: 0;
+							font-weight: 700;
+							color: rgb(59, 65, 75);
+							white-space: nowrap;
+						}
+
+						.text {
+							color: rgb(59, 65, 75);
+							text-align: justify;
+						}
+					}
+				}
+			}
+		}
+		.left-center {
+			width: 100%;
+			// height: 705px;
+			height: auto;
+			border-radius: 10px;
+			background-color: #fff;
+			margin-bottom: 16px;
+
+			.button-list {
+				width: 1012px;
+				height: 32px;
+				margin-left: 26px;
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+
+				.button {
+					width: 196px;
+					height: 32px;
+					border-radius: 4px;
+					border: 1px solid rgba($color: #eeeeee, $alpha: 0.8);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					color: rgb(59, 65, 75);
+
+					span {
+						font-size: 16px;
+						font-weight: 400;
+						font-family: "Microsoft YaHei";
+						line-height: 24px;
+						letter-spacing: 0px;
+						font-style: Regular;
+					}
+				}
+
+				.click {
+					background: rgba(231, 243, 255, 1);
+					border: 1px solid rgba(231, 243, 255, 1);
+					color: rgb(5, 95, 194);
+				}
+			}
+			.description {
+				width: 991px;
+				height: auto;
+				min-height: 30px;
+				margin-top: 16px;
+				margin-left: 63px;
+			}
+
+			.table-class {
+				width: 1013px;
+				height: auto;
+				padding-bottom: 10px;
+				margin-top: 16px;
+				margin-left: 24px;
+				color: rgb(59, 65, 75);
+				font-size: 16px;
+				font-weight: 400;
+				font-family: "Microsoft YaHei";
+				line-height: 24px;
+				letter-spacing: 0px;
+				font-style: Regular;
+			}
+		}
+		.left-bottom {
+			width: 100%;
+			// min-height: 1000px;
+			border-radius: 10px;
+			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+			background-color: #fff;
+			.title {
+				border-bottom: 1px solid rgb(234, 236, 238);
+				.filters {
+					margin-left: auto;
+					display: flex;
+					align-items: center;
+					margin-right: 20px;
+				}
+				.btn {
+					margin-left: 0;
+				}
+			}
+			.left-bottom-main {
+				padding: 16px 42px 20px 25px;
+				.sanction-list {
+					width: 1169px;
+					// padding: 0px 0 12px 0;
+					display: flex;
+					// justify-content: flex-start;
+					// height: 154px;
+					.time {
+						width: 80px;
+						height: 50px;
+						display: flex;
+						flex-direction: column;
+						align-items: flex-end;
+						justify-content: center;
+						margin-right: 16px;
+						font-family: "Microsoft YaHei";
+						color: rgb(5, 95, 194);
+						font-weight: 700;
+
+						.year {
+							font-size: 16px;
+							line-height: 24px;
+						}
+
+						.date {
+							font-size: 16px;
+							line-height: 24px;
+						}
+					}
+					.img-zone {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						// justify-content: center;
+						// width: 30px;
+						margin-top: 14px;
+						// margin-right: 16px;
+						// height: calc(100% - 16px);
+						margin-right: 16px;
+						img {
+							width: 30px;
+							height: 30px;
+							border-radius: 50%;
+							z-index: 2;
+						}
+
+						.img-line {
+							width: 1px;
+							border: 1px solid rgba($color: #eeeeee, $alpha: 1);
+							// height: calc(100% - 30px);
+							position: absolute;
+							height: 154px;
+						}
+
+						.img-line-last {
+							height: 140px;
+						}
+					}
+
+					.main {
+						width: 855px;
+						padding-top: 14px;
+						position: relative;
+						.main-title {
+							cursor: pointer;
+							width: 700px;
+							font-size: 20px;
+							font-weight: 700;
+							line-height: 26px;
+							font-family: "Microsoft YaHei";
+							color: rgb(59, 65, 75);
+							margin-bottom: 11px;
+						}
+						.main-desc {
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 30px;
+							font-family: "Microsoft YaHei";
+							color: rgb(95, 101, 108);
+							margin-bottom: 9px;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							-webkit-line-clamp: 2;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+						.tag-box {
+							display: flex;
+							.tag-item {
+								padding: 1px 8px;
+								margin-right: 8px;
+								border-radius: 4px;
+								font-size: 14px;
+								font-weight: 400;
+								line-height: 22px;
+								font-family: "Microsoft YaHei";
+								color: rgb(5, 95, 194);
+								background-color: rgba(231, 243, 255, 1);
+							}
+						}
+						.count-tag {
+							position: absolute;
+							padding: 2px 8px;
+							top: 0;
+							right: 0;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 24px;
+							font-family: "Microsoft YaHei";
+							color: rgb(206, 79, 81);
+							border-radius: 20px;
+							background-color: rgba(206, 79, 81, 0.1);
+						}
+					}
+				}
+			}
+			.left-footer {
+				width: 100%;
+				height: 73px;
+				border-top: 1px solid rgb(234, 236, 238);
+				padding: 0 31px;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.total-count {
+					font-size: 16px;
+					font-weight: 400;
+					line-height: 24px;
+					font-family: "Microsoft YaHei";
+					color: rgb(59, 65, 75);
+				}
+			}
+		}
+	}
+	.right {
+		width: 520px;
+		height: 1020px;
+		border-radius: 10px;
+		padding-bottom: 20px;
+		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+		background-color: #fff;
+		.right-main {
+			padding: 7px 24px 0px 23px;
+			.right-main-title {
+				cursor: pointer;
+				width: 473px;
+				height: auto;
+				border-radius: 4px;
+				background-color: rgb(247, 248, 249);
+				border: 1px solid rgb(234, 236, 238);
+				display: flex;
+				margin-bottom: 20px;
+				padding: 16px;
+				.title-zone {
+					width: calc(100% - 64px);
+				}
+				img {
+					width: 64px;
+					height: 64px;
+					margin-right: 14px;
+				}
+				.title-line {
+					display: flex;
+					height: 26px;
+					margin-bottom: 6px;
+					justify-content: space-between;
+					align-items: center;
+				}
+				.title-detail {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					span {
+						font-family: Microsoft YaHei;
+						color: rgba(5, 95, 194, 1);
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 22px;
+						letter-spacing: 0px;
+						text-align: center;
+						margin-top: 1px;
+					}
+					img {
+						width: 16px;
+						height: 16px;
+						margin-right: 0px;
+					}
+				}
+				.title-text {
+					font-size: 20px;
+					font-weight: 700;
+					line-height: 26px;
+					font-family: "Microsoft YaHei";
+					color: rgb(59, 65, 75);
+				}
+				.title-entext {
+					font-size: 16px;
+					font-weight: 400;
+					line-height: 24px;
+					font-family: "Microsoft YaHei";
+					color: rgb(95, 101, 108);
+				}
+			}
+			.right-main-key-person {
+				width: 100%;
+				padding-bottom: 20px;
+				border-bottom: 1px solid rgb(234, 236, 238);
+				margin-bottom: 18px;
+				.key-person-title {
+					display: flex;
+					align-items: center;
+					margin-bottom: 19px;
+					img {
+						width: 14px;
+						height: 14px;
+						margin-right: 12px;
+					}
+					span {
+						font-size: 18px;
+						font-weight: 700;
+						font-family: "Microsoft YaHei";
+						color: rgb(59, 65, 75);
+					}
+				}
+				.key-person-list {
+					display: flex;
+					flex-wrap: wrap;
+
+					.person-item {
+						width: 185px;
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+						margin-bottom: 16px;
+						&:nth-child(2n-1) {
+							margin-left: 28px;
+							margin-right: 39px;
+						}
+						img {
+							width: 48px;
+							height: 48px;
+							border-radius: 50%;
+							margin-right: 8px;
+							object-fit: cover;
+							flex-shrink: 0;
+						}
+						.person-info {
+							width: calc(100% - 48px - 8px);
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap; /* 防止文本换行 */
+							.name {
+								font-size: 16px;
+								font-weight: 700;
+								font-family: "Microsoft YaHei";
+								color: rgb(59, 65, 75);
+								margin-bottom: 1px;
+								white-space: nowrap;
+							}
+							.title1 {
+								font-size: 16px;
+								font-weight: 400;
+								font-family: "Microsoft YaHei";
+								color: rgb(95, 101, 108);
+								line-height: 1.2;
+								// white-space: nowrap;
+							}
+						}
+					}
+				}
+			}
+			.right-main-dynamic {
+				width: 100%;
+				.dynamic-title {
+					display: flex;
+					align-items: center;
+					margin-bottom: 19px;
+					img {
+						width: 14px;
+						height: 14px;
+						margin-right: 12px;
+					}
+					span {
+						font-size: 18px;
+						font-weight: 700;
+						font-family: "Microsoft YaHei";
+						color: rgb(59, 65, 75);
+					}
+				}
+				.dynamic-list {
+					max-height: 500px;
+					overflow-y: auto;
+					padding-right: 10px;
+
+					/* 滚动条样式 */
+					&::-webkit-scrollbar {
+						width: 6px;
+					}
+					&::-webkit-scrollbar-track {
+						background: #f1f1f1;
+						border-radius: 3px;
+					}
+					&::-webkit-scrollbar-thumb {
+						background: #c1c1c1;
+						border-radius: 3px;
+						&:hover {
+							background: #a8a8a8;
+						}
+					}
+
+					.dynamic-item {
+						display: flex;
+						position: relative;
+						padding-bottom: 24px;
+						.dot-line {
+							width: 12px;
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							margin-right: 12px;
+							margin-top: 6px;
+							.dot {
+								width: 8px;
+								height: 8px;
+								border-radius: 50%;
+								border: 2px solid rgb(5, 95, 194);
+								background-color: #fff;
+								z-index: 1;
+							}
+							.line {
+								width: 1px;
+								height: calc(100% - 2px);
+								background-color: rgb(234, 236, 238);
+								position: absolute;
+								top: 12px;
+								left: 5px;
+							}
+						}
+						.content-box {
+							flex: 1;
+							.date {
+								font-size: 16px;
+								font-weight: 700;
+								font-family: "Microsoft YaHei";
+								color: rgb(5, 95, 194);
+								margin-bottom: 8px;
+							}
+							.text {
+								font-size: 16px;
+								font-weight: 400;
+								font-family: "Microsoft YaHei";
+								color: rgb(59, 65, 75);
+								line-height: 30px;
+								text-align: justify;
+							}
+						}
+					}
+				}
+				.more-btn {
+					width: 100%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 14px;
+					color: rgb(5, 95, 194);
+					cursor: pointer;
+					margin-top: 8px;
+
+					span {
+						margin-right: 4px;
+					}
+				}
+			}
+		}
+	}
+}
+
+.title {
+	width: 100%;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	padding: 14px 12px 16px 0;
+	.box {
+		width: 8px;
+		height: 20px;
+		background-color: rgb(5, 95, 194);
+		border-bottom-right-radius: 4px;
+		border-top-right-radius: 4px;
+		margin-right: 14px;
+	}
+	.text {
+		font-size: 20px;
+		font-weight: 700;
+		font-family: "Microsoft YaHei";
+		line-height: 26px;
+		color: rgb(5, 95, 194);
+	}
+	.btn {
+		width: 60px;
+		height: 28px;
+		margin-left: auto;
+		img {
+			width: 28px;
+			height: 28px;
+			cursor: pointer;
+		}
+		img:first-child {
+			margin-right: 4px;
+		}
+	}
+}
+</style>
+<style scoped>
+.common-prompt-popper.el-popper {
+	padding: 8px 16px !important;
+	border-radius: 10px !important;
+	background-color: rgb(59, 65, 75) !important;
+	font-size: 16px !important;
+	font-weight: 400 !important;
+	font-family: "Microsoft YaHei" !important;
+	line-height: 30px !important;
+	color: #fff !important;
+	border: none !important;
+	max-width: 500px !important;
+}
+
+.common-prompt-popper.el-popper .el-popper__arrow::before {
+	background-color: rgb(59, 65, 75) !important;
+	border-color: rgb(59, 65, 75) !important;
+}
+
+:deep(.el-table thead) {
+	color: rgb(59, 65, 75);
+}
+
+:deep(.el-table tr) {
+	height: 48px;
+}
+</style>

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

-<template>
-	<div class="list-page">
-		<div class="search-box">
-			<div style="display: flex; justify-content: center">
-				<el-select v-model="currentCCLType" style="width: 388px; height: 32px; margin-right: 14px">
-					<el-option v-for="item in CCLTypeList" :key="item.id" :label="item.name" :value="item.id" />
-				</el-select>
-				<el-input
-					v-model="searchKeyword"
-					class="search-input"
-					placeholder="搜索物项或ECCN编码"
-					:suffix-icon="Search"
-				/>
-			</div>
-			<div class="filters">
-				<el-checkbox v-model="viewNew" label="查看最近更新内容" />
-			</div>
-		</div>
-		<div class="main">
-			<div class="left">
-				<div class="title">
-					<div class="box"></div>
-					<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.name"
-						@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 controlReason"
-						:key="index"
-						v-model="item.checked"
-						:label="item.name"
-						@change="handleFilterChange(item, controlReason, 'reason')"
-					/>
-				</div>
-			</div>
-			<div class="right">
-				<div class="title">
-					<div class="left-wrapper">
-						<div class="box"></div>
-						<div class="text">CCL清单列表</div>
-					</div>
-					<div class="right-wrapper">
-						<!-- <div class="stats">
-							<el-switch v-model="value" size="small" />
-							<span>显示原文</span>
-						</div>-->
-						<div class="btn">
-							<img src="../../../../assets/下载按钮.png" alt />
-							<img src="../../../../assets/收藏按钮.png" alt />
-						</div>
-					</div>
-				</div>
-				<div class="right-table">
-					<div class="list" v-for="(item, i) in cclList">
-						<div class="list-title" @click="item.isExpand = !item.isExpand">
-							<span>类别 {{ item.cclCode }}-{{ item.cclTitleZh }}</span>
-							<img src="../../assets/downArrow_white.png" alt v-if="item.isExpand" />
-							<img src="../../assets/upArrow_white.png" alt v-else />
-						</div>
-
-						<div style="width: 100%" v-if="item.isExpand">
-							<div style="width: 100%" v-for="element in item.cclChildren">
-								<div class="list-desc">{{ element.cclCode }}. {{ element.cclTitleZh }}</div>
-
-								<div class="list-content" v-for="(ele, j) in element.cclChildren">
-									<div class="content-title" @click="ele.isExpand = !ele.isExpand">
-										<div class="code-zone">
-											<!-- <div class="dot" v-if="ele.isDot"></div> -->
-											<span class="code">{{ ele.cclCode }}</span>
-										</div>
-										<span class="name">{{ ele.cclTitleZh }}</span>
-										<img src="../../assets/upArrow_gray.png" alt v-if="ele.isExpand" />
-										<img src="../../assets/downArrow_gray.png" alt v-else />
-									</div>
-									<div class="content-body" v-if="ele.isExpand">
-										<!-- <img src="../../assets/cclDetail.png" alt /> -->
-										<div v-if="ele.cclDescription" v-html="ele.cclDescription"></div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch } from "vue";
-import { useRouter } from "vue-router";
-import { Search, Select } from "@element-plus/icons-vue";
-import defaultIcon from "../../../../../assets/icons/default-avatar.png";
-import { getECCNCategory, getAreaType, getControlReason, getCclQuery, getExportControlList, get50PercentEntityCount } from "@/api/exportControlV2.0.js"
-
-const router = useRouter();
-
-const currentCCLType = ref('')
-const CCLTypeList = ref([])
-const getTypeList = async () => {
-  try {
-    const res = await getECCNCategory()
-    if (res && res.code === 200) {
-      console.log('-----getTypeList', res.data)
-      CCLTypeList.value = res.data
-      currentCCLType.value = CCLTypeList.value[0].id
-    }
-  } catch (error) {
-    console.error("获取类别字典失败:", error);
-  }
-}
-
-const techFields = ref([])
-const getTechFields = async () => {
-  try {
-    const res = await getAreaType()
-    if (res && res.code === 200) {
-      console.log('-----getTechFields', res.data)
-      techFields.value = res.data
-      // 默认选中第一个
-      techFields.value[0].checked = true
-    }
-  } catch (error) {
-    console.error("获取科技领域字典失败:", error);
-  }
-}
-
-const controlReason = ref([])
-const getControlReasonList = async () => {
-  try {
-    const res = await getControlReason()
-    if (res && res.code === 200) {
-      console.log('-----getControlReasonList', res.data)
-      controlReason.value = res.data
-      // 默认选中第一个
-      controlReason.value[0].checked = true
-    }
-  } catch (error) {
-    console.error("获取管控原因字典失败:", error);
-  }
-}
-
-const searchKeyword = ref('');
-const onlyChina = ref(false);
-const viewNew = ref(true)
-
-// 获取ccl清单列表
-const getCclList = async () => {
-  let techDomains = techFields.value.filter(item => item.checked).map(item => +item.id)
-  let controls = controlReason.value.filter(item => item.checked).map(item => +item.id)
-  const params = {
-    categoryCode: currentCCLType.value,
-    techDomainIds: techDomains,
-    keyword: searchKeyword.value || '',
-    controlIds: controls,
-    isLatest: viewNew.value
-  }
-  console.log(JSON.stringify(params))
-  try {
-    // const res = await getCclQuery(null);
-    const res = await getCclQuery(params);
-    // const res = {
-    //   "code": 200,
-    //   "message": "操作成功",
-    //   "success": true,
-    //   "data": [
-    //     {
-    //       "id": 1,
-    //       "cclCode": "0",
-    //       "cclTitle": "Nuclear Materials, Facilities and Equipment and Miscellaneous",
-    //       "cclTitleZh": "核材料、设备设施及其他类似物项",
-    //       "cclDescription": null,
-    //       "cclDescriptionZh": null,
-    //       "cclChildren": [
-    //         {
-    //           "id": 11,
-    //           "cclCode": "A",
-    //           "cclTitle": "Equipment, Assemblies and Components",
-    //           "cclTitleZh": "设备、组件和部件",
-    //           "cclDescription": null,
-    //           "cclDescriptionZh": null,
-    //           "cclChildren": [
-    //             {
-    //               "id": 1,
-    //               "cclCode": "0A002",
-    //               "cclTitle": "Power generating or propulsion equipment \"specially designed\" for use with space, marine or mobile \"nuclear reactors\". (These items are \"subject to the ITAR.\" See 22 CFR parts 120 through 130.)",
-    //               "cclTitleZh": "专为太空、海洋或移动“核反应堆”设计的发电或推进设备。（这些项目“受 ITAR 约束”。参见 22 CFR 第 120 至 130 部分。）",
-    //               "cclDescription": null,
-    //               "cclDescriptionZh": null,
-    //               "cclChildren": null
-    //             },
-    //             {
-    //               "id": 2,
-    //               "cclCode": "0A501",
-    //               "cclTitle": "Firearms (except 0A502 shotguns, 0A506 semi-automatic rifles, 0A507 semi-automatic pistols, and 0A508 semi-automatic shotguns) and related commodities (except semi-automatic related commodities enumerated or otherwise described in Eccn 0A509 for Eccns 0A506, 0A507, or 0A508) as follows (see List of Items controlled).",
-    //               "cclTitleZh": "火器（除 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪外）及相关商品（除 Eccn 0A509 中列举或以其他方式描述的 Eccns 0A506、0A507 或 0A508 相关物品外），具体如下（参见管制物品列表）。",
-    //               "cclDescription": "<p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">License Requirements</span></p><p class=\"flush-paragraph-1\"><em>Reason for Control:</em> NS, RS, FC, UN, AT</p><div class=\"table-wrapper\"><div class=\"gpotbl_div\"><table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" class=\"gpo_table\" frame=\"void\" width=\"100%\"><thead><tr><th class=\"center\">Control(s)</th><th class=\"center\">Country chart<br>(see Supp. No. 1 to part 738)</th></tr></thead><tbody><tr><td class=\"left\">NS applies to entire entry except 0A501.y</td><td class=\"left\">NS Column 1.</td></tr><tr><td class=\"left\">RS applies to entire entry except 0A501.y</td><td class=\"left\">RS Column 1.</td></tr><tr><td class=\"left\">FC applies to entire entry except 0A501.y</td><td class=\"left\">FC Column 1.</td></tr><tr><td class=\"left\">UN applies to entire entry</td><td class=\"left\">See § 746.1 of the EAR for UN controls.</td></tr><tr><td class=\"left\">AT applies to entire entry</td><td class=\"left\">AT Column 1.</td></tr></tbody></table></div></div><div class=\"note\"><div class=\"header\"><em>License Requirement Note:</em></div><p><em>In addition to using the Commerce Country Chart to determine license requirements, a license is required for exports and reexports of ECCN 0A501.y.7 firearms to the People's Republic of China.</em></p></div><p class=\"flush-paragraph-1\">List Based License Exceptions (See Part 740 for a Description of All License Exceptions)</p><p class=\"flush-paragraph-1\"><em>LVS:</em> $500 for 0A501.c, .d, and .x.</p><p class=\"flush-paragraph-1\">$500 for 0A501.c, .d, .e, and .x if the ultimate destination is Canada.</p><p class=\"flush-paragraph-1\"><em>GBS:</em> N/A</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">Special Conditions for STA</span></p><p class=\"flush-paragraph-1\">License Exception STA may not be used for ECCN 0A501.a, .b, .c, .d, or .e, to any of the destinations listed in Country Group A:5 or A:6 (See supplement no.1 to part 740 of the EAR). License Exception STA may not be used for any item in this entry to any of the destinations listed in Country Group A:6 (See Supplement No.1 to part 740 of the EAR).</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">List of Items Controlled</span></p><p class=\"flush-paragraph-1\"><em>Related Controls:</em> (1) See USML Category I for firearms that are fully automatic, and certain related parts, components, accessories, and attachments (including magazines with a capacity of greater than 50 rounds). (2) See ECCN 0A506 for semi-automatic rifles. (3) See ECCN 0A507 for semi-automatic pistols. (4) See ECCN 0A508 for semi-automatic shotguns and ECCN 0A502 for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (5) See ECCN 0A509 for enumerated or otherwise described \"parts,\" \"components,\" devices, \"accessories,\" and \"attachments\" for ECCNs 0A506, 0A507, and 0A508. (6) See .d, .x, and .y of this entry for other \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" for 0A506 and 0A507, or 0A508. (7) See ECCN 0A502 for non-automatic shotguns and their \"parts\" and \"components\" that are subject to the EAR and for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (8) See ECCN 0A504 and USML Category XII for controls on optical sighting devices.</p><p class=\"flush-paragraph-1\"><em>Related Definitions:</em> N/A.</p><p class=\"flush-paragraph\"><em>Items:</em></p><p>a. Non-automatic and non-semi-automatic firearms equal to .50 caliber (12.7 mm) or less.</p><div class=\"note\"><div class=\"header\"><em>Note 1 to paragraph 0A501.a:</em></div><p><em>'Combination pistols' are controlled under ECCN 0A501.a. A 'combination pistol' (a.k.a., a combination gun) has at least one rifled barrel and at least one smoothbore barrel (generally a shotgun style barrel).</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 2 to paragraph 0A501.a:</em></div><p><em>Semi-automatic firearms</em> equal to .50 caliber (12.7 mm) or less <em>are controlled under ECCNs 0A506 and 0A507.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.a:</em></div><p><em>Firearms described in 0A501.a include those chambered for the .50 BMG cartridge.</em></p></div><p>b. Non-automatic and non-semi-automatic rifles, carbines, revolvers or pistols with a caliber greater than .50 inches (12.7 mm) but less than or equal to .72 inches (18.0 mm).</p><p>c. The following types of \"parts\" and \"components\" if \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or ECCNs 0A506 or 0A507, or USML Category I (unless otherwise enumerated or elsewhere specified on the USML or controlled under ECCN 0A509): Barrels, cylinders, barrel extensions, mounting blocks (trunnions), bolts, bolt carriers, operating rods, gas pistons, trigger housings, triggers, hammers/striker, sears, disconnectors, pistol grips that contain fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors) and buttstocks that contain fire control \"parts\" or \"components.\"</p><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.c:</em></div><p><em>Barrel blanks that have reached a stage in manufacturing in which they are either chambered or rifled are controlled by 0A501.c.</em></p></div><p>d. Detachable magazines with a capacity of 17 to 50 rounds \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or controlled by ECCNs 0A506 or 0A507.</p><div class=\"note\"><div class=\"header\"><em>Note 3 to paragraph 0A501.d</em></div><p><em>Magazines with a capacity of 16 rounds or less are controlled under 0A501.x; for magazines with a capacity greater than 50 rounds, see USML Category I. Magazines that hold only blank ammunition controlled under 0A505.d are controlled under 0A501.d or 0A501.x, depending on the magazine's capacity.</em></p></div><p>e. Receivers (frames) and \"complete breech mechanisms,\" including castings, forgings, stampings, or machined items thereof, \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry.</p><div class=\"note\"><div class=\"header\"><em>Note 4 to 0A501.e:</em></div><p><em>Frames (receivers) under 0A501.e refers to any \"part\" or \"component\" of the firearm that has or is customarily marked with a serial number when required by law. This paragraph 0A501.e is synonymous with a \"part\" or \"component\" that is regulated by the Bureau of Alcohol, Tobacco, Firearms and Explosives (see <a href=\"https://www.govinfo.gov/link/uscode/18/921\" class=\"usc external\" target=\"_blank\" rel=\"noopener noreferrer\">18 U.S.C. 921(a)(3)</a>; <a href=\"https://www.ecfr.gov/current/title-27/part-447\" class=\"cfr external\">27 CFR parts 447</a>, <a href=\"https://www.ecfr.gov/current/title-27/part-478\" class=\"cfr external\">478</a>, and <a href=\"https://www.ecfr.gov/current/title-27/part-479\" class=\"cfr external\">479</a>,) as a firearm.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 5 to 0A501.e:</em></div><p><em>Frames (receivers) \"specially designed\" for semi-automatic firearms are controlled under ECCN 0A509.b or .c.</em></p></div><p>f. through w. [Reserved]</p><p>x. \"Parts\" and \"components\" that are \"specially designed\" for a commodity classified under paragraphs .a through .c of this entry, a commodity classified under ECCNs 0A506 or 0A507, or the USML and not elsewhere specified on the USML or CCL or controlled under ECCN 0A509.</p><p>y. Specific \"parts,\" \"components,\" \"accessories\" and \"attachments\" \"specially designed\" for a commodity subject to control in this ECCN, ECCNs 0A506, 0A507, or common to a defense article in USML Category I and not elsewhere specified in the USML or CCL as follows, and \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" therefor.</p><p>y.1. Stocks (including adjustable, collapsible, blades and braces), grips, handguards, or forends, that do not contain any fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors);</p><p>y.2 through y.5. [Reserved]</p><p>y.6. Bayonets; and</p><p>y.7. Firearms manufactured from 1890 to 1898 and reproductions thereof.</p><div class=\"note\"><div class=\"header\"><em>Technical Note 1 to 0A501:</em></div><p><em>ECCN 0A501 includes \"parts\" and \"components\" that are not \"subject to the ITAR\" even though they are common to firearms described in ECCN 0A501 and to those firearms \"subject to the ITAR.\"</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 2 to 0A501:</em></div><p><em>A receiver with any other controlled \"part\" or \"component\" ( e.g., a barrel (0A501.c), or trigger guard (0A501.x), or stock (0A501.y.1)) is still controlled under 0A501.e.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 3 to 0A501:</em></div><p><em>Blank firing adapters, which are attachments to semi-automatic and automatic firearms used in conjunction with blank cartridges for safety and functional reasons and used for firearm training purposes by police, military, sporting shooters, as well as in the movie industry, are designated as EAR99.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 6 to 0A501:</em></div><p><em>Antique firearms (i.e., those manufactured before 1890) and reproductions thereof, muzzle loading and black powder firearms except those designs based on centerfire weapons of a post 1937 design, BB guns, pellet rifles, paint ball, and all other air rifles are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 7 to 0A501:</em></div><p><em>Muzzle loading and black powder firearms with a caliber less than 20 mm that were manufactured post 1937 that are used for hunting or sporting purposes that were not \"specially designed\" for military use and are not described on the USML nor controlled as shotguns under ECCN 0A502 are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 8 to 0A501:</em></div><p><em>Scope mounts or accessory rails, iron sights, sling swivels, and butt plates or recoil pads that are subject to the EAR are designated as EAR99. These commodities have been determined to no longer warrant being \"specially designed\" for purposes of ECCN 0A501.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 9 to 0A501:</em></div><p><em>A kit, including a replacement or repair kit, of firearms \"parts\" or \"components\" customarily sold and exported together takes on the classification of the most restrictive \"part\" or \"component\" that is included in the kit. For example, a kit containing 0A501.y and .x \"parts,\" is controlled as a 0A501.x kit because the .x \"part\" is the most restrictive \"part\" included in the kit. A complete 0A501 firearm disassembled in a kit form is controlled as a firearm under 0A501.a, .b, or .y.7.</em></p></div>",
-    //               "cclDescriptionZh": "<p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">License Requirements</span></p><p class=\"flush-paragraph-1\"><em>Reason for Control:</em> NS, RS, FC, UN, AT</p><div class=\"table-wrapper\"><div class=\"gpotbl_div\"><table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" class=\"gpo_table\" frame=\"void\" width=\"100%\"><thead><tr><th class=\"center\">控制原因</th><th class=\"center\">Country chart<br>（参见第738部分补充1号文）</th></tr></thead><tbody><tr><td class=\"left\">NS applies to entire entry except 0A501.y</td><td class=\"left\">NS Column 1.</td></tr><tr><td class=\"left\">RS applies to entire entry except 0A501.y</td><td class=\"left\">RS Column 1.</td></tr><tr><td class=\"left\">FC applies to entire entry except 0A501.y</td><td class=\"left\">FC Column 1.</td></tr><tr><td class=\"left\">UN applies to entire entry</td><td class=\"left\">See § 746.1 of the EAR for UN controls.</td></tr><tr><td class=\"left\">AT applies to entire entry</td><td class=\"left\">AT Column 1.</td></tr></tbody></table></div></div><div class=\"note\"><div class=\"header\"><em>License Requirement Note:</em></div><p><em>In addition to using the Commerce Country Chart to determine license requirements, a license is required for exports and reexports of ECCN 0A501.y.7 firearms to the People's Republic of China.</em></p></div><p class=\"flush-paragraph-1\">List Based License Exceptions (See Part 740 for a Description of All License Exceptions)</p><p class=\"flush-paragraph-1\"><em>LVS:</em> $500 for 0A501.c, .d, and .x.</p><p class=\"flush-paragraph-1\">$500 for 0A501.c, .d, .e, and .x if the ultimate destination is Canada.</p><p class=\"flush-paragraph-1\"><em>GBS:</em> N/A</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">Special Conditions for STA</span></p><p class=\"flush-paragraph-1\">License Exception STA may not be used for ECCN 0A501.a, .b, .c, .d, or .e, to any of the destinations listed in Country Group A:5 or A:6 (See supplement no.1 to part 740 of the EAR). License Exception STA may not be used for any item in this entry to any of the destinations listed in Country Group A:6 (See Supplement No.1 to part 740 of the EAR).</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">List of Items Controlled</span></p><p class=\"flush-paragraph-1\"><em>Related Controls:</em> (1) See USML Category I for firearms that are fully automatic, and certain related parts, components, accessories, and attachments (including magazines with a capacity of greater than 50 rounds). (2) See ECCN 0A506 for semi-automatic rifles. (3) See ECCN 0A507 for semi-automatic pistols. (4) See ECCN 0A508 for semi-automatic shotguns and ECCN 0A502 for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (5) See ECCN 0A509 for enumerated or otherwise described \"parts,\" \"components,\" devices, \"accessories,\" and \"attachments\" for ECCNs 0A506, 0A507, and 0A508. (6) See .d, .x, and .y of this entry for other \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" for 0A506 and 0A507, or 0A508. (7) See ECCN 0A502 for non-automatic shotguns and their \"parts\" and \"components\" that are subject to the EAR and for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (8) See ECCN 0A504 and USML Category XII for controls on optical sighting devices.</p><p class=\"flush-paragraph-1\"><em>Related Definitions:</em> N/A.</p><p class=\"flush-paragraph\"><em>Items:</em></p><p>a. Non-automatic and non-semi-automatic firearms equal to .50 caliber (12.7 mm) or less.</p><div class=\"note\"><div class=\"header\"><em>Note 1 to paragraph 0A501.a:</em></div><p><em>'Combination pistols' are controlled under ECCN 0A501.a. A 'combination pistol' (a.k.a., a combination gun) has at least one rifled barrel and at least one smoothbore barrel (generally a shotgun style barrel).</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 2 to paragraph 0A501.a:</em></div><p><em>Semi-automatic firearms</em> equal to .50 caliber (12.7 mm) or less <em>are controlled under ECCNs 0A506 and 0A507.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.a:</em></div><p><em>Firearms described in 0A501.a include those chambered for the .50 BMG cartridge.</em></p></div><p>b. Non-automatic and non-semi-automatic rifles, carbines, revolvers or pistols with a caliber greater than .50 inches (12.7 mm) but less than or equal to .72 inches (18.0 mm).</p><p>c. The following types of \"parts\" and \"components\" if \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or ECCNs 0A506 or 0A507, or USML Category I (unless otherwise enumerated or elsewhere specified on the USML or controlled under ECCN 0A509): Barrels, cylinders, barrel extensions, mounting blocks (trunnions), bolts, bolt carriers, operating rods, gas pistons, trigger housings, triggers, hammers/striker, sears, disconnectors, pistol grips that contain fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors) and buttstocks that contain fire control \"parts\" or \"components.\"</p><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.c:</em></div><p><em>Barrel blanks that have reached a stage in manufacturing in which they are either chambered or rifled are controlled by 0A501.c.</em></p></div><p>d. Detachable magazines with a capacity of 17 to 50 rounds \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or controlled by ECCNs 0A506 or 0A507.</p><div class=\"note\"><div class=\"header\"><em>Note 3 to paragraph 0A501.d</em></div><p><em>Magazines with a capacity of 16 rounds or less are controlled under 0A501.x; for magazines with a capacity greater than 50 rounds, see USML Category I. Magazines that hold only blank ammunition controlled under 0A505.d are controlled under 0A501.d or 0A501.x, depending on the magazine's capacity.</em></p></div><p>e. Receivers (frames) and \"complete breech mechanisms,\" including castings, forgings, stampings, or machined items thereof, \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry.</p><div class=\"note\"><div class=\"header\"><em>Note 4 to 0A501.e:</em></div><p><em>Frames (receivers) under 0A501.e refers to any \"part\" or \"component\" of the firearm that has or is customarily marked with a serial number when required by law. This paragraph 0A501.e is synonymous with a \"part\" or \"component\" that is regulated by the Bureau of Alcohol, Tobacco, Firearms and Explosives (see <a href=\"https://www.govinfo.gov/link/uscode/18/921\" class=\"usc external\" target=\"_blank\" rel=\"noopener noreferrer\">18 U.S.C. 921(a)(3)</a>; <a href=\"https://www.ecfr.gov/current/title-27/part-447\" class=\"cfr external\">27 CFR parts 447</a>, <a href=\"https://www.ecfr.gov/current/title-27/part-478\" class=\"cfr external\">478</a>, and <a href=\"https://www.ecfr.gov/current/title-27/part-479\" class=\"cfr external\">479</a>,) as a firearm.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 5 to 0A501.e:</em></div><p><em>Frames (receivers) \"specially designed\" for semi-automatic firearms are controlled under ECCN 0A509.b or .c.</em></p></div><p>f. through w. [Reserved]</p><p>x. \"Parts\" and \"components\" that are \"specially designed\" for a commodity classified under paragraphs .a through .c of this entry, a commodity classified under ECCNs 0A506 or 0A507, or the USML and not elsewhere specified on the USML or CCL or controlled under ECCN 0A509.</p><p>y. Specific \"parts,\" \"components,\" \"accessories\" and \"attachments\" \"specially designed\" for a commodity subject to control in this ECCN, ECCNs 0A506, 0A507, or common to a defense article in USML Category I and not elsewhere specified in the USML or CCL as follows, and \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" therefor.</p><p>y.1. Stocks (including adjustable, collapsible, blades and braces), grips, handguards, or forends, that do not contain any fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors);</p><p>y.2 through y.5. [Reserved]</p><p>y.6. Bayonets; and</p><p>y.7. Firearms manufactured from 1890 to 1898 and reproductions thereof.</p><div class=\"note\"><div class=\"header\"><em>Technical Note 1 to 0A501:</em></div><p><em>ECCN 0A501 includes \"parts\" and \"components\" that are not \"subject to the ITAR\" even though they are common to firearms described in ECCN 0A501 and to those firearms \"subject to the ITAR.\"</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 2 to 0A501:</em></div><p><em>A receiver with any other controlled \"part\" or \"component\" ( e.g., a barrel (0A501.c), or trigger guard (0A501.x), or stock (0A501.y.1)) is still controlled under 0A501.e.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 3 to 0A501:</em></div><p><em>Blank firing adapters, which are attachments to semi-automatic and automatic firearms used in conjunction with blank cartridges for safety and functional reasons and used for firearm training purposes by police, military, sporting shooters, as well as in the movie industry, are designated as EAR99.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 6 to 0A501:</em></div><p><em>Antique firearms (i.e., those manufactured before 1890) and reproductions thereof, muzzle loading and black powder firearms except those designs based on centerfire weapons of a post 1937 design, BB guns, pellet rifles, paint ball, and all other air rifles are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 7 to 0A501:</em></div><p><em>Muzzle loading and black powder firearms with a caliber less than 20 mm that were manufactured post 1937 that are used for hunting or sporting purposes that were not \"specially designed\" for military use and are not described on the USML nor controlled as shotguns under ECCN 0A502 are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 8 to 0A501:</em></div><p><em>Scope mounts or accessory rails, iron sights, sling swivels, and butt plates or recoil pads that are subject to the EAR are designated as EAR99. These commodities have been determined to no longer warrant being \"specially designed\" for purposes of ECCN 0A501.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 9 to 0A501:</em></div><p><em>A kit, including a replacement or repair kit, of firearms \"parts\" or \"components\" customarily sold and exported together takes on the classification of the most restrictive \"part\" or \"component\" that is included in the kit. For example, a kit containing 0A501.y and .x \"parts,\" is controlled as a 0A501.x kit because the .x \"part\" is the most restrictive \"part\" included in the kit. A complete 0A501 firearm disassembled in a kit form is controlled as a firearm under 0A501.a, .b, or .y.7.</em></p></div>",
-    //               "cclChildren": null
-    //             },
-    //             {
-    //               "id": 3,
-    //               "cclCode": "0A502",
-    //               "cclTitle": "Shotguns; shotguns \"parts\" and \"components,\" consisting of complete trigger mechanisms; magazines and magazine extension tubes; \"complete breech mechanisms;\" except: semi-automatic shotguns controlled under Eccn 0A508; certain \"parts,\" components,\" devices, \"accessories,\" and \"attachments\" for semi-automatic shotguns controlled under Eccn 0A509; equipment used to slaughter domestic animals or used exclusively to treat or tranquilize animals; and arms designed solely for signal, flare, or saluting use.",
-    //               "cclTitleZh": "霰弹枪;霰弹枪“零件”和“组件”，由完整的扳机机构组成;弹药库和弹匣延长管;“完整的闭锁机构”;除外：根据 Eccn 0A508 控制的半自动霰弹枪;根据 Eccn 0A509 控制的某些半自动霰弹枪的“零件”、“组件”、“装置”、“配件”;用于屠宰家畜或专门用于治疗或镇静动物的设备;以及仅用于信号、照明或敬礼使用的武器。",
-    //               "cclDescription": null,
-    //               "cclDescriptionZh": null,
-    //               "cclChildren": null
-    //             }
-    //           ]
-    //         }
-    //       ]
-    //     }
-    //   ]
-    // }
-    // cclList.value = res.data
-    // // 给数据添加isExpand字段
-    // cclList.value.forEach((item) => {
-    //   item.isExpand = false
-    //   item.cclChildren.forEach((ele) => {
-    //     ele.cclChildren.forEach((i) => {
-    //       i.isExpand = false
-    //     })
-    //   })
-    // })
-    if (res && res.code === 200) {
-      console.log('----getCclList', res.data)
-      cclList.value = res.data
-      // 给数据添加isExpand字段
-      cclList.value.forEach((item) => {
-        item.isExpand = false
-        item.cclChildren.forEach((ele) => {
-          ele.cclChildren.forEach((i) => {
-            i.isExpand = false
-          })
-        })
-      })
-    }
-  } catch (error) {
-    console.error("获取ccl清单列表失败:", error);
-
-  }
-}
-
-// 筛选逻辑处理
-const handleFilterChange = (item, list, type) => {
-  console.log(item, list, type)
-  getCclList()
-};
-
-watch(viewNew, (newValue) => {
-  getCclList();
-});
-
-  watch(currentCCLType, (newValue) => {
-    console.log(newValue)
-  getCclList()
-})
-
-// const searchDebounceTimer = ref(null);
-// watch(searchKeyword, () => {
-//   if (searchDebounceTimer.value) {
-//     clearTimeout(searchDebounceTimer.value);
-//   }
-//   searchDebounceTimer.value = setTimeout(() => {
-//     currentPage.value = 1;
-//     getExportControlListApi();
-//   }, 300);
-// });
-watch(searchKeyword, (newValue) => {
-  console.log('-----searchKey', newValue)
-  getCclList()
-});
-
-// 模拟清单列表
-const cclList = ref([
-  {
-    name: '类别 0-核材料、设施和设备、枪支、弹药[以及其他物品]',
-    desc: 'A."最终产品"、"设备"、"附件"、"附加装置"、"零件"、"组件"和"系统"',
-    isExpand: true,
-    list: [
-      {
-        code: '0A002',
-        name: '发电或推进设备，"专门设计"用于与太空、海洋或移动"核反应堆"一起使用。（这些项目"受 ITAR 管辖。"参见 22 CFR 第 120 至 130 部分。）',
-        isExpand: false,
-        isDot: false
-      },
-      {
-        code: '0A501',
-        name: '枪支（不包括 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪）及相关商品（不包括在 Eccn 0A509 中列举或以其他方式描述的与半自动相关的商品，用于 Eccn 0A506、0A507 或 0A508）如下（参见受控物品清单）',
-        isExpand: true,
-        isDot: true
-      },
-      {
-        code: '0A501',
-        name: '枪支（不包括 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪）及相关商品（不包括在 Eccn 0A509 中列举或以其他方式描述的与半自动相关的商品，用于 Eccn 0A506、0A507 或 0A508）如下（参见受控物品清单）',
-        isExpand: false,
-        isDot: true
-      }
-    ]
-  }
-])
-
-onMounted(async () => {
-  // 获取类别字段
-  await getTypeList()
-  // 获取科技领域字典
-  await getTechFields()
-  // 获取管控原因字典
-  await getControlReasonList()
-  // 获取ccl清单列表
-  getCclList();
-});
-
-
-</script>
-
-<style scoped lang="scss">
-* {
-	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;
-				font-family: "Microsoft YaHei";
-				line-height: 24px;
-				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;
-			height: auto;
-			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;
-					margin-bottom: 4px;
-					font-size: 16px;
-					font-weight: 400;
-					font-family: "Microsoft YaHei";
-					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;
-						box-shadow: none;
-						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);
-						}
-					}
-				}
-			}
-		}
-
-		.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;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				padding: 14px 12px 16px 0;
-				box-sizing: border-box;
-
-				.left-wrapper {
-					display: flex;
-					align-items: center;
-
-					.box {
-						width: 8px;
-						height: 20px;
-						background-color: rgb(5, 95, 194);
-						border-bottom-right-radius: 4px;
-						border-top-right-radius: 4px;
-						margin-right: 14px;
-					}
-
-					.text {
-						font-size: 20px;
-						font-weight: 700;
-						font-family: "Microsoft YaHei";
-						line-height: 26px;
-						color: rgb(5, 95, 194);
-					}
-				}
-
-				.right-wrapper {
-					display: flex;
-					align-items: center;
-
-					.stats {
-						display: flex;
-						align-items: center;
-						margin-right: 24px;
-
-						span {
-							font-size: 16px;
-							font-weight: 400;
-							font-family: "Microsoft YaHei";
-							line-height: 24px;
-							margin-left: 4px;
-							color: rgb(95, 101, 108);
-						}
-					}
-
-					.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;
-				max-height: 1987px;
-				overflow: auto;
-				box-sizing: border-size;
-				// background: red;
-
-				.list {
-					width: 100%;
-					height: auto;
-          margin-bottom: 14px;
-
-					.list-title {
-						width: 100%;
-						height: 54px;
-						background: rgb(5, 95, 194);
-						color: white;
-						padding: 14px 23px 16px 29px;
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-						border-radius: 4px;
-
-						span {
-							font-family: Microsoft YaHei;
-							font-style: Bold;
-							font-size: 18px;
-							font-weight: 700;
-							line-height: 24px;
-							letter-spacing: 0px;
-							text-align: left;
-						}
-					}
-
-					.list-desc {
-						margin-left: 28px;
-						margin-top: 14px;
-						margin-bottom: 16px;
-						font-family: Microsoft YaHei;
-						font-style: Bold;
-						font-size: 16px;
-						font-weight: 700;
-						line-height: 24px;
-						letter-spacing: 0px;
-						text-align: left;
-						color: black;
-					}
-
-					.list-content {
-						width: 100%;
-						margin-bottom: 12px;
-
-						.content-title {
-							background: rgb(234, 236, 238);
-							display: flex;
-							align-items: flex-start;
-							justify-content: space-around;
-							// padding: 9px 0px;
-
-							.code-zone {
-								width: 75px;
-								display: flex;
-								margin-top: 11px;
-								align-items: center;
-								justify-content: space-around;
-								.dot {
-									width: 8px;
-									height: 8px;
-									border-radius: 50%;
-									border: 2px solid rgb(206, 79, 81);
-									background-color: rgb(206, 79, 81);
-									z-index: 1;
-								}
-
-								.code {
-									font-family: Microsoft YaHei;
-									font-style: Bold;
-									font-size: 16px;
-									font-weight: 700;
-									line-height: 26px;
-									letter-spacing: 0px;
-									text-align: left;
-									color: rgba(59, 65, 75, 1);
-								}
-							}
-
-							.name {
-								width: 984px;
-								margin-top: 9px;
-								font-family: Microsoft YaHei;
-								font-style: Regular;
-								font-size: 16px;
-								font-weight: 400;
-								line-height: 30px;
-								letter-spacing: 0px;
-								text-align: justify;
-								color: rgba(59, 65, 75, 1);
-							}
-
-							img {
-								margin-top: 20px;
-							}
-						}
-
-						.content-body {
-							margin-left: 90px;
-							// margin-right: 92px;
-
-							img {
-								width: 984px;
-								height: 1047px;
-							}
-						}
-					}
-				}
-			}
-
-			.tight-footer {
-				padding: 16px 24px;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				.total-text {
-					font-size: 14px;
-					font-weight: 400;
-					color: #5f656c;
-					font-family: "Microsoft YaHei";
-				}
-
-				:deep(.el-pagination) {
-					--el-pagination-button-bg-color: #fff;
-					--el-pagination-hover-color: #0e78f1;
-					--el-pagination-font-size: 14px;
-
-					.el-pager li {
-						border: 1px solid #dcdfe6;
-						border-radius: 4px;
-						margin: 0 4px;
-						font-weight: 400;
-						color: #5f656c;
-						min-width: 32px;
-						height: 32px;
-						line-height: 30px;
-
-						&.is-active {
-							background-color: #0e78f1;
-							color: #fff;
-							border-color: #0e78f1;
-						}
-
-						&:hover:not(.is-active) {
-							color: #0e78f1;
-							border-color: #0e78f1;
-						}
-					}
-
-					.btn-prev,
-					.btn-next {
-						border: 1px solid #dcdfe6;
-						border-radius: 4px;
-						padding: 0;
-						margin: 0 4px;
-						min-width: 32px;
-						height: 32px;
-						line-height: 30px;
-						text-align: center;
-
-						&:hover {
-							color: #0e78f1;
-							border-color: #0e78f1;
-						}
-
-						&[disabled] {
-							border-color: #e4e7ed;
-							color: #c0c4cc;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-.title {
-	width: 100%;
-	height: 56px;
-	display: flex;
-	align-items: center;
-	padding: 14px 12px 16px 0;
-
-	.box {
-		width: 8px;
-		height: 16px;
-		background-color: rgb(5, 95, 194);
-		border-bottom-right-radius: 4px;
-		border-top-right-radius: 4px;
-		margin-right: 14px;
-	}
-
-	.text {
-		font-size: 16px;
-		font-weight: 700;
-		font-family: "Microsoft YaHei";
-		line-height: 24px;
-		color: rgb(5, 95, 194);
-	}
-}
-</style>
+<template>
+	<div class="list-page">
+		<div class="search-box">
+			<div style="display: flex; justify-content: center">
+				<el-select v-model="currentCCLType" style="width: 388px; height: 32px; margin-right: 14px">
+					<el-option v-for="item in CCLTypeList" :key="item.id" :label="item.name" :value="item.id" />
+				</el-select>
+				<el-input
+					v-model="searchKeyword"
+					class="search-input"
+					placeholder="搜索物项或ECCN编码"
+					:suffix-icon="Search"
+				/>
+			</div>
+			<div class="filters">
+				<el-checkbox v-model="viewNew" label="查看最近更新内容" />
+			</div>
+		</div>
+		<div class="main">
+			<div class="left">
+				<div class="title">
+					<div class="box"></div>
+					<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.name"
+						@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 controlReason"
+						:key="index"
+						v-model="item.checked"
+						:label="item.name"
+						@change="handleFilterChange(item, controlReason, 'reason')"
+					/>
+				</div>
+			</div>
+			<div class="right">
+				<div class="title">
+					<div class="left-wrapper">
+						<div class="box"></div>
+						<div class="text">CCL清单列表</div>
+					</div>
+					<div class="right-wrapper">
+						<!-- <div class="stats">
+							<el-switch v-model="value" size="small" />
+							<span>显示原文</span>
+						</div>-->
+						<div class="btn">
+							<img src="../../../../assets/下载按钮.png" alt />
+							<img src="../../../../assets/收藏按钮.png" alt />
+						</div>
+					</div>
+				</div>
+				<div class="right-table">
+					<div class="list" v-for="(item, i) in cclList">
+						<div class="list-title" @click="item.isExpand = !item.isExpand">
+							<span>类别 {{ item.cclCode }}-{{ item.cclTitleZh }}</span>
+							<img src="../../assets/downArrow_white.png" alt v-if="item.isExpand" />
+							<img src="../../assets/upArrow_white.png" alt v-else />
+						</div>
+
+						<div style="width: 100%" v-if="item.isExpand">
+							<div style="width: 100%" v-for="element in item.cclChildren">
+								<div class="list-desc">{{ element.cclCode }}. {{ element.cclTitleZh }}</div>
+
+								<div class="list-content" v-for="(ele, j) in element.cclChildren">
+									<div class="content-title" @click="ele.isExpand = !ele.isExpand">
+										<div class="code-zone">
+											<!-- <div class="dot" v-if="ele.isDot"></div> -->
+											<span class="code">{{ ele.cclCode }}</span>
+										</div>
+										<span class="name">{{ ele.cclTitleZh }}</span>
+										<img src="../../assets/upArrow_gray.png" alt v-if="ele.isExpand" />
+										<img src="../../assets/downArrow_gray.png" alt v-else />
+									</div>
+									<div class="content-body" v-if="ele.isExpand">
+										<!-- <img src="../../assets/cclDetail.png" alt /> -->
+										<div v-if="ele.cclDescription" v-html="ele.cclDescription"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { Search, Select } from "@element-plus/icons-vue";
+import defaultIcon from "../../../../../assets/icons/default-avatar.png";
+import { getECCNCategory, getAreaType, getControlReason, getCclQuery, getExportControlList, get50PercentEntityCount } from "@/api/exportControlV2.0.js"
+
+const router = useRouter();
+
+const currentCCLType = ref('')
+const CCLTypeList = ref([])
+const getTypeList = async () => {
+  try {
+    const res = await getECCNCategory()
+    if (res && res.code === 200) {
+      console.log('-----getTypeList', res.data)
+      CCLTypeList.value = res.data
+      currentCCLType.value = CCLTypeList.value[0].id
+    }
+  } catch (error) {
+    console.error("获取类别字典失败:", error);
+  }
+}
+
+const techFields = ref([])
+const getTechFields = async () => {
+  try {
+    const res = await getAreaType()
+    if (res && res.code === 200) {
+      console.log('-----getTechFields', res.data)
+      techFields.value = res.data
+      // 默认选中第一个
+      techFields.value[0].checked = true
+    }
+  } catch (error) {
+    console.error("获取科技领域字典失败:", error);
+  }
+}
+
+const controlReason = ref([])
+const getControlReasonList = async () => {
+  try {
+    const res = await getControlReason()
+    if (res && res.code === 200) {
+      console.log('-----getControlReasonList', res.data)
+      controlReason.value = res.data
+      // 默认选中第一个
+      controlReason.value[0].checked = true
+    }
+  } catch (error) {
+    console.error("获取管控原因字典失败:", error);
+  }
+}
+
+const searchKeyword = ref('');
+const onlyChina = ref(false);
+const viewNew = ref(true)
+
+// 获取ccl清单列表
+const getCclList = async () => {
+  let techDomains = techFields.value.filter(item => item.checked).map(item => +item.id)
+  let controls = controlReason.value.filter(item => item.checked).map(item => +item.id)
+  const params = {
+    categoryCode: currentCCLType.value,
+    techDomainIds: techDomains,
+    keyword: searchKeyword.value || '',
+    controlIds: controls,
+    isLatest: viewNew.value
+  }
+  console.log(JSON.stringify(params))
+  try {
+    // const res = await getCclQuery(null);
+    const res = await getCclQuery(params);
+    // const res = {
+    //   "code": 200,
+    //   "message": "操作成功",
+    //   "success": true,
+    //   "data": [
+    //     {
+    //       "id": 1,
+    //       "cclCode": "0",
+    //       "cclTitle": "Nuclear Materials, Facilities and Equipment and Miscellaneous",
+    //       "cclTitleZh": "核材料、设备设施及其他类似物项",
+    //       "cclDescription": null,
+    //       "cclDescriptionZh": null,
+    //       "cclChildren": [
+    //         {
+    //           "id": 11,
+    //           "cclCode": "A",
+    //           "cclTitle": "Equipment, Assemblies and Components",
+    //           "cclTitleZh": "设备、组件和部件",
+    //           "cclDescription": null,
+    //           "cclDescriptionZh": null,
+    //           "cclChildren": [
+    //             {
+    //               "id": 1,
+    //               "cclCode": "0A002",
+    //               "cclTitle": "Power generating or propulsion equipment \"specially designed\" for use with space, marine or mobile \"nuclear reactors\". (These items are \"subject to the ITAR.\" See 22 CFR parts 120 through 130.)",
+    //               "cclTitleZh": "专为太空、海洋或移动“核反应堆”设计的发电或推进设备。（这些项目“受 ITAR 约束”。参见 22 CFR 第 120 至 130 部分。）",
+    //               "cclDescription": null,
+    //               "cclDescriptionZh": null,
+    //               "cclChildren": null
+    //             },
+    //             {
+    //               "id": 2,
+    //               "cclCode": "0A501",
+    //               "cclTitle": "Firearms (except 0A502 shotguns, 0A506 semi-automatic rifles, 0A507 semi-automatic pistols, and 0A508 semi-automatic shotguns) and related commodities (except semi-automatic related commodities enumerated or otherwise described in Eccn 0A509 for Eccns 0A506, 0A507, or 0A508) as follows (see List of Items controlled).",
+    //               "cclTitleZh": "火器（除 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪外）及相关商品（除 Eccn 0A509 中列举或以其他方式描述的 Eccns 0A506、0A507 或 0A508 相关物品外），具体如下（参见管制物品列表）。",
+    //               "cclDescription": "<p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">License Requirements</span></p><p class=\"flush-paragraph-1\"><em>Reason for Control:</em> NS, RS, FC, UN, AT</p><div class=\"table-wrapper\"><div class=\"gpotbl_div\"><table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" class=\"gpo_table\" frame=\"void\" width=\"100%\"><thead><tr><th class=\"center\">Control(s)</th><th class=\"center\">Country chart<br>(see Supp. No. 1 to part 738)</th></tr></thead><tbody><tr><td class=\"left\">NS applies to entire entry except 0A501.y</td><td class=\"left\">NS Column 1.</td></tr><tr><td class=\"left\">RS applies to entire entry except 0A501.y</td><td class=\"left\">RS Column 1.</td></tr><tr><td class=\"left\">FC applies to entire entry except 0A501.y</td><td class=\"left\">FC Column 1.</td></tr><tr><td class=\"left\">UN applies to entire entry</td><td class=\"left\">See § 746.1 of the EAR for UN controls.</td></tr><tr><td class=\"left\">AT applies to entire entry</td><td class=\"left\">AT Column 1.</td></tr></tbody></table></div></div><div class=\"note\"><div class=\"header\"><em>License Requirement Note:</em></div><p><em>In addition to using the Commerce Country Chart to determine license requirements, a license is required for exports and reexports of ECCN 0A501.y.7 firearms to the People's Republic of China.</em></p></div><p class=\"flush-paragraph-1\">List Based License Exceptions (See Part 740 for a Description of All License Exceptions)</p><p class=\"flush-paragraph-1\"><em>LVS:</em> $500 for 0A501.c, .d, and .x.</p><p class=\"flush-paragraph-1\">$500 for 0A501.c, .d, .e, and .x if the ultimate destination is Canada.</p><p class=\"flush-paragraph-1\"><em>GBS:</em> N/A</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">Special Conditions for STA</span></p><p class=\"flush-paragraph-1\">License Exception STA may not be used for ECCN 0A501.a, .b, .c, .d, or .e, to any of the destinations listed in Country Group A:5 or A:6 (See supplement no.1 to part 740 of the EAR). License Exception STA may not be used for any item in this entry to any of the destinations listed in Country Group A:6 (See Supplement No.1 to part 740 of the EAR).</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">List of Items Controlled</span></p><p class=\"flush-paragraph-1\"><em>Related Controls:</em> (1) See USML Category I for firearms that are fully automatic, and certain related parts, components, accessories, and attachments (including magazines with a capacity of greater than 50 rounds). (2) See ECCN 0A506 for semi-automatic rifles. (3) See ECCN 0A507 for semi-automatic pistols. (4) See ECCN 0A508 for semi-automatic shotguns and ECCN 0A502 for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (5) See ECCN 0A509 for enumerated or otherwise described \"parts,\" \"components,\" devices, \"accessories,\" and \"attachments\" for ECCNs 0A506, 0A507, and 0A508. (6) See .d, .x, and .y of this entry for other \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" for 0A506 and 0A507, or 0A508. (7) See ECCN 0A502 for non-automatic shotguns and their \"parts\" and \"components\" that are subject to the EAR and for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (8) See ECCN 0A504 and USML Category XII for controls on optical sighting devices.</p><p class=\"flush-paragraph-1\"><em>Related Definitions:</em> N/A.</p><p class=\"flush-paragraph\"><em>Items:</em></p><p>a. Non-automatic and non-semi-automatic firearms equal to .50 caliber (12.7 mm) or less.</p><div class=\"note\"><div class=\"header\"><em>Note 1 to paragraph 0A501.a:</em></div><p><em>'Combination pistols' are controlled under ECCN 0A501.a. A 'combination pistol' (a.k.a., a combination gun) has at least one rifled barrel and at least one smoothbore barrel (generally a shotgun style barrel).</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 2 to paragraph 0A501.a:</em></div><p><em>Semi-automatic firearms</em> equal to .50 caliber (12.7 mm) or less <em>are controlled under ECCNs 0A506 and 0A507.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.a:</em></div><p><em>Firearms described in 0A501.a include those chambered for the .50 BMG cartridge.</em></p></div><p>b. Non-automatic and non-semi-automatic rifles, carbines, revolvers or pistols with a caliber greater than .50 inches (12.7 mm) but less than or equal to .72 inches (18.0 mm).</p><p>c. The following types of \"parts\" and \"components\" if \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or ECCNs 0A506 or 0A507, or USML Category I (unless otherwise enumerated or elsewhere specified on the USML or controlled under ECCN 0A509): Barrels, cylinders, barrel extensions, mounting blocks (trunnions), bolts, bolt carriers, operating rods, gas pistons, trigger housings, triggers, hammers/striker, sears, disconnectors, pistol grips that contain fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors) and buttstocks that contain fire control \"parts\" or \"components.\"</p><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.c:</em></div><p><em>Barrel blanks that have reached a stage in manufacturing in which they are either chambered or rifled are controlled by 0A501.c.</em></p></div><p>d. Detachable magazines with a capacity of 17 to 50 rounds \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or controlled by ECCNs 0A506 or 0A507.</p><div class=\"note\"><div class=\"header\"><em>Note 3 to paragraph 0A501.d</em></div><p><em>Magazines with a capacity of 16 rounds or less are controlled under 0A501.x; for magazines with a capacity greater than 50 rounds, see USML Category I. Magazines that hold only blank ammunition controlled under 0A505.d are controlled under 0A501.d or 0A501.x, depending on the magazine's capacity.</em></p></div><p>e. Receivers (frames) and \"complete breech mechanisms,\" including castings, forgings, stampings, or machined items thereof, \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry.</p><div class=\"note\"><div class=\"header\"><em>Note 4 to 0A501.e:</em></div><p><em>Frames (receivers) under 0A501.e refers to any \"part\" or \"component\" of the firearm that has or is customarily marked with a serial number when required by law. This paragraph 0A501.e is synonymous with a \"part\" or \"component\" that is regulated by the Bureau of Alcohol, Tobacco, Firearms and Explosives (see <a href=\"https://www.govinfo.gov/link/uscode/18/921\" class=\"usc external\" target=\"_blank\" rel=\"noopener noreferrer\">18 U.S.C. 921(a)(3)</a>; <a href=\"https://www.ecfr.gov/current/title-27/part-447\" class=\"cfr external\">27 CFR parts 447</a>, <a href=\"https://www.ecfr.gov/current/title-27/part-478\" class=\"cfr external\">478</a>, and <a href=\"https://www.ecfr.gov/current/title-27/part-479\" class=\"cfr external\">479</a>,) as a firearm.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 5 to 0A501.e:</em></div><p><em>Frames (receivers) \"specially designed\" for semi-automatic firearms are controlled under ECCN 0A509.b or .c.</em></p></div><p>f. through w. [Reserved]</p><p>x. \"Parts\" and \"components\" that are \"specially designed\" for a commodity classified under paragraphs .a through .c of this entry, a commodity classified under ECCNs 0A506 or 0A507, or the USML and not elsewhere specified on the USML or CCL or controlled under ECCN 0A509.</p><p>y. Specific \"parts,\" \"components,\" \"accessories\" and \"attachments\" \"specially designed\" for a commodity subject to control in this ECCN, ECCNs 0A506, 0A507, or common to a defense article in USML Category I and not elsewhere specified in the USML or CCL as follows, and \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" therefor.</p><p>y.1. Stocks (including adjustable, collapsible, blades and braces), grips, handguards, or forends, that do not contain any fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors);</p><p>y.2 through y.5. [Reserved]</p><p>y.6. Bayonets; and</p><p>y.7. Firearms manufactured from 1890 to 1898 and reproductions thereof.</p><div class=\"note\"><div class=\"header\"><em>Technical Note 1 to 0A501:</em></div><p><em>ECCN 0A501 includes \"parts\" and \"components\" that are not \"subject to the ITAR\" even though they are common to firearms described in ECCN 0A501 and to those firearms \"subject to the ITAR.\"</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 2 to 0A501:</em></div><p><em>A receiver with any other controlled \"part\" or \"component\" ( e.g., a barrel (0A501.c), or trigger guard (0A501.x), or stock (0A501.y.1)) is still controlled under 0A501.e.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 3 to 0A501:</em></div><p><em>Blank firing adapters, which are attachments to semi-automatic and automatic firearms used in conjunction with blank cartridges for safety and functional reasons and used for firearm training purposes by police, military, sporting shooters, as well as in the movie industry, are designated as EAR99.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 6 to 0A501:</em></div><p><em>Antique firearms (i.e., those manufactured before 1890) and reproductions thereof, muzzle loading and black powder firearms except those designs based on centerfire weapons of a post 1937 design, BB guns, pellet rifles, paint ball, and all other air rifles are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 7 to 0A501:</em></div><p><em>Muzzle loading and black powder firearms with a caliber less than 20 mm that were manufactured post 1937 that are used for hunting or sporting purposes that were not \"specially designed\" for military use and are not described on the USML nor controlled as shotguns under ECCN 0A502 are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 8 to 0A501:</em></div><p><em>Scope mounts or accessory rails, iron sights, sling swivels, and butt plates or recoil pads that are subject to the EAR are designated as EAR99. These commodities have been determined to no longer warrant being \"specially designed\" for purposes of ECCN 0A501.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 9 to 0A501:</em></div><p><em>A kit, including a replacement or repair kit, of firearms \"parts\" or \"components\" customarily sold and exported together takes on the classification of the most restrictive \"part\" or \"component\" that is included in the kit. For example, a kit containing 0A501.y and .x \"parts,\" is controlled as a 0A501.x kit because the .x \"part\" is the most restrictive \"part\" included in the kit. A complete 0A501 firearm disassembled in a kit form is controlled as a firearm under 0A501.a, .b, or .y.7.</em></p></div>",
+    //               "cclDescriptionZh": "<p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">License Requirements</span></p><p class=\"flush-paragraph-1\"><em>Reason for Control:</em> NS, RS, FC, UN, AT</p><div class=\"table-wrapper\"><div class=\"gpotbl_div\"><table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" class=\"gpo_table\" frame=\"void\" width=\"100%\"><thead><tr><th class=\"center\">控制原因</th><th class=\"center\">Country chart<br>（参见第738部分补充1号文）</th></tr></thead><tbody><tr><td class=\"left\">NS applies to entire entry except 0A501.y</td><td class=\"left\">NS Column 1.</td></tr><tr><td class=\"left\">RS applies to entire entry except 0A501.y</td><td class=\"left\">RS Column 1.</td></tr><tr><td class=\"left\">FC applies to entire entry except 0A501.y</td><td class=\"left\">FC Column 1.</td></tr><tr><td class=\"left\">UN applies to entire entry</td><td class=\"left\">See § 746.1 of the EAR for UN controls.</td></tr><tr><td class=\"left\">AT applies to entire entry</td><td class=\"left\">AT Column 1.</td></tr></tbody></table></div></div><div class=\"note\"><div class=\"header\"><em>License Requirement Note:</em></div><p><em>In addition to using the Commerce Country Chart to determine license requirements, a license is required for exports and reexports of ECCN 0A501.y.7 firearms to the People's Republic of China.</em></p></div><p class=\"flush-paragraph-1\">List Based License Exceptions (See Part 740 for a Description of All License Exceptions)</p><p class=\"flush-paragraph-1\"><em>LVS:</em> $500 for 0A501.c, .d, and .x.</p><p class=\"flush-paragraph-1\">$500 for 0A501.c, .d, .e, and .x if the ultimate destination is Canada.</p><p class=\"flush-paragraph-1\"><em>GBS:</em> N/A</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">Special Conditions for STA</span></p><p class=\"flush-paragraph-1\">License Exception STA may not be used for ECCN 0A501.a, .b, .c, .d, or .e, to any of the destinations listed in Country Group A:5 or A:6 (See supplement no.1 to part 740 of the EAR). License Exception STA may not be used for any item in this entry to any of the destinations listed in Country Group A:6 (See Supplement No.1 to part 740 of the EAR).</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">List of Items Controlled</span></p><p class=\"flush-paragraph-1\"><em>Related Controls:</em> (1) See USML Category I for firearms that are fully automatic, and certain related parts, components, accessories, and attachments (including magazines with a capacity of greater than 50 rounds). (2) See ECCN 0A506 for semi-automatic rifles. (3) See ECCN 0A507 for semi-automatic pistols. (4) See ECCN 0A508 for semi-automatic shotguns and ECCN 0A502 for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (5) See ECCN 0A509 for enumerated or otherwise described \"parts,\" \"components,\" devices, \"accessories,\" and \"attachments\" for ECCNs 0A506, 0A507, and 0A508. (6) See .d, .x, and .y of this entry for other \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" for 0A506 and 0A507, or 0A508. (7) See ECCN 0A502 for non-automatic shotguns and their \"parts\" and \"components\" that are subject to the EAR and for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (8) See ECCN 0A504 and USML Category XII for controls on optical sighting devices.</p><p class=\"flush-paragraph-1\"><em>Related Definitions:</em> N/A.</p><p class=\"flush-paragraph\"><em>Items:</em></p><p>a. Non-automatic and non-semi-automatic firearms equal to .50 caliber (12.7 mm) or less.</p><div class=\"note\"><div class=\"header\"><em>Note 1 to paragraph 0A501.a:</em></div><p><em>'Combination pistols' are controlled under ECCN 0A501.a. A 'combination pistol' (a.k.a., a combination gun) has at least one rifled barrel and at least one smoothbore barrel (generally a shotgun style barrel).</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 2 to paragraph 0A501.a:</em></div><p><em>Semi-automatic firearms</em> equal to .50 caliber (12.7 mm) or less <em>are controlled under ECCNs 0A506 and 0A507.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.a:</em></div><p><em>Firearms described in 0A501.a include those chambered for the .50 BMG cartridge.</em></p></div><p>b. Non-automatic and non-semi-automatic rifles, carbines, revolvers or pistols with a caliber greater than .50 inches (12.7 mm) but less than or equal to .72 inches (18.0 mm).</p><p>c. The following types of \"parts\" and \"components\" if \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or ECCNs 0A506 or 0A507, or USML Category I (unless otherwise enumerated or elsewhere specified on the USML or controlled under ECCN 0A509): Barrels, cylinders, barrel extensions, mounting blocks (trunnions), bolts, bolt carriers, operating rods, gas pistons, trigger housings, triggers, hammers/striker, sears, disconnectors, pistol grips that contain fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors) and buttstocks that contain fire control \"parts\" or \"components.\"</p><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.c:</em></div><p><em>Barrel blanks that have reached a stage in manufacturing in which they are either chambered or rifled are controlled by 0A501.c.</em></p></div><p>d. Detachable magazines with a capacity of 17 to 50 rounds \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or controlled by ECCNs 0A506 or 0A507.</p><div class=\"note\"><div class=\"header\"><em>Note 3 to paragraph 0A501.d</em></div><p><em>Magazines with a capacity of 16 rounds or less are controlled under 0A501.x; for magazines with a capacity greater than 50 rounds, see USML Category I. Magazines that hold only blank ammunition controlled under 0A505.d are controlled under 0A501.d or 0A501.x, depending on the magazine's capacity.</em></p></div><p>e. Receivers (frames) and \"complete breech mechanisms,\" including castings, forgings, stampings, or machined items thereof, \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry.</p><div class=\"note\"><div class=\"header\"><em>Note 4 to 0A501.e:</em></div><p><em>Frames (receivers) under 0A501.e refers to any \"part\" or \"component\" of the firearm that has or is customarily marked with a serial number when required by law. This paragraph 0A501.e is synonymous with a \"part\" or \"component\" that is regulated by the Bureau of Alcohol, Tobacco, Firearms and Explosives (see <a href=\"https://www.govinfo.gov/link/uscode/18/921\" class=\"usc external\" target=\"_blank\" rel=\"noopener noreferrer\">18 U.S.C. 921(a)(3)</a>; <a href=\"https://www.ecfr.gov/current/title-27/part-447\" class=\"cfr external\">27 CFR parts 447</a>, <a href=\"https://www.ecfr.gov/current/title-27/part-478\" class=\"cfr external\">478</a>, and <a href=\"https://www.ecfr.gov/current/title-27/part-479\" class=\"cfr external\">479</a>,) as a firearm.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 5 to 0A501.e:</em></div><p><em>Frames (receivers) \"specially designed\" for semi-automatic firearms are controlled under ECCN 0A509.b or .c.</em></p></div><p>f. through w. [Reserved]</p><p>x. \"Parts\" and \"components\" that are \"specially designed\" for a commodity classified under paragraphs .a through .c of this entry, a commodity classified under ECCNs 0A506 or 0A507, or the USML and not elsewhere specified on the USML or CCL or controlled under ECCN 0A509.</p><p>y. Specific \"parts,\" \"components,\" \"accessories\" and \"attachments\" \"specially designed\" for a commodity subject to control in this ECCN, ECCNs 0A506, 0A507, or common to a defense article in USML Category I and not elsewhere specified in the USML or CCL as follows, and \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" therefor.</p><p>y.1. Stocks (including adjustable, collapsible, blades and braces), grips, handguards, or forends, that do not contain any fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors);</p><p>y.2 through y.5. [Reserved]</p><p>y.6. Bayonets; and</p><p>y.7. Firearms manufactured from 1890 to 1898 and reproductions thereof.</p><div class=\"note\"><div class=\"header\"><em>Technical Note 1 to 0A501:</em></div><p><em>ECCN 0A501 includes \"parts\" and \"components\" that are not \"subject to the ITAR\" even though they are common to firearms described in ECCN 0A501 and to those firearms \"subject to the ITAR.\"</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 2 to 0A501:</em></div><p><em>A receiver with any other controlled \"part\" or \"component\" ( e.g., a barrel (0A501.c), or trigger guard (0A501.x), or stock (0A501.y.1)) is still controlled under 0A501.e.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 3 to 0A501:</em></div><p><em>Blank firing adapters, which are attachments to semi-automatic and automatic firearms used in conjunction with blank cartridges for safety and functional reasons and used for firearm training purposes by police, military, sporting shooters, as well as in the movie industry, are designated as EAR99.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 6 to 0A501:</em></div><p><em>Antique firearms (i.e., those manufactured before 1890) and reproductions thereof, muzzle loading and black powder firearms except those designs based on centerfire weapons of a post 1937 design, BB guns, pellet rifles, paint ball, and all other air rifles are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 7 to 0A501:</em></div><p><em>Muzzle loading and black powder firearms with a caliber less than 20 mm that were manufactured post 1937 that are used for hunting or sporting purposes that were not \"specially designed\" for military use and are not described on the USML nor controlled as shotguns under ECCN 0A502 are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 8 to 0A501:</em></div><p><em>Scope mounts or accessory rails, iron sights, sling swivels, and butt plates or recoil pads that are subject to the EAR are designated as EAR99. These commodities have been determined to no longer warrant being \"specially designed\" for purposes of ECCN 0A501.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 9 to 0A501:</em></div><p><em>A kit, including a replacement or repair kit, of firearms \"parts\" or \"components\" customarily sold and exported together takes on the classification of the most restrictive \"part\" or \"component\" that is included in the kit. For example, a kit containing 0A501.y and .x \"parts,\" is controlled as a 0A501.x kit because the .x \"part\" is the most restrictive \"part\" included in the kit. A complete 0A501 firearm disassembled in a kit form is controlled as a firearm under 0A501.a, .b, or .y.7.</em></p></div>",
+    //               "cclChildren": null
+    //             },
+    //             {
+    //               "id": 3,
+    //               "cclCode": "0A502",
+    //               "cclTitle": "Shotguns; shotguns \"parts\" and \"components,\" consisting of complete trigger mechanisms; magazines and magazine extension tubes; \"complete breech mechanisms;\" except: semi-automatic shotguns controlled under Eccn 0A508; certain \"parts,\" components,\" devices, \"accessories,\" and \"attachments\" for semi-automatic shotguns controlled under Eccn 0A509; equipment used to slaughter domestic animals or used exclusively to treat or tranquilize animals; and arms designed solely for signal, flare, or saluting use.",
+    //               "cclTitleZh": "霰弹枪;霰弹枪“零件”和“组件”，由完整的扳机机构组成;弹药库和弹匣延长管;“完整的闭锁机构”;除外：根据 Eccn 0A508 控制的半自动霰弹枪;根据 Eccn 0A509 控制的某些半自动霰弹枪的“零件”、“组件”、“装置”、“配件”;用于屠宰家畜或专门用于治疗或镇静动物的设备;以及仅用于信号、照明或敬礼使用的武器。",
+    //               "cclDescription": null,
+    //               "cclDescriptionZh": null,
+    //               "cclChildren": null
+    //             }
+    //           ]
+    //         }
+    //       ]
+    //     }
+    //   ]
+    // }
+    // cclList.value = res.data
+    // // 给数据添加isExpand字段
+    // cclList.value.forEach((item) => {
+    //   item.isExpand = false
+    //   item.cclChildren.forEach((ele) => {
+    //     ele.cclChildren.forEach((i) => {
+    //       i.isExpand = false
+    //     })
+    //   })
+    // })
+    if (res && res.code === 200) {
+      console.log('----getCclList', res.data)
+      cclList.value = res.data
+      // 给数据添加isExpand字段
+      cclList.value.forEach((item) => {
+        item.isExpand = false
+        item.cclChildren.forEach((ele) => {
+          ele.cclChildren.forEach((i) => {
+            i.isExpand = false
+          })
+        })
+      })
+    }
+  } catch (error) {
+    console.error("获取ccl清单列表失败:", error);
+
+  }
+}
+
+// 筛选逻辑处理
+const handleFilterChange = (item, list, type) => {
+  console.log(item, list, type)
+  getCclList()
+};
+
+watch(viewNew, (newValue) => {
+  getCclList();
+});
+
+  watch(currentCCLType, (newValue) => {
+    console.log(newValue)
+  getCclList()
+})
+
+// const searchDebounceTimer = ref(null);
+// watch(searchKeyword, () => {
+//   if (searchDebounceTimer.value) {
+//     clearTimeout(searchDebounceTimer.value);
+//   }
+//   searchDebounceTimer.value = setTimeout(() => {
+//     currentPage.value = 1;
+//     getExportControlListApi();
+//   }, 300);
+// });
+watch(searchKeyword, (newValue) => {
+  console.log('-----searchKey', newValue)
+  getCclList()
+});
+
+// 模拟清单列表
+const cclList = ref([
+  {
+    name: '类别 0-核材料、设施和设备、枪支、弹药[以及其他物品]',
+    desc: 'A."最终产品"、"设备"、"附件"、"附加装置"、"零件"、"组件"和"系统"',
+    isExpand: true,
+    list: [
+      {
+        code: '0A002',
+        name: '发电或推进设备，"专门设计"用于与太空、海洋或移动"核反应堆"一起使用。（这些项目"受 ITAR 管辖。"参见 22 CFR 第 120 至 130 部分。）',
+        isExpand: false,
+        isDot: false
+      },
+      {
+        code: '0A501',
+        name: '枪支（不包括 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪）及相关商品（不包括在 Eccn 0A509 中列举或以其他方式描述的与半自动相关的商品，用于 Eccn 0A506、0A507 或 0A508）如下（参见受控物品清单）',
+        isExpand: true,
+        isDot: true
+      },
+      {
+        code: '0A501',
+        name: '枪支（不包括 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪）及相关商品（不包括在 Eccn 0A509 中列举或以其他方式描述的与半自动相关的商品，用于 Eccn 0A506、0A507 或 0A508）如下（参见受控物品清单）',
+        isExpand: false,
+        isDot: true
+      }
+    ]
+  }
+])
+
+onMounted(async () => {
+  // 获取类别字段
+  await getTypeList()
+  // 获取科技领域字典
+  await getTechFields()
+  // 获取管控原因字典
+  await getControlReasonList()
+  // 获取ccl清单列表
+  getCclList();
+});
+
+
+</script>
+
+<style scoped lang="scss">
+* {
+	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;
+				font-family: "Microsoft YaHei";
+				line-height: 24px;
+				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;
+			height: auto;
+			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;
+					margin-bottom: 4px;
+					font-size: 16px;
+					font-weight: 400;
+					font-family: "Microsoft YaHei";
+					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;
+						box-shadow: none;
+						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);
+						}
+					}
+				}
+			}
+		}
+
+		.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;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 14px 12px 16px 0;
+				box-sizing: border-box;
+
+				.left-wrapper {
+					display: flex;
+					align-items: center;
+
+					.box {
+						width: 8px;
+						height: 20px;
+						background-color: rgb(5, 95, 194);
+						border-bottom-right-radius: 4px;
+						border-top-right-radius: 4px;
+						margin-right: 14px;
+					}
+
+					.text {
+						font-size: 20px;
+						font-weight: 700;
+						font-family: "Microsoft YaHei";
+						line-height: 26px;
+						color: rgb(5, 95, 194);
+					}
+				}
+
+				.right-wrapper {
+					display: flex;
+					align-items: center;
+
+					.stats {
+						display: flex;
+						align-items: center;
+						margin-right: 24px;
+
+						span {
+							font-size: 16px;
+							font-weight: 400;
+							font-family: "Microsoft YaHei";
+							line-height: 24px;
+							margin-left: 4px;
+							color: rgb(95, 101, 108);
+						}
+					}
+
+					.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;
+				max-height: 1987px;
+				overflow: auto;
+				box-sizing: border-size;
+				// background: red;
+
+				.list {
+					width: 100%;
+					height: auto;
+          margin-bottom: 14px;
+
+					.list-title {
+						width: 100%;
+						height: 54px;
+						background: rgb(5, 95, 194);
+						color: white;
+						padding: 14px 23px 16px 29px;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						border-radius: 4px;
+
+						span {
+							font-family: Microsoft YaHei;
+							font-style: Bold;
+							font-size: 18px;
+							font-weight: 700;
+							line-height: 24px;
+							letter-spacing: 0px;
+							text-align: left;
+						}
+					}
+
+					.list-desc {
+						margin-left: 28px;
+						margin-top: 14px;
+						margin-bottom: 16px;
+						font-family: Microsoft YaHei;
+						font-style: Bold;
+						font-size: 16px;
+						font-weight: 700;
+						line-height: 24px;
+						letter-spacing: 0px;
+						text-align: left;
+						color: black;
+					}
+
+					.list-content {
+						width: 100%;
+						margin-bottom: 12px;
+
+						.content-title {
+							background: rgb(234, 236, 238);
+							display: flex;
+							align-items: flex-start;
+							justify-content: space-around;
+							// padding: 9px 0px;
+
+							.code-zone {
+								width: 75px;
+								display: flex;
+								margin-top: 11px;
+								align-items: center;
+								justify-content: space-around;
+								.dot {
+									width: 8px;
+									height: 8px;
+									border-radius: 50%;
+									border: 2px solid rgb(206, 79, 81);
+									background-color: rgb(206, 79, 81);
+									z-index: 1;
+								}
+
+								.code {
+									font-family: Microsoft YaHei;
+									font-style: Bold;
+									font-size: 16px;
+									font-weight: 700;
+									line-height: 26px;
+									letter-spacing: 0px;
+									text-align: left;
+									color: rgba(59, 65, 75, 1);
+								}
+							}
+
+							.name {
+								width: 984px;
+								margin-top: 9px;
+								font-family: Microsoft YaHei;
+								font-style: Regular;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 30px;
+								letter-spacing: 0px;
+								text-align: justify;
+								color: rgba(59, 65, 75, 1);
+							}
+
+							img {
+								margin-top: 20px;
+							}
+						}
+
+						.content-body {
+							margin-left: 90px;
+							// margin-right: 92px;
+
+							img {
+								width: 984px;
+								height: 1047px;
+							}
+						}
+					}
+				}
+			}
+
+			.tight-footer {
+				padding: 16px 24px;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.total-text {
+					font-size: 14px;
+					font-weight: 400;
+					color: #5f656c;
+					font-family: "Microsoft YaHei";
+				}
+
+				:deep(.el-pagination) {
+					--el-pagination-button-bg-color: #fff;
+					--el-pagination-hover-color: #0e78f1;
+					--el-pagination-font-size: 14px;
+
+					.el-pager li {
+						border: 1px solid #dcdfe6;
+						border-radius: 4px;
+						margin: 0 4px;
+						font-weight: 400;
+						color: #5f656c;
+						min-width: 32px;
+						height: 32px;
+						line-height: 30px;
+
+						&.is-active {
+							background-color: #0e78f1;
+							color: #fff;
+							border-color: #0e78f1;
+						}
+
+						&:hover:not(.is-active) {
+							color: #0e78f1;
+							border-color: #0e78f1;
+						}
+					}
+
+					.btn-prev,
+					.btn-next {
+						border: 1px solid #dcdfe6;
+						border-radius: 4px;
+						padding: 0;
+						margin: 0 4px;
+						min-width: 32px;
+						height: 32px;
+						line-height: 30px;
+						text-align: center;
+
+						&:hover {
+							color: #0e78f1;
+							border-color: #0e78f1;
+						}
+
+						&[disabled] {
+							border-color: #e4e7ed;
+							color: #c0c4cc;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.title {
+	width: 100%;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	padding: 14px 12px 16px 0;
+
+	.box {
+		width: 8px;
+		height: 16px;
+		background-color: rgb(5, 95, 194);
+		border-bottom-right-radius: 4px;
+		border-top-right-radius: 4px;
+		margin-right: 14px;
+	}
+
+	.text {
+		font-size: 16px;
+		font-weight: 700;
+		font-family: "Microsoft YaHei";
+		line-height: 24px;
+		color: rgb(5, 95, 194);
+	}
+}
+</style>

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

-<!--
- * @Author: lishun
- * @Date: 2026-01-07 09:57:54
- * @LastEditors: lishun
- * @LastEditTime: 2026-01-07 09:58:04
--->
-<template>
-  <div class="sanctions-overview">
-    <div class="side-nav">
-        <div v-for="(item, index) in activeTab" :key="index" class="tab-item" :class="{'active': index === activeIndex}" @click="activeIndex = index">
-            {{item}}
-            <span v-if="index === activeIndex" class="arrow"></span>
-        </div>
-    </div>
-    <div class="content-box">
-        <introductionPage v-if="activeIndex === 0"></introductionPage>
-        <listPage v-if="activeIndex === 1"></listPage>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import introductionPage from "./components/introductionPage/index.vue"
-import listPage from "./components/listPage/index.vue"
-
-const activeTab = ref(["CCL清单简介", "CCL清单列表"])
-const activeIndex = ref(0)
-
-
-
-</script>
-
-<style scoped lang="scss">
-*{
-    margin: 0;
-    padding: 0;
-}
-.sanctions-overview{
-    width: 1601px;
-    margin: 0 auto;
-    position: relative;
-    // min-height: 800px;
-    .side-nav {
-      position: absolute;
-      top: 27px;
-      right: 100%;
-      margin-right: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      .tab-item {
-        cursor: pointer;
-        padding: 4px 20px;
-        border-radius: 22px;
-        font-size: 16px;
-        font-weight: 400;
-        font-family: "Microsoft YaHei";
-        line-height: 24px;
-        color: rgb(95, 101, 108);
-        white-space: nowrap;
-        display: flex;
-        align-items: center;
-        
-        &.active {
-          background-color: rgb(5, 95, 194);
-          color: #fff;
-          
-          .arrow {
-            display: inline-block;
-            width: 0;
-            height: 0;
-            border-top: 5px solid transparent;
-            border-bottom: 5px solid transparent;
-            border-left: 6px solid #fff;
-            margin-left: 8px;
-          }
-        }
-      }
-    }
-    .content-box {
-        width: 100%;
-    }
-}
-</style>
+<!--
+ * @Author: lishun
+ * @Date: 2026-01-07 09:57:54
+ * @LastEditors: lishun
+ * @LastEditTime: 2026-01-07 09:58:04
+-->
+<template>
+  <div class="sanctions-overview">
+    <div class="side-nav">
+        <div v-for="(item, index) in activeTab" :key="index" class="tab-item" :class="{'active': index === activeIndex}" @click="activeIndex = index">
+            {{item}}
+            <span v-if="index === activeIndex" class="arrow"></span>
+        </div>
+    </div>
+    <div class="content-box">
+        <introductionPage v-if="activeIndex === 0"></introductionPage>
+        <listPage v-if="activeIndex === 1"></listPage>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import introductionPage from "./components/introductionPage/index.vue"
+import listPage from "./components/listPage/index.vue"
+
+const activeTab = ref(["CCL清单简介", "CCL清单列表"])
+const activeIndex = ref(0)
+
+
+
+</script>
+
+<style scoped lang="scss">
+*{
+    margin: 0;
+    padding: 0;
+}
+.sanctions-overview{
+    width: 1601px;
+    margin: 0 auto;
+    position: relative;
+    // min-height: 800px;
+    .side-nav {
+      position: absolute;
+      top: 27px;
+      right: 100%;
+      margin-right: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      .tab-item {
+        cursor: pointer;
+        padding: 4px 20px;
+        border-radius: 22px;
+        font-size: 16px;
+        font-weight: 400;
+        font-family: "Microsoft YaHei";
+        line-height: 24px;
+        color: rgb(95, 101, 108);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        
+        &.active {
+          background-color: rgb(5, 95, 194);
+          color: #fff;
+          
+          .arrow {
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-top: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+            border-left: 6px solid #fff;
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+    .content-box {
+        width: 100%;
+    }
+}
+</style>

src/views/thinkTank/assets/images/box1-left.svg

+<svg viewBox="0 0 24 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="48.000000" fill="none" customFrame="#000000">
+	<rect id="左右切换按钮" width="24.000000" height="48.000000" x="0.000000" y="0.000000" />
+	<path id="矩形 161" d="M20 0C22.2091 0 24 1.79086 24 4L24 44C24 46.2091 22.2091 48 20 48L0 48L0 0L20 0Z" fill="rgb(231,243,255)" fill-rule="evenodd" />
+	<path id="矢量 466" d="M14 18L8 24L14 30" stroke="rgb(5,95,194)" stroke-width="1.500000" />
+</svg>

src/views/thinkTank/assets/images/box1-right.svg

+<svg viewBox="0 0 24 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="48.000000" fill="none">
+	<rect id="左右切换按钮" width="24.000000" height="48.000000" x="0.000000" y="0.000000" />
+	<path id="矩形 161" d="M24 0L24 48L4 48C1.79086 48 0 46.2091 0 44L0 4C0 1.79086 1.79086 0 4 0L24 0Z" fill="rgb(231,243,255)" fill-rule="evenodd" />
+	<path id="矢量 466" d="M6 0L0 6L6 12" stroke="rgb(5,95,194)" stroke-width="1.500000" transform="matrix(-1,0,0,1,16,18)" />
+</svg>

src/views/thinkTank/index.vue

 <template>
 	<div class="home-wrapper">
 		<div class="search-header" v-show="isShow">
-			<div class="home-main-header-center">
-				<el-input
-					v-model="searchThinktankText"
-					@keyup.enter="handleSearch"
-					style="width: 680px; height: 100%"
-					placeholder="搜索智库报告"
-				/>
-				<div class="search">
-					<div class="search-icon">
-						<img src="./assets/images/search-icon.png" alt="" />
+			<div class="search-header-container">
+
+				<div class="home-main-header-center">
+					<el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
+						style="width: 680px; height: 100%" placeholder="搜索智库报告" />
+					<div class="search">
+						<div class="search-icon">
+							<img src="./assets/images/search-icon.png" alt="" />
+						</div>
+						<div class="search-text" @click="handleSearch">搜索</div>
 					</div>
-					<div class="search-text" @click="handleSearch">搜索</div>
 				</div>
-			</div>
-			<div class="home-main-header-btn-box">
-				<div class="btn" @click="handleToPosi('position1')">
-					<div class="btn-text">{{ "最新动态" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+				<div class="home-main-header-btn-box">
+					<div class="btn" @click="handleToPosi('position1')">
+						<div class="btn-text">{{ "最新动态" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position2')">
-					<div class="btn-text">{{ "资讯要闻" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position2')">
+						<div class="btn-text">{{ "资讯要闻" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position3')">
-					<div class="btn-text">{{ "数据总览" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position3')">
+						<div class="btn-text">{{ "数据总览" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
-				</div>
-				<div class="btn" @click="handleToPosi('position4')">
-					<div class="btn-text">{{ "资源库" }}</div>
-					<div class="btn-icon">
-						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+					<div class="btn" @click="handleToPosi('position4')">
+						<div class="btn-text">{{ "资源库" }}</div>
+						<div class="btn-icon">
+							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
+			<div class="home-top-bg"></div>
 			<div class="home-main-header">
 				<!-- <div class="home-main-header-top" v-show="!isShow">
 					<div class="header-left">
@@ -52,13 +52,10 @@
 						<headerInfo curTitleName="科技智库"></headerInfo>
 					</div>
 				</div> -->
-				<div class="home-main-header-center">
-					<el-input
-						v-model="searchThinktankText"
-						@keyup.enter="handleSearch"
-						style="width: 838px; height: 100%"
-						placeholder="搜索智库报告"
-					/>
+
+				<div class="home-main-header-center" v-show="!isShow">
+					<el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
+						style="width: 838px; height: 100%" placeholder="搜索智库报告" />
 					<div class="search">
 						<div class="search-icon">
 							<img src="./assets/images/search-icon.png" alt="" />
@@ -116,7 +113,8 @@
 							<div class="icon">
 								<img :src="item.logo" alt="" />
 							</div>
-							<div class="rank" :class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }">
+							<div class="rank"
+								:class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }">
 								{{ "No." + (index + 1) }}
 							</div>
 						</div>
@@ -133,17 +131,12 @@
 </el-popover> -->
 						<div class="content">{{ item.desc }}</div>
 						<div class="tag-box">
-							<div
-								class="tag"
-								:class="{
-									tag1: val.status === 1,
-									tag2: val.status === 2,
-									tag3: val.status === 3,
-									tag4: val.status === 4
-								}"
-								v-for="(val, idx) in item.tagList"
-								:key="idx"
-							>
+							<div class="tag" :class="{
+								tag1: val.status === 1,
+								tag2: val.status === 2,
+								tag3: val.status === 3,
+								tag4: val.status === 4
+							}" v-for="(val, idx) in item.tagList" :key="idx">
 								{{ val.industryName }}
 							</div>
 						</div>
@@ -161,12 +154,12 @@
 					<div class="box1">
 						<div class="box1-left" @click="handleSwithCurDecree('left')">
 							<div class="icon">
-								<img src="./assets/images/box1-left.png" alt="" />
+								<img src="./assets/images/box1-left.svg" alt="" />
 							</div>
 						</div>
 						<div class="box1-right" @click="handleSwithCurDecree('right')">
 							<div class="icon">
-								<img src="./assets/images/box1-right.png" alt="" />
+								<img src="./assets/images/box1-right.svg" alt="" />
 							</div>
 						</div>
 						<div class="box1-header">
@@ -178,14 +171,8 @@
 							</div>
 							<div class="box1-header-right" @click="handleClickToDetail">查看详情 ></div>
 						</div>
-						<el-carousel
-							ref="carouselRef"
-							height="395px"
-							:autoplay="true"
-							:interval="3000"
-							arrow="never"
-							indicator-position="none"
-						>
+						<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
+							indicator-position="none">
 							<el-carousel-item v-for="(itemData, index) in box1Data" :key="index">
 								<div class="box1-main">
 									<div class="box1-main-left">
@@ -194,7 +181,8 @@
 									<div class="box1-main-right">
 										<div class="title">{{ itemData?.reportName }}</div>
 										<div class="tag-box">
-											<div class="tag" v-for="(item, index) in itemData?.industryVOList" :key="index">
+											<div class="tag" v-for="(item, index) in itemData?.industryVOList"
+												:key="index">
 												{{ item.industryName }}
 											</div>
 										</div>
@@ -225,20 +213,13 @@
 							</div>
 						</div>
 						<div class="box2-main">
-							<div
-								class="box2-main-item"
-								v-for="(item, index) in warningList"
-								:key="index"
-								@click="handleClickToDetail()"
-							>
-								<div
-									class="item-left"
-									:class="{
-										itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
-										itemLeftStatus2: item.status === '重大风险',
-										itemLeftStatus3: item.status === '特别重大'
-									}"
-								>
+							<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"
+								@click="handleClickToDetail()">
+								<div class="item-left" :class="{
+									itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
+									itemLeftStatus2: item.status === '重大风险',
+									itemLeftStatus3: item.status === '特别重大'
+								}">
 									{{ item.status || "一般风险" }}
 								</div>
 								<div class="item-right">
@@ -277,12 +258,8 @@
 							</div>
 						</div>
 						<div class="box3-main">
-							<div
-								class="box3-item"
-								v-for="(news, index) in newsList"
-								:key="index"
-								@click="handleToNewsAnalysis(news)"
-							>
+							<div class="box3-item" v-for="(news, index) in newsList" :key="index"
+								@click="handleToNewsAnalysis(news)">
 								<div class="left">
 									<img :src="news.newsImage !== null ? news.newsImage : defaultNewsIcon" />
 								</div>
@@ -322,16 +299,10 @@
 							</div>
 						</div> -->
 						<div class="box4-main">
-							<MessageBubble
-								v-for="(item, index) in messageList"
-								@click="handleClickPerson(item)"
-								:key="index"
-								:avatar="item.personImage ? item.personImage : defaultHeaderIcin"
-								:name="item.personName"
-								:time="item.time"
-								:source="item.orgName"
-								:content="item.remarks"
-							/>
+							<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
+								:key="index" :avatar="item.personImage ? item.personImage : defaultHeaderIcin"
+								:name="item.personName" :time="item.time" :source="item.orgName"
+								:content="item.remarks" />
 							<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
 								<div class="left" @click="handleClickPerson(item)">
 									<img :src="item.personImage ? item.personImage : defaultHeaderIcin" alt="" />
@@ -359,13 +330,8 @@
 							</div>
 							<div class="box5-select-box">
 								<el-select v-model="box5selectetedMonths" placeholder="选择时间" style="width: 120px">
-									<el-option
-										v-for="item in box5MonthsList"
-										:key="item.value"
-										:label="item.label"
-										:value="item.value"
-										@click="changeBox5Data(item.value)"
-									/>
+									<el-option v-for="item in box5MonthsList" :key="item.value" :label="item.label"
+										:value="item.value" @click="changeBox5Data(item.value)" />
 								</el-select>
 							</div>
 						</div>
@@ -379,13 +345,8 @@
 							<div class="header-title">{{ "政策建议领域分布" }}</div>
 							<div class="box6-select-box">
 								<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
-									<el-option
-										v-for="item in box6YearList"
-										:key="item.value"
-										:label="item.label"
-										:value="item.value"
-										@click="handleBox6()"
-									/>
+									<el-option v-for="item in box6YearList" :key="item.value" :label="item.label"
+										:value="item.value" @click="handleBox6()" />
 								</el-select>
 							</div>
 						</div>
@@ -414,30 +375,21 @@
 							</div>
 							<div class="box8-select-box">
 								<el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px">
-									<el-option
-										v-for="item in box8YearList"
-										:key="item.value"
-										:label="item.label"
-										:value="item.value"
-										@click="changeBox8Data(item.value)"
-									/>
+									<el-option v-for="item in box8YearList" :key="item.value" :label="item.label"
+										:value="item.value" @click="changeBox8Data(item.value)" />
 								</el-select>
 							</div>
 						</div>
 						<div class="box8-main">
 							<div class="box8-item" v-for="(item, index) in box8Data" :key="index">
-								<div
-									class="item-left"
-									:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
-								>
+								<div class="item-left"
+									:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
 									{{ index + 1 }}
 								</div>
 								<!-- <el-popover effect="dark" :content="item.clause" placement="top-start">
 									<template #reference> -->
-								<div
-									class="item-center"
-									:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
-								>
+								<div class="item-center"
+									:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
 									{{ item.clause }}
 								</div>
 								<!-- </template>
@@ -455,13 +407,8 @@
 
 				<div class="home-main-footer-header">
 					<div class="btn-box">
-						<div
-							class="btn"
-							:class="{ btnActive: activeCate === cate }"
-							v-for="(cate, index) in categoryList"
-							:key="index"
-							@click="handleClickCate(cate)"
-						>
+						<div class="btn" :class="{ btnActive: activeCate === cate }"
+							v-for="(cate, index) in categoryList" :key="index" @click="handleClickCate(cate)">
 							{{ cate }}
 						</div>
 					</div>
@@ -492,22 +439,13 @@
 							</div>
 							<div class="select-main">
 								<div class="checkbox-group">
-									<el-checkbox
-										v-model="checkAll"
-										:indeterminate="isIndeterminate"
-										class="all-checkbox"
-										@change="handleCheckAllChange"
-									>
+									<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
+										class="all-checkbox" @change="handleCheckAllChange">
 										全部领域
 									</el-checkbox>
-									<el-checkbox
-										v-for="research in areaList"
-										:key="research.id"
-										v-model="selectedAreaList"
-										:label="research.id"
-										@change="handleCheckedAreaChange()"
-										class="filter-checkbox"
-									>
+									<el-checkbox v-for="research in areaList" :key="research.id"
+										v-model="selectedAreaList" :label="research.id"
+										@change="handleCheckedAreaChange()" class="filter-checkbox">
 										{{ research.name }}
 									</el-checkbox>
 								</div>
@@ -521,22 +459,13 @@
 							</div>
 							<div class="select-main">
 								<div class="checkbox-group">
-									<el-checkbox
-										v-model="checkAllTime"
-										class="all-checkbox"
-										:indeterminate="isIndeterminateTime"
-										@change="handleCheckAllChangeTime"
-									>
+									<el-checkbox v-model="checkAllTime" class="all-checkbox"
+										:indeterminate="isIndeterminateTime" @change="handleCheckAllChangeTime">
 										全部时间
 									</el-checkbox>
 									<el-checkbox-group v-model="selectedPubTimeList">
-										<el-checkbox
-											v-for="time in pubTimeList"
-											:key="time.id"
-											:label="time.id"
-											class="filter-checkbox"
-											@change="handleCheckedAreaChangeTime()"
-										>
+										<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id"
+											class="filter-checkbox" @change="handleCheckedAreaChangeTime()">
 											{{ time.name }}
 										</el-checkbox>
 									</el-checkbox-group>
@@ -546,12 +475,8 @@
 					</div>
 					<div class="right">
 						<div class="card-box">
-							<div
-								class="footer-card"
-								v-for="(item, index) in curFooterList"
-								:key="index"
-								@click="handleToReportDetail(item)"
-							>
+							<div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
+								@click="handleToReportDetail(item)">
 								<div class="footer-card-top">
 									<img :src="item.imageUrl" alt="" />
 								</div>
@@ -574,14 +499,8 @@
 						<div class="right-footer">
 							<div class="info">共 {{ total }} 项</div>
 							<div class="page-box">
-								<el-pagination
-									:page-size="12"
-									background
-									layout="prev, pager, next"
-									:total="total"
-									@current-change="handleCurrentChange"
-									:current-page="currentPage"
-								/>
+								<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
+									@current-change="handleCurrentChange" :current-page="currentPage" />
 							</div>
 						</div>
 					</div>
@@ -1685,7 +1604,7 @@ const handleClickPerson = async item => {
 			ElMessage.warning("找不到当前人员的类型值！");
 			return;
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 // 点击新闻条目，跳转到新闻分析页
@@ -1757,27 +1676,34 @@ onMounted(async () => {
 	height: 100%;
 	position: relative;
 	overflow-y: hidden;
+
 	.search-header {
 		width: 100%;
-		height: 144px;
 		background: #fff;
 		overflow: hidden;
-		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.3);
+		box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+
+		.search-header-container {
+			width: 1600px;
+			margin: 0 auto;
+			padding: 16px 0px 16px 0px;
+		}
+
 		.home-main-header-center {
-			margin-top: 20px;
-			margin-left: 200px;
 			width: 800px;
 			height: 48px;
 			border-radius: 10px;
-			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+			// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
+			border: 1px solid var(--color-primary-35);
 			background: rgba(255, 255, 255, 1);
 			box-sizing: border-box;
 			padding: 1px;
 			position: relative;
-			border: 1px solid transparent;
+
 			&:hover {
 				border: 1px solid var(--color-main-active);
 			}
+
 			.search {
 				position: absolute;
 				right: -1px;
@@ -1790,14 +1716,17 @@ onMounted(async () => {
 				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;
@@ -1809,42 +1738,50 @@ onMounted(async () => {
 				}
 			}
 		}
+
 		.home-main-header-btn-box {
-			margin-top: 20px;
-			margin-left: 200px;
+			margin-top: 16px;
+			// margin-left: 200px;
 			display: flex;
 			gap: 16px;
+
 			.btn {
+
 				display: flex;
 				align-items: center;
 				gap: 9px;
-				width: 160px;
-				height: 48px;
+				width: 140px;
+				height: 36px;
 				border: 1px solid #aed6ff;
 				box-sizing: border-box;
 				border-radius: 24px;
 				background: #e7f3ff;
 				cursor: pointer;
 				position: relative;
+
 				&:hover {
 					background: #cae3fc;
 				}
+
 				.btn-text {
+
 					width: 80px;
 					color: var(--color-main-active);
 					font-family: Microsoft YaHei;
 					font-size: 20px;
 					font-weight: 400;
 					line-height: 48px;
-					margin-left: 36px;
+					margin-left: 24px;
 					text-align: center;
 				}
+
 				.btn-icon {
 					position: absolute;
-					top: 16px;
+					top: 10px;
 					right: 19px;
 					width: 6px;
 					height: 12px;
+
 					img {
 						width: 100%;
 						height: 100%;
@@ -1853,13 +1790,24 @@ onMounted(async () => {
 			}
 		}
 	}
+
 	.home-main {
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
-		background: url("./assets/images/background.png");
+		// background: url("./assets/images/background.png");
 		background-size: 100% 100%;
 
+		.home-top-bg {
+			background: url("./assets/images/background.png"), linear-gradient(180.00deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
+			background-size: 100% 100%;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
+
 		.home-main-header {
 			display: flex;
 			flex-direction: column;
@@ -1879,13 +1827,16 @@ onMounted(async () => {
 				margin-top: 48px;
 				width: 960px;
 				height: 48px;
-				border-radius: 10px;
+
 				box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
-				background: rgba(255, 255, 255, 1);
+				background: rgba(255, 255, 255, 0.65);
 				box-sizing: border-box;
 				padding: 1px;
 				position: relative;
-				border: 1px solid transparent;
+				border: 1px solid rgba(255, 255, 255, 1);
+
+				border-radius: 10px;
+				
 
 				&:hover {
 					border: 1px solid var(--color-main-active);
@@ -2261,6 +2212,7 @@ onMounted(async () => {
 						height: 48px;
 						cursor: pointer;
 						z-index: 10000;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -2887,7 +2839,7 @@ onMounted(async () => {
 						overflow-y: auto;
 						box-sizing: border-box;
 						padding: 8px 0;
-						padding-left: 31px;
+						padding-left: 24px;
 						// .box4-main-item {
 						// 	margin-top: 16px;
 						// 	display: flex;

src/views/thinkTank/utils/multiLineChart.js

@@ -10,18 +10,18 @@ const getMultiLineChart = (data) => {
   const echartsSeries = series.map((item, index) => ({
     name: item.name,
     type: 'line',
-    areaStyle: {
-      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        {
-          offset: 0,
-          color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色
-        },
-        {
-          offset: 1,
-          color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色
-        }
-      ])
-    },
+    // areaStyle: {
+    //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    //     {
+    //       offset: 0,
+    //       color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色
+    //     },
+    //     {
+    //       offset: 1,
+    //       color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色
+    //     }
+    //   ])
+    // },
     emphasis: {
       focus: 'series'
     },
@@ -48,9 +48,11 @@ const getMultiLineChart = (data) => {
     legend: {
       show: true,
       top: 10,
-      left: 'center'
+      left: 'center',
+      icon: 'circle',
     },
-    color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
+    // color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
+    color: ['#055fc2', '#13a8a8', '#fa8c16', '#722ed1', '#73d13d', '#ce4f51', '#91caff', '#5f656c', '#fa541c', '#2f54eb', '#4096ff', '#222934', '#adc6ff', '#ffa940'], // 色彩调和的折线图配色方案
     xAxis: [
       {
         type: 'category',