update

src/api/bill.js

@@ -7,7 +7,7 @@ import request from "@/api/request.js";
 export function getBillInfo(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/info/${params.id}`,
+        url: `/api/billInfoBean/info/${params.id}`,
         params,
     })
 }
@@ -20,7 +20,7 @@ export function getBillInfo(params) {
 export function getBillPerson(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/person/${params.id}`,
+        url: `/api/billInfoBean/person/${params.id}`,
         params,
     })
 }
@@ -33,7 +33,7 @@ export function getBillPerson(params) {
 export function getBillEvent(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/event/${params.id}`,
+        url: `/api/billInfoBean/event/${params.id}`,
         params,
     })
 }
@@ -46,7 +46,7 @@ export function getBillEvent(params) {
 export function getBillDyqk(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/dyqk/${params.id}`,
+        url: `/api/billInfoBean/dyqk/${params.id}`,
         params,
     })
 }
@@ -59,7 +59,7 @@ export function getBillDyqk(params) {
 export function getBillBackground(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/background/${params.id}`,
+        url: `/api/billInfoBean/background/${params.id}`,
         params,
     })
 }
@@ -72,7 +72,7 @@ export function getBillBackground(params) {
 export function getBillPersonAnalyze(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/personAnalyze/${params.id}`,
+        url: `/api/billInfoBean/personAnalyze/${params.id}`,
         params,
     })
 }
@@ -85,7 +85,7 @@ export function getBillPersonAnalyze(params) {
 export function getBillContentId(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/contentId/${params.id}`,
+        url: `/api/billInfoBean/contentId/${params.id}`,
         params,
     })
 }
@@ -98,7 +98,7 @@ export function getBillContentId(params) {
 export function getBillContentTk(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/content/tk/${params.id}`,
+        url: `/api/billInfoBean/content/tk/${params.id}`,
         params,
     })
 }
@@ -111,7 +111,7 @@ export function getBillContentTk(params) {
 export function getBillContentXzfs(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/content/xzfs/${params.id}`,
+        url: `/api/billInfoBean/content/xzfs/${params.id}`,
         params,
     })
 }
@@ -124,7 +124,7 @@ export function getBillContentXzfs(params) {
 export function getBillHyly(params) {
     return request({
         method: 'GET',
-        url: `/billInfoBean/content/hyly/${params.id}`,
+        url: `/api/billInfoBean/content/hyly/${params.id}`,
         params,
     })
 }
\ No newline at end of file

src/api/chat.js

+import request from "@/api/chatRequest";
+
+export function getChat(params) {
+  return request({
+    method: 'POST',
+    url: `/aichat/chat/chat/completions`,
+    data: params,
+  })
+}
\ No newline at end of file

src/api/chatRequest.js

+//引入axios请求
+import axios from 'axios'
+//引入element-plus里面的消息提示
+import {
+    ElMessage
+} from 'element-plus'
+
+// Token管理
+const TOKEN_KEY = 'auth_token'
+
+// 获取token
+const getToken = () => {
+  return 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJkYXRhLWNlbnRlciIsImF1ZCI6IndlYiIsImlzcyI6ImRhdGEtY2VudGVyIiwiZXhwIjozODI1ODM1NTkxLCJpYXQiOjE2NzgzNTE5NTMsImp0aSI6IjI4YmY1NTZjMTc0MDQ3YjJiNTExNWM3NzVhYjhlNWRmIiwidXNlcm5hbWUiOiJzdXBlcl91c2VyIn0.zHyVzsleX2lEqjDBYRpwluu_wy2nZKGl0dw3IUGnKNw'
+    // return localStorage.getItem(TOKEN_KEY)
+}
+
+// 设置token
+const setToken = (token) => {
+    localStorage.setItem(TOKEN_KEY, token)
+}
+
+// 移除token
+const removeToken = () => {
+    localStorage.removeItem(TOKEN_KEY)
+}
+
+// 导出token管理方法
+export { getToken, setToken, removeToken }
+
+// const BASE_API = import.meta.env.VITE_BASE_API
+// 创建axios实例
+const service = axios.create({
+    // baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
+    timeout: 60000*5 // 请求超时时间,这里15秒
+    //withCredentials: true,// 异步请求携带cookie,true为携带,false为不携带
+    //请求头里面设置通用传参类型
+    /*headers: {
+        //设置后端需要的传参类型
+        'Content-Type': 'application/json',
+        'token': 'x-auth-token',//一开始就要token
+        'X-Requested-With': 'XMLHttpRequest',
+    }*/
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+    // 获取token并添加到请求头
+    // const token = getToken()
+    // if (token) {
+    //     // 根据curl命令，后端接受的是token字段名，而不是Authorization
+    //     config.headers['token'] = token
+    //     // config.headers['Authorization'] = `Bearer ${token}` // 如果后端需要Bearer格式可以使用这个
+    // }
+    return config
+}, error => {
+    console.log(error)
+    return Promise.reject(error)
+})
+
+// response拦截器
+service.interceptors.response.use(
+    response => {
+        //对数据返回做什么
+        if (response.data.code == 0) {
+            ElMessage({
+                message: response.data.message,
+                type: 'error',
+                duration: 3 * 1000
+            })
+        }
+        return response.data
+    },
+    error => {
+        console.log('err' + error)
+        
+        // 处理token过期或无效的情况
+        if (error.response && (error.response.status === 401 || error.response.status === 403)) {
+            ElMessage({
+                message: 'Token已过期，请重新登录',
+                type: 'error',
+                duration: 3 * 1000
+            })
+            // 清除无效的token
+            removeToken()
+            // 可以在这里跳转到登录页
+            // router.push('/login')
+        } else {
+            ElMessage({
+                message: error.message,
+                type: 'error',
+                duration: 3 * 1000
+            })
+        }
+        return Promise.reject(error)
+    }
+)
+
+export default service
\ No newline at end of file

src/api/deepdig.js

@@ -7,7 +7,7 @@ import request from "@/api/request.js";
 export function getBillTimeAnalyze(params) {
     return request({
         method: 'GET',
-        url: `/billDeepDive/processAnalyze/time/${params.id}`,
+        url: `/api/billDeepDive/processAnalyze/time/${params.id}`,
         params,
     })
 }
@@ -19,7 +19,7 @@ export function getBillTimeAnalyze(params) {
 export function getBillTotalXj(params) {
     return request({
         method: 'GET',
-        url: `/billDeepDive/processAnalyze/totalxj/${params.id}`,
+        url: `/api/billDeepDive/processAnalyze/totalxj/${params.id}`,
         params,
     })
 }
@@ -31,7 +31,7 @@ export function getBillTotalXj(params) {
 export function getBillTp(params) {
     return request({
         method: 'GET',
-        url: `/billDeepDive/processAnalyze/tp/${params.id}`,
+        url: `/api/billDeepDive/processAnalyze/tp/${params.id}`,
         params,
     })
 }
@@ -43,7 +43,7 @@ export function getBillTp(params) {
 export function getBillXj(params) {
     return request({
         method: 'GET',
-        url: `/billDeepDive/processAnalyze/xj/${params.id}`,
+        url: `/api/billDeepDive/processAnalyze/xj/${params.id}`,
         params,
     })
 }
@@ -55,7 +55,7 @@ export function getBillXj(params) {
 export function getProcessSummaryDetail(params) {
     return request({
         method: 'GET',
-        url: `/billDeepDive/processSummary/detail/${params.id}`,
+        url: `/api/billDeepDive/processSummary/detail/${params.id}`,
         params,
     })
 }
@@ -67,7 +67,7 @@ export function getProcessSummaryDetail(params) {
 export function getProcessSummaryTk(params) {
     return request({
         method: 'GET',
-        url: `/billDeepDive/processSummary/tk/${params.id}`,
+        url: `/api/billDeepDive/processSummary/tk/${params.id}`,
         params,
     })
 }
@@ -79,7 +79,7 @@ export function getProcessSummaryTk(params) {
 export function getProcessSummary(params) {
     return request({
         method: 'GET',
-        url: `/billDeepDive/processSummary/${params.id}`,
+        url: `/api/billDeepDive/processSummary/${params.id}`,
         params,
     })
 }
\ No newline at end of file

src/api/home.js

@@ -4,7 +4,7 @@ import request from "@/api/request.js";
 export function getHotBills() {
     return request({
         method: 'GET',
-        url: '/BillOverview/hotBills',
+        url: '/api/BillOverview/hotBills',
     })
 }
 
@@ -15,7 +15,7 @@ export function getHotBills() {
 export function getBillsByType(params) {
     return request({
         method: 'GET',
-        url: '/BillOverview/bills',
+        url: '/api/BillOverview/bills',
         params,
     })
 }
@@ -24,6 +24,6 @@ export function getBillsByType(params) {
 export function getHylyList() {
     return request({
         method: 'GET',
-        url: `/billImpactAnalysis/industry/hylyList`,
+        url: `/api/billImpactAnalysis/industry/hylyList`,
     })
 }
\ No newline at end of file

src/api/influence.js

@@ -7,7 +7,7 @@ import request from "@/api/request.js";
 export function getCompanyList(params) {
     return request({
         method: 'GET',
-        url: `/billImpactAnalysis/industry/company/${params.id}`,
+        url: `/api/billImpactAnalysis/industry/company/${params.id}`,
         params,
     })
 }
@@ -19,7 +19,7 @@ export function getCompanyList(params) {
 export function getIndustryHyly(params) {
     return request({
         method: 'GET',
-        url: `/billImpactAnalysis/industry/hyly/${params.id}`,
+        url: `/api/billImpactAnalysis/industry/hyly/${params.id}`,
         params,
     })
 }
@@ -28,6 +28,6 @@ export function getIndustryHyly(params) {
 export function getHylyList() {
     return request({
         method: 'GET',
-        url: `/billImpactAnalysis/industry/hylyList`,
+        url: `/api/billImpactAnalysis/industry/hylyList`,
     })
 }
\ No newline at end of file

src/api/request.js

@@ -27,10 +27,10 @@ const removeToken = () => {
 // 导出token管理方法
 export { getToken, setToken, removeToken }
 
-const BASE_API = import.meta.env.VITE_BASE_API
+// const BASE_API = import.meta.env.VITE_BASE_API
 // 创建axios实例
 const service = axios.create({
-    baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
+    // baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
     timeout: 60000*5 // 请求超时时间,这里15秒
     //withCredentials: true,// 异步请求携带cookie,true为携带,false为不携带
     //请求头里面设置通用传参类型

src/components/AiBox.vue

@@ -51,7 +51,7 @@
 			</div>
 		</div>
 		<div class="footer">
-			<el-input type="textarea" :rows="3" v-model="question" placeholder="请输入问题开启智能问答" />
+			<el-input type="textarea" :rows="3" v-model="userInput" placeholder="请输入问题开启智能问答" />
 			<div class="btn">
 				<div class="icon">
 					<img src="@/assets/icons/aiBox/idea.png" alt="" />
@@ -71,6 +71,8 @@ import { fetchEventSource } from "@microsoft/fetch-event-source";
 import MarkdownIt from "markdown-it";
 import { ElMessage } from "element-plus";
 
+import { getChat } from "@/api/chat";
+
 const contentContainer = ref(null);
 const userInput = ref("");
 const isLoading = ref(false);
@@ -78,7 +80,7 @@ const abortController = ref(null);
 
 // 消息数据
 const messages = ref([
-  {
+	{
 		type: "user",
 		content: "你好"
 	},
@@ -86,7 +88,6 @@ const messages = ref([
 		type: "ai",
 		content: "您好！我是AI助手，有什么可以帮助您的吗？"
 	}
-	
 ]);
 
 // Markdown 渲染器
@@ -138,18 +139,22 @@ const connectSSE = async question => {
 	// 创建 AbortController 用于取消请求
 	abortController.value = new AbortController();
 
+	const params = {
+		query: "如何检索？",
+		knowledge_base_name: "kb_test251112",
+		top_k: 6,
+		score_threshold: 0.5,
+		metadata: { year: 2024 }
+	};
+
 	try {
-		await fetchEventSource("/api/chat-stream", {
+		await fetchEventSource("/chat/knowledge_base/search_docs", {
 			method: "POST",
 			headers: {
 				"Content-Type": "application/json"
 			},
-			body: JSON.stringify({
-				question: question
-				// 其他参数...
-			}),
+			body: JSON.stringify(params),
 			signal: abortController.value.signal,
-
 			onopen: async response => {
 				console.log("SSE 连接已建立", response.status);
 				if (response.status !== 200) {
@@ -199,6 +204,23 @@ const connectSSE = async question => {
 	}
 };
 
+const chat = async () => {
+	const params = {
+		query: "如何检索？",
+		knowledge_base_name: "kb_test251112",
+		top_k: 6,
+		score_threshold: 0.5,
+		metadata: { year: 2024 }
+	};
+
+	try {
+		const res = await getChat(params);
+		console.log("chat", res);
+	} catch (error) {
+		console.error(error);
+	}
+};
+
 // 发送消息
 const sendMessage = async () => {
 	const question = userInput.value.trim();
@@ -214,6 +236,7 @@ const sendMessage = async () => {
 
 	userInput.value = "";
 	// await connectSSE(question);
+	chat();
 };
 
 // 停止生成

src/components/boxHeader.vue

+<template>
+  <div class="header-wrapper">
+    <div class="icon"></div>
+    <div class="title"></div>
+    <div class="btn-box"></div>
+  </div>
+</template>
\ No newline at end of file

src/router/index.js

@@ -15,7 +15,7 @@ import BillTemplate from '@/views/bill/template/index.vue'
 import BillDeepDigLayout from '@/views/bill/deepDig/index.vue'
 import BillDeepDigProcessOverview from '@/views/bill/deepDig/processOverview/index.vue'
 import BillDeepDigProcessAnalysis from '@/views/bill/deepDig/processAnalysis/index.vue'
-import BillDeepDigProgressOverview from '@/views/bill/deepDig/progressAnalysis/index.vue'
+import BillDeepDigPoliContribution from '@/views/bill/deepDig/poliContribution/index.vue'
 import BillInfluenceLayout from '@/views/bill/influence/index.vue'
 import BillInfluenceIndustry from '@/views/bill/influence/industry/index.vue'
 import BillInfluenceScientificResearch from '@/views/bill/influence/scientificResearch/index.vue'
@@ -161,10 +161,10 @@ const routes = [
             meta: { title: '流程分析' }
           },
           {
-            path: 'progressAnalysis',
-            name: 'DeepDigProgressAnalysis',
-            component: BillDeepDigProgressOverview,
-            meta: { title: '进程分析' }
+            path: 'poliContribution',
+            name: 'BillDeepDigPoliContribution',
+            component: BillDeepDigPoliContribution,
+            meta: { title: '政治献金' }
           },
         ]
       },

src/utils/setChart.js

+// 绘制echarts图表
+import * as echarts from 'echarts'
+const setChart = (option, chartId) => {
+  let chartDom = document.getElementById(chartId);
+  chartDom.removeAttribute("_echarts_instance_");
+  let chart = echarts.init(chartDom);
+  chart.setOption(option);
+  return chart;
+};
+
+export default setChart
\ No newline at end of file

src/views/bill/billHome/index.vue

@@ -225,6 +225,7 @@
 										<img src="./assets/images/box3-header-icon.png" alt="" />
 									</div>
 									<div class="box3-header-title">{{ "新闻资讯" }}</div>
+									<div class="more">{{ "更多 +" }}</div>
 								</div>
 							</div>
 							<div class="box3-main">
@@ -301,6 +302,107 @@
 							<div class="box6-main" id="wordCloudChart"></div>
 						</div>
 					</div>
+					<div class="center-footer1">
+						<div class="box7">
+							<div class="box7-header">
+								<div class="box7-header-left">
+									<div class="box7-header-icon">
+										<img src="./assets/images/box7-header-icon.png" alt="" />
+									</div>
+									<div class="box7-header-title">{{ "法案提出部门" }}</div>
+								</div>
+								<div class="box7-header-right">
+									<div class="header-right-icon">
+										<img src="./assets/images/tips-icon.png" alt="" />
+									</div>
+									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
+								</div>
+							</div>
+							<div class="box-center">
+								<el-select v-model="box7selectetedTime" placeholder="选择时间" style="width: 90px">
+									<el-option
+										v-for="item in box7YearList"
+										:key="item.value"
+										:label="item.label"
+										:value="item.value"
+									/>
+								</el-select>
+							</div>
+						</div>
+						<div class="box8">
+							<div class="box8-header">
+								<div class="box8-header-left">
+									<div class="box8-header-icon">
+										<img src="./assets/images/box7-header-icon.png" alt="" />
+									</div>
+									<div class="box8-header-title">{{ "关键议员提案" }}</div>
+								</div>
+								<div class="box8-header-right">
+									<div class="header-right-icon">
+										<img src="./assets/images/tips-icon.png" alt="" />
+									</div>
+									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
+								</div>
+							</div>
+							<div class="box-center">
+								<el-select v-model="box8selectetedTime" placeholder="选择时间" style="width: 90px">
+									<el-option
+										v-for="item in box8YearList"
+										:key="item.value"
+										:label="item.label"
+										:value="item.value"
+									/>
+								</el-select>
+							</div>
+							<div class="box8-main">
+								<div class="box8-main-item" v-for="(item, index) in box8Data" :key="index">
+									<div class="box8-main-item-left">
+										<img :src="item.img" alt="" />
+										<div class="left-icon1">
+											<img :src="item.dangpai" alt="" />
+										</div>
+										<div class="left-icon2">
+											<img :src="item.yuan" alt="" />
+										</div>
+									</div>
+									<div class="box8-main-item-center">
+										<div class="box8-main-item-center-top">{{ item.name }}</div>
+										<div class="box8-main-item-center-footer">{{ item.zhiwei }}</div>
+									</div>
+									<div class="box8-main-item-right">
+										{{ `${item.num}项提案 >` }}
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="box9">
+							<div class="box9-header">
+								<div class="box9-header-left">
+									<div class="box9-header-icon">
+										<img src="./assets/images/box7-header-icon.png" alt="" />
+									</div>
+									<div class="box9-header-title">{{ "涉华法案领域分布" }}</div>
+								</div>
+								<div class="box9-header-right">
+									<div class="header-right-icon">
+										<img src="./assets/images/tips-icon.png" alt="" />
+									</div>
+									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
+								</div>
+							</div>
+							<div class="box-center">
+								<el-select v-model="box9selectetedTime" placeholder="选择时间" style="width: 90px">
+									<el-option
+										v-for="item in box9YearList"
+										:key="item.value"
+										:label="item.label"
+										:value="item.value"
+									/>
+								</el-select>
+							</div>
+							<div class="box9-main" id="box9Chart"></div>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div class="home-main-footer">
@@ -405,12 +507,6 @@
 				</div>
 			</div>
 		</div>
-		<!-- <div class="ai-btn">
-			<div class="icon">
-				<img src="@/assets/icons/ai-icon.png" alt="" />
-			</div>
-			<div class="text">智能问答</div>
-		</div> -->
 	</div>
 </template>
 
@@ -432,6 +528,7 @@ import headerIcon5 from "./assets/icons/header-icon5.png";
 
 import getMultiLineChart from "./utils/multiLineChart";
 import getWordCloudChart from "./utils/worldCloudChart";
+import getPieChart from "./utils/piechart";
 
 import bill1 from "./assets/images/bill1.png";
 import bill2 from "./assets/images/bill2.png";
@@ -456,6 +553,17 @@ import Message1 from "./assets/images/message-icon1.png";
 import Message2 from "./assets/images/message-icon2.png";
 import Message3 from "./assets/images/message-icon3.png";
 
+import Box8Img1 from "./assets/images/box8-icon1.png";
+import Box8Img2 from "./assets/images/box8-icon2.png";
+import Box8Img3 from "./assets/images/box8-icon3.png";
+import Box8Img4 from "./assets/images/box8-icon4.png";
+import Box8Img5 from "./assets/images/box8-icon5.png";
+
+import Cyy from "@/assets/icons/cyy.png";
+import Zyy from "@/assets/icons/zyy.png";
+import Ghd from "@/assets/icons/ghd.png";
+import Mzd from "@/assets/icons/mzd.png";
+
 const currentPage = ref(1);
 // 处理页码改变事件
 const handleCurrentChange = page => {
@@ -465,7 +573,7 @@ const handleCurrentChange = page => {
 const containerRef = ref(null);
 const { isShow } = useContainerScroll(containerRef);
 
-const hotBillList = ref([]);  // 热门法案列表
+const hotBillList = ref([]); // 热门法案列表
 const curHotBillListIndex = ref(0); // 当前热门法案索引
 
 // 切换热门法案
@@ -659,7 +767,67 @@ const curBillList = computed(() => {
 	return billList.value.slice(startIndex, endIndex);
 });
 
-const releaseTime = ref("近一年发布");  // 发布时间
+const box7selectetedTime = ref("2025");
+const box7YearList = ref([
+	{
+		label: "2025",
+		value: "2025"
+	},
+	{
+		label: "2024",
+		value: "2024"
+	},
+	{
+		label: "2023",
+		value: "2023"
+	},
+	{
+		label: "2022",
+		value: "2022"
+	}
+]);
+
+const box8selectetedTime = ref("2025");
+const box8YearList = ref([
+	{
+		label: "2025",
+		value: "2025"
+	},
+	{
+		label: "2024",
+		value: "2024"
+	},
+	{
+		label: "2023",
+		value: "2023"
+	},
+	{
+		label: "2022",
+		value: "2022"
+	}
+]);
+
+const box9selectetedTime = ref("2025");
+const box9YearList = ref([
+	{
+		label: "2025",
+		value: "2025"
+	},
+	{
+		label: "2024",
+		value: "2024"
+	},
+	{
+		label: "2023",
+		value: "2023"
+	},
+	{
+		label: "2022",
+		value: "2022"
+	}
+]);
+
+const releaseTime = ref("近一年发布"); // 发布时间
 
 const releaseTimeList = ref([
 	{
@@ -869,6 +1037,82 @@ const wordCloudData = ref([
 	{ name: "加强供应链风险管理", value: 73 }
 ]);
 
+const box9ChartData = ref([
+	{
+		name: "半导体",
+		value: 50
+	},
+	{
+		name: "电子设备",
+		value: 46
+	},
+	{
+		name: "显示技术",
+		value: 40
+	},
+	{
+		name: "新能源",
+		value: 32
+	},
+	{
+		name: "通信设备",
+		value: 31
+	},
+	{
+		name: "汽车",
+		value: 30
+	},
+	{
+		name: "其他",
+		value: 24
+	}
+]);
+
+const box8Data = ref([
+	{
+		name: "汤姆·科顿",
+		zhiwei: "参议院情报委员会主席",
+		img: Message3,
+		dangpai: Cyy,
+		yuan: Ghd,
+		num: 8
+	},
+	{
+		name: "吉姆·里施",
+		zhiwei: "参议院外交关系委员会主席",
+		img: Message3,
+		dangpai: Cyy,
+		yuan: Ghd,
+		num: 4
+	},
+	{
+		name: "特德·克鲁兹",
+		zhiwei: "参议院商务、科学和交通委员会主席",
+		img: Message3,
+		dangpai: Cyy,
+		yuan: Ghd,
+		num: 2
+	},
+	{
+		name: "里克·克劳福德",
+		zhiwei: "众议院美中战略竞争特设委员会主席",
+		img: Message3,
+		dangpai: Cyy,
+		yuan: Ghd,
+		num: 2
+	},
+	{
+		name: "布莱恩·马斯特",
+		zhiwei: "众议院情报委员会主席",
+		img: Message3,
+		dangpai: Cyy,
+		yuan: Ghd,
+		num: 2
+	}
+]);
+
+const box9ChartColorList = ref(["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF"]);
+
 onMounted(async () => {
 	handleGetHylyList();
 	await handleGetHotBills();
@@ -879,6 +1123,9 @@ onMounted(async () => {
 
 	const wordCloudChart = getWordCloudChart(wordCloudData.value);
 	setChart(wordCloudChart, "wordCloudChart");
+
+	const box9Chart = getPieChart(box9ChartData.value, box9ChartColorList.value);
+	setChart(box9Chart, "box9Chart");
 });
 </script>
 
@@ -918,6 +1165,7 @@ onMounted(async () => {
 				display: flex;
 				justify-content: center;
 				align-items: center;
+				cursor: pointer;
 				.search-icon {
 					width: 18px;
 					height: 18px;
@@ -1029,6 +1277,7 @@ onMounted(async () => {
 						display: flex;
 						justify-content: center;
 						align-items: center;
+						cursor: pointer;
 						.search-icon {
 							width: 18px;
 							height: 18px;
@@ -1465,6 +1714,7 @@ onMounted(async () => {
 								.num {
 									width: 24px;
 									height: 20px;
+									line-height: 20px;
 									text-align: center;
 									color: rgba(255, 255, 255, 1);
 									font-family: Microsoft YaHei;
@@ -1589,6 +1839,7 @@ onMounted(async () => {
 							display: flex;
 							justify-content: space-between;
 							padding: 0 20px;
+							position: relative;
 							.box3-header-left {
 								display: flex;
 								.box3-header-icon {
@@ -1610,6 +1861,19 @@ onMounted(async () => {
 									font-weight: 700;
 									line-height: 22px;
 								}
+								.more {
+									width: 49px;
+									height: 24px;
+									position: absolute;
+									top: 14px;
+									right: 27px;
+									color: rgba(20, 89, 187, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 24px;
+									cursor: pointer;
+								}
 							}
 						}
 						.box3-main {
@@ -1917,6 +2181,305 @@ onMounted(async () => {
 						}
 					}
 				}
+				.center-footer1 {
+					display: flex;
+					gap: 16px;
+					margin-top: 16px;
+					.box7 {
+						width: 520px;
+						height: 450px;
+						box-sizing: border-box;
+						border: 1px solid rgba(234, 236, 238, 1);
+						border-radius: 10px;
+						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+						background: rgba(255, 255, 255, 1);
+						.box7-header {
+							height: 53px;
+							border-bottom: 1px solid rgba(240, 242, 244, 1);
+							margin: 0 auto;
+							display: flex;
+							justify-content: space-between;
+							padding: 0 20px;
+							.box7-header-left {
+								display: flex;
+								.box7-header-icon {
+									margin-top: 16px;
+									width: 19px;
+									height: 19px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+								.box7-header-title {
+									margin-top: 16px;
+									margin-left: 19px;
+									height: 22px;
+									color: rgba(20, 89, 187, 1);
+									font-family: Microsoft YaHei;
+									font-size: 20px;
+									font-weight: 700;
+									line-height: 22px;
+								}
+							}
+							.box7-header-right {
+								display: flex;
+								justify-content: flex-end;
+								gap: 8px;
+								height: 24px;
+								margin-top: 12px;
+								.header-right-icon {
+									margin-top: 4px;
+									width: 14px;
+									height: 16px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+								.header-right-text {
+									color: rgba(132, 136, 142, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 24px;
+								}
+							}
+						}
+						.box-center {
+							height: 45px;
+							padding-right: 20px;
+							display: flex;
+							align-items: center;
+							justify-content: flex-end;
+						}
+					}
+					.box8 {
+						width: 527px;
+						height: 450px;
+						box-sizing: border-box;
+						border: 1px solid rgba(234, 236, 238, 1);
+						border-radius: 10px;
+						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+						background: rgba(255, 255, 255, 1);
+						.box8-header {
+							height: 53px;
+							border-bottom: 1px solid rgba(240, 242, 244, 1);
+							margin: 0 auto;
+							display: flex;
+							justify-content: space-between;
+							padding: 0 20px;
+							.box8-header-left {
+								display: flex;
+								.box8-header-icon {
+									margin-top: 16px;
+									width: 19px;
+									height: 19px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+								.box8-header-title {
+									margin-top: 16px;
+									margin-left: 19px;
+									height: 22px;
+									color: rgba(20, 89, 187, 1);
+									font-family: Microsoft YaHei;
+									font-size: 20px;
+									font-weight: 700;
+									line-height: 22px;
+								}
+							}
+							.box8-header-right {
+								display: flex;
+								justify-content: flex-end;
+								gap: 8px;
+								height: 24px;
+								margin-top: 12px;
+								.header-right-icon {
+									margin-top: 4px;
+									width: 14px;
+									height: 16px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+								.header-right-text {
+									color: rgba(132, 136, 142, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 24px;
+								}
+							}
+						}
+						.box-center {
+							height: 45px;
+							padding-right: 20px;
+							display: flex;
+							align-items: center;
+							justify-content: flex-end;
+						}
+						.box8-main {
+							height: 340px;
+							.box8-main-item {
+								margin: 0 auto;
+								width: 458px;
+								height: 51px;
+								margin-bottom: 16px;
+								display: flex;
+								align-items: center;
+								position: relative;
+								.box8-main-item-left {
+									position: relative;
+									width: 42px;
+									height: 42px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+									.left-icon1 {
+										position: absolute;
+										left: 2px;
+										bottom: -6px;
+										width: 20px;
+										height: 20px;
+										border-radius: 10px;
+										background: (255, 255, 255, 0.8);
+										box-sizing: border-box;
+										padding: 2px;
+										img {
+											width: 100%;
+											height: 100%;
+										}
+									}
+									.left-icon2 {
+										position: absolute;
+										right: 2px;
+										bottom: -6px;
+										width: 20px;
+										height: 20px;
+										border-radius: 10px;
+										background: (255, 255, 255, 0.8);
+										box-sizing: border-box;
+										padding: 2px;
+										img {
+											width: 100%;
+											height: 100%;
+										}
+									}
+								}
+								.box8-main-item-center {
+									height: 48px;
+									margin-left: 12px;
+									.box8-main-item-center-top {
+										height: 24px;
+										color: rgba(59, 65, 75, 1);
+										font-family: Microsoft YaHei;
+										font-size: 16px;
+										font-weight: 700;
+										line-height: 24px;
+									}
+									.box8-main-item-center-footer {
+										height: 24px;
+										color: rgba(95, 101, 108, 1);
+										font-family: Microsoft YaHei;
+										font-size: 16px;
+										font-weight: 400;
+										line-height: 24px;
+									}
+								}
+								.box8-main-item-right {
+									position: absolute;
+									top: 0;
+									right: 0;
+									width: 92px;
+									height: 51px;
+									text-align: right;
+									color: rgba(95, 101, 108, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 51px;
+								}
+							}
+						}
+					}
+					.box9 {
+						width: 521px;
+						height: 450px;
+						box-sizing: border-box;
+						border: 1px solid rgba(234, 236, 238, 1);
+						border-radius: 10px;
+						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+						background: rgba(255, 255, 255, 1);
+						.box9-header {
+							height: 53px;
+							border-bottom: 1px solid rgba(240, 242, 244, 1);
+							margin: 0 auto;
+							display: flex;
+							justify-content: space-between;
+							padding: 0 20px;
+							.box9-header-left {
+								display: flex;
+								.box9-header-icon {
+									margin-top: 16px;
+									width: 19px;
+									height: 19px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+								.box9-header-title {
+									margin-top: 16px;
+									margin-left: 19px;
+									height: 22px;
+									color: rgba(20, 89, 187, 1);
+									font-family: Microsoft YaHei;
+									font-size: 20px;
+									font-weight: 700;
+									line-height: 22px;
+								}
+							}
+							.box9-header-right {
+								display: flex;
+								justify-content: flex-end;
+								gap: 8px;
+								height: 24px;
+								margin-top: 12px;
+								.header-right-icon {
+									margin-top: 4px;
+									width: 14px;
+									height: 16px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+								.header-right-text {
+									color: rgba(132, 136, 142, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 24px;
+								}
+							}
+						}
+						.box-center {
+							height: 45px;
+							padding-right: 20px;
+							display: flex;
+							align-items: center;
+							justify-content: flex-end;
+						}
+						.box9-main {
+							height: 340px;
+						}
+					}
+				}
 			}
 		}
 		.home-main-footer {

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

+const getDoublePieChart = (data) => {
+  const colorList = ['#8AC4FF','#FFD591']
+  const colorList1 = ['#055FC2','#FFA940']
+  let option = {
+    series: [
+      {
+      type: 'pie',
+      radius: [70, 100],
+      height: '100%',
+      left: 'center',
+      width: '100%',
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      label: {
+        alignTo: 'edge',
+        formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
+        minMargin: 5,
+        edgeDistance: 10,
+        lineHeight: 15,
+        rich: {
+          time: {
+            fontSize: 10,
+            color: '#999'
+          }
+        }
+      },
+      labelLine: {
+        length: 15,
+        length2: 0,
+        maxSurfaceAngle: 80
+      },
+      labelLayout: function (params) {
+        const isLeft = params.labelRect.x < 556 / 2;
+        const points = params.labelLinePoints;
+        // Update the end point.
+        points[2][0] = isLeft
+          ? params.labelRect.x
+          : params.labelRect.x + params.labelRect.width;
+        return {
+          labelLinePoints: points
+        };
+      },
+      data: data
+    }]
+  }
+  return option
+}
+
+export default getDoublePieChart;
\ No newline at end of file

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

+const getPieChart = (data,colorList) => {
+  let option = {
+    color: colorList,
+    series: [
+      {
+      type: 'pie',
+      radius: [70, 100],
+      height: '100%',
+      left: 'center',
+      width: '100%',
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      label: {
+        alignTo: 'edge',
+        formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
+        minMargin: 5,
+        edgeDistance: 10,
+        lineHeight: 15,
+        rich: {
+          time: {
+            fontSize: 10,
+            color: '#999'
+          }
+        }
+      },
+      labelLine: {
+        length: 15,
+        length2: 0,
+        maxSurfaceAngle: 80
+      },
+      labelLayout: function (params) {
+        const isLeft = params.labelRect.x < 556 / 2;
+        const points = params.labelLinePoints;
+        // Update the end point.
+        points[2][0] = isLeft
+          ? params.labelRect.x
+          : params.labelRect.x + params.labelRect.width;
+        return {
+          labelLinePoints: points
+        };
+      },
+      data: data
+    }]
+  }
+  return option
+}
+
+export default getPieChart;
\ No newline at end of file

src/views/bill/deepDig/index.vue

@@ -38,9 +38,9 @@ const siderBtnList = ref([
     path: "/billLayout/deepDig/processAnalysis",
   },
   {
-    name: "进程分析",
+    name: "政治献金",
     isActive: false,
-    path: "/billLayout/deepDig/progressAnalysis",
+    path: "/billLayout/deepDig/poliContribution",
   },
 ]);
 

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

+<template>
+	<div class="wrapper">
+		<div class="left">
+			<div class="box1">
+				<div class="box-header">
+					<div class="icon"></div>
+					<div class="title">{{ "主要议员" }}</div>
+					<div class="btn-box">
+						<div class="btn" :class="{ btnActive: activeBtnIndex === 0 }">{{ "参议院" }}</div>
+						<div class="btn" :class="{ btnActive: activeBtnIndex === 1 }">{{ "众议院" }}</div>
+					</div>
+					<div class="header-right">
+						<div class="right-icon">
+							<img src="@/assets/icons/box-header-icon2.png" alt="" />
+						</div>
+						<div class="right-icon">
+							<img src="@/assets/icons/box-header-icon3.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box1-main">
+					<div class="box1-main-top">
+						<div class="top-item" v-for="(item, index) in majorList[activeBtnIndex].data1" :key="index">
+							<div class="icon">
+								<img :src="item.img" alt="" />
+							</div>
+							<div class="name">{{ item.name }}</div>
+							<div class="line" :class="{ line1: index === 0, line2: index === 1 }"></div>
+							<div class="num" :class="{ num1: index === 0, num2: index === 1 }">{{ item.num }}</div>
+						</div>
+					</div>
+					<div class="box1-main-main">
+						<div
+							class="item"
+							:class="{ itemActive: itemActiveIndex === index }"
+							v-for="(item, index) in majorList[activeBtnIndex].data2"
+							:key="index"
+						>
+							<div class="item-left">
+								<img :src="item.img" alt="" />
+							</div>
+							<div class="item-center">
+								<div class="center-top">
+									<div class="name">{{ item.name }}</div>
+									<div class="icon1">
+										<img :src="item.dangpai" alt="" />
+									</div>
+									<div class="icon2">
+										<img :src="item.yuanbie" alt="" />
+									</div>
+								</div>
+								<div class="center-footer">
+									{{ item.zhiwei }}
+								</div>
+							</div>
+							<div class="item-right">
+								{{ item.num }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="box2">
+				<div class="box-header">
+					<div class="icon"></div>
+					<div class="title">{{ "政治献金流向" }}</div>
+					<div class="header-right">
+						<div class="right-icon">
+							<img src="@/assets/icons/box-header-icon1.png" alt="" />
+						</div>
+						<div class="right-icon">
+							<img src="@/assets/icons/box-header-icon2.png" alt="" />
+						</div>
+						<div class="right-icon">
+							<img src="@/assets/icons/box-header-icon3.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box2-main" id="chart1"></div>
+				<div class="box-footer">
+					<div class="box-footer-left">
+						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
+					</div>
+					<div class="box-footer-center">
+						{{
+							"马尔科·卢比奥的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​ 运作的大额捐款网络。"
+						}}
+					</div>
+					<div class="box-footer-right">
+						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
+					</div>
+				</div>
+			</div>
+			<div class="box3">
+				<div class="box-header">
+					<div class="icon"></div>
+					<div class="title">{{ "政治献金领域分布" }}</div>
+					<div class="header-right">
+						<div class="right-icon">
+							<img src="@/assets/icons/box-header-icon1.png" alt="" />
+						</div>
+						<div class="right-icon">
+							<img src="@/assets/icons/box-header-icon2.png" alt="" />
+						</div>
+						<div class="right-icon">
+							<img src="@/assets/icons/box-header-icon3.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box3-main">
+					<div class="box3-main-left" id="chart2"></div>
+					<div class="box3-main-right">
+						<div class="box3-main-right-item" v-for="(item, index) in areaList" :key="index">
+							<div class="id">{{ index + 1 }}</div>
+							<div class="name">{{ item.name }}</div>
+							<div class="line">
+								<div class="inner-line" :style="{width: (item.num / areaList[0].num)* 100 + '%' }"></div>
+							</div>
+							<div class="num">{{ item.numtext }}</div>
+							<div class="more">{{ `${item.insNum}家机构 >` }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="box-footer">
+					<div class="box-footer-left">
+						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
+					</div>
+					<div class="box-footer-center">
+						{{
+							"马尔科·卢比奥的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​ 运作的大额捐款网络。"
+						}}
+					</div>
+					<div class="box-footer-right">
+						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+import setChart from "@/utils/setChart";
+
+import getPieChart from "./utils/piechart";
+import getSankeyChart from "./utils/sankey"
+
+import Img1 from "./assets/images/1.png";
+import Img2 from "./assets/images/2.png";
+import Img3 from "./assets/images/3.png";
+import Img4 from "./assets/images/4.png";
+import Img5 from "./assets/images/5.png";
+import Img6 from "./assets/images/6.png";
+import Img7 from "./assets/images/7.png";
+import Img8 from "./assets/images/8.png";
+import Img9 from "./assets/images/9.png";
+import Img10 from "./assets/images/10.png";
+
+import Cyy from "@/assets/icons/cyy.png";
+import Zyy from "@/assets/icons/zyy.png";
+import Ghd from "@/assets/icons/ghd.png";
+import Mzd from "@/assets/icons/mzd.png";
+
+const activeBtnIndex = ref(0);
+const itemActiveIndex = ref(0);
+
+const majorList = ref([
+	{
+		name: "参议院",
+		data1: [
+			{
+				name: "共和党",
+				img: Ghd,
+				num: "$1,550,000"
+			},
+			{
+				name: "民主党",
+				img: Mzd,
+				num: "$298,000"
+			}
+		],
+		data2: [
+			{
+				img: Img1,
+				name: "马尔科·卢比奥",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$1,550,000"
+			},
+			{
+				img: Img2,
+				name: "史蒂夫·戴恩斯",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$820,000"
+			},
+			{
+				img: Img3,
+				name: "伯尼·莫雷诺",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$50,000"
+			},
+			{
+				img: Img4,
+				name: "戴夫·麦考密克",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$50,000"
+			},
+			{
+				img: Img5,
+				name: "蒂姆·希伊",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$35,000"
+			},
+			{
+				img: Img6,
+				name: "史蒂夫·戴恩斯",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$35,000"
+			},
+			{
+				img: Img7,
+				name: "皮特·赫格塞思",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$35,000"
+			},
+			{
+				img: Img8,
+				name: "安妮·海瑟薇",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$35,000"
+			},
+			{
+				img: Img9,
+				name: "贾米森·格里尔",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$35,000"
+			},
+			{
+				img: Img10,
+				name: "迈克·华尔兹",
+				dangpai: Ghd,
+				yuanbie: Cyy,
+				zhiwei: "众议院预算委员会主席",
+				num: "$35,000"
+			}
+		]
+	}
+]);
+
+const chart1Data = ref(
+
+)
+
+const areaList = ref([
+	{
+		name: "半导体",
+		num: 186000,
+		numtext: "$186,000",
+		insNum: 8
+	},
+	{
+		name: "电子设备",
+		num: 180000,
+		numtext: "$180,000",
+		insNum: 5
+	},
+	{
+		name: "显示技术",
+		num: 171000,
+		numtext: "$171,000",
+		insNum: 2
+	},
+	{
+		name: "新能源",
+		num: 75000,
+		numtext: "$75,000",
+		insNum: 3
+	},
+	{
+		name: "通信设备",
+		num: 70000,
+		numtext: "$70,000",
+		insNum: 2
+	},
+	{
+		name: "汽车",
+		num: 52000,
+		numtext: "$52,000",
+		insNum: 2
+	},
+	{
+		name: "其他",
+		num: 36000,
+		numtext: "$36,000",
+		insNum: 1
+	}
+]);
+
+const chart2Data = ref([
+	{
+		name: "半导体",
+		value: 50
+	},
+	{
+		name: "电子设备",
+		value: 46
+	},
+	{
+		name: "显示技术",
+		value: 40
+	},
+	{
+		name: "新能源",
+		value: 32
+	},
+	{
+		name: "通信设备",
+		value: 31
+	},
+	{
+		name: "汽车",
+		value: 30
+	},
+	{
+		name: "其他",
+		value: 24
+	}
+]);
+
+const chart2ColorList = ref(["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF"]);
+
+onMounted(() => {
+  let chart1 = getSankeyChart()
+  setChart(chart1, 'chart1')
+
+	let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
+	setChart(chart2, "chart2");
+
+
+});
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+	display: flex;
+	gap: 16px;
+	.box-header {
+		height: 51px;
+		width: 100%;
+		display: flex;
+		position: relative;
+		.icon {
+			width: 8px;
+			height: 20px;
+			margin-top: 18px;
+			border-radius: 0 4px 4px 0;
+			background: rgba(5, 95, 194, 1);
+		}
+		.title {
+			margin-left: 14px;
+			margin-top: 14px;
+			height: 26px;
+			color: rgba(5, 95, 194, 1);
+			font-family: Microsoft YaHei;
+			font-size: 20px;
+			font-weight: 700;
+			line-height: 26px;
+		}
+		.btn-box {
+			display: flex;
+			gap: 8px;
+			position: absolute;
+			right: 84px;
+			top: 15px;
+			.btn {
+				height: 28px;
+				padding: 0 8px;
+				box-sizing: border-box;
+				color: var(--btn-plain-text-color);
+				font-family: Microsoft YaHei;
+				font-size: 16px;
+				font-weight: 400;
+				line-height: 28px;
+				border-radius: 4px;
+				background: var(--btn-plain-bg-color);
+				border: 1px solid var(--btn-plain-border-color);
+			}
+			.btnActive {
+				color: var(--btn-active-text-color);
+				background: var(--btn-active-bg-color);
+				border: 1px solid var(--btn-active-border-color);
+			}
+		}
+		.header-right {
+			position: absolute;
+			right: 12px;
+			top: 14px;
+			display: flex;
+			gap: 4px;
+			.right-icon {
+				width: 28px;
+				height: 28px;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+	.box-footer {
+		margin: 0 auto;
+		display: flex;
+		width: 1034px;
+		height: 40px;
+		box-sizing: border-box;
+		border: 1px solid rgba(231, 243, 255, 1);
+		border-radius: 4px;
+		background: rgba(246, 250, 255, 1);
+		.box-footer-left {
+			width: 19px;
+			height: 20px;
+			margin-top: 10px;
+			margin-left: 12px;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.box-footer-center {
+			margin-left: 13px;
+			width: 941px;
+			height: 40px;
+			line-height: 40px;
+			color: rgba(5, 95, 194, 1);
+			font-family: Microsoft YaHei;
+			font-size: 16px;
+			font-weight: 400;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.box-footer-right {
+			margin-left: 13px;
+			margin-top: 8px;
+			width: 24px;
+			height: 24px;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+	.left {
+		margin-top: 16px;
+		width: 520px;
+		height: 846px;
+		.box1 {
+			width: 520px;
+			height: 846px;
+			border: 1px solid rgba(234, 236, 238, 1);
+			border-radius: 10px;
+			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+			background: rgba(255, 255, 255, 1);
+			.box1-main {
+				.box1-main-top {
+					width: 486px;
+					height: 110px;
+					box-sizing: border-box;
+					border: 1px solid rgba(234, 236, 238, 1);
+					border-radius: 4px;
+					background: rgba(247, 248, 249, 1);
+					margin: 8px auto;
+					.top-item {
+						display: flex;
+						align-items: center;
+						width: 450px;
+						height: 30px;
+						margin: 15px auto;
+
+						.icon {
+							width: 30px;
+							height: 30px;
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.name {
+							height: 30px;
+							margin-left: 10px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-size: 18px;
+							font-weight: 700;
+							line-height: 30px;
+						}
+						.line {
+							margin-left: 10px;
+							width: 202px;
+							height: 8px;
+							border-radius: 0px 4px 4px 0px;
+						}
+						.line1 {
+							background: linear-gradient(270deg, rgba(206, 79, 81, 1), rgba(206, 79, 81, 0) 100%);
+						}
+						.line2 {
+							background: linear-gradient(270deg, rgba(5, 95, 194, 1), rgba(5, 95, 194, 0) 100%);
+						}
+
+						.num {
+							margin-left: 10px;
+							width: 120px;
+							height: 24px;
+							text-align: right;
+							font-family: Microsoft YaHei;
+							font-size: 18px;
+							font-weight: 700;
+							line-height: 24px;
+						}
+						.num1 {
+							color: rgba(206, 79, 81, 1);
+						}
+						.num2 {
+							color: rgba(5, 95, 194, 1);
+						}
+					}
+				}
+				.box1-main-main {
+					margin: 0 auto;
+					margin-top: 6px;
+					width: 498px;
+					height: 640px;
+					.item {
+						display: flex;
+						position: relative;
+						height: 64px;
+						box-sizing: border-box;
+						border-radius: 4px;
+						border: 1px soild transparent;
+						border-bottom: 1px solid rgba(234, 236, 238, 1);
+						.item-left {
+							width: 40px;
+							height: 40px;
+							margin-top: 11px;
+							margin-left: 14px;
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.item-center {
+							margin-left: 11px;
+							.center-top {
+								display: flex;
+								.name {
+									height: 24px;
+									margin-top: 7px;
+									color: rgba(59, 65, 75, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 700;
+									line-height: 24px;
+								}
+								.icon1 {
+									width: 16px;
+									height: 16px;
+									margin-left: 7px;
+									margin-top: 11px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+								.icon2 {
+									width: 16px;
+									height: 16px;
+									margin-left: 2px;
+									margin-top: 11px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+							}
+							.center-footer {
+								height: 24px;
+								color: rgba(95, 101, 108, 1);
+								font-family: Microsoft YaHei;
+								font-size: 14px;
+								font-weight: 400;
+								line-height: 24px;
+							}
+						}
+						.item-right {
+							position: absolute;
+							right: 16px;
+							top: 19px;
+							height: 24px;
+							text-align: right;
+							color: rgba(206, 79, 81, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 700;
+							line-height: 24px;
+						}
+					}
+					.itemActive {
+						background: rgba(246, 250, 255, 1);
+						border: 1px solid rgba(174, 214, 255, 1);
+					}
+				}
+			}
+		}
+	}
+	.right {
+		margin-top: 16px;
+		width: 1064px;
+		height: 846px;
+		.box2 {
+			width: 1064px;
+			height: 415px;
+			border: 1px solid rgba(234, 236, 238, 1);
+			border-radius: 10px;
+			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+			background: rgba(255, 255, 255, 1);
+			.box2-main {
+				width: 1020px;
+				height: 302px;
+				margin: 0 auto;
+				margin-bottom: 9px;
+			}
+		}
+		.box3 {
+			margin-top: 16px;
+			width: 1064px;
+			height: 415px;
+			border: 1px solid rgba(234, 236, 238, 1);
+			border-radius: 10px;
+			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+			background: rgba(255, 255, 255, 1);
+			.box3-main {
+				width: 1020px;
+				height: 300px;
+				margin: 0 auto;
+				margin-top: 3px;
+				margin-bottom: 9px;
+				display: flex;
+				.box3-main-left {
+					width: 492px;
+				}
+				.box3-main-right {
+					width: 518px;
+					margin-left: 10px;
+					overflow: hidden;
+					.box3-main-right-item {
+						height: 60px;
+						width: 518px;
+						box-sizing: border-box;
+						display: flex;
+						align-items: center;
+						.id {
+							margin-left: 15px;
+							width: 24px;
+							height: 24px;
+							background: #e7f3ff;
+							border-radius: 12px;
+							color: rgba(5, 95, 194, 1);
+							font-family: Microsoft YaHei;
+							font-size: 12px;
+							font-weight: 400;
+							line-height: 24px;
+							text-align: center;
+						}
+						.name {
+							margin-left: 13px;
+							width: 80px;
+							height: 24px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 700;
+							line-height: 24px;
+						}
+						.line {
+							margin-left: 25px;
+							width: 166px;
+							height: 8px;
+							.inner-line {
+                height: 8px;
+								border-radius: 0px 4px 4px 0px;
+								background: linear-gradient(270deg, rgba(5, 95, 194, 1), rgba(5, 95, 194, 0) 100%);
+							}
+						}
+						.num {
+							margin-left: 17px;
+							width: 75px;
+							height: 30px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 30px;
+						}
+						.more {
+							margin-left: 25px;
+							width: 80px;
+							height: 30px;
+							color: rgba(5, 95, 194, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 30px;
+						}
+						&:nth-child(2n-1) {
+							border-top: 1px solid rgba(234, 236, 238, 1);
+							border-radius: 4px;
+							background: rgba(247, 248, 249, 1);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>

src/views/bill/deepDig/poliContribution/utils/piechart.js

+const getPieChart = (data,colorList) => {
+  let option = {
+    color: colorList,
+    series: [
+      {
+      type: 'pie',
+      radius: [70, 100],
+      height: '100%',
+      left: 'center',
+      width: '100%',
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      label: {
+        alignTo: 'edge',
+        formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
+        minMargin: 5,
+        edgeDistance: 10,
+        lineHeight: 15,
+        rich: {
+          time: {
+            fontSize: 10,
+            color: '#999'
+          }
+        }
+      },
+      labelLine: {
+        length: 15,
+        length2: 0,
+        maxSurfaceAngle: 80
+      },
+      labelLayout: function (params) {
+        const isLeft = params.labelRect.x < 556 / 2;
+        const points = params.labelLinePoints;
+        // Update the end point.
+        points[2][0] = isLeft
+          ? params.labelRect.x
+          : params.labelRect.x + params.labelRect.width;
+        return {
+          labelLinePoints: points
+        };
+      },
+      data: data
+    }]
+  }
+  return option
+}
+
+export default getPieChart;
\ No newline at end of file

src/views/bill/deepDig/poliContribution/utils/sankey.js

+
+
+const getSankeyChart = () => {
+  const option = {
+    series: {
+      type: 'sankey',
+      layout: 'none',
+      left: '5%',
+      right: '5%',
+      top: '5%',
+      bottom: '5%',
+      emphasis: {
+        focus: 'adjacency'
+      },
+      nodeWidth: 50,
+      label: {
+        show: true,
+        formatter: function (params) {
+          return `${params.name} $${params.value}`;
+        },
+        position: 'right',
+        textStyle: {
+          fontSize: '16px',
+          color: '#555'
+        }
+      },
+      data: [
+        {
+          name: '马尔科·卢比奥',
+          label: {
+            position: 'left'
+          }
+        },
+        {
+          name: '成长俱乐部'
+        },
+        {
+          name: '埃利奥特管理公司'
+        },
+        {
+          name: '高盛集团'
+        },
+        {
+          name: '黑石集团'
+        },
+        {
+          name: '佛罗里达水晶'
+        },
+        {
+          name: '美国银行'
+        }
+
+      ],
+      links: [
+        {
+          source: '成长俱乐部',
+          target: '马尔科·卢比奥',
+          value: 680751
+        },
+        {
+          source: '埃利奥特管理公司',
+          target: '马尔科·卢比奥',
+          value: 440120
+        },
+        {
+          source: '高盛集团',
+          target: '马尔科·卢比奥',
+          value: 371517
+        },
+        {
+          source: '黑石集团',
+          target: '马尔科·卢比奥',
+          value: 259321
+        },
+        {
+          source: '佛罗里达水晶',
+          target: '马尔科·卢比奥',
+          value: 203775
+        },
+        {
+          source: '美国银行',
+          target: '马尔科·卢比奥',
+          value: 150892
+        }
+      ]
+    }
+  };
+
+  return option
+}
+
+export default getSankeyChart
\ No newline at end of file

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

-<template>
-  <div>我是进程分析</div>
-</template>
-
-<script setup>
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/decree/decreeHome/index.vue

 <template>
 	<div class="home-wrapper">
-		<div class="home-main">
+		<div class="search-header" v-show="isShow">
+			<div class="home-main-header-center">
+				<el-input v-model="input" 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">搜索</div>
+				</div>
+			</div>
+			<div class="home-main-header-btn-box">
+				<div class="btn">
+					<div class="btn-text">{{ "最新动态" }}</div>
+					<div class="btn-icon">{{ ">" }}</div>
+				</div>
+				<div class="btn">
+					<div class="btn-text">{{ "资讯要闻" }}</div>
+					<div class="btn-icon">{{ ">" }}</div>
+				</div>
+				<div class="btn">
+					<div class="btn-text">{{ "统计概览" }}</div>
+					<div class="btn-icon">{{ ">" }}</div>
+				</div>
+				<div class="btn">
+					<div class="btn-text">{{ "资源库" }}</div>
+					<div class="btn-icon">{{ ">" }}</div>
+				</div>
+			</div>
+		</div>
+		<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
 			<div class="home-main-header">
-				<div class="home-main-header-top">
+				<div class="home-main-header-top" v-show="!isShow">
 					<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
 					<span>科技政令</span>
 				</div>
-				<div class="home-main-header-center">
+				<div class="home-main-header-center" v-show="!isShow">
 					<el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技政令" />
 					<div class="search">
 						<div class="search-icon">
@@ -15,7 +44,7 @@
 						<div class="search-text">搜索</div>
 					</div>
 				</div>
-				<div class="home-main-header-footer">
+				<div class="home-main-header-footer" v-show="!isShow">
 					<div class="home-main-header-footer-item">
 						<div class="item-top">3.8T</div>
 						<div class="item-footer">数据量</div>
@@ -37,7 +66,7 @@
 						<div class="item-footer">分析报告</div>
 					</div>
 				</div>
-				<div class="home-main-header-btn-box">
+				<div class="home-main-header-btn-box" v-show="!isShow">
 					<div class="btn">
 						<div class="btn-text">{{ "最新动态" }}</div>
 						<div class="btn-icon">{{ ">" }}</div>
@@ -64,7 +93,7 @@
 					</div>
 				</div>
 			</div>
-      <DivideHeader class="divide" :titleText="'最新动态'"></DivideHeader>
+			<DivideHeader class="divide" :titleText="'最新动态'"></DivideHeader>
 			<div class="home-main-center">
 				<div class="center-top">
 					<div class="box1">
@@ -170,7 +199,57 @@
 						</div>
 					</div>
 				</div>
-				<div class="center-center1">
+				<DivideHeader class="divide2" :titleText="'资讯要闻'"></DivideHeader>
+				<div class="center-center">
+					<div class="box3">
+						<div class="box3-header">
+							<div class="box3-header-left">
+								<div class="box3-header-icon">
+									<img src="./assets/images/box3-header-icon.png" alt="" />
+								</div>
+								<div class="box3-header-title">{{ "新闻资讯" }}</div>
+							</div>
+						</div>
+						<div class="box3-main">
+							<div class="box3-item" v-for="(news, index) in newsList" :key="index">
+								<div class="left">
+									<img :src="news.img" alt="" />
+								</div>
+								<div class="right">
+									<div class="right-top">
+										<div class="title">{{ news.title }}</div>
+										<div class="time">{{ news.from }}</div>
+									</div>
+									<div class="right-footer">{{ news.content }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="box4">
+						<div class="box4-header">
+							<div class="header-icon">
+								<img src="./assets/images/box4-header-icon.png" alt="" />
+							</div>
+							<div class="header-title">{{ "社交媒体" }}</div>
+							<div class="more">{{ "更多 +" }}</div>
+						</div>
+						<div class="box4-main">
+							<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
+								<div class="left">
+									<img :src="item.img" alt="" />
+								</div>
+								<div class="right">
+									<div class="right-top">
+										<div class="name">{{ item.name }}</div>
+										<div class="time">{{ item.time }}</div>
+									</div>
+									<div class="content">{{ item.content }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- <div class="center-center1">
 					<div
 						class="center1-item"
 						:class="{ center1ItemActive: center1ActiveIndex === 0 }"
@@ -239,8 +318,8 @@
 							</div>
 						</div>
 					</div>
-				</div>
-				<div class="center-center2">
+				</div> -->
+				<!-- <div class="center-center2">
 					<div class="center2-header">
 						<div class="center2-header-left">
 							<div class="left">
@@ -356,7 +435,8 @@
 							</div>
 						</div>
 					</div>
-				</div>
+				</div> -->
+				<DivideHeader class="divide3" :titleText="'数据总览'"></DivideHeader>
 				<div class="center-footer">
 					<div class="box3">
 						<div class="box3-header">
@@ -422,6 +502,7 @@
 				</div>
 			</div>
 			<div class="home-main-footer">
+				<DivideHeader class="divide4" :titleText="'资源库'"></DivideHeader>
 				<div class="home-main-footer-header">
 					<div class="btn-box">
 						<div
@@ -458,28 +539,51 @@
 					</div>
 				</div>
 				<div class="home-main-footer-main">
-					<div class="main-item" v-for="(decree, index) in curDecreeList" :key="index">
-						<div class="main-item-left">
-							<div
-								class="left-box"
-								:class="{
-									type1: decree.status === 1,
-									type2: decree.status === 2,
-									type3: decree.status === 3
-								}"
-							>
-								{{ decree.type }}
+					<div class="content-header">
+						<div class="icon">
+							<img src="./assets/images/box1-header-icon.png" alt="" />
+						</div>
+						<div class="title">{{ "政令库" }}</div>
+					</div>
+					<div class="content-box">
+						<div class="main-item" v-for="(decree, index) in curDecreeList" :key="index">
+							<div class="main-item-left">
+								<div
+									class="left-box"
+									:class="{
+										type1: decree.status === 1,
+										type2: decree.status === 2,
+										type3: decree.status === 3
+									}"
+								>
+									{{ decree.type }}
+								</div>
+							</div>
+							<div class="main-item-center">
+								<div class="main-item-center-box1">{{ decree.title }}</div>
+								<div class="main-item-center-box2">{{ decree.time }}</div>
+							</div>
+							<div class="main-item-right">
+								<div class="main-item-right-text">{{ "查看官网政令原文" }}</div>
+								<div class="main-item-right-icon">
+									<img src="./assets/images/open-icon.png" alt="" />
+								</div>
 							</div>
 						</div>
-						<div class="main-item-center">
-							<div class="main-item-center-box1">{{ decree.title }}</div>
-							<div class="main-item-center-box2">{{ decree.time }}</div>
+					</div>
+					<div class="footer-box">
+						<div class="footer-left">
+							{{ `共${decreeList.length}项调查` }}
 						</div>
-						<div class="main-item-right">
-							<div class="main-item-right-text">{{ "查看官网政令原文" }}</div>
-							<div class="main-item-right-icon">
-								<img src="./assets/images/open-icon.png" alt="" />
-							</div>
+						<div class="footer-right">
+							<el-pagination
+								@current-change="handleCurrentChange"
+								:pageSize="10"
+								:current-page="currentPage"
+								background
+								layout="prev, pager, next"
+								:total="decreeList.length"
+							/>
 						</div>
 					</div>
 				</div>
@@ -489,12 +593,12 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import * as echarts from "echarts";
 import router from "@/router";
 import WordCloudMap from "./WordCloudMap.vue";
 import DivideHeader from "@/components/DivideHeader.vue";
-
+import { useContainerScroll } from "@/hooks/useScrollShow";
 import getMultiLineChart from "./utils/multiLineChart";
 import getBarChart from "./utils/barChart";
 import getPieChart from "./utils/piechart";
@@ -522,12 +626,88 @@ import Gov8 from "./assets/images/gov8.png";
 import Gov9 from "./assets/images/gov9.png";
 import Gov10 from "./assets/images/gov10.png";
 
+import News1 from "./assets/images/news1.png";
+import News2 from "./assets/images/news2.png";
+import News3 from "./assets/images/news3.png";
+import News4 from "./assets/images/news4.png";
+import News5 from "./assets/images/news5.png";
+
+import Message1 from "./assets/images/message-icon1.png";
+import Message2 from "./assets/images/message-icon2.png";
+import Message3 from "./assets/images/message-icon3.png";
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+// 处理页码改变事件
+const handleCurrentChange = page => {
+	currentPage.value = page;
+};
+
+const containerRef = ref(null);
+const { isShow } = useContainerScroll(containerRef);
+
 const center1ActiveIndex = ref(0);
 
 const handleClickCenter1Item = index => {
 	center1ActiveIndex.value = index;
 };
 
+// 新闻资讯
+const newsList = ref([
+	{
+		img: News1,
+		title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
+		content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
+		from: "11-4 · 华盛顿邮报"
+	},
+	{
+		img: News2,
+		title: "美参议院通过决议，要求终止特朗普全球关税政策",
+		content: `参议院以51票赞成、47票反对通过一项决议，旨在终止特朗普实施的全面关税政策，四名......`,
+		from: "11-4 · 纽约时报"
+	},
+	{
+		img: News3,
+		title: "美众院通过950亿美元对外援助法案，包含对台军援",
+		content: `国会众议院在4月通过了大规模对外援助法案，其中包括为“印太安全”提供资金的条款，......`,
+		from: "11-3 · 洛杉矶时报"
+	},
+	{
+		img: News4,
+		title: "“大而美”法案在激烈争议中通过",
+		content: `特朗普力推的大规模税收与支出法案在国会以微弱优势通过。该法案因大幅削减医疗补助和......`,
+		from: "11-3 · 今日美国"
+	},
+	{
+		img: News5,
+		title: "美政府“停摆”追平历史最长纪录，民生多领域受重创",
+		content: `联邦政府“停摆”进入第35天，追平历史纪录。食品救济项目资金中断，数百万低收入民......`,
+		from: "11-2 ·  ​福克斯新闻网"
+	}
+]);
+
+// 社交媒体
+const messageList = ref([
+	{
+		img: Message1,
+		name: "唐纳德·特朗普",
+		time: "15:23 · 发布于真实社交",
+		content: `埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。`
+	},
+	{
+		img: Message2,
+		name: "埃隆·马斯克",
+		time: "14:49 · 发布于X",
+		content: `如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。`
+	},
+	{
+		img: Message3,
+		name: "塞巴斯蒂安·马拉比",
+		time: "11:05 · 发布于X",
+		content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
+	}
+]);
+
 const govInsList = ref([
 	{
 		img: Gov1,
@@ -834,7 +1014,7 @@ const areaList = ref([
 	}
 ]);
 
-const curDecreeList = ref([
+const decreeList = ref([
 	{
 		type: "总统政令",
 		status: 1,
@@ -877,6 +1057,66 @@ const curDecreeList = ref([
 		title: "终止对不可靠、非受控能源的市场扭曲补贴",
 		time: "2025年9月11日"
 	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	},
 	{
 		type: "总统政令",
 		status: 1,
@@ -885,6 +1125,12 @@ const curDecreeList = ref([
 	}
 ]);
 
+const curDecreeList = computed(() => {
+	const startIndex = (currentPage.value - 1) * pageSize.value;
+	const endIndex = startIndex + pageSize.value;
+	return decreeList.value.slice(startIndex, endIndex);
+});
+
 const releaseTime = ref("近一年发布");
 
 const releaseTimeList = ref([
@@ -1089,10 +1335,106 @@ onMounted(async () => {
 	box-shadow: none;
 }
 .home-wrapper {
+	width: 100%;
+	height: calc(100vh - 96px);
+	position: relative;
+	overflow-y: hidden;
+	.search-header {
+		width: 100%;
+		height: 144px;
+		background: #fff;
+		overflow: hidden;
+		.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);
+			background: rgba(255, 255, 255, 1);
+			box-sizing: border-box;
+			padding: 1px;
+			position: relative;
+			.search {
+				position: absolute;
+				right: 1px;
+				top: 2px;
+				width: 120px;
+				height: 44px;
+				border-radius: 10px;
+				background: var(--color-main-active);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.search-icon {
+					width: 18px;
+					height: 18px;
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.search-text {
+					margin-left: 8px;
+					height: 22px;
+					color: #fff;
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 400;
+					line-height: 22px;
+				}
+			}
+		}
+		.home-main-header-btn-box {
+			margin-top: 20px;
+			margin-left: 200px;
+			display: flex;
+			gap: 16px;
+			.btn {
+				display: flex;
+				width: 140px;
+				height: 36px;
+				border: 1px solid #aed6ff;
+				box-sizing: border-box;
+				border-radius: 18px;
+				justify-content: center;
+				background: #e7f3ff;
+				position: relative;
+				cursor: pointer;
+				&:hover {
+					background: #cae3fc;
+				}
+				.btn-text {
+					color: var(--color-main-active);
+					font-family: Microsoft YaHei;
+					font-size: 20px;
+					font-weight: 400;
+					line-height: 36px;
+					margin-left: 5px;
+				}
+				.btn-icon {
+					height: 20px;
+					line-height: 20px;
+					position: absolute;
+					top: 6px;
+					right: 8px;
+					color: var(--color-main-active);
+					font-family: Microsoft YaHei;
+					font-size: 20px;
+					font-weight: 400;
+				}
+			}
+		}
+	}
+	.scrollHomeMain {
+		width: 100%;
+		height: calc(100% - 144px);
+		overflow-y: auto;
+	}
 	.home-main {
-		// width: 1400px;
 		width: 100%;
-		margin: 0 auto;
+		height: 100%;
+		overflow-y: auto;
 		background: url("./assets/images/background.png");
 		background-size: 100% 100%;
 		.home-main-header {
@@ -1128,11 +1470,11 @@ onMounted(async () => {
 				.search {
 					position: absolute;
 					right: 1px;
-					top: 1px;
+					top: 2px;
 					width: 120px;
-					height: 42px;
-					border-radius: 4px;
-					background: rgba(22, 119, 255, 1);
+					height: 44px;
+					border-radius: 10px;
+					background: var(--color-main-active);
 					display: flex;
 					justify-content: center;
 					align-items: center;
@@ -1221,8 +1563,8 @@ onMounted(async () => {
 				}
 			}
 			.home-main-header-item-box {
-        margin-top: 48px;
-        margin-bottom: 64px;
+				margin-top: 48px;
+				margin-bottom: 64px;
 				width: 1600px;
 				display: flex;
 				flex-wrap: wrap;
@@ -1236,7 +1578,7 @@ onMounted(async () => {
 					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 					background: rgba(255, 255, 255, 0.65);
 					align-items: center;
-          margin:0 6px 16px 6px;
+					margin: 0 6px 16px 6px;
 					.item-left {
 						width: 48px;
 						height: 48px;
@@ -1605,6 +1947,225 @@ 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;
+					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);
+						margin: 0 auto;
+						display: flex;
+						justify-content: space-between;
+						padding: 0 20px;
+						.box3-header-left {
+							display: flex;
+							.box3-header-icon {
+								margin-top: 16px;
+								width: 19px;
+								height: 19px;
+								img {
+									width: 100%;
+									height: 100%;
+								}
+							}
+							.box3-header-title {
+								margin-top: 16px;
+								margin-left: 19px;
+								height: 22px;
+								color: rgba(20, 89, 187, 1);
+								font-family: Microsoft YaHei;
+								font-size: 20px;
+								font-weight: 700;
+								line-height: 22px;
+							}
+						}
+					}
+					.box3-main {
+						height: 402px;
+						overflow-y: auto;
+						overflow-x: hidden;
+						padding-top: 6px;
+						.box3-item {
+							display: flex;
+							height: 77px;
+							width: 749px;
+							margin-left: 21px;
+							border-bottom: 1px solid rgba(240, 242, 244, 1);
+							.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: 520px;
+										height: 24px;
+										color: rgba(59, 65, 75, 1);
+										font-family: Microsoft YaHei;
+										font-size: 16px;
+										font-weight: 700;
+										line-height: 24px;
+										overflow: hidden;
+										text-overflow: ellipsis;
+										white-space: nowrap;
+									}
+									.time {
+										flex: 1;
+										text-align: right;
+										height: 22px;
+										margin-top: 19px;
+										color: rgba(95, 101, 108, 1);
+										font-family: Microsoft YaHei;
+										font-size: 14px;
+										font-weight: 400;
+										line-height: 22px;
+									}
+								}
+								.right-footer {
+									width: 657px;
+									height: 24px;
+									color: rgba(59, 65, 75, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 24px;
+									overflow: hidden;
+									text-overflow: ellipsis;
+									white-space: nowrap;
+								}
+							}
+						}
+					}
+				}
+				.box4 {
+					margin-left: 20px;
+					width: 792px;
+					height: 450px;
+					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
+					background: rgba(255, 255, 255, 1);
+					.box4-header {
+						width: 792px;
+						height: 48px;
+						border-bottom: 1px solid rgba(240, 242, 244, 1);
+						display: flex;
+						box-sizing: border-box;
+						padding-left: 22px;
+						position: relative;
+						.header-icon {
+							margin-top: 15px;
+							width: 20px;
+							height: 20px;
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.header-title {
+							margin-top: 16px;
+							margin-left: 18px;
+							height: 22px;
+							color: var(--color-main-active);
+							font-family: Microsoft YaHei;
+							font-size: 20px;
+							font-weight: 700;
+							line-height: 22px;
+						}
+						.more {
+							width: 49px;
+							height: 24px;
+							position: absolute;
+							top: 14px;
+							right: 27px;
+							color: rgba(20, 89, 187, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 24px;
+							cursor: pointer;
+						}
+					}
+					.box4-main {
+						height: 402px;
+						overflow-y: auto;
+						box-sizing: border-box;
+						padding-top: 8px;
+						.box4-main-item {
+							margin-top: 16px;
+							display: flex;
+							margin-left: 21px;
+							.left {
+								margin-top: 5px;
+								width: 36px;
+								height: 36px;
+								img {
+									width: 100%;
+									height: 100%;
+								}
+							}
+							.right {
+								margin-left: 10px;
+								width: 690px;
+								box-sizing: border-box;
+								border: 1px solid rgba(231, 243, 255, 1);
+								background: rgba(246, 250, 255, 1);
+								padding: 10px 15px;
+								.right-top {
+									display: flex;
+									justify-content: space-between;
+									.name {
+										height: 24px;
+										color: rgba(59, 65, 75, 1);
+										font-family: Microsoft YaHei;
+										font-size: 16px;
+										font-weight: 700;
+										line-height: 24px;
+									}
+									.time {
+										height: 30px;
+										color: rgba(95, 101, 108, 1);
+										font-family: Microsoft YaHei;
+										font-size: 16px;
+										font-weight: 400;
+										line-height: 30px;
+									}
+								}
+								.content {
+									color: rgba(59, 65, 75, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 24px;
+								}
+							}
+						}
+					}
+				}
+			}
 			.center-center1 {
 				margin: 0 auto;
 				margin-top: 24px;
@@ -2030,6 +2591,12 @@ onMounted(async () => {
 					}
 				}
 			}
+			.divide3 {
+				width: 1600px;
+				margin: 0 auto;
+				margin-top: 68px;
+				margin-bottom: 36px;
+			}
 			.center-footer {
 				margin-top: 21px;
 				height: 452px;
@@ -2267,9 +2834,15 @@ onMounted(async () => {
 			}
 		}
 		.home-main-footer {
-			// width: 100%;
-			height: 911px;
+			margin-top: 34px;
+			height: 1379px;
 			background: rgba(248, 249, 250, 1);
+			overflow: hidden;
+			.divide4 {
+				margin: 0 auto;
+				margin-top: 52px;
+				margin-bottom: 36px;
+			}
 			.home-main-footer-header {
 				width: 1600px;
 				height: 42px;
@@ -2317,101 +2890,142 @@ onMounted(async () => {
 			}
 			.home-main-footer-main {
 				width: 1600px;
-				height: 685px;
+				height: 999px;
 				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
 				background: rgba(255, 255, 255, 1);
 				margin: 0 auto;
 				box-sizing: border-box;
-				padding: 10px 20px 0 20px;
-				overflow-y: auto;
-				.main-item {
+				border-radius: 10px;
+				.content-header {
+					height: 48px;
 					display: flex;
-					height: 84px;
 					border-bottom: 1px solid rgba(234, 236, 238, 1);
-					.main-item-left {
-						width: 105px;
-						.left-box {
-							margin-top: 17px;
-							height: 24px;
-							width: 95px;
-							text-align: center;
-							// color: rgba(22, 119, 255, 1);
-							font-family: Microsoft YaHei;
-							font-size: 14px;
-							font-weight: 400;
-							line-height: 24px;
-							box-sizing: border-box;
-							border-radius: 4px;
-							// border: 1px solid rgba(186, 224, 255, 1);
-							// background: rgba(230, 244, 255, 1);
-						}
-						.type1 {
-							color: rgba(22, 119, 255, 1);
-							border: 1px solid rgba(186, 224, 255, 1);
-							background: rgba(230, 244, 255, 1);
-						}
-						.type2 {
-							color: rgba(19, 168, 168, 1);
-							border: 1px solid rgba(135, 232, 222, 1);
-							background: rgba(230, 255, 251, 1);
-						}
-						.type3 {
-							color: rgba(250, 140, 22, 1);
-							border: 1px solid rgba(255, 213, 145, 1);
-							background: rgba(255, 247, 230, 1);
+					.icon {
+						width: 20px;
+						height: 20px;
+						margin-top: 14px;
+						margin-left: 19px;
+						img {
+							width: 100%;
+							height: 100%;
 						}
 					}
-					.main-item-center {
-						width: 1300px;
-						.main-item-center-box1 {
-							margin-top: 15px;
-							height: 24px;
-							color: rgba(59, 65, 75, 1);
-							font-family: Microsoft YaHei;
-							font-size: 18px;
-							font-weight: 700;
-							line-height: 24px;
-						}
-						.main-item-center-box2 {
-							margin-top: 4px;
-							height: 24px;
-							color: rgba(95, 101, 108, 1);
-							font-family: Microsoft YaHei;
-							font-size: 16px;
-							font-weight: 400;
-							line-height: 24px;
-						}
+					.title {
+						height: 48px;
+						margin-left: 21px;
+						color: rgba(5, 95, 194, 1);
+						font-family: Microsoft YaHei;
+						font-size: 20px;
+						font-weight: 700;
+						line-height: 48px;
 					}
-					.main-item-right {
+				}
+				.content-box {
+					height: 850px;
+					margin: 0 30px;
+					.main-item {
 						display: flex;
-						.main-item-right-text {
-							margin-top: 18px;
-							width: 128px;
-							height: 24px;
-							color: rgba(10, 87, 166, 1);
-							font-family: Microsoft YaHei;
-							font-size: 16px;
-							font-weight: 400;
-							line-height: 24px;
+						height: 84px;
+						border-bottom: 1px solid rgba(234, 236, 238, 1);
+						.main-item-left {
+							width: 105px;
+							.left-box {
+								margin-top: 17px;
+								height: 24px;
+								width: 95px;
+								text-align: center;
+								// color: rgba(22, 119, 255, 1);
+								font-family: Microsoft YaHei;
+								font-size: 14px;
+								font-weight: 400;
+								line-height: 24px;
+								box-sizing: border-box;
+								border-radius: 4px;
+								// border: 1px solid rgba(186, 224, 255, 1);
+								// background: rgba(230, 244, 255, 1);
+							}
+							.type1 {
+								color: rgba(22, 119, 255, 1);
+								border: 1px solid rgba(186, 224, 255, 1);
+								background: rgba(230, 244, 255, 1);
+							}
+							.type2 {
+								color: rgba(19, 168, 168, 1);
+								border: 1px solid rgba(135, 232, 222, 1);
+								background: rgba(230, 255, 251, 1);
+							}
+							.type3 {
+								color: rgba(250, 140, 22, 1);
+								border: 1px solid rgba(255, 213, 145, 1);
+								background: rgba(255, 247, 230, 1);
+							}
 						}
-						.main-item-right-icon {
-							margin-top: 22px;
-							margin-left: 9px;
-							width: 16px;
-							height: 16px;
-							img {
-								width: 100%;
-								height: 100%;
+						.main-item-center {
+							width: 1300px;
+							.main-item-center-box1 {
+								margin-top: 15px;
+								height: 24px;
+								color: rgba(59, 65, 75, 1);
+								font-family: Microsoft YaHei;
+								font-size: 18px;
+								font-weight: 700;
+								line-height: 24px;
+							}
+							.main-item-center-box2 {
+								margin-top: 4px;
+								height: 24px;
+								color: rgba(95, 101, 108, 1);
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 24px;
+							}
+						}
+						.main-item-right {
+							display: flex;
+							.main-item-right-text {
+								margin-top: 18px;
+								width: 128px;
+								height: 24px;
+								color: rgba(10, 87, 166, 1);
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 24px;
+							}
+							.main-item-right-icon {
+								margin-top: 22px;
+								margin-left: 9px;
+								width: 16px;
+								height: 16px;
+								img {
+									width: 100%;
+									height: 100%;
+								}
 							}
 						}
 					}
 				}
+				.footer-box {
+					margin: 0 30px;
+					height: 32px;
+					margin-top: 30px;
+					display: flex;
+					justify-content: space-between;
+					.footer-left {
+						color: rgba(59, 65, 75, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 32px;
+					}
+				}
 			}
 		}
 	}
 }
 
-.divide{
-  margin: 0 auto;
+.divide {
+	margin: 0 auto;
 }
 </style>
\ No newline at end of file

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

 <template>
-  <div class="wrap">
-    <div class="box1">
+	<div class="wrap">
+		<!-- <div class="box1">
       <div class="box-header">
         <div class="header-left"></div>
         <div class="title">政令时序及战略里程碑</div>
@@ -46,211 +46,228 @@
           <img src="./assets/icons/box1-icon3.png" alt="" />
         </div>
       </div>
-    </div>
-    <div class="box2">
-      <div class="box-header">
-        <div class="header-left"></div>
-        <div class="title">相关政令关联分析</div>
-        <div class="header-right">
-          <img src="./assets/icons/header-icon.png" alt="" />
-        </div>
-      </div>
-      <div class="box2-main">
-        <div class="left">
-          <div
-            class="left-item"
-            :class="{ leftItemActive: box2LeftActiveIndex === index }"
-            v-for="(item, index) in decreeList"
-            :key="index"
-          >
-            <div class="time">{{ item.time }}</div>
-            <div class="title">{{ item.title }}</div>
-          </div>
-        </div>
+    </div> -->
+		<div class="box2">
+			<div class="box-header">
+				<div class="header-left"></div>
+				<div class="title">相关政令关联分析</div>
+				<div class="header-right">
+					<div class="icon">
+						<img src="../assets/icons/header-right-icon1.png" alt="" />
+					</div>
+					<div class="icon">
+						<img src="../assets/icons/header-right-icon2.png" alt="" />
+					</div>
+				</div>
+			</div>
+			<div class="box2-main">
+				<div class="left">
+					<div
+						class="left-item"
+						:class="{ leftItemActive: box2LeftActiveIndex === index }"
+						v-for="(item, index) in decreeList"
+						:key="index"
+					>
+						<div class="time">{{ item.time }}</div>
+						<div class="title">{{ item.title }}</div>
+					</div>
+				</div>
 
-        <div class="right">
-          <div class="info-box">
-            <div class="info-left">
-              <img :src="decreeList[box2LeftActiveIndex].img" alt="" />
-            </div>
-            <div class="info-right">
-              <div class="info-item">
-                <div class="item-left">{{ "政令全称：" }}</div>
-                <div class="item-right1">
-                  <div class="item-right-text">
-                    {{ decreeList[box2LeftActiveIndex].totalTitle }}
-                  </div>
-                  <div class="item-right-icon">
-                    <img src="./assets/icons/open-icon.png" alt="" />
-                  </div>
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="item-left">{{ "英文全称：" }}</div>
-                <div class="item-right">
-                  {{ decreeList[box2LeftActiveIndex].eTotalTitle }}
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="item-left">{{ "签署时间：" }}</div>
-                <div class="item-right">
-                  {{ decreeList[box2LeftActiveIndex].signTime }}
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="item-left">{{ "签署总统：" }}</div>
-                <div class="item-right">
-                  {{ decreeList[box2LeftActiveIndex].signPerson }}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="list-box">
-            <div class="list-header">
-              <div class="icon">
-                <img src="./assets/icons/box2-list-header-icon.png" alt="" />
-              </div>
-              <div class="title">{{ "政令主要内容" }}</div>
-            </div>
-            <div class="list-main">
-              <div
-                class="list-item"
-                v-for="(val, idx) in decreeList[box2LeftActiveIndex].list"
-                :key="idx"
-              >
-                <div class="id">{{ idx + 1 }}</div>
-                <div class="title">{{ val.title }}</div>
-                <div class="open">
-                  <img src="./assets/icons/open-icon.png" alt="" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+				<div class="right">
+					<div class="info-box">
+						<div class="info-left">
+							<img :src="decreeList[box2LeftActiveIndex].img" alt="" />
+						</div>
+						<div class="info-right">
+							<div class="info-item">
+								<div class="item-left">{{ "政令全称：" }}</div>
+								<div class="item-right1">
+									<div class="item-right-text">
+										{{ decreeList[box2LeftActiveIndex].totalTitle }}
+									</div>
+									<div class="item-right-icon">
+										<img src="./assets/icons/open-icon.png" alt="" />
+									</div>
+								</div>
+							</div>
+							<div class="info-item">
+								<div class="item-left">{{ "英文全称：" }}</div>
+								<div class="item-right">
+									{{ decreeList[box2LeftActiveIndex].eTotalTitle }}
+								</div>
+							</div>
+							<div class="info-item">
+								<div class="item-left">{{ "签署时间：" }}</div>
+								<div class="item-right">
+									{{ decreeList[box2LeftActiveIndex].signTime }}
+								</div>
+							</div>
+							<div class="info-item">
+								<div class="item-left">{{ "签署总统：" }}</div>
+								<div class="item-right">
+									{{ decreeList[box2LeftActiveIndex].signPerson }}
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="list-box">
+						<div class="list-header">
+							<div class="icon">
+								<img src="./assets/icons/box2-list-header-icon.png" alt="" />
+							</div>
+							<div class="title">{{ "政令主要内容" }}</div>
+						</div>
+						<div class="list-main">
+							<div class="list-item" v-for="(val, idx) in decreeList[box2LeftActiveIndex].list" :key="idx">
+								<div class="id">{{ idx + 1 }}</div>
+								<div class="title">{{ val.title }}</div>
+								<div class="open">
+									<img src="./assets/icons/open-icon.png" alt="" />
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="list-footer">
+						<div class="footer-left">
+							{{ `共${decreeList[box2LeftActiveIndex].list.length}项动态` }}
+						</div>
+						<div class="footer-right">
+							<el-pagination
+								@current-change="handleCurrentChange"
+								:pageSize="pageSize"
+								:current-page="currentPage"
+								background
+								layout="prev, pager, next"
+								:total="decreeList[box2LeftActiveIndex].list.length"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
 
 import box2InfoImg from "./assets/icons/box2-info.png";
+
+const pageSize = ref(10);
+const currentPage = ref(1);
+
 const box1BtnActive = ref(1);
 
 const timeLineList = ref([
-  {
-    time: "2025年1月",
-    title: "《AI扩散暂行最终规则》发布",
-    content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。",
-  },
-  {
-    time: "2025年5月",
-    title: "特朗普宣布撤销拜登AI规则",
-    content: "特朗普政府宣布撤销拜登AI规则，计划推出新规。",
-  },
-  {
-    time: "2025年7月23日",
-    title: "特朗普签署EO 14320",
-    content: "特朗普签署EO 14320，推动美国AI技术栈出口。",
-  },
-  {
-    time: "2025年7月31日",
-    title: "中国网信办约谈英伟达",
-    content:
-      "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
-  },
-  {
-    time: "2025年8月",
-    title: "英伟达H20发放出口许可证",
-    content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。",
-  },
+	{
+		time: "2025年1月",
+		title: "《AI扩散暂行最终规则》发布",
+		content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
+	},
+	{
+		time: "2025年5月",
+		title: "特朗普宣布撤销拜登AI规则",
+		content: "特朗普政府宣布撤销拜登AI规则，计划推出新规。"
+	},
+	{
+		time: "2025年7月23日",
+		title: "特朗普签署EO 14320",
+		content: "特朗普签署EO 14320，推动美国AI技术栈出口。"
+	},
+	{
+		time: "2025年7月31日",
+		title: "中国网信办约谈英伟达",
+		content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
+	},
+	{
+		time: "2025年8月",
+		title: "英伟达H20发放出口许可证",
+		content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
+	}
 ]);
 
 const decreeList = ref([
-  {
-    time: "2023",
-    title: "拜登人工智能政令",
-    img: box2InfoImg,
-    totalTitle: "关于安全、可靠和可信地开发和使用人工智能的行政命令",
-    eTotalTitle:
-      "Executive Order on the Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence",
-    signTime: "2025年7月23日",
-    signPerson: "乔·拜登（Joe Biden）",
-    list: [
-      {
-        title:
-          "要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准",
-      },
-      {
-        title:
-          "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。",
-      },
-      {
-        title:
-          "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。",
-      },
-      {
-        title:
-          "推动医疗保健领域负责任地使用AI；创造资源支持教育工作者部署AI教育工具。",
-      },
-      {
-        title:
-          "制定减轻AI对工人潜在危害的原则和最佳实践；编写AI对劳动力市场潜在影响的报告。",
-      },
-      {
-        title:
-          "通过“国家AI研究资源”（NAIRR）试点促进研究；为小型开发者和企业家提供技术援助和资源；简化相关领域高技能人才的签证流程。",
-      },
-      {
-        title: "扩大在AI领域的国际合作；与国际伙伴和标准组织加速制定AI标准。",
-      },
-      {
-        title:
-          "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。",
-      },
-    ],
-  },
-  {
-    time: "2023",
-    title: "拜登人工智能政令",
-    img: "",
-    totalTitle: "",
-    eTotalTitle: "",
-    signTime: "",
-    signPerson: "",
-    list: [],
-  },
-  {
-    time: "2025",
-    title: "特朗普撤销拜登AI规则",
-    img: "",
-    totalTitle: "",
-    eTotalTitle: "",
-    signTime: "",
-    signPerson: "",
-    list: [],
-  },
-  {
-    time: "2023",
-    title: "美国AI行动计划",
-    img: "",
-    totalTitle: "",
-    eTotalTitle: "",
-    signTime: "",
-    signPerson: "",
-    list: [],
-  },
-  {
-    time: "2024",
-    title: "对中国AI芯片限制",
-    img: "",
-    totalTitle: "",
-    eTotalTitle: "",
-    signTime: "",
-    signPerson: "",
-    list: [],
-  },
+	{
+		time: "2023",
+		title: "拜登人工智能政令",
+		img: box2InfoImg,
+		totalTitle: "关于安全、可靠和可信地开发和使用人工智能的行政命令",
+		eTotalTitle: "Executive Order on the Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence",
+		signTime: "2025年7月23日",
+		signPerson: "乔·拜登（Joe Biden）",
+		list: [
+			{
+				title: "要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准"
+			},
+			{
+				title: "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。"
+			},
+			{
+				title: "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。"
+			},
+			{
+				title: "推动医疗保健领域负责任地使用AI；创造资源支持教育工作者部署AI教育工具。"
+			},
+			{
+				title: "制定减轻AI对工人潜在危害的原则和最佳实践；编写AI对劳动力市场潜在影响的报告。"
+			},
+			{
+				title: "通过“国家AI研究资源”（NAIRR）试点促进研究；为小型开发者和企业家提供技术援助和资源；简化相关领域高技能人才的签证流程。"
+			},
+			{
+				title: "扩大在AI领域的国际合作；与国际伙伴和标准组织加速制定AI标准。"
+			},
+			{
+				title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
+			},
+			{
+				title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
+			},
+			{
+				title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
+			}
+		]
+	},
+	{
+		time: "2023",
+		title: "拜登人工智能政令",
+		img: "",
+		totalTitle: "",
+		eTotalTitle: "",
+		signTime: "",
+		signPerson: "",
+		list: []
+	},
+	{
+		time: "2025",
+		title: "特朗普撤销拜登AI规则",
+		img: "",
+		totalTitle: "",
+		eTotalTitle: "",
+		signTime: "",
+		signPerson: "",
+		list: []
+	},
+	{
+		time: "2023",
+		title: "美国AI行动计划",
+		img: "",
+		totalTitle: "",
+		eTotalTitle: "",
+		signTime: "",
+		signPerson: "",
+		list: []
+	},
+	{
+		time: "2024",
+		title: "对中国AI芯片限制",
+		img: "",
+		totalTitle: "",
+		eTotalTitle: "",
+		signTime: "",
+		signPerson: "",
+		list: []
+	}
 ]);
 
 const box2LeftActiveIndex = ref(0);
@@ -258,405 +275,423 @@ const box2LeftActiveIndex = ref(0);
 
 <style lang="scss" scoped>
 .wrap {
-  .box-header {
-    height: 56px;
-    display: flex;
-    position: relative;
-    .header-left {
-      margin-top: 20px;
-      width: 8px;
-      height: 16px;
-      border-radius: 0 4px 4px 0;
-      background: rgba(10, 87, 166, 1);
-    }
-    .title {
-      margin-left: 22px;
-      margin-top: 20px;
-      height: 16px;
-      line-height: 16px;
-      color: rgba(10, 87, 166, 1);
-      font-family: Microsoft YaHei;
-      font-size: 16px;
-      font-weight: 600;
-      line-height: 16px;
-    }
-    .header-btn-box {
-      position: absolute;
-      top: 14px;
-      right: 52px;
-      display: flex;
-      .btn {
-        margin-left: 8px;
-      }
-    }
-    .header-right {
-      position: absolute;
-      top: 14px;
-      right: 12px;
-      width: 32px;
-      height: 32px;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  .box1 {
-    margin: 27px auto 16px;
-    width: 1600px;
-    height: 492px;
-    border-radius: 4px;
-    box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-    background: rgba(255, 255, 255, 1);
-    .box1-main {
-      margin-top: 17px;
-      margin-left: 22px;
-      width: 1556px;
-      height: 330px;
-      overflow-x: auto;
-      overflow-y: hidden;
-      display: flex;
-      position: relative;
-      .box1-line-box {
-        position: absolute;
-        left: 0;
-        top: 135px;
-        height: 8px;
-        width: 1556px;
-        background: url("./assets/icons/line-bg.png") repeat;
-      }
-      .box1-item {
-        width: 315px;
-        height: 142px;
-        position: relative;
-        box-sizing: border-box;
-        padding-left: 20px;
-        margin-left: 10px;
-        border-left: 1px solid #0a57a6;
-        .box1-item-header {
-          display: flex;
-          width: 315px;
-          .title {
-            // width: 262px;
-            height: 26px;
-          }
-          .icon {
-            margin-left: 10px;
-            margin-top: 5px;
-            width: 16px;
-            height: 16px;
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-        .box1-item-content {
-          width: 288px;
-          min-height: 48px;
-          max-height: 96px;
-          color: rgba(95, 101, 108, 1);
-          font-family: Microsoft YaHei;
-          font-size: 16px;
-          font-weight: 400;
-          line-height: 24px;
-        }
-        .point {
-          position: absolute;
-          left: -11px;
-          bottom: -11px;
-        }
-        .pointFooter {
-          position: absolute;
-          left: -11px;
-          top: -11px;
-        }
-        .time {
-          height: 24px;
-          color: rgba(10, 87, 166, 1);
-          font-family: Microsoft YaHei;
-          font-size: 16px;
-          font-weight: 700;
-          line-height: 24px;
-          position: absolute;
-          bottom: -36px;
-          left: 0;
-        }
-        .timeFooter {
-          height: 24px;
-          color: rgba(10, 87, 166, 1);
-          font-family: Microsoft YaHei;
-          font-size: 16px;
-          font-weight: 700;
-          line-height: 24px;
-          position: absolute;
-          top: -36px;
-          left: 0;
-        }
-      }
-      .box1ItemFooter {
-        margin-top: 138px;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-      }
-    }
-    .box1-footer {
-      margin-left: 22px;
-      margin-top: 10px;
-      width: 1556px;
-      height: 64px;
-      box-sizing: border-box;
-      padding: 6px 12px;
-      display: flex;
-      border: 1px solid rgba(231, 243, 255, 1);
-      border-radius: 4px;
-      background: rgba(246, 251, 255, 1);
-      display: flex;
-      .box1-footer-left {
-        width: 19px;
-        height: 20px;
-        margin-top: 16px;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .box1-footer-center {
-        width: 1463px;
-        height: 48px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-top: 2px;
-        margin-left: 15px;
-        color: rgba(10, 87, 166, 1);
-        font-family: Microsoft YaHei;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 24px;
-      }
-      .box1-footer-right {
-        width: 24px;
-        height: 24px;
-        border-radius: 12px;
-        background: #e7f3ff;
-        margin-top: 14px;
-        margin-left: 13px;
-        img {
-          margin-left: 6px;
-          margin-top: 6px;
-          width: 12px;
-          height: 12px;
-        }
-      }
-    }
-  }
-  .box2 {
-    margin: 0 auto 10px;
-    width: 1600px;
-    height: 751px;
-    border-radius: 4px;
-    box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-    background: rgba(255, 255, 255, 1);
-    .box2-main {
-      display: flex;
-      margin-top: 5px;
-      .left {
-        margin-left: 21px;
-        width: 300px;
-        .left-item {
-          width: 300px;
-          height: 64px;
-          border-radius: 4px;
-          display: flex;
-          color: rgba(59, 65, 75, 1);
-          font-family: Microsoft YaHei;
-          font-size: 18px;
-          font-weight: 400;
-          cursor: pointer;
-          &:hover {
-            background: rgba(246, 250, 255, 1);
-          }
-          .time {
-            width: 45px;
-            height: 24px;
-            line-height: 24px;
-            margin-left: 18px;
-            margin-top: 20px;
-          }
-          .title {
-            margin-left: 17px;
-            margin-top: 17px;
-            height: 30px;
-            // color:  rgba(10, 87, 166, 1);
-            // font-family: Microsoft YaHei;
-            // font-size: 16px;
-            // font-weight: 700;
-            line-height: 30px;
-          }
-        }
-        .leftItemActive {
-          color: rgba(10, 87, 166, 1);
-          font-weight: 700;
-          background: rgba(246, 250, 255, 1);
-          &::after {
-            position: relative;
-            content: "";
-            width: 5px;
-            height: 48px;
-            background: rgba(10, 87, 166, 1);
-            right: -70px;
-            top: 8px;
-          }
-        }
-      }
-      .right {
-        margin-left: 36px;
-        .info-box {
-          margin-top: 25px;
-          margin-left: 28px;
-          width: 1180px;
-          height: 188px;
-          box-sizing: border-box;
-          border: 1px solid rgba(231, 243, 255, 1);
-          background: rgba(246, 250, 255, 1);
-          display: flex;
-          .info-left {
-            width: 97px;
-            height: 136px;
-            margin-top: 25px;
-            margin-left: 28px;
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-          .info-right {
-            margin-left: 35px;
-            margin-top: 22px;
-            .info-item {
-              display: flex;
-              height: 30px;
-              margin-bottom: 8px;
-              .item-left {
-                margin-top: 3px;
-                width: 100px;
-                height: 24px;
-                color: rgba(59, 65, 75, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 700;
-                line-height: 24px;
-              }
-              .item-right {
-                width: 899px;
-                height: 30px;
-                color: rgba(59, 65, 75, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 400;
-                line-height: 30px;
-              }
-              .item-right1 {
-                display: flex;
-                .item-right-text {
-                  height: 30px;
-                  color: rgba(10, 87, 166, 1);
-                  font-family: Microsoft YaHei;
-                  font-size: 16px;
-                  font-weight: 700;
-                  line-height: 30px;
-                }
-                .item-right-icon {
-                  margin-left: 13px;
-                  margin-top: 7px;
-                  width: 16px;
-                  height: 16px;
-                  img {
-                    width: 100%;
-                    height: 100%;
-                  }
-                }
-              }
-            }
-          }
-        }
-        .list-box {
-          margin-left: 36px;
-          .list-header {
-            display: flex;
-            height: 56px;
-            border-bottom: 1px solid rgba(234, 236, 238, 1);
-            .icon {
-              margin-top: 21px;
-              margin-left: 17px;
-              width: 19px;
-              height: 19px;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
-            .title {
-              margin-top: 16px;
-              margin-left: 16px;
-              height: 30px;
-              color: rgba(10, 87, 166, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 700;
-              line-height: 30px;
-            }
-          }
-          .list-main {
-            height: 400px;
-            overflow-x: hidden;
-            overflow-y: auto;
-            .list-item {
-              width: 1180px;
-              height: 54px;
-              box-sizing: border-box;
-              border-radius: 4px;
-              background: rgba(255, 255, 255, 1);
-              border-bottom: 1px solid rgba(234, 236, 238, 1);
-              display: flex;
-              .id {
-                width: 24px;
-                height: 24px;
-                margin-left: 15px;
-                margin-top: 15px;
-                border-radius: 12px;
-                background: #e7f3ff;
-                text-align: center;
-                line-height: 24px;
-                color: #0a57a6;
-              }
-              .title {
-                margin-left: 13px;
-                margin-top: 12px;
-                height: 30px;
-                width: 1100px;
-                color: rgba(59, 65, 75, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 400;
-                line-height: 30px;
-              }
-              .open {
-                width: 16px;
-                height: 16px;
-                margin-top: 20px;
-                img {
-                  width: 100%;
-                  height: 100%;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+	.box-header {
+		height: 56px;
+		display: flex;
+		position: relative;
+		.header-left {
+			margin-top: 20px;
+			width: 8px;
+			height: 16px;
+			border-radius: 0 4px 4px 0;
+			background: rgba(10, 87, 166, 1);
+		}
+		.title {
+			margin-left: 22px;
+			margin-top: 20px;
+			height: 16px;
+			line-height: 16px;
+			color: rgba(10, 87, 166, 1);
+			font-family: Microsoft YaHei;
+			font-size: 16px;
+			font-weight: 600;
+			line-height: 16px;
+		}
+		.header-btn-box {
+			position: absolute;
+			top: 14px;
+			right: 52px;
+			display: flex;
+			.btn {
+				margin-left: 8px;
+			}
+		}
+		.header-right {
+			position: absolute;
+			top: 14px;
+			right: 12px;
+			height: 28px;
+			display: flex;
+			gap: 4px;
+			.icon {
+				width: 28px;
+				height: 28px;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+	.box1 {
+		margin: 27px auto 16px;
+		width: 1600px;
+		height: 492px;
+		border-radius: 4px;
+		box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
+		background: rgba(255, 255, 255, 1);
+		.box1-main {
+			margin-top: 17px;
+			margin-left: 22px;
+			width: 1556px;
+			height: 330px;
+			overflow-x: auto;
+			overflow-y: hidden;
+			display: flex;
+			position: relative;
+			.box1-line-box {
+				position: absolute;
+				left: 0;
+				top: 135px;
+				height: 8px;
+				width: 1556px;
+				background: url("./assets/icons/line-bg.png") repeat;
+			}
+			.box1-item {
+				width: 315px;
+				height: 142px;
+				position: relative;
+				box-sizing: border-box;
+				padding-left: 20px;
+				margin-left: 10px;
+				border-left: 1px solid #0a57a6;
+				.box1-item-header {
+					display: flex;
+					width: 315px;
+					.title {
+						// width: 262px;
+						height: 26px;
+					}
+					.icon {
+						margin-left: 10px;
+						margin-top: 5px;
+						width: 16px;
+						height: 16px;
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+				.box1-item-content {
+					width: 288px;
+					min-height: 48px;
+					max-height: 96px;
+					color: rgba(95, 101, 108, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 400;
+					line-height: 24px;
+				}
+				.point {
+					position: absolute;
+					left: -11px;
+					bottom: -11px;
+				}
+				.pointFooter {
+					position: absolute;
+					left: -11px;
+					top: -11px;
+				}
+				.time {
+					height: 24px;
+					color: rgba(10, 87, 166, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 700;
+					line-height: 24px;
+					position: absolute;
+					bottom: -36px;
+					left: 0;
+				}
+				.timeFooter {
+					height: 24px;
+					color: rgba(10, 87, 166, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 700;
+					line-height: 24px;
+					position: absolute;
+					top: -36px;
+					left: 0;
+				}
+			}
+			.box1ItemFooter {
+				margin-top: 138px;
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-end;
+			}
+		}
+		.box1-footer {
+			margin-left: 22px;
+			margin-top: 10px;
+			width: 1556px;
+			height: 64px;
+			box-sizing: border-box;
+			padding: 6px 12px;
+			display: flex;
+			border: 1px solid rgba(231, 243, 255, 1);
+			border-radius: 4px;
+			background: rgba(246, 251, 255, 1);
+			display: flex;
+			.box1-footer-left {
+				width: 19px;
+				height: 20px;
+				margin-top: 16px;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.box1-footer-center {
+				width: 1463px;
+				height: 48px;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				margin-top: 2px;
+				margin-left: 15px;
+				color: rgba(10, 87, 166, 1);
+				font-family: Microsoft YaHei;
+				font-size: 16px;
+				font-weight: 400;
+				line-height: 24px;
+			}
+			.box1-footer-right {
+				width: 24px;
+				height: 24px;
+				border-radius: 12px;
+				background: #e7f3ff;
+				margin-top: 14px;
+				margin-left: 13px;
+				img {
+					margin-left: 6px;
+					margin-top: 6px;
+					width: 12px;
+					height: 12px;
+				}
+			}
+		}
+	}
+	.box2 {
+		margin: 16px auto;
+		width: 1600px;
+		height: 898px;
+		border-radius: 4px;
+		box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
+		background: rgba(255, 255, 255, 1);
+		.box2-main {
+			display: flex;
+			margin-top: 5px;
+			.left {
+				margin-left: 21px;
+				width: 300px;
+				.left-item {
+					width: 300px;
+					height: 64px;
+					border-radius: 4px;
+					display: flex;
+					color: rgba(59, 65, 75, 1);
+					font-family: Microsoft YaHei;
+					font-size: 18px;
+					font-weight: 400;
+					cursor: pointer;
+					&:hover {
+						background: rgba(246, 250, 255, 1);
+					}
+					.time {
+						width: 45px;
+						height: 24px;
+						line-height: 24px;
+						margin-left: 18px;
+						margin-top: 20px;
+					}
+					.title {
+						margin-left: 17px;
+						margin-top: 17px;
+						height: 30px;
+						// color:  rgba(10, 87, 166, 1);
+						// font-family: Microsoft YaHei;
+						// font-size: 16px;
+						// font-weight: 700;
+						line-height: 30px;
+					}
+				}
+				.leftItemActive {
+					color: rgba(10, 87, 166, 1);
+					font-weight: 700;
+					background: rgba(246, 250, 255, 1);
+					&::after {
+						position: relative;
+						content: "";
+						width: 5px;
+						height: 48px;
+						background: rgba(10, 87, 166, 1);
+						right: -70px;
+						top: 8px;
+					}
+				}
+			}
+			.right {
+				margin-left: 36px;
+				.info-box {
+					margin-left: 28px;
+					width: 1180px;
+					height: 188px;
+					box-sizing: border-box;
+					border: 1px solid rgba(231, 243, 255, 1);
+					background: rgba(246, 250, 255, 1);
+					display: flex;
+					.info-left {
+						width: 97px;
+						height: 136px;
+						margin-top: 25px;
+						margin-left: 28px;
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.info-right {
+						margin-left: 35px;
+						margin-top: 22px;
+						.info-item {
+							display: flex;
+							height: 30px;
+							margin-bottom: 8px;
+							.item-left {
+								margin-top: 3px;
+								width: 100px;
+								height: 24px;
+								color: rgba(59, 65, 75, 1);
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 700;
+								line-height: 24px;
+							}
+							.item-right {
+								width: 899px;
+								height: 30px;
+								color: rgba(59, 65, 75, 1);
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 30px;
+							}
+							.item-right1 {
+								display: flex;
+								.item-right-text {
+									height: 30px;
+									color: rgba(10, 87, 166, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 700;
+									line-height: 30px;
+								}
+								.item-right-icon {
+									margin-left: 13px;
+									margin-top: 7px;
+									width: 16px;
+									height: 16px;
+									img {
+										width: 100%;
+										height: 100%;
+									}
+								}
+							}
+						}
+					}
+				}
+				.list-box {
+					margin-left: 36px;
+					.list-header {
+						display: flex;
+						height: 56px;
+						border-bottom: 1px solid rgba(234, 236, 238, 1);
+						.icon {
+							margin-top: 21px;
+							margin-left: 17px;
+							width: 19px;
+							height: 19px;
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.title {
+							margin-top: 16px;
+							margin-left: 16px;
+							height: 30px;
+							color: rgba(10, 87, 166, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 700;
+							line-height: 30px;
+						}
+					}
+					.list-main {
+						height: 540px;
+						overflow-x: hidden;
+						overflow-y: auto;
+						.list-item {
+							width: 1180px;
+							height: 54px;
+							box-sizing: border-box;
+							border-radius: 4px;
+							background: rgba(255, 255, 255, 1);
+							border-bottom: 1px solid rgba(234, 236, 238, 1);
+							display: flex;
+							.id {
+								width: 24px;
+								height: 24px;
+								margin-left: 15px;
+								margin-top: 15px;
+								border-radius: 12px;
+								background: #e7f3ff;
+								text-align: center;
+								line-height: 24px;
+								color: #0a57a6;
+							}
+							.title {
+								margin-left: 13px;
+								margin-top: 12px;
+								height: 30px;
+								width: 1100px;
+								color: rgba(59, 65, 75, 1);
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 30px;
+							}
+							.open {
+								width: 16px;
+								height: 16px;
+								margin-top: 20px;
+								img {
+									width: 100%;
+									height: 100%;
+								}
+							}
+						}
+					}
+				}
+				.list-footer {
+          margin-left: 35px;
+					height: 32px;
+					margin-top: 10px;
+					display: flex;
+					justify-content: space-between;
+					.footer-left {
+						color: rgba(59, 65, 75, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 32px;
+					}
+				}
+			}
+		}
+	}
 }
 </style>
\ No newline at end of file

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

 <template>
-  <div class="introduction-wrap">
-    <div class="left">
-      <div class="box1">
-        <div class="box-header">
-          <div class="header-left"></div>
-          <div class="title">提出背景</div>
-          <div class="header-btn-box">
-            <div class="btn" @click="handleClickBox1Btn(1)">
-              <el-button type="primary" plain v-if="box1BtnActive === 1"
-                >涉华背景</el-button
-              >
-              <el-button type="info" plain v-else>涉华背景</el-button>
-            </div>
-            <div class="btn" @click="handleClickBox1Btn(2)">
-              <el-button type="primary" plain v-if="box1BtnActive === 2"
-                >全部背景</el-button
-              >
-              <el-button type="info" plain v-else>全部背景</el-button>
-            </div>
-          </div>
-          <div class="header-right">
-            <img src="../assets/icons/header-icon.png" alt="" />
-          </div>
-        </div>
-        <div class="box1-main">
-          <div
-            class="box1-item"
-            v-for="(item, index) in backgroundList"
-            :key="index"
-          >
-            <div class="id">{{ index + 1 }}</div>
-            <div class="title">{{ item.title }}</div>
-            <div class="open">
-              <img src="./assets/images/open-icon.png" alt="" />
-            </div>
-          </div>
-        </div>
-        <div class="box1-footer">
-          <div class="box1-footer-left">{{ "共计10条指令" }}</div>
-          <div class="box1-footer-right">
-            <el-pagination
-              :page-size="5"
-              background
-              layout="prev, pager, next"
-              :total="10"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="box2">
-        <div class="box-header">
-          <div class="header-left"></div>
-          <div class="title">相关事件</div>
-          <div class="header-right">
-            <img src="../assets/icons/header-icon.png" alt="" />
-          </div>
-        </div>
-        <div class="box2-main">
-          <div
-            class="box2-item"
-            v-for="(item, index) in relatedEvents"
-            :key="index"
-          >
-            <div class="item-left">
-              <img :src="item.image" alt="" />
-            </div>
-            <div class="item-center">
-              <div class="title">{{ item.title }}</div>
-              <div class="content">{{ item.content }}</div>
-            </div>
-            <div class="item-right">{{ item.time }}</div>
-          </div>
-        </div>
-        <div class="box2-footer">
-          <img src="./assets/images/more-icon.png" alt="" />
-        </div>
-      </div>
-    </div>
-    <div class="right">
-      <div class="box3">
-        <div class="box-header">
-          <div class="header-left"></div>
-          <div class="title">法律依据</div>
+	<div class="introduction-wrap">
+		<div class="left">
+			<div class="box1">
+				<div class="box-header">
+					<div class="header-left"></div>
+					<div class="title">提出背景</div>
+					<div class="header-btn-box">
+						<div class="btn" @click="handleClickBox1Btn(1)">
+							<el-button type="primary" plain v-if="box1BtnActive === 1">涉华背景</el-button>
+							<el-button type="info" plain v-else>涉华背景</el-button>
+						</div>
+						<div class="btn" @click="handleClickBox1Btn(2)">
+							<el-button type="primary" plain v-if="box1BtnActive === 2">全部背景</el-button>
+							<el-button type="info" plain v-else>全部背景</el-button>
+						</div>
+					</div>
+					<div class="header-right">
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon1.png" alt="" />
+						</div>
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon2.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box1-main">
+					<div class="box1-item" v-for="(item, index) in backgroundList" :key="index">
+						<div class="id">{{ index + 1 }}</div>
+						<div class="title">{{ item.title }}</div>
+						<div class="open">
+							<img src="./assets/images/open-icon.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box1-footer">
+					<div class="box1-footer-left">{{ "共计10条指令" }}</div>
+					<div class="box1-footer-right">
+						<el-pagination :page-size="5" background layout="prev, pager, next" :total="10" />
+					</div>
+				</div>
+			</div>
+			<div class="box2">
+				<div class="box-header">
+					<div class="header-left"></div>
+					<div class="title">相关事件</div>
+					<div class="header-right">
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon1.png" alt="" />
+						</div>
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon2.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box2-main">
+					<div class="box2-item" v-for="(item, index) in relatedEvents" :key="index">
+						<div class="item-left">
+							<img :src="item.image" alt="" />
+						</div>
+						<div class="item-center">
+							<div class="title">{{ item.title }}</div>
+							<div class="content">{{ item.content }}</div>
+						</div>
+						<div class="item-right">{{ item.time }}</div>
+					</div>
+				</div>
+				<div class="box2-footer">
+					<img src="./assets/images/more-icon.png" alt="" />
+				</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="box3">
+				<div class="box-header">
+					<div class="header-left"></div>
+					<div class="title">法律依据</div>
 
-          <div class="header-right">
-            <img src="../assets/icons/header-icon.png" alt="" />
-          </div>
-        </div>
-        <div class="box3-main">
-          <div class="box3-item" v-for="(item, index) in laws" :key="index">
-            <div class="id">{{ index + 1 }}</div>
-            <div class="item-header">
-              <div class="name">{{ item.name }}</div>
-              <div class="info">{{ item.info }}</div>
-            </div>
-            <div class="item-content">{{ item.content }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+					<div class="header-right">
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon1.png" alt="" />
+						</div>
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon2.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box3-main">
+					<div class="box3-item" v-for="(item, index) in laws" :key="index">
+						<div class="id">{{ index + 1 }}</div>
+						<div class="item-header">
+							<div class="name">{{ item.name }}</div>
+							<div class="info">{{ item.info }}</div>
+						</div>
+						<div class="item-content">{{ item.content }}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script setup>
@@ -114,351 +112,349 @@ import Img5 from "./assets/images/box2-img5.png";
 const box1BtnActive = ref(1);
 
 const backgroundList = ref([
-  {
-    title:
-      "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术",
-  },
-  {
-    title:
-      "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用",
-  },
-  {
-    title: "要求加强与盟友的关系并确保我们持续的技术主导地位",
-  },
-  {
-    title:
-      "计划通过支持美国原产人工智能技术的全球部署，以维护和扩大美国在人工智能领域的领导地位",
-  },
-  {
-    title: "目的为减少国际社会对由中国开发的人工智能技术的依赖",
-  },
+	{
+		title: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
+	},
+	{
+		title: "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用"
+	},
+	{
+		title: "要求加强与盟友的关系并确保我们持续的技术主导地位"
+	},
+	{
+		title: "计划通过支持美国原产人工智能技术的全球部署，以维护和扩大美国在人工智能领域的领导地位"
+	},
+	{
+		title: "目的为减少国际社会对由中国开发的人工智能技术的依赖"
+	}
 ]);
 
 const relatedEvents = ref([
-  {
-    image: Img1,
-    title: "中美AI模型性能差距迅速缩小",
-    content:
-      "斯坦福大学《2025年人工智能指数报告》显示，中美顶尖AI模型在MMLU（大规模多任务语言理解）等主流基准测试中的性能...",
-    time: "2025-08-30",
-  },
-  {
-    image: Img2,
-    title: "中国模型以更低成本实现高性能",
-    content:
-      "2025年1月，中国公司深度求索（DeepSeek）发布高性能AI推理模型R1，以其极低的训练成本和媲美顶级模型的推理能力受...",
-    time: "2025-05-16",
-  },
-  {
-    image: Img3,
-    title: "美国发布《赢得AI竞赛：美国AI行动计划》​",
-    content:
-      "特朗普政府发布该计划，核心包括加速创新​（解除监管）、建设AI基础设施​（加速数据中心审批、保障能源供应）和引领国际...",
-    time: "2025-07-23",
-  },
-  {
-    image: Img4,
-    title: "中国深入推进“人工智能+”行动",
-    content:
-      "中国国务院常务会议审议通过《关于深入实施“人工智能+”行动的意见》，大力推进AI在各领域的规模化商业化应用和和深...",
-    time: "2025-07-31",
-  },
-  {
-    image: Img5,
-    title: "美国对华AI芯片出口管制持续升级",
-    content:
-      "美国商务部宣布撤销拜登时期的《AI扩散规则》，要求全球使用美国技术的芯片厂商停止向中国出口AI芯片，直接影响英伟达...",
-    time: "2025-05-20",
-  },
+	{
+		image: Img1,
+		title: "中美AI模型性能差距迅速缩小",
+		content:
+			"斯坦福大学《2025年人工智能指数报告》显示，中美顶尖AI模型在MMLU（大规模多任务语言理解）等主流基准测试中的性能...",
+		time: "2025-08-30"
+	},
+	{
+		image: Img2,
+		title: "中国模型以更低成本实现高性能",
+		content: "2025年1月，中国公司深度求索（DeepSeek）发布高性能AI推理模型R1，以其极低的训练成本和媲美顶级模型的推理能力受...",
+		time: "2025-05-16"
+	},
+	{
+		image: Img3,
+		title: "美国发布《赢得AI竞赛：美国AI行动计划》​",
+		content:
+			"特朗普政府发布该计划，核心包括加速创新​（解除监管）、建设AI基础设施​（加速数据中心审批、保障能源供应）和引领国际...",
+		time: "2025-07-23"
+	},
+	{
+		image: Img4,
+		title: "中国深入推进“人工智能+”行动",
+		content: "中国国务院常务会议审议通过《关于深入实施“人工智能+”行动的意见》，大力推进AI在各领域的规模化商业化应用和和深...",
+		time: "2025-07-31"
+	},
+	{
+		image: Img5,
+		title: "美国对华AI芯片出口管制持续升级",
+		content:
+			"美国商务部宣布撤销拜登时期的《AI扩散规则》，要求全球使用美国技术的芯片厂商停止向中国出口AI芯片，直接影响英伟达...",
+		time: "2025-05-20"
+	}
 ]);
 
 const laws = ref([
-  {
-    name: "《美国法典》",
-    info: "第3编第301条",
-    content:
-      "允许总统通过行政命令（Executive Order）​​ 或其它书面形式授权行政部门或机构的负责人​（如国务卿、财政部长等）代行本属于总统的法定职能（由国会立法授予总统的职能）。",
-  },
-  {
-    name: "《出口管制改革法案》",
-    info: "",
-    content:
-      "该法案授权政府出于国家安全和外交政策目的对特定技术、商品和软件的出口进行管制。确保AI技术不流向“对手国家”是其题中应有之义。",
-  },
-  {
-    name: "《国际紧急经济权力法》",
-    info: "",
-    content:
-      "授予总统在应对“不寻常且极其严重的威胁”时，监管商业和金融交易的广泛权力，包括实施出口管制。这在以往的贸易和科技管制中常被引用。",
-  },
-  {
-    name: "《2019年通过外交捍卫美国商业法》",
-    info: "第708(c)(3)条",
-    content:
-      "授权小企业管理局局长和OSTP主任任命其各自行政部门和机构的高级官员担任EDAG成员。",
-  },
-  {
-    name: "《关于安全、可靠和可信地开发和使用人工智能的行政命令》",
-    info: "",
-    content:
-      "要求强大AI系统的开发者与政府共享安全测试结果，并为AI安全、隐私保护、公平权利及创新竞争等方面制定标准。",
-  },
+	{
+		name: "《美国法典》",
+		info: "第3编第301条",
+		content:
+			"允许总统通过行政命令（Executive Order）​​ 或其它书面形式授权行政部门或机构的负责人​（如国务卿、财政部长等）代行本属于总统的法定职能（由国会立法授予总统的职能）。"
+	},
+	{
+		name: "《出口管制改革法案》",
+		info: "",
+		content:
+			"该法案授权政府出于国家安全和外交政策目的对特定技术、商品和软件的出口进行管制。确保AI技术不流向“对手国家”是其题中应有之义。"
+	},
+	{
+		name: "《国际紧急经济权力法》",
+		info: "",
+		content:
+			"授予总统在应对“不寻常且极其严重的威胁”时，监管商业和金融交易的广泛权力，包括实施出口管制。这在以往的贸易和科技管制中常被引用。"
+	},
+	{
+		name: "《2019年通过外交捍卫美国商业法》",
+		info: "第708(c)(3)条",
+		content: "授权小企业管理局局长和OSTP主任任命其各自行政部门和机构的高级官员担任EDAG成员。"
+	},
+	{
+		name: "《关于安全、可靠和可信地开发和使用人工智能的行政命令》",
+		info: "",
+		content: "要求强大AI系统的开发者与政府共享安全测试结果，并为AI安全、隐私保护、公平权利及创新竞争等方面制定标准。"
+	}
 ]);
 </script>
 
 <style lang="scss" scoped>
 .introduction-wrap {
-  display: flex;
-  .box-header {
-    height: 56px;
-    display: flex;
-    position: relative;
-    .header-left {
-      margin-top: 20px;
-      width: 8px;
-      height: 16px;
-      border-radius: 0 4px 4px 0;
-      background: rgba(10, 87, 166, 1);
-    }
-    .title {
-      margin-left: 22px;
-      margin-top: 20px;
-      height: 16px;
-      line-height: 16px;
-      color: rgba(10, 87, 166, 1);
-      font-family: Microsoft YaHei;
-      font-size: 16px;
-      font-weight: 600;
-      line-height: 16px;
-    }
-    .header-btn-box {
-      position: absolute;
-      top: 14px;
-      right: 52px;
-      display: flex;
-      .btn {
-        margin-left: 8px;
-      }
-    }
-    .header-right {
-      position: absolute;
-      top: 14px;
-      right: 12px;
-      width: 32px;
-      height: 32px;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  .left {
-    width: 1150px;
-    .box1 {
-      margin-top: 16px;
-      width: 1150px;
-      height: 414px;
-      border-radius: 4px;
-      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-      background: rgba(255, 255, 255, 1);
-      .box1-main {
-        margin-left: 22px;
-        height: 280px;
-        .box1-item {
-          width: 1101px;
-          height: 48px;
-          margin-bottom: 8px;
-          box-sizing: border-box;
-          border: 1px solid rgba(234, 236, 238, 1);
-          border-radius: 2px;
-          background: rgba(255, 255, 255, 1);
-          display: flex;
-          .id {
-            margin-top: 12px;
-            margin-left: 15px;
-            width: 24px;
-            height: 24px;
-            text-align: center;
-            line-height: 24px;
-            border-radius: 12px;
-            background: #e7f3ff;
-            color: #0a57a6;
-          }
-          .title {
-            width: 1000px;
-            line-height: 48px;
-            margin-left: 13px;
-          }
-          .open {
-            width: 16px;
-            height: 16px;
-            margin-top: 16px;
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-      }
-      .box1-footer {
-        margin: 20px 22px;
-        display: flex;
-        justify-content: space-between;
-        .box1-footer-left {
-          height: 20px;
-          color: rgba(132, 136, 142, 1);
-          font-family: Microsoft YaHei;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 20px;
-        }
-      }
-    }
-    .box2 {
-      margin-top: 16px;
-      width: 1150px;
-      height: 415px;
-      border-radius: 4px;
-      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-      background: rgba(255, 255, 255, 1);
-      .box2-main {
-        margin-top: 3px;
-        margin-left: 31px;
-        height: 310px;
-        width: 1090px;
-        .box2-item {
-          display: flex;
-          height: 60px;
-          margin-bottom: 2px;
-          .item-left {
-            width: 64px;
-            height: 48px;
-            border-radius: 2px;
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-          .item-center {
-            width: 892px;
-            margin-left: 14px;
-            .title {
-              height: 30px;
-              color: rgba(59, 65, 75, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 700;
-              line-height: 30px;
-              margin-top: -5px;
-            }
-            .content {
-              height: 30px;
-              color: rgba(59, 65, 75, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 400;
-              line-height: 30px;
-            }
-          }
-          .item-right {
-            margin-top: 19px;
-            margin-left: 30px;
-            height: 22px;
-            color: rgba(95, 101, 108, 1);
-            font-family: Microsoft YaHei;
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 22px;
-          }
-        }
-      }
-      .box2-footer {
-        margin: 5px auto 0;
-        width: 108px;
-        height: 32px;
-        cursor: pointer;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-  .right {
-    margin-left: 16px;
-    .box3 {
-      margin-top: 16px;
-      width: 576px;
-      height: 845px;
-      border-radius: 4px;
-      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-      background: rgba(255, 255, 255, 1);
-      .box3-main {
-        margin-top: 9px;
-        width: 520px;
-        height: 720px;
-        overflow-y: auto;
-        .box3-item {
-          margin-bottom: 24px;
-          position: relative;
-          .id {
-            width: 24px;
-            height: 24px;
-            position: absolute;
-            left: 28px;
-            top: 1px;
-            z-index: 99;
-            text-align: center;
-            line-height: 24px;
-            margin-top: 5px;
-            border-radius: 12px;
-            background: #e7f3ff;
-            color: #0a57a6;
-          }
-          .item-header {
-            width: 460px;
-            height: 35px;
-            display: flex;
-            justify-content: space-between;
-            margin-left: 60px;
-            .name {
-              max-width: 460px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              height: 24px;
-              margin-top: 5px;
-              color: rgba(59, 65, 75, 1);
-              font-family: Microsoft YaHei;
-              font-size: 18px;
-              font-weight: 700;
-              line-height: 24px;
-            }
-            .info {
-              text-align: right;
-              margin-left: 10px;
-              height: 24px;
-              margin-top: 5px;
-              color: rgba(95, 101, 108, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 400;
-              line-height: 24px;
-            }
-          }
-          .item-content {
-            margin-left: 66px;
-            border-top: 1px solid rgba(234, 236, 238, 1);
-            padding-top: 3px;
-            color: rgba(95, 101, 108, 1);
-            font-family: Microsoft YaHei;
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 30px;
-          }
-        }
-      }
-    }
-  }
+	display: flex;
+	.box-header {
+		height: 56px;
+		display: flex;
+		position: relative;
+		.header-left {
+			margin-top: 20px;
+			width: 8px;
+			height: 16px;
+			border-radius: 0 4px 4px 0;
+			background: rgba(10, 87, 166, 1);
+		}
+		.title {
+			margin-left: 22px;
+			margin-top: 20px;
+			height: 16px;
+			line-height: 16px;
+			color: rgba(10, 87, 166, 1);
+			font-family: Microsoft YaHei;
+			font-size: 16px;
+			font-weight: 600;
+			line-height: 16px;
+		}
+		.header-btn-box {
+			position: absolute;
+			top: 14px;
+			right: 84px;
+			display: flex;
+			.btn {
+				margin-left: 8px;
+			}
+		}
+		.header-right {
+			position: absolute;
+			top: 14px;
+			right: 12px;
+			height: 28px;
+			display: flex;
+			gap: 4px;
+			.icon {
+				width: 28px;
+				height: 28px;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+	.left {
+		width: 1150px;
+		.box1 {
+			margin-top: 16px;
+			width: 1150px;
+			height: 414px;
+			border-radius: 4px;
+			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
+			background: rgba(255, 255, 255, 1);
+			.box1-main {
+				margin-left: 22px;
+				height: 280px;
+				.box1-item {
+					width: 1101px;
+					height: 48px;
+					margin-bottom: 8px;
+					box-sizing: border-box;
+					border: 1px solid rgba(234, 236, 238, 1);
+					border-radius: 2px;
+					background: rgba(255, 255, 255, 1);
+					display: flex;
+					.id {
+						margin-top: 12px;
+						margin-left: 15px;
+						width: 24px;
+						height: 24px;
+						text-align: center;
+						line-height: 24px;
+						border-radius: 12px;
+						background: #e7f3ff;
+						color: #0a57a6;
+					}
+					.title {
+						width: 1000px;
+						line-height: 48px;
+						margin-left: 13px;
+					}
+					.open {
+						width: 16px;
+						height: 16px;
+						margin-top: 16px;
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+			}
+			.box1-footer {
+				margin: 20px 22px;
+				display: flex;
+				justify-content: space-between;
+				.box1-footer-left {
+					height: 20px;
+					color: rgba(132, 136, 142, 1);
+					font-family: Microsoft YaHei;
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 20px;
+				}
+			}
+		}
+		.box2 {
+			margin-top: 16px;
+			width: 1150px;
+			height: 415px;
+			border-radius: 4px;
+			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
+			background: rgba(255, 255, 255, 1);
+			.box2-main {
+				margin-top: 3px;
+				margin-left: 31px;
+				height: 310px;
+				width: 1090px;
+				.box2-item {
+					display: flex;
+					height: 60px;
+					margin-bottom: 2px;
+					.item-left {
+						width: 64px;
+						height: 48px;
+						border-radius: 2px;
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.item-center {
+						width: 892px;
+						margin-left: 14px;
+						.title {
+							height: 30px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 700;
+							line-height: 30px;
+							margin-top: -5px;
+						}
+						.content {
+							height: 30px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 30px;
+						}
+					}
+					.item-right {
+						margin-top: 19px;
+						margin-left: 30px;
+						height: 22px;
+						color: rgba(95, 101, 108, 1);
+						font-family: Microsoft YaHei;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 22px;
+					}
+				}
+			}
+			.box2-footer {
+				margin: 5px auto 0;
+				width: 108px;
+				height: 32px;
+				cursor: pointer;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+	.right {
+		margin-left: 16px;
+		.box3 {
+			margin-top: 16px;
+			width: 576px;
+			height: 845px;
+			border-radius: 4px;
+			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
+			background: rgba(255, 255, 255, 1);
+			.box3-main {
+				margin-top: 9px;
+				width: 520px;
+				height: 720px;
+				overflow-y: auto;
+				.box3-item {
+					margin-bottom: 24px;
+					position: relative;
+					.id {
+						width: 24px;
+						height: 24px;
+						position: absolute;
+						left: 28px;
+						top: 1px;
+						z-index: 99;
+						text-align: center;
+						line-height: 24px;
+						margin-top: 5px;
+						border-radius: 12px;
+						background: #e7f3ff;
+						color: #0a57a6;
+					}
+					.item-header {
+						width: 460px;
+						height: 35px;
+						display: flex;
+						justify-content: space-between;
+						margin-left: 60px;
+						.name {
+							max-width: 460px;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+							height: 24px;
+							margin-top: 5px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-size: 18px;
+							font-weight: 700;
+							line-height: 24px;
+						}
+						.info {
+							text-align: right;
+							margin-left: 10px;
+							height: 24px;
+							margin-top: 5px;
+							color: rgba(95, 101, 108, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 24px;
+						}
+					}
+					.item-content {
+						margin-left: 66px;
+						border-top: 1px solid rgba(234, 236, 238, 1);
+						padding-top: 3px;
+						color: rgba(95, 101, 108, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 30px;
+					}
+				}
+			}
+		}
+	}
 }
 </style>
\ No newline at end of file

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

 <template>
-  <div class="introduction-wrap">
-    <div class="left">
-      <div class="box1">
-        <div class="box-header">
-          <div class="header-left"></div>
-          <div class="title">基本信息</div>
+	<div class="introduction-wrap">
+		<div class="left">
+			<div class="box1">
+				<div class="box-header">
+					<div class="header-left"></div>
+					<div class="title">基本信息</div>
 
-          <div class="header-right">
-            <img src="../assets/icons/header-icon.png" alt="" />
-          </div>
-        </div>
-        <div class="box1-main">
-          <div class="box1-main-left">
-            <img src="./assets/images/box1-img.png" alt="" />
-          </div>
-          <div class="box1-main-right">
-            <div class="item">
-              <div class="item-left">{{ "政令全称：" }}</div>
-              <div class="item-right">{{ "推动美国人工智能技术栈出口" }}</div>
-            </div>
-            <div class="item">
-              <div class="item-left">{{ "英文全称：" }}</div>
-              <div class="item-right text">
-                {{ "Promoting the Export of the American AI Technology Stack" }}
-              </div>
-            </div>
-            <div class="item">
-              <div class="item-left">{{ "相关领域：" }}</div>
-              <div class="item-right tag-box">
-                <div class="tag" v-for="(area, index) in areaList" :key="index">
-                  {{ area }}
-                </div>
-              </div>
-            </div>
-            <div class="item">
-              <div class="item-left">{{ "签署时间：" }}</div>
-              <div class="item-right text">{{ "2025年7月23日" }}</div>
-            </div>
-            <div class="item">
-              <div class="item-left">{{ "签署总统：" }}</div>
-              <div class="item-right text">
-                {{ "唐纳德·约翰·特朗普(Donald John Trump)" }}
-              </div>
-            </div>
-            <div class="item">
-              <div class="item-left">{{ "政令编号：" }}</div>
-              <div class="item-right text">
-                {{ "第14320号行政命令 (EO 14320)" }}
-              </div>
-            </div>
-            <div class="item">
-              <div class="item-left">{{ "执行期限：" }}</div>
-              <div class="item-right text">
-                {{ "签署后90天内建立机制并开始实施" }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="box2">
-        <div class="box-header">
-          <div class="header-left"></div>
-          <div class="title">主要指令</div>
-          <div class="header-right">
-            <img src="../assets/icons/header-icon.png" alt="" />
-          </div>
-        </div>
-        <div class="box2-main">
-          <div
-            class="box2-item"
-            v-for="(item, index) in majorList"
-            :key="index"
-          >
-            <div class="id">{{ index + 1 }}</div>
-            <div class="title">{{ item.title }}</div>
-            <div class="open">
-              <img src="./assets/images/open-icon.png" alt="" />
-            </div>
-          </div>
-        </div>
-        <div class="box2-footer">
-          <div class="box2-footer-left">{{ "共计10条指令" }}</div>
-          <div class="box2-footer-right">
-            <el-pagination
-              :page-size="5"
-              background
-              layout="prev, pager, next"
-              :total="10"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="right">
-      <div class="box3">
-        <div class="box-header">
-          <div class="header-left"></div>
-          <div class="title">立法背景</div>
-          <div class="header-btn-box">
-            <div class="btn" @click="handleClickBox1Btn(1)">
-              <el-button type="primary" plain v-if="box1BtnActive === 1"
-                >商务部</el-button
-              >
-              <el-button type="info" plain v-else>商务部</el-button>
-            </div>
-            <div class="btn" @click="handleClickBox1Btn(2)">
-              <el-button type="primary" plain v-if="box1BtnActive === 2"
-                >经济外交行动组</el-button
-              >
-              <el-button type="info" plain v-else>经济外交行动组</el-button>
-            </div>
-          </div>
-          <div class="header-right">
-            <img src="../assets/icons/header-icon.png" alt="" />
-          </div>
-        </div>
-        <div class="box3-top">
-          <div class="box3-top-left">
-            <img src="./assets/images/box3-img.png" alt="" />
-          </div>
-          <div class="box3-top-right">
-            <div class="box3-top-right-header">
-              <div class="header-left">{{ "美国商务部" }}</div>
-              <div class="header-right">
-                <img src="./assets/images/open-icon.png" alt="" />
-              </div>
-            </div>
-            <div class="box3-top-right-main">
-              <div class="main-item">
-                <div class="item-left">{{ "英文名:" }}</div>
-                <div class="item-right">
-                  {{ "United States Department of Commerce" }}
-                </div>
-              </div>
-              <div class="main-item">
-                <div class="item-left">{{ "成立时间:" }}</div>
-                <div class="item-right">{{ "1903年2月14日" }}</div>
-              </div>
-              <div class="main-item">
-                <div class="item-left">{{ "主要职责:" }}</div>
-                <div class="item-right">
-                  {{ "国际贸易、进出口管制（R-TX-19）" }}
-                </div>
-              </div>
-              <div class="main-item">
-                <div class="item-left">{{ "总部地址:" }}</div>
-                <div class="item-right">
-                  {{ "华盛顿宪法大道1401号胡佛大楼" }}
-                </div>
-              </div>
-              <div class="main-item">
-                <div class="item-left">{{ "部长:" }}</div>
-                <div class="item-right">{{ "霍华德·卢特尼克" }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="box3-bottom">
-          <div class="box3-bottom-header">
-            <div class="header-icon">
-              <img src="./assets/images/box3-bottom-header-icon.png" alt="">
-            </div>
-            <div class="header-title">{{ '机构动态' }}</div>
-          </div>
-          <div class="box3-bottom-main">
-                        <el-timeline style="max-width: 500px">
-              <el-timeline-item
-                :timestamp="item.time"
-                placement="top"
-                v-for="(item, index) in eventList"
-                :key="index"
-              >
-                <div class="timeline-content">
-                  {{ item.content }}
-                </div>
-              </el-timeline-item>
-            </el-timeline>
-          </div>
-          <div class="box3-bottom-footer">
-            <img src="./assets/images/more-icon.png" alt="">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+					<div class="header-right">
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon1.png" alt="" />
+						</div>
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon2.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box1-main">
+					<div class="box1-main-left">
+						<img src="./assets/images/box1-img.png" alt="" />
+					</div>
+					<div class="box1-main-right">
+						<div class="item">
+							<div class="item-left">{{ "政令全称：" }}</div>
+							<div class="item-right">{{ "推动美国人工智能技术栈出口" }}</div>
+						</div>
+						<div class="item">
+							<div class="item-left">{{ "英文全称：" }}</div>
+							<div class="item-right text">
+								{{ "Promoting the Export of the American AI Technology Stack" }}
+							</div>
+						</div>
+						<div class="item">
+							<div class="item-left">{{ "相关领域：" }}</div>
+							<div class="item-right tag-box">
+								<div class="tag" v-for="(area, index) in areaList" :key="index">
+									{{ area }}
+								</div>
+							</div>
+						</div>
+						<div class="item">
+							<div class="item-left">{{ "签署时间：" }}</div>
+							<div class="item-right text">{{ "2025年7月23日" }}</div>
+						</div>
+						<div class="item">
+							<div class="item-left">{{ "签署总统：" }}</div>
+							<div class="item-right text">
+								{{ "唐纳德·约翰·特朗普(Donald John Trump)" }}
+							</div>
+						</div>
+						<div class="item">
+							<div class="item-left">{{ "政令编号：" }}</div>
+							<div class="item-right text">
+								{{ "第14320号行政命令 (EO 14320)" }}
+							</div>
+						</div>
+						<div class="item">
+							<div class="item-left">{{ "执行期限：" }}</div>
+							<div class="item-right text">
+								{{ "签署后90天内建立机制并开始实施" }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="box2">
+				<div class="box-header">
+					<div class="header-left"></div>
+					<div class="title">主要指令</div>
+					<div class="header-right">
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon1.png" alt="" />
+						</div>
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon2.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box2-main">
+					<div class="box2-item" v-for="(item, index) in majorList" :key="index">
+						<div class="id">{{ index + 1 }}</div>
+						<div class="title">{{ item.title }}</div>
+						<div class="open">
+							<img src="./assets/images/open-icon.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box2-footer">
+					<div class="box2-footer-left">{{ "共计10条指令" }}</div>
+					<div class="box2-footer-right">
+						<el-pagination :page-size="5" background layout="prev, pager, next" :total="10" />
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="box3">
+				<div class="box-header">
+					<div class="header-left"></div>
+					<div class="title">执行机构</div>
+					<div class="header-btn-box">
+						<div class="btn" @click="handleClickBox1Btn(1)">
+							<el-button type="primary" plain v-if="box1BtnActive === 1">商务部</el-button>
+							<el-button type="info" plain v-else>商务部</el-button>
+						</div>
+						<div class="btn" @click="handleClickBox1Btn(2)">
+							<el-button type="primary" plain v-if="box1BtnActive === 2">经济外交行动组</el-button>
+							<el-button type="info" plain v-else>经济外交行动组</el-button>
+						</div>
+					</div>
+					<div class="header-right">
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon1.png" alt="" />
+						</div>
+						<div class="icon">
+							<img src="../assets/icons/header-right-icon2.png" alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="box3-top">
+					<div class="box3-top-top">
+						<div class="left">
+							<img src="./assets/images/box3-img.png" alt="" />
+						</div>
+						<div class="right">
+							<div class="name">{{ "美国商务部" }}</div>
+							<div class="ename">{{ "United States Department of Commerce" }}</div>
+						</div>
+						<div class="more">
+							<div class="text">{{ "查看官网" }}</div>
+							<div class="icon">
+								<img src="./assets/images/open-icon.png" alt="" />
+							</div>
+						</div>
+					</div>
+					<div class="box3-top-bottom">
+						<div class="box3-top-right-main">
+							<div class="main-item">
+								<div class="item-icon"></div>
+								<div class="item-left">{{ "成立时间:" }}</div>
+								<div class="item-right">{{ "1903年2月14日" }}</div>
+							</div>
+							<div class="main-item">
+								<div class="item-icon"></div>
+								<div class="item-left">{{ "主要职责:" }}</div>
+								<div class="item-right">
+									{{ "国际贸易、进出口管制（R-TX-19）" }}
+								</div>
+							</div>
+							<div class="main-item">
+								<div class="item-icon"></div>
+								<div class="item-left">{{ "总部地址:" }}</div>
+								<div class="item-right">
+									{{ "华盛顿宪法大道1401号胡佛大楼" }}
+								</div>
+							</div>
+							<div class="main-item">
+								<div class="item-icon"></div>
+								<div class="item-left">{{ "部长:" }}</div>
+								<div class="item-right">{{ "霍华德·卢特尼克" }}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="box3-bottom">
+					<div class="box3-bottom-header">
+						<div class="header-icon">
+							<img src="./assets/images/box3-bottom-header-icon.png" alt="" />
+						</div>
+						<div class="header-title">{{ "机构动态" }}</div>
+					</div>
+					<div class="box3-bottom-main">
+						<el-timeline style="max-width: 500px">
+							<el-timeline-item
+								:timestamp="item.time"
+								placement="top"
+								v-for="(item, index) in eventList"
+								:key="index"
+							>
+								<div class="timeline-content">
+									{{ item.content }}
+								</div>
+							</el-timeline-item>
+						</el-timeline>
+					</div>
+					<div class="box3-bottom-footer">
+						<img src="./assets/images/more-icon.png" alt="" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
 const box1BtnActive = ref(1);
 
-const areaList = ref([
-  "人工智能",
-  "出口管制",
-  "半导体产业",
-  "关税",
-  "光伏产业",
-]);
+const areaList = ref(["人工智能", "出口管制", "半导体产业", "关税", "光伏产业"]);
 
 const majorList = ref([
-  {
-    title: '要求商务部在90天内建立"全栈式"美国AI出口机制。',
-  },
-  {
-    title: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。',
-  },
-  {
-    title:
-      '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。',
-  },
-  {
-    title:
-      "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。",
-  },
-  {
-    title: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。',
-  },
+	{
+		title: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
+	},
+	{
+		title: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
+	},
+	{
+		title: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
+	},
+	{
+		title: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
+	},
+	{
+		title: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
+	}
 ]);
 
 // 人物动态
 const eventList = ref([
-  {
-    time: '2025-07-31',
-    content: '美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。'
-  },
-  {
-    time: '2025-07-25',
-    content: '美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。'
-  },
-  {
-    time: '2025-07-21',
-    content: '美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口'
-  },
-  {
-    time: '2025-07-12',
-    content: '美商务部发起第三次反倾销和反补贴日落复审调查。'
-  }
+	{
+		time: "2025-07-31",
+		content:
+			"美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
+	},
+	{
+		time: "2025-07-25",
+		content:
+			"美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
+	},
+	{
+		time: "2025-07-21",
+		content:
+			"美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
+	},
+	{
+		time: "2025-07-12",
+		content: "美商务部发起第三次反倾销和反补贴日落复审调查。"
+	}
 ]);
-
-
 </script>
 
 <style lang="scss" scoped>
 .introduction-wrap {
-  display: flex;
-  .box-header {
-    height: 56px;
-    display: flex;
-    position: relative;
-    .header-left {
-      margin-top: 20px;
-      width: 8px;
-      height: 16px;
-      border-radius: 0 4px 4px 0;
-      background: rgba(10, 87, 166, 1);
-    }
-    .title {
-      margin-left: 22px;
-      margin-top: 20px;
-      height: 16px;
-      line-height: 16px;
-      color: rgba(10, 87, 166, 1);
-      font-family: Microsoft YaHei;
-      font-size: 16px;
-      font-weight: 600;
-      line-height: 16px;
-    }
-    .header-btn-box {
-      position: absolute;
-      top: 14px;
-      right: 52px;
-      display: flex;
-      .btn {
-        margin-left: 8px;
-      }
-    }
-    .header-right {
-      position: absolute;
-      top: 14px;
-      right: 12px;
-      width: 32px;
-      height: 32px;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  .left {
-    width: 1150px;
-    .box1 {
-      margin-top: 16px;
-      width: 1150px;
-      height: 414px;
-      border-radius: 4px;
-      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: 235px;
-          height: 332px;
-          margin-left: 42px;
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-        .box1-main-right {
-          margin-left: 40px;
-          color: rgba(59, 65, 75, 1);
-          font-family: Microsoft YaHei;
-          font-size: 16px;
-          font-weight: 700;
-          line-height: 24px;
-          .item {
-            height: 30px;
-            display: flex;
-            margin-bottom: 17px;
-            .item-left {
-              width: 100px;
-            }
-            .tag-box {
-              display: flex;
-              .tag {
-                color: rgba(22, 119, 255, 1);
-                font-family: Microsoft YaHei;
-                font-size: 14px;
-                font-weight: 400;
-                // line-height: 20px;
-                box-sizing: border-box;
-                border: 1px solid rgba(186, 224, 255, 1);
-                border-radius: 4px;
-                background: rgba(230, 244, 255, 1);
-                padding: 1px 8px;
-                margin-right: 8px;
-              }
-            }
-            .text {
-              font-weight: normal !important;
-            }
-          }
-        }
-      }
-    }
-    .box2 {
-      margin-top: 16px;
-      width: 1150px;
-      height: 415px;
-      border-radius: 4px;
-      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;
-        .box2-item {
-          width: 1101px;
-          height: 48px;
-          margin-bottom: 8px;
-          box-sizing: border-box;
-          border: 1px solid rgba(234, 236, 238, 1);
-          border-radius: 2px;
-          background: rgba(255, 255, 255, 1);
-          display: flex;
-          &:nth-child(2n-1) {
-            background: rgba(247, 248, 249, 1);
-          }
-          .id {
-            margin-top: 12px;
-            margin-left: 15px;
-            width: 24px;
-            height: 24px;
-            text-align: center;
-            line-height: 24px;
-            border-radius: 12px;
-            background: #e7f3ff;
-            color: #0a57a6;
-          }
-          .title {
-            width: 1000px;
-            line-height: 48px;
-            margin-left: 13px;
-          }
-          .open {
-            width: 16px;
-            height: 16px;
-            margin-top: 16px;
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-      }
-      .box2-footer {
-        margin: 20px 22px;
-        display: flex;
-        justify-content: space-between;
-        .box2-footer-left {
-          height: 20px;
-          color: rgba(132, 136, 142, 1);
-          font-family: Microsoft YaHei;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 20px;
-        }
-      }
-    }
-  }
-  .right {
-    margin-left: 16px;
-    .box3 {
-      margin-top: 16px;
-      width: 576px;
-      height: 845px;
-      border-radius: 4px;
-      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-      background: rgba(255, 255, 255, 1);
-      .box3-top {
-        display: flex;
-        margin-top: 10px;
-        height: 261px;
-        border-bottom: 1px solid rgba(234, 236, 238, 1);
-        .box3-top-left {
-          width: 120px;
-          height: 120px;
-          margin-left: 27px;
-
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-        .box3-top-right {
-          margin-left: 30px;
-          .box3-top-right-header {
-            display: flex;
-            height: 26px;
-            .header-left {
-              width: 325px;
-              height: 26px;
-              color: rgba(59, 65, 75, 1);
-              font-family: Microsoft YaHei;
-              font-size: 20px;
-              font-weight: 700;
-              line-height: 26px;
-            }
-            .header-right {
-              margin-left: 9px;
-              margin-top: 5px;
-              width: 16px;
-              height: 16px;
-              cursor: pointer;
-              img{
-                width: 100%;
-                height: 100%;
-              }
-            }
-          }
-          .box3-top-right-main {
-            color: rgba(59, 65, 75, 1);
-            font-family: Microsoft YaHei;
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 24px;
-            margin-top: 4px;
-            .main-item {
-              display: flex;
-              margin-top: 12px;
-              .item-left{
-                height: 24px;
-                width: 80px;
-              }
-              .item-right{
-                width: 291px;
-              }
-            }
-          }
-        }
-      }
-      .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;
-            height: 24px;
-            color:  rgba(59, 65, 75, 1);
-            font-family: Microsoft YaHei;
-            font-size: 16px;
-            font-weight: 700;
-            line-height: 24px;
-          }
-        }
-        .box3-bottom-main{
-          height: 410px;
-        }
-        .box3-bottom-footer{
-          width: 108px;
-          height: 32px;
-          margin: 5px auto;
-          cursor: pointer;
-          img{
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
+	display: flex;
+	.box-header {
+		height: 56px;
+		display: flex;
+		position: relative;
+		.header-left {
+			margin-top: 20px;
+			width: 8px;
+			height: 16px;
+			border-radius: 0 4px 4px 0;
+			background: rgba(10, 87, 166, 1);
+		}
+		.title {
+			margin-left: 22px;
+			margin-top: 20px;
+			height: 16px;
+			line-height: 16px;
+			color: rgba(10, 87, 166, 1);
+			font-family: Microsoft YaHei;
+			font-size: 20px;
+			font-weight: 700;
+			line-height: 16px;
+		}
+		.header-btn-box {
+			position: absolute;
+			top: 14px;
+			right: 84px;
+			display: flex;
+			.btn {
+				margin-left: 8px;
+			}
+		}
+		.header-right {
+			position: absolute;
+			top: 14px;
+			right: 12px;
+			height: 28px;
+			display: flex;
+			gap: 4px;
+			.icon {
+				width: 28px;
+				height: 28px;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+	.left {
+		width: 1150px;
+		.box1 {
+			margin-top: 16px;
+			width: 1150px;
+			height: 414px;
+			border-radius: 4px;
+			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: 235px;
+					height: 332px;
+					margin-left: 42px;
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.box1-main-right {
+					margin-left: 40px;
+					color: rgba(59, 65, 75, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 700;
+					line-height: 24px;
+					.item {
+						height: 30px;
+						display: flex;
+						margin-bottom: 17px;
+						.item-left {
+							width: 100px;
+						}
+						.tag-box {
+							display: flex;
+							.tag {
+								color: rgba(22, 119, 255, 1);
+								font-family: Microsoft YaHei;
+								font-size: 14px;
+								font-weight: 400;
+								box-sizing: border-box;
+								border: 1px solid rgba(186, 224, 255, 1);
+								border-radius: 4px;
+								background: rgba(230, 244, 255, 1);
+								padding: 0px 8px;
+								margin-right: 8px;
+							}
+						}
+						.text {
+							font-weight: normal !important;
+						}
+					}
+				}
+			}
+		}
+		.box2 {
+			margin-top: 16px;
+			width: 1150px;
+			height: 415px;
+			border-radius: 4px;
+			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;
+				.box2-item {
+					width: 1101px;
+					height: 48px;
+					margin-bottom: 8px;
+					box-sizing: border-box;
+					border: 1px solid rgba(234, 236, 238, 1);
+					border-radius: 2px;
+					background: rgba(255, 255, 255, 1);
+					display: flex;
+					&:nth-child(2n-1) {
+						background: rgba(247, 248, 249, 1);
+					}
+					.id {
+						margin-top: 12px;
+						margin-left: 15px;
+						width: 24px;
+						height: 24px;
+						text-align: center;
+						line-height: 24px;
+						border-radius: 12px;
+						background: #e7f3ff;
+						color: #0a57a6;
+					}
+					.title {
+						width: 1000px;
+						line-height: 48px;
+						margin-left: 13px;
+						color: rgba(59, 65, 75, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 700;
+					}
+					.open {
+						width: 16px;
+						height: 16px;
+						margin-top: 16px;
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+			}
+			.box2-footer {
+				margin: 20px 22px;
+				display: flex;
+				justify-content: space-between;
+				.box2-footer-left {
+					height: 20px;
+					color: rgba(132, 136, 142, 1);
+					font-family: Microsoft YaHei;
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 20px;
+				}
+			}
+		}
+	}
+	.right {
+		margin-left: 16px;
+		.box3 {
+			margin-top: 16px;
+			width: 576px;
+			height: 845px;
+			border-radius: 4px;
+			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
+			background: rgba(255, 255, 255, 1);
+			.box3-top {
+				margin-top: 10px;
+				height: 261px;
+				border-bottom: 1px solid rgba(234, 236, 238, 1);
+				.box3-top-top {
+					width: 473px;
+					height: 88px;
+					box-sizing: border-box;
+					border: 1px solid rgba(234, 236, 238, 1);
+					border-radius: 4px;
+					background: rgba(247, 248, 249, 1);
+					display: flex;
+					align-items: center;
+					margin: 0 auto;
+					position: relative;
+					.more {
+						position: absolute;
+						right: 17px;
+						top: 17px;
+						display: flex;
+						gap: 3px;
+						.text {
+							height: 16px;
+							color: rgba(5, 95, 194, 1);
+							font-family: Microsoft YaHei;
+							font-size: 14px;
+							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 {
+						margin-left: 22px;
+						.name {
+							height: 26px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-size: 20px;
+							font-weight: 700;
+							line-height: 26px;
+						}
+						.ename {
+							margin-top: 6px;
+							height: 24px;
+							color: rgba(95, 101, 108, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 24px;
+						}
+					}
+				}
+				.box3-top-bottom {
+					margin-left: 50px;
+					.box3-top-right-main {
+						color: rgba(59, 65, 75, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 24px;
+						margin-top: 4px;
+						.main-item {
+							display: flex;
+							margin-top: 12px;
+							height: 26px;
+							line-height: 26px;
+							.item-icon {
+								width: 4px;
+								height: 4px;
+								border-radius: 2px;
+								background: #3b414b;
+								margin-top: 11px;
+								margin-right: 19px;
+							}
+							.item-left {
+								height: 24px;
+								width: 80px;
+							}
+							.item-right {
+								width: 291px;
+							}
+						}
+					}
+				}
+			}
+			.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;
+						height: 24px;
+						color: rgba(59, 65, 75, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 700;
+						line-height: 24px;
+					}
+				}
+				.box3-bottom-main {
+					height: 410px;
+				}
+				.box3-bottom-footer {
+					width: 108px;
+					height: 32px;
+					margin: 5px auto;
+					cursor: pointer;
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+	}
 }
 </style>
\ No newline at end of file

src/views/marketAccessRestrictions/marketAccessHome/index.vue

@@ -771,11 +771,11 @@ onMounted(async () => {
         .search {
           position: absolute;
           right: 1px;
-          top: 1px;
+          top: 2px;
           width: 120px;
           height: 44px;
-          border-radius: 4px;
-          background: rgba(22, 119, 255, 1);
+          border-radius: 10px;
+				  background: var(--color-main-active);
           display: flex;
           justify-content: center;
           align-items: center;

vite.config.js

@@ -43,6 +43,11 @@ export default defineConfig({
           target: 'http://192.168.26.70:8000',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/sse/, '')
+      },
+      '/aichat': {
+        target: 'http://192.168.184.24:7861/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/aichat/, '')
       }
     }
   }