conflict

package.json

@@ -19,10 +19,15 @@
   "license": "MIT",
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@kangc/v-md-editor": "^2.3.18",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@traptitech/markdown-it-katex": "^3.6.0",
     "axios": "^1.12.2",
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "^2.4.4",
+    "highlight.js": "^11.11.1",
+    "markdown-it": "^14.1.0",
     "vue": "^3.4.0",
     "vue-router": "^4.2.5"
   },

src/App.vue

 <template>
 	<div id="app">
-		<el-container>
+		<el-container class="wrapper">
 			<el-header>
 				<nav class="navbar">
 					<div class="nav-brand">
-						<el-icon class="brand-icon"><Monitor /></el-icon>
-						<span class="brand-text">某方向风险监测预警系统</span>
+						<div class="brand-icon">
+							<img src="@/assets/icons/header-logo.png" alt="" />
+						</div>
+						<div class="brand-text">
+							<div class="text-ch">某方向风险监测预警系统</div>
+							<div class="text-en">
+								National Science and Technology Security Risk Monitoring and Early Warning System
+							</div>
+						</div>
 					</div>
 					<div class="nav-menu">
 						<el-dropdown @command="handleHomeCommand" class="home-dropdown">
@@ -42,9 +49,13 @@
 						</div>
 					</div>
 					<div class="user-info">
-						<el-icon><Message /></el-icon>
-						<el-icon><User /></el-icon>
-						<span>管理员</span>
+						<div class="email">
+							<img src="@/assets/icons/header-icon.png" alt="" />
+						</div>
+						<div class="avator">
+							<img src="@/assets/icons/header-avator.png" alt="" />
+						</div>
+						<span class="user">管理员</span>
 					</div>
 				</nav>
 			</el-header>
@@ -55,17 +66,38 @@
 			<el-main class="main-container">
 				<router-view />
 			</el-main>
+			<div class="ai-btn" @click="openAiBox">
+				<div class="icon">
+					<img src="@/assets/icons/ai-icon.png" alt="" />
+				</div>
+				<div class="text">智能问答</div>
+			</div>
+			<div class="ai-dialog" v-if="isShowAiBox">
+				<AiBox @close="closeAiBox" />
+			</div>
 		</el-container>
 	</div>
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { Monitor, House, User, Location, Document, Bell, Message, ArrowDown } from "@element-plus/icons-vue";
 import { useRouter } from "vue-router";
 import Breadcrumb from "@/components/BreadCrumb/index.vue";
+import AiBox from "./components/AiBox.vue";
 
 const router = useRouter();
 
+const isShowAiBox = ref(false);
+
+const closeAiBox = () => {
+	isShowAiBox.value = false;
+};
+
+const openAiBox = () => {
+	isShowAiBox.value = true;
+};
+
 const handleHomeCommand = command => {
 	router.push(command);
 };
@@ -90,20 +122,18 @@ body {
 }
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 #app {
 	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 	width: 100%;
 	height: 100vh;
-	overflow-y: hidden;
+	// overflow-y: hidden;
 }
 
 /* 确保Element Plus容器组件占满宽度 */
 .el-container {
 	width: 100%;
-	/* min-height: 100vh; */
 	height: 100%;
-	margin-bottom: 20px;
 }
 
 .navbar {
@@ -117,18 +147,30 @@ body {
 	border-bottom: 1px solid #e5e7eb;
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	position: relative;
+	box-sizing: border-box;
+	height: 96px;
 }
 
 .main-container {
 	/* 移除宽度限制，让子页面自己控制布局 */
 	width: 100%;
+	height: 984px;
+	position: relative;
 }
 .nav-brand {
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	position: absolute;
-	left: 24px;
+	left: 160px;
+	.brand-icon {
+		width: 48px;
+		height: 48px;
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
 }
 
 .brand-icon {
@@ -137,9 +179,21 @@ body {
 }
 
 .brand-text {
-	font-size: 18px;
-	font-weight: 600;
-	color: #333;
+	.text-ch {
+		height: 42px;
+		color: rgba(10, 18, 30, 1);
+		font-family: Microsoft YaHei;
+		font-size: 32px;
+		font-weight: 700;
+		line-height: 42px;
+	}
+	.text-en {
+		color: rgba(10, 18, 30, 1);
+		font-family: Microsoft YaHei;
+		font-size: 10px;
+		font-weight: 400;
+		line-height: 13px;
+	}
 }
 
 .nav-menu {
@@ -188,24 +242,80 @@ body {
 .user-info {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: 20px;
 	padding: 8px 12px;
-	background: #f3f4f6;
 	border-radius: 6px;
 	color: #333;
 	position: absolute;
-	right: 24px;
+	right: 159px;
+	.email {
+		width: 20px;
+		height: 20px;
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.avator {
+		width: 32px;
+		height: 32px;
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.user {
+		color: rgba(59, 65, 75, 1);
+		font-family: Microsoft YaHei;
+		font-size: 16px;
+		font-weight: 400;
+		line-height: 30px;
+	}
+}
+
+.wrapper {
+	position: relative;
+	.ai-btn {
+		position: absolute;
+		top: 50%;
+		right: 46px;
+		cursor: pointer;
+		.icon {
+			width: 96px;
+			height: 96px;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.text {
+			height: 24px;
+			color: rgba(59, 65, 75, 1);
+			font-family: Microsoft YaHei;
+			font-size: 16px;
+			font-weight: 400;
+			line-height: 24px;
+			text-align: center;
+		}
+	}
+	.ai-dialog {
+		position: absolute;
+		right: 100px;
+		top: 50px;
+		z-index: 9999;
+	}
 }
 
 .el-header {
 	padding: 0;
-	height: 60px;
+	height: 96px;
+	position: relative;
+	z-index: 1;
 }
 
 .el-main {
 	padding: 0;
-	height: calc(100vh - 60px);
+	height: calc(100vh - 96px);
 	background-color: rgba(246, 251, 255, 1);
-	overflow-y: auto;
 }
 </style>

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

+<template>
+	<div class="ai-wrapper">
+		<div class="header">
+			<div class="icon">
+				<img src="@/assets/icons/aiBox/ai-bg.png" alt="" />
+				<div class="inner-icon">
+					<img src="@/assets/icons/aiBox/ai-logo.png" alt="" />
+				</div>
+			</div>
+			<div class="title">智能问答</div>
+			<div class="close" @click="handleClose">
+				<img src="@/assets/icons/aiBox/close.png" alt="" />
+			</div>
+		</div>
+		<div class="main">
+			<div class="chat-content" ref="contentContainer">
+				<!-- 消息列表 -->
+				<div class="message-list">
+					<div v-for="(message, index) in messages" :key="index" :class="['message-item', message.type]">
+						<!-- AI 消息 -->
+						<div v-if="message.type === 'ai'" class="message ai-message">
+							<div class="avatar">AI</div>
+							<div class="bubble">
+								<div class="content markdown-content" v-html="renderMarkdown(message.content)"></div>
+							</div>
+						</div>
+
+						<!-- 用户消息 -->
+						<div v-else class="message user-message">
+							<div class="bubble">
+								<div class="content">{{ message.content }}</div>
+							</div>
+							<div class="avatar">我</div>
+						</div>
+					</div>
+
+					<!-- 加载状态 -->
+					<div v-if="isLoading" class="message-item ai">
+						<div class="message ai-message">
+							<div class="avatar">AI</div>
+							<div class="bubble">
+								<div class="loading-indicator">
+									<span class="dot"></span>
+									<span class="dot"></span>
+									<span class="dot"></span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="footer">
+			<el-input type="textarea" :rows="3" v-model="userInput" placeholder="请输入问题开启智能问答" />
+			<div class="btn">
+				<div class="icon">
+					<img src="@/assets/icons/aiBox/idea.png" alt="" />
+				</div>
+				<div class="text">概括页面内容</div>
+			</div>
+			<div class="submit" @click="sendMessage">
+				<img src="@/assets/icons/aiBox/submit.png" alt="" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
+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);
+const abortController = ref(null);
+
+// 消息数据
+const messages = ref([
+	{
+		type: "user",
+		content: "你好"
+	},
+	{
+		type: "ai",
+		content: "您好！我是AI助手，有什么可以帮助您的吗？"
+	}
+]);
+
+// Markdown 渲染器
+const md = new MarkdownIt();
+
+// 渲染 markdown
+const renderMarkdown = content => {
+	return md.render(content);
+};
+
+// 自动滚动到底部
+const scrollToBottom = async () => {
+	await nextTick();
+	if (contentContainer.value) {
+		const container = contentContainer.value;
+		container.scrollTop = container.scrollHeight;
+	}
+};
+
+// 添加消息
+const addMessage = (type, content) => {
+	messages.value.push({
+		type,
+		content,
+		timestamp: new Date().getTime()
+	});
+	scrollToBottom();
+};
+
+// 更新最后一条 AI 消息（用于流式输出）
+const updateLastAIMessage = content => {
+	const lastMessage = messages.value[messages.value.length - 1];
+	if (lastMessage && lastMessage.type === "ai") {
+		lastMessage.content = content;
+		scrollToBottom();
+	}
+};
+
+// 使用 fetchEventSource 连接
+const connectSSE = async question => {
+	// 添加用户消息
+	addMessage("user", question);
+
+	// 添加空的 AI 消息用于流式更新
+	addMessage("ai", "");
+
+	isLoading.value = true;
+
+	// 创建 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("/chat/knowledge_base/search_docs", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json"
+			},
+			body: JSON.stringify(params),
+			signal: abortController.value.signal,
+			onopen: async response => {
+				console.log("SSE 连接已建立", response.status);
+				if (response.status !== 200) {
+					throw new Error(`请求失败: ${response.status}`);
+				}
+			},
+
+			onmessage: event => {
+				try {
+					if (event.data === "[DONE]") {
+						// 流式输出结束
+						isLoading.value = false;
+						return;
+					}
+
+					const data = JSON.parse(event.data);
+
+					if (data.type === "content" && data.content) {
+						// 流式更新内容
+						updateLastAIMessage(prev => prev + data.content);
+					} else if (data.type === "error") {
+						throw new Error(data.message || "请求失败");
+					}
+				} catch (error) {
+					console.error("解析 SSE 数据错误:", error);
+				}
+			},
+
+			onclose: () => {
+				console.log("SSE 连接已关闭");
+				isLoading.value = false;
+			},
+
+			onerror: error => {
+				console.error("SSE 连接错误:", error);
+				ElMessage.error("连接失败，请重试");
+				isLoading.value = false;
+				// 不要抛出错误，否则会重试
+			}
+		});
+	} catch (error) {
+		console.error("SSE 请求失败:", error);
+		if (error.name !== "AbortError") {
+			ElMessage.error(error.message || "请求失败");
+		}
+		isLoading.value = false;
+	}
+};
+
+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();
+	if (!question) {
+		ElMessage.warning("请输入问题");
+		return;
+	}
+
+	if (isLoading.value) {
+		ElMessage.warning("请等待上一条消息回复完成");
+		return;
+	}
+
+	userInput.value = "";
+	// await connectSSE(question);
+	chat();
+};
+
+// 停止生成
+const stopGenerate = () => {
+	if (abortController.value) {
+		abortController.value.abort();
+		abortController.value = null;
+		isLoading.value = false;
+		ElMessage.info("已停止生成");
+	}
+};
+
+const emit = defineEmits(["close"]);
+
+const handleClose = () => {
+	emit("close");
+};
+
+onMounted(() => {
+	scrollToBottom();
+});
+
+onUnmounted(() => {
+	if (abortController.value) {
+		abortController.value.abort();
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ai-wrapper {
+	width: 548px;
+	height: 1048px;
+	box-sizing: border-box;
+	border: 1px solid rgba(234, 236, 238, 1);
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 1);
+	.header {
+		position: relative;
+		display: flex;
+		height: 50px;
+		border-bottom: 1px solid rgba(234, 236, 238, 1);
+		.icon {
+			width: 30px;
+			height: 28px;
+			margin-top: 11px;
+			margin-left: 14px;
+			position: relative;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+			.inner-icon {
+				position: absolute;
+				top: 3px;
+				left: 6px;
+				width: 15px;
+				height: 11px;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+		.title {
+			margin-top: 10px;
+			margin-left: 12px;
+			height: 30px;
+			color: rgba(59, 65, 75, 1);
+			font-family: Microsoft YaHei;
+			font-size: 16px;
+			font-weight: 700;
+			line-height: 30px;
+		}
+		.close {
+			position: absolute;
+			right: 22px;
+			top: 21px;
+			width: 12px;
+			height: 12px;
+			cursor: pointer;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+	.main {
+		height: 830px;
+		// background: rgba(225, 225, 225, 0.5);
+		width: 520px;
+		margin: 10px auto;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	.footer {
+		position: absolute;
+		left: 22px;
+		bottom: 20px;
+		width: 504px;
+		height: 120px;
+		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);
+		overflow: hidden;
+		.btn {
+			position: absolute;
+			left: 20px;
+			bottom: 15px;
+			width: 160px;
+			height: 36px;
+			box-sizing: border-box;
+			border: 1px solid rgba(5, 95, 194, 1);
+			border-radius: 18px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 8px;
+			.icon {
+				width: 14px;
+				height: 14px;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.text {
+				height: 30px;
+				color: rgba(5, 95, 194, 1);
+				font-family: Microsoft YaHei;
+				font-size: 16px;
+				font-weight: 400;
+				line-height: 30px;
+			}
+		}
+		.submit {
+			position: absolute;
+			right: 19px;
+			bottom: 15px;
+			width: 36px;
+			height: 36px;
+			cursor: pointer;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+
+:deep(.el-textarea__inner) {
+	border: none;
+	/* 去掉右下角斜线（调整 resize） */
+	resize: none;
+	/* 去掉焦点边框 */
+	outline: none;
+	box-shadow: none;
+
+	color: rgba(132, 136, 142, 1);
+	font-family: Microsoft YaHei;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 30px;
+}
+
+:deep(.el-textarea__inner::placeholder) {
+	color: rgba(132, 136, 142, 1);
+	font-family: Microsoft YaHei;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 30px;
+}
+
+/* 确保获得焦点时也没有边框 */
+:deep(.el-textarea__inner:focus) {
+	border: none;
+	outline: none;
+	box-shadow: none;
+}
+
+/* 确保获得焦点时也没有边框 */
+:deep(.el-textarea__inner:hover) {
+	border: none;
+	outline: none;
+	box-shadow: none;
+}
+
+/* 对话内容区域 */
+.chat-content {
+	flex: 1;
+	overflow-y: auto;
+	padding: 20px;
+	background: #fff;
+}
+
+.message-list {
+	max-width: 900px;
+	margin: 0 auto;
+}
+
+.message-item {
+	margin-bottom: 24px;
+}
+
+.message {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	max-width: 100%;
+}
+
+.user-message {
+	justify-content: flex-end;
+}
+
+.ai-message {
+	justify-content: flex-start;
+}
+
+.avatar {
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: 600;
+	flex-shrink: 0;
+}
+
+.user-message .avatar {
+	background: #409eff;
+	color: white;
+	order: 2;
+}
+
+.ai-message .avatar {
+	background: #8ac4ff;
+	color: white;
+}
+
+.bubble {
+	max-width: 100%;
+	padding: 10px 12px;
+	border-radius: 12px;
+	position: relative;
+}
+
+.user-message .bubble {
+	background: rgba(231, 243, 255, 1);
+	color: white;
+	border-radius: 20px 0 20px 20px;
+}
+
+.ai-message .bubble {
+	background: #f0f2f5;
+	color: rgba(59, 65, 75, 1);
+	font-family: Microsoft YaHei;
+	font-size: 16px;
+	font-weight: 400;
+	border-radius: 0 20px 20px 20px;
+}
+
+.content {
+	line-height: 1.6;
+	word-wrap: break-word;
+}
+
+.user-message .content {
+	color: rgba(5, 95, 194, 1);
+}
+
+/* Markdown 内容样式 */
+.markdown-content :deep(h1) {
+	font-size: 1.4em;
+	margin: 0.8em 0 0.4em 0;
+	font-weight: 600;
+}
+
+.markdown-content :deep(h2) {
+	font-size: 1.2em;
+	margin: 0.8em 0 0.4em 0;
+	font-weight: 600;
+}
+
+.markdown-content :deep(h3) {
+	font-size: 1.1em;
+	margin: 0.8em 0 0.4em 0;
+	font-weight: 600;
+}
+
+.markdown-content :deep(p) {
+	margin: 0.4em 0;
+}
+
+.markdown-content :deep(code) {
+	background: rgba(175, 184, 193, 0.2);
+	padding: 0.2em 0.4em;
+	border-radius: 3px;
+	font-size: 0.9em;
+	font-family: "SFMono-Regular", Consolas, monospace;
+}
+
+.markdown-content :deep(pre) {
+	background: #f6f8fa;
+	padding: 12px;
+	border-radius: 6px;
+	overflow: auto;
+	margin: 1em 0;
+}
+
+.markdown-content :deep(pre code) {
+	background: none;
+	padding: 0;
+}
+
+.markdown-content :deep(blockquote) {
+	border-left: 4px solid #dfe2e5;
+	padding-left: 16px;
+	margin: 1em 0;
+	color: #6a737d;
+}
+
+.markdown-content :deep(ul),
+.markdown-content :deep(ol) {
+	padding-left: 2em;
+	margin: 1em 0;
+}
+
+/* 加载指示器 */
+.loading-indicator {
+	display: flex;
+	gap: 4px;
+	padding: 8px 0;
+}
+
+.dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #999;
+	animation: bounce 1.4s infinite ease-in-out;
+}
+
+.dot:nth-child(1) {
+	animation-delay: -0.32s;
+}
+.dot:nth-child(2) {
+	animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+	0%,
+	80%,
+	100% {
+		transform: scale(0.8);
+		opacity: 0.5;
+	}
+	40% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+/* 滚动条样式 */
+.chat-content::-webkit-scrollbar {
+	width: 6px;
+}
+
+.chat-content::-webkit-scrollbar-track {
+	background: #f1f1f1;
+}
+
+.chat-content::-webkit-scrollbar-thumb {
+	background: #c1c1c1;
+	border-radius: 3px;
+}
+
+.chat-content::-webkit-scrollbar-thumb:hover {
+	background: #a8a8a8;
+}
+</style>
\ No newline at end of file

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/hooks/useMarkdownStream.js

+// composables/useMarkdownStream.js
+import { ref, computed, nextTick } from 'vue'
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+// 引入 highlight.js 样式
+import 'highlight.js/styles/github.css'
+import mdKatex from '@traptitech/markdown-it-katex'
+
+export function useMarkdownStream() {
+
+  const rawContent = ref('')
+
+  const createMd = () => {
+    const md = new MarkdownIt(
+      {
+        html: true,
+        breaks: true,  // 将换行符转换为 <br>
+        linkify: true,   // 自动链接 URL
+        typographer: true, // 启用排版扩展
+        highlight: function (str, lang) {
+          if (lang && hljs.getLanguage(lang)) {
+            try {
+              return '<pre class="hljs" style="fontSize:14px"><code class="language-' + lang + '">' +
+                hljs.highlight(str, {
+                  language: lang,
+                  ignoreIllegals: true
+                }).value +
+                '</code></pre>'
+            } catch (err) {
+              console.warn(`代码高亮错误 (${lang}):`, err)
+            }
+          }
+
+          // 默认处理
+          return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
+        }
+      }
+
+    )
+
+    // 自定义代码块渲染规则
+    md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+      const token = tokens[idx]
+      const lang = token.info.trim()
+      const code = token.content
+
+      // 使用 highlight.js 进行高亮
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          const highlighted = hljs.highlight(code, {
+            language: lang,
+            ignoreIllegals: true
+          })
+          return `
+          <div class="code-block-wrapper">
+            <div class="code-header">
+              <span class="code-lang">${lang}</span>
+            </div>
+            <pre class="hljs"><code class="language-${lang}">${highlighted.value}</code></pre>
+          </div>
+        `
+        } catch (err) {
+          console.warn(`代码高亮错误 (${lang}):`, err)
+        }
+      }
+
+      // 默认代码块
+      return `
+      <div class="code-block-wrapper">
+        <div class="code-header">
+          <span class="code-lang">${lang || 'text'}</span>
+          <button class="copy-btn" onclick="copyCode(this)">复制</button>
+        </div>
+        <pre class="hljs"><code>${md.utils.escapeHtml(code)}</code></pre>
+      </div>
+    `
+    }
+
+    // md.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
+    // md.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
+
+    // // 自定义渲染规则 - 修复中文排版
+    // md.renderer.rules.paragraph_open = (tokens, idx, options, env, self) => {
+    //   return '<p style="margin: 1em 0; line-height: 1.6;">'
+    // }
+
+    // md.renderer.rules.heading_open = (tokens, idx, options, env, self) => {
+    //   const token = tokens[idx]
+    //   const level = token.tag.slice(1)
+    //   const styles = {
+    //     '1': 'font-size: 1.8em; margin: 1.2em 0 0.6em 0; font-weight: 700; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em;',
+    //     '2': 'font-size: 1.5em; margin: 1.2em 0 0.6em 0; font-weight: 600; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em;',
+    //     '3': 'font-size: 1.3em; margin: 1.2em 0 0.6em 0; font-weight: 600;',
+    //     '4': 'font-size: 1.2em; margin: 1.2em 0 0.6em 0; font-weight: 600;',
+    //     '5': 'font-size: 1.1em; margin: 1.2em 0 0.6em 0; font-weight: 600;',
+    //     '6': 'font-size: 1em; margin: 1.2em 0 0.6em 0; font-weight: 600; color: #666;'
+    //   }
+    //   return `<${token.tag} style="${styles[level] || ''}">`
+    // }
+
+    // md.renderer.rules.list_item_open = (tokens, idx, options, env, self) => {
+    //   return '<li style="margin: 0.5em 0; line-height: 1.6;">'
+    // }
+
+    // md.renderer.rules.table_open = (tokens, idx, options, env, self) => {
+    //   return '<table style="border-collapse: collapse; width: 100%; margin: 1em 0; border: 1px solid #dfe2e5;">'
+    // }
+
+    // md.renderer.rules.th_open = (tokens, idx, options, env, self) => {
+    //   return '<th style="border: 1px solid #dfe2e5; padding: 8px 12px; background: #f6f8fa; font-weight: 600; text-align: left;">'
+    // }
+
+    // md.renderer.rules.td_open = (tokens, idx, options, env, self) => {
+    //   return '<td style="border: 1px solid #dfe2e5; padding: 8px 12px;">'
+    // }
+
+    // md.renderer.rules.blockquote_open = (tokens, idx, options, env, self) => {
+    //   return '<blockquote style="border-left: 4px solid #dfe2e5; margin: 1em 0; padding-left: 1em; color: #666; background: #f8f9fa; padding: 12px 16px 12px 20px; border-radius: 4px;">'
+    // }
+
+    // md.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
+    //   const token = tokens[idx]
+    //   return `<code style="background: #f6f8fa; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; color: #e74c3c;">${md.utils.escapeHtml(token.content)}</code>`
+    // }
+
+    // // 链接处理
+    // md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+    //   const token = tokens[idx]
+    //   const hrefIndex = token.attrIndex('href')
+    //   if (hrefIndex >= 0) {
+    //     const href = token.attrs[hrefIndex][1]
+    //     token.attrPush(['target', '_blank'])
+    //     token.attrPush(['rel', 'noopener noreferrer'])
+    //     token.attrPush(['style', 'color: #1890ff; text-decoration: none;'])
+    //   }
+    //   return self.renderToken(tokens, idx, options)
+    // }
+
+    // 预处理：修复带空格的强调符号
+    // const originalParse = md.parse.bind(md)
+    // md.parse = function (src, env) {
+    //   // 预处理：修复 **文本 ** 这种带空格的粗体
+    //   let processedSrc = src
+    //     // 修复 **文本 ** -> **文本**
+    //     .replace(/\*\*([^*]+?)\s+\*\*/g, '**$1**')
+    //     // // 修复 __文本 __ -> __文本__
+    //     // .replace(/__([^_]+?)\s+__/g, '__$1__')
+    //     // // 修复 *文本 * -> *文本*
+    //     // .replace(/\*([^*]+?)\s+\*/g, '*$1*')
+    //     // // 修复 _文本 _ -> _文本_
+    //     // .replace(/_([^_]+?)\s+_/g, '_$1_')
+
+    //   return originalParse(processedSrc, env)
+    // }
+
+    // // 自定义渲染规则 - 支持所有 Markdown 格式
+    // md.renderer.rules.strong_open = () => '<strong style="font-weight: 600;">'
+    // md.renderer.rules.em_open = () => '<em style="font-style: italic;">'
+
+    // md.renderer.rules.heading_open = (tokens, idx) => {
+    //   const token = tokens[idx]
+    //   const level = token.tag.slice(1)
+    //   const styles = {
+    //     '1': 'font-size: 2em; margin: 0.67em 0; font-weight: 700; border-bottom: 2px solid #eaecef; padding-bottom: 0.3em;',
+    //     '2': 'font-size: 1.5em; margin: 0.83em 0; font-weight: 600; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em;',
+    //     '3': 'font-size: 1.17em; margin: 1em 0; font-weight: 600;',
+    //     '4': 'font-size: 1em; margin: 1.33em 0; font-weight: 600;',
+    //     '5': 'font-size: 0.83em; margin: 1.67em 0; font-weight: 600;',
+    //     '6': 'font-size: 0.67em; margin: 2.33em 0; font-weight: 600; color: #666;'
+    //   }
+    //   return `<${token.tag} style="${styles[level] || ''}">`
+    // }
+
+    // md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+    //   const token = tokens[idx]
+    //   const hrefIndex = token.attrIndex('href')
+    //   if (hrefIndex >= 0) {
+    //     token.attrPush(['target', '_blank'])
+    //     token.attrPush(['rel', 'noopener noreferrer'])
+    //     token.attrPush(['style', 'color: #1890ff; text-decoration: none;'])
+    //   }
+    //   return self.renderToken(tokens, idx, options)
+    // }
+
+    // md.renderer.rules.blockquote_open = () =>
+    //   '<blockquote style="border-left: 4px solid #dfe2e5; margin: 1em 0; padding: 0.5em 1em; background: #f8f9fa; border-radius: 4px;">'
+
+    // md.renderer.rules.code_inline = (tokens, idx) => {
+    //   const token = tokens[idx]
+    //   return `<code style="background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 3px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.9em; color: #e53e3e;">${md.utils.escapeHtml(token.content)}</code>`
+    // }
+
+
+    // 自定义表格渲染规则
+    md.renderer.rules.table_open = () =>
+      '<div class="table-container"><table style="border-collapse: collapse; width: 100%; margin: 1em 0; border: 1px solid #dfe2e5;background: rgb(239 241 243); border-radius: 5px">'
+
+    md.renderer.rules.table_close = () => '</table></div>'
+
+    md.renderer.rules.thead_open = () => '<thead style="background: #e6e7e8">'
+
+    md.renderer.rules.th_open = () =>
+      '<th style="border: 1px solid #dfe2e5; padding: 12px; text-align: left; font-weight: 600;">'
+
+    md.renderer.rules.td_open = () =>
+      '<td style="border: 1px solid #dfe2e5; padding: 12px; text-align: left; vertical-align: top;">'
+
+    md.renderer.rules.th_close = () => '</th>'
+    md.renderer.rules.td_close = () => '</td>'
+    md.renderer.rules.tr_open = () => '<tr>'
+    md.renderer.rules.tr_close = () => '</tr>'
+    md.renderer.rules.thead_close = () => '</thead>'
+    md.renderer.rules.tbody_open = () => '<tbody>'
+    md.renderer.rules.tbody_close = () => '</tbody>'
+
+    return md
+  }
+
+  function preprocessMarkdown(content) {
+    if (!content) return ''
+
+    return content
+      // 1. 修复带空格的强调符号
+      .replace(/\*\*(\S.*?\S?)\s*\*\*/g, '**$1**')
+      .replace(/\*(\S.*?\S?)\s*\*/g, '*$1*')
+      .replace(/__(\S.*?\S?)\s*__/g, '__$1__')
+      .replace(/_(\S.*?\S?)\s*_/g, '_$1_')
+
+      // 2. 修复不配对的符号
+      .replace(/(\S)\*\*(\S)/g, '$1 **$2')  // 文本**文本 -> 文本 **文本
+      .replace(/(\S)\*(\S)/g, '$1 *$2')     // 文本*文本 -> 文本 *文本
+
+      // 3. 处理流式输出中的不完整标记
+      .replace(/\*\*([^*]*)$/, '**$1**')    // 补全未闭合的粗体
+      .replace(/\*([^*]*)$/, '*$1*')        // 补全未闭合的斜体
+      .replace(/__([^_]*)$/, '__$1__')      // 补全未闭合的粗体（下划线）
+      .replace(/_([^_]*)$/, '_$1_')         // 补全未闭合的斜体（下划线）
+
+      // 4. 统一换行符
+      .replace(/\\n/g, '\n')
+      .replace(/\r\n/g, '\n')
+  }
+
+
+  // 渲染 markdown
+  const renderedContent = computed(() => {
+
+    const md = createMd()
+    // 预处理内容
+    // const processedContent = preprocessMarkdown(rawContent.value)
+    return md.render(rawContent.value)
+  })
+
+  // 自动滚动
+  const scrollToBottom = async (scrollContainer) => {
+    await nextTick()
+    if (scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight
+    }
+  }
+
+  // 更新内容并滚动
+  const updateContent = async (newContent, scrollContainer) => {
+    rawContent.value = newContent
+    await scrollToBottom(scrollContainer)
+  }
+
+  // 清空内容
+  const clearContent = () => {
+    rawContent.value = ''
+  }
+
+  return {
+    rawContent,
+    renderedContent,
+    updateContent,
+    clearContent
+  }
+}
\ No newline at end of file

src/hooks/useScrollShow.js

+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useContainerScroll(containerRef, options = {}) {
+  const {
+    scrollThreshold = 0,
+    showOnScrollDown = true,
+    hideOnTop = true,
+    useAnimationFrame = true
+  } = options
+
+  const isShow = ref(false)
+  const lastScrollTop = ref(0)
+  const ticking = ref(false)
+
+  const updateShowState = () => {
+    const container = containerRef.value
+    if (!container) return
+    
+    const currentScrollTop = container.scrollTop
+    
+    if (showOnScrollDown && currentScrollTop > lastScrollTop.value && currentScrollTop > scrollThreshold) {
+      isShow.value = true
+    }
+    
+    if (hideOnTop && currentScrollTop === 0) {
+      isShow.value = false
+    }
+    
+    lastScrollTop.value = currentScrollTop
+    ticking.value = false
+  }
+
+  const handleScroll = () => {
+    if (useAnimationFrame) {
+      if (!ticking.value) {
+        requestAnimationFrame(updateShowState)
+        ticking.value = true
+      }
+    } else {
+      updateShowState()
+    }
+  }
+
+  onMounted(() => {
+    const container = containerRef.value
+    if (container) {
+      container.addEventListener('scroll', handleScroll, { passive: true })
+    }
+  })
+
+  onUnmounted(() => {
+    const container = containerRef.value
+    if (container) {
+      container.removeEventListener('scroll', handleScroll)
+    }
+  })
+
+  return {
+    isShow
+  }
+}
\ No newline at end of file

src/router/index.js

 import { createRouter, createWebHistory } from "vue-router";
 
+//中美博弈概览
+import overView from '@/views/overView/index.vue'
 // 智库相关
 import thinkTank from "../views/thinkTank/index.vue";
 import ThinkTankDetail from "@/views/thinkTank/ThinkTankDetail/index.vue";
@@ -15,7 +17,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'
@@ -42,13 +44,39 @@ import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseL
 import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
 import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
 
+// 智能写报
+import WrittingAsstaint from '@/views/writtingAsstaint/index.vue'
+// 门户
+import Portal1 from '@/views/portals/portal1/index.vue';
+import Portal2 from '@/views/portals/portal2/index.vue';
+
 const routes = [
+  // 智能写报
+  {
+    path: "/writtingAsstaint",
+    name: "writtingAsstaint",
+    component: WrittingAsstaint,
+    meta: {
+      title: "智能写报"
+    }
+  },
+
 
   {
     path: '/',
     redirect: '/billHome'
   },
 
+  // 中美博弈概览页面路由
+  {
+    path: '/overView',
+    name: 'overView',
+    component: overView,
+    meta: {
+      title: '法案首页'
+    },
+  },
+
   // 智库系统的主要路由
   {
     path: "/thinkTank",
@@ -146,10 +174,10 @@ const routes = [
             meta: { title: '流程分析' }
           },
           {
-            path: 'progressAnalysis',
-            name: 'DeepDigProgressAnalysis',
-            component: BillDeepDigProgressOverview,
-            meta: { title: '进程分析' }
+            path: 'poliContribution',
+            name: 'BillDeepDigPoliContribution',
+            component: BillDeepDigPoliContribution,
+            meta: { title: '政治献金' }
           },
         ]
       },
@@ -368,11 +396,25 @@ const routes = [
     meta: {
       title: "科研资助"
     }
-  }
+  },
 
   // 门户路由放在这块
-
-
+  {
+    path: "/portal1",
+    name: "portal1",
+    component: Portal1,
+    meta: {
+      title: "门户1"
+    }
+  },
+  {
+    path: "/portal2",
+    name: "portal2",
+    component: Portal2,
+    meta: {
+      title: "门户2"
+    }
+  },
 
 ];
 

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/utils/doublePieChart.js

+
+const getDoublePieChart = (data1, data2) => {
+  const colorList = ['#8AC4FF', '#FFD591']
+  const colorList1 = ['#055FC2', '#FFA940']
+  let option = {
+    series: [
+      {
+        type: 'pie',
+        radius: [25, 68],
+        // height: '100%',
+        left: 'center',
+        // width: '100%',
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        label: {
+          position: 'inside',
+          textStyle: {
+            fontSize: '16px',
+            fontWeight: 700,
+            // color: '#333'
+          }
+        },
+        data: data1.map(item => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: item.name === '参议院' ? '#055FC2' : '#FFA940'
+            }
+          }
+        })
+      },
+      {
+        type: 'pie',
+        radius: [70, 100],
+        height: '100%',
+        left: 'center',
+        width: '80%',
+        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: data2.map(item => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: item.type === '参议院' ? '#8AC4FF' : '#FFD591'
+
+            }
+          }
+        })
+      }
+
+
+    ]
+  }
+  return option
+}
+
+export default getDoublePieChart;
\ No newline at end of file

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

@@ -20,7 +20,12 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
     },
     legend: {
       data: ['提出法案', '通过法案'],
-      show: false
+      show: true,
+      textStyle: {
+        color: 'rgba(95, 101, 108, 1)',
+        fontFamily: 'Microsoft YaHei',
+        fontSize: '16px',
+      }
     },
     color: ['#1459bb', '#fa8c16'],
     xAxis: [

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,17 +593,19 @@
 </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";
 import getCalendarHeatChart from "./utils/cleandarHeat";
 
+import setChart from "@/utils/setChart";
+
 import p1 from "./assets/images/iconp1.png";
 import p2 from "./assets/images/iconp2.png";
 import p3 from "./assets/images/iconp3.png";
@@ -522,12 +628,26 @@ import Gov8 from "./assets/images/gov8.png";
 import Gov9 from "./assets/images/gov9.png";
 import Gov10 from "./assets/images/gov10.png";
 
-const center1ActiveIndex = ref(0);
+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 handleClickCenter1Item = index => {
-	center1ActiveIndex.value = index;
+const containerRef = ref(null);
+const { isShow } = useContainerScroll(containerRef);
+const currentPage = ref(1);
+const pageSize = ref(10);
+// 处理页码改变事件
+const handleCurrentChange = page => {
+	currentPage.value = page;
 };
 
+// 页面 header
 const govInsList = ref([
 	{
 		img: Gov1,
@@ -571,154 +691,7 @@ const govInsList = ref([
 	}
 ]);
 
-const personList = ref([
-	{
-		name: "詹姆斯·JD·万斯",
-		posi: "副总统",
-		avator: p1
-	},
-	{
-		name: "马尔科·卢比奥",
-		posi: "国务卿",
-		avator: p2
-	},
-	{
-		name: "斯科特·贝森特",
-		posi: "财政部长",
-		avator: p3
-	},
-	{
-		name: "皮特·赫格塞斯",
-		posi: "国防部长",
-		avator: p4
-	},
-	{
-		name: "帕姆·邦迪",
-		posi: "司法部长",
-		avator: p5
-	},
-	{
-		name: "霍华德·卢特尼克",
-		posi: "商务部长",
-		avator: p6
-	},
-	{
-		name: "苏西·威尔斯",
-		posi: "白宫办公厅主任",
-		avator: p7
-	},
-	{
-		name: "克里斯蒂·诺姆",
-		posi: "国土安全部长",
-		avator: p8
-	},
-	{
-		name: "道格·伯古姆",
-		posi: "内政部长",
-		avator: p9
-	},
-	{
-		name: "克里斯·赖特",
-		posi: "能源部长",
-		avator: p10
-	}
-]);
-
-const tabActiveIndex = ref(0);
-
-const list = [
-	{
-		title: "内政情况",
-		data: [
-			{
-				title: "司法与法律政策",
-				tag: "司法改革",
-				content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`
-			},
-			{
-				title: "移民政策",
-				tag: "边境安全",
-				content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`
-			},
-			{
-				title: "能源政策",
-				tag: "能源独立",
-				content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`
-			},
-			{
-				title: "关税政策",
-				tag: "能征关税",
-				content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`
-			},
-			{
-				title: "外交政策",
-				tag: "能华强硬",
-				content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`
-			}
-		]
-	},
-	{
-		title: "外交情况",
-		data: [
-			{
-				title: "司法与法律政策1",
-				tag: "司法改革",
-				content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`
-			},
-			{
-				title: "移民政策",
-				tag: "边境安全",
-				content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`
-			},
-			{
-				title: "能源政策",
-				tag: "能源独立",
-				content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`
-			},
-			{
-				title: "关税政策",
-				tag: "能征关税",
-				content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`
-			},
-			{
-				title: "外交政策",
-				tag: "能华强硬",
-				content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`
-			}
-		]
-	},
-	{
-		title: "经济情况",
-		data: [
-			{
-				title: "司法与法律政策2",
-				tag: "司法改革",
-				content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`
-			},
-			{
-				title: "移民政策",
-				tag: "边境安全",
-				content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`
-			},
-			{
-				title: "能源政策",
-				tag: "能源独立",
-				content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`
-			},
-			{
-				title: "关税政策",
-				tag: "能征关税",
-				content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`
-			},
-			{
-				title: "外交政策",
-				tag: "能华强硬",
-				content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`
-			}
-		]
-	}
-];
-
+// 最新科技政令
 const tagList = ref([
 	{
 		name: "互联网",
@@ -729,32 +702,12 @@ const tagList = ref([
 		status: 4
 	}
 ]);
-
-const wordCloudData = [
-	{ name: "与马斯克公开冲突", value: 100 },
-	{ name: "传统能源", value: 5 },
-	{ name: "共和党财政鹰派", value: 77 },
-	{ name: "未实现赤字控制目标", value: 35 },
-	{ name: "得克萨斯州", value: 88 },
-	{ name: "选举压力", value: 57 },
-	{ name: "主张财政紧缩", value: 72 },
-	{ name: "财政保守", value: 18 },
-	{ name: "共和党", value: 34 },
-	{ name: "扩大军费", value: 16 },
-	{ name: "参议院多数党", value: 72 },
-	{ name: "地方利益捍卫者", value: 58 },
-	{ name: "众议院预算委员会", value: 24 },
-	{ name: "债务与赤字警告", value: 33 },
-	{ name: "抗议医疗补助条款", value: 47 },
-	{ name: "深红州", value: 32 },
-	{ name: "温和派选区", value: 62 },
-	{ name: "高压游说", value: 51 }
-];
-
+// 点击查看详情
 const handleClickToDetail = () => {
 	router.push("/decreeLayout");
 };
 
+// 风险信号
 const warningList = ref([
 	{
 		title: "关于对中华人民共和国合成阿片类药物供应链...",
@@ -783,178 +736,69 @@ const warningList = ref([
 	}
 ]);
 
-const timelineList = ref([
-	{
-		title: "成为公法 No: 119-21。",
-		time: "2025-07-04",
-		status: 1
-	},
-	{
-		title: "总统签署",
-		time: "2025-07-04",
-		status: 0
-	},
-	{
-		title: "提交总统",
-		time: "2025-07-03",
-		status: 0
-	},
-	{
-		title: "重新审议动议搁置案无异议通过。",
-		time: "2025-07-03  14:31",
-		status: 0
-	},
-	{
-		title: "关于‘众议院同意参议院修正案’...",
-		time: "2025-07-02  14:31",
-		status: 0
-	}
-]);
-
-const areaList = ref([
-	{
-		name: "跨境电商",
-		status: 2
-	},
-	{
-		name: "新能源产业",
-		status: 4
-	},
-	{
-		name: "半导体产业",
-		status: 1
-	},
-	{
-		name: "关税",
-		status: 3
-	},
-	{
-		name: "光伏产业",
-		status: 2
-	}
-]);
-
-const curDecreeList = ref([
-	{
-		type: "总统政令",
-		status: 1,
-		title: "关于进一步延长TikTok执法宽限期的行政令",
-		time: "2025年9月16日"
-	},
-	{
-		type: "总统政令",
-		status: 1,
-		title: "为国家安全部署先进核反应堆技术",
-		time: "2025年9月16日"
-	},
-	{
-		type: "总统政令",
-		status: 1,
-		title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令",
-		time: "2025年9月15日"
-	},
+// 新闻资讯
+const newsList = ref([
 	{
-		type: "总统政令",
-		status: 1,
-		title: "调整互惠关税范围,并制定实施贸易和安全协议的程序",
-		time: "2025年9月15日"
+		img: News1,
+		title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
+		content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
+		from: "11-4 · 华盛顿邮报"
 	},
 	{
-		type: "总统政令",
-		status: 1,
-		title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令",
-		time: "2025年9月14日"
+		img: News2,
+		title: "美参议院通过决议，要求终止特朗普全球关税政策",
+		content: `参议院以51票赞成、47票反对通过一项决议，旨在终止特朗普实施的全面关税政策，四名......`,
+		from: "11-4 · 纽约时报"
 	},
 	{
-		type: "总统备忘录",
-		status: 3,
-		title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性",
-		time: "2025年9月14日"
+		img: News3,
+		title: "美众院通过950亿美元对外援助法案，包含对台军援",
+		content: `国会众议院在4月通过了大规模对外援助法案，其中包括为“印太安全”提供资金的条款，......`,
+		from: "11-3 · 洛杉矶时报"
 	},
 	{
-		type: "提名与任命",
-		status: 2,
-		title: "终止对不可靠、非受控能源的市场扭曲补贴",
-		time: "2025年9月11日"
+		img: News4,
+		title: "“大而美”法案在激烈争议中通过",
+		content: `特朗普力推的大规模税收与支出法案在国会以微弱优势通过。该法案因大幅削减医疗补助和......`,
+		from: "11-3 · 今日美国"
 	},
 	{
-		type: "总统政令",
-		status: 1,
-		title: "对所有国家暂停免关税待遇",
-		time: "2025年9月6日"
+		img: News5,
+		title: "美政府“停摆”追平历史最长纪录，民生多领域受重创",
+		content: `联邦政府“停摆”进入第35天，追平历史纪录。食品救济项目资金中断，数百万低收入民......`,
+		from: "11-2 ·  ​福克斯新闻网"
 	}
 ]);
 
-const releaseTime = ref("近一年发布");
-
-const releaseTimeList = ref([
-	{
-		label: "近半年发布",
-		value: "近半年发布"
-	},
-	{
-		label: "近一年发布",
-		value: "近一年发布"
-	},
+// 社交媒体
+const messageList = ref([
 	{
-		label: "近两年发布",
-		value: "近两年发布"
+		img: Message1,
+		name: "唐纳德·特朗普",
+		time: "15:23 · 发布于真实社交",
+		content: `埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。`
 	},
 	{
-		label: "近三年发布",
-		value: "近三年发布"
+		img: Message2,
+		name: "埃隆·马斯克",
+		time: "14:49 · 发布于X",
+		content: `如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。`
 	},
 	{
-		label: "近五年发布",
-		value: "近五年发布"
+		img: Message3,
+		name: "塞巴斯蒂安·马拉比",
+		time: "11:05 · 发布于X",
+		content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
 	}
 ]);
 
-const categoryList = ref(["全部分类", "总统政令", "提名与任命", "总统备忘录", "声明"]);
-
-const activeCate = ref("全部分类");
-const activeHylyId = ref("");
-
-// // 获取领域分类
-// const handleGetHylyList = async () => {
-//   try {
-//     const res = await getHylyList();
-//     console.log("行业领域列表");
-//     categoryList.value = res.data;
-//     const obj = {
-//       id: 0,
-//       hylyid: "",
-//       hylymc: "全部分类",
-//     };
-//     categoryList.value = [obj, ...categoryList.value];
-//   } catch (error) {}
-// };
-
-const handleClickCate = cate => {
-	activeCate.value = cate;
-};
-
-const activeNavIndex = ref(0);
-
-const handleClickNav = (index, item) => {
-	activeNavIndex.value = index;
-	router.push(item.path);
-};
-
-// 绘制echarts图表
-const setChart = (option, chartId) => {
-	let chartDom = document.getElementById(chartId);
-	chartDom.removeAttribute("_echarts_instance_");
-	let chart = echarts.init(chartDom);
-	chart.setOption(option);
-	return chart;
-};
-
+// 政令发布频度
 const chart1Data = ref({
 	dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
 	dataY: [219, 228, 129, 159, 152, 157, 78]
 });
 
+// 政令涉及领域
 const chart2Data = ref([
 	{
 		name: "集成电路",
@@ -985,28 +829,9 @@ const chart2Data = ref([
 		value: 24
 	}
 ]);
-
 const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB", "#4096FF"];
 
-// 根据法案类型获取法案列表
-// const handleGetBillsByType = async () => {
-//   const params = {
-//     type: activeHylyId.value,
-//   };
-//   try {
-//     const res = await getBillsByType(params);
-//     console.log("根据法案类型获取法案列表", res);
-//     curDecreeList.value = res.data.map((item) => {
-//       return {
-//         billId: item.billId,
-//         billName: item.billName,
-//         introductionDate: item.introductionDate,
-//         img: bill1,
-//       };
-//     });
-//   } catch (error) {}
-// };
-
+// 关键政令及举措
 const keyDecreeList = ref([
 	{
 		title: "关于“对等关税”的行政令",
@@ -1030,51 +855,221 @@ const keyDecreeList = ref([
 	}
 ]);
 
-const calendarData = ref([
-	["2025-01-01", 20],
-	["2025-01-05", 120],
-	["2025-01-09", 220],
-	["2025-01-15", 320],
-	["2025-01-20", 120],
-	["2025-01-24", 420],
-	["2025-02-05", 80],
-	["2025-02-08", 280],
-	["2025-02-18", 480],
-	["2025-02-11", 420],
-	["2025-02-21", 320],
-	["2025-03-05", 160],
-	["2025-03-09", 260],
-	["2025-03-19", 460],
-	["2025-03-26", 430],
-	["2025-04-01", 70],
-	["2025-04-05", 170],
-	["2025-04-11", 270],
-	["2025-04-18", 370],
-	["2025-05-05", 210],
-	["2025-05-09", 210],
-	["2025-05-15", 410],
-	["2025-05-22", 480],
-	["2025-06-06", 45],
-	["2025-06-09", 415],
-	["2025-06-16", 245],
-	["2025-06-19", 332],
-	["2025-07-04", 127],
-	["2025-07-09", 327],
-	["2025-07-24", 427],
-	["2025-08-08", 150],
-	["2025-08-11", 250],
-	["2025-08-15", 350],
-	["2025-08-22", 460],
-	["2025-09-10", 480],
-	["2025-09-18", 312],
-	["2025-10-15", 60],
-	["2025-10-19", 80],
-	["2025-10-21", 190]
-]);
 
-onMounted(async () => {
-	let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
-	setChart(chart1, "chart1");
+// 政令重点条款
+const wordCloudData = [
+	{ name: "与马斯克公开冲突", value: 100 },
+	{ name: "传统能源", value: 5 },
+	{ name: "共和党财政鹰派", value: 77 },
+	{ name: "未实现赤字控制目标", value: 35 },
+	{ name: "得克萨斯州", value: 88 },
+	{ name: "选举压力", value: 57 },
+	{ name: "主张财政紧缩", value: 72 },
+	{ name: "财政保守", value: 18 },
+	{ name: "共和党", value: 34 },
+	{ name: "扩大军费", value: 16 },
+	{ name: "参议院多数党", value: 72 },
+	{ name: "地方利益捍卫者", value: 58 },
+	{ name: "众议院预算委员会", value: 24 },
+	{ name: "债务与赤字警告", value: 33 },
+	{ name: "抗议医疗补助条款", value: 47 },
+	{ name: "深红州", value: 32 },
+	{ name: "温和派选区", value: 62 },
+	{ name: "高压游说", value: 51 }
+];
+
+// 资源库
+const decreeList = ref([
+	{
+		type: "总统政令",
+		status: 1,
+		title: "关于进一步延长TikTok执法宽限期的行政令",
+		time: "2025年9月16日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "为国家安全部署先进核反应堆技术",
+		time: "2025年9月16日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令",
+		time: "2025年9月15日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "调整互惠关税范围,并制定实施贸易和安全协议的程序",
+		time: "2025年9月15日"
+	},
+	{
+		type: "总统政令",
+		status: 1,
+		title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令",
+		time: "2025年9月14日"
+	},
+	{
+		type: "总统备忘录",
+		status: 3,
+		title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性",
+		time: "2025年9月14日"
+	},
+	{
+		type: "提名与任命",
+		status: 2,
+		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,
+		title: "对所有国家暂停免关税待遇",
+		time: "2025年9月6日"
+	}
+]);
+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([
+	{
+		label: "近半年发布",
+		value: "近半年发布"
+	},
+	{
+		label: "近一年发布",
+		value: "近一年发布"
+	},
+	{
+		label: "近两年发布",
+		value: "近两年发布"
+	},
+	{
+		label: "近三年发布",
+		value: "近三年发布"
+	},
+	{
+		label: "近五年发布",
+		value: "近五年发布"
+	}
+]);
+const categoryList = ref(["全部分类", "总统政令", "提名与任命", "总统备忘录", "声明"]);
+const activeCate = ref("全部分类");
+
+const handleClickCate = cate => {
+	activeCate.value = cate;
+};
+
+
+const calendarData = ref([
+	["2025-01-01", 20],
+	["2025-01-05", 120],
+	["2025-01-09", 220],
+	["2025-01-15", 320],
+	["2025-01-20", 120],
+	["2025-01-24", 420],
+	["2025-02-05", 80],
+	["2025-02-08", 280],
+	["2025-02-18", 480],
+	["2025-02-11", 420],
+	["2025-02-21", 320],
+	["2025-03-05", 160],
+	["2025-03-09", 260],
+	["2025-03-19", 460],
+	["2025-03-26", 430],
+	["2025-04-01", 70],
+	["2025-04-05", 170],
+	["2025-04-11", 270],
+	["2025-04-18", 370],
+	["2025-05-05", 210],
+	["2025-05-09", 210],
+	["2025-05-15", 410],
+	["2025-05-22", 480],
+	["2025-06-06", 45],
+	["2025-06-09", 415],
+	["2025-06-16", 245],
+	["2025-06-19", 332],
+	["2025-07-04", 127],
+	["2025-07-09", 327],
+	["2025-07-24", 427],
+	["2025-08-08", 150],
+	["2025-08-11", 250],
+	["2025-08-15", 350],
+	["2025-08-22", 460],
+	["2025-09-10", 480],
+	["2025-09-18", 312],
+	["2025-10-15", 60],
+	["2025-10-19", 80],
+	["2025-10-21", 190]
+]);
+
+onMounted(async () => {
+	let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
+	setChart(chart1, "chart1");
 
 	let chart2 = getPieChart(chart2Data.value, colorList);
 	setChart(chart2, "chart2");
@@ -1089,10 +1084,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 +1219,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 +1312,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 +1327,8 @@ 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;
+					cursor: pointer;
 					.item-left {
 						width: 48px;
 						height: 48px;
@@ -1474,135 +1566,354 @@ onMounted(async () => {
 								height: 100%;
 							}
 						}
-						.title {
-							display: flex;
-							width: 148px;
-							background: rgba(206, 79, 81, 1);
-							margin-left: 25px;
-							.text {
-								margin-left: 15px;
-								margin-top: 16px;
-								height: 22px;
-								color: #fff;
-								font-family: Microsoft YaHei;
-								font-size: 20px;
-								font-weight: 700;
-								line-height: 22px;
-							}
-							.num {
-								width: 24px;
-								height: 20px;
-								line-height: 20px;
-								text-align: center;
-								color: rgba(255, 255, 255, 1);
-								font-family: Microsoft YaHei;
-								font-size: 12px;
-								margin-left: 15px;
-								margin-top: 18px;
-								border-radius: 100px;
-								background: rgba(255, 255, 255, 0.3);
-							}
+						.title {
+							display: flex;
+							width: 148px;
+							background: rgba(206, 79, 81, 1);
+							margin-left: 25px;
+							.text {
+								margin-left: 15px;
+								margin-top: 16px;
+								height: 22px;
+								color: #fff;
+								font-family: Microsoft YaHei;
+								font-size: 20px;
+								font-weight: 700;
+								line-height: 22px;
+							}
+							.num {
+								width: 24px;
+								height: 20px;
+								line-height: 20px;
+								text-align: center;
+								color: rgba(255, 255, 255, 1);
+								font-family: Microsoft YaHei;
+								font-size: 12px;
+								margin-left: 15px;
+								margin-top: 18px;
+								border-radius: 100px;
+								background: rgba(255, 255, 255, 0.3);
+							}
+						}
+						.more {
+							margin-top: 19px;
+							margin-left: 200px;
+							color: rgba(20, 89, 187, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 16px;
+							cursor: pointer;
+						}
+					}
+					.box2-main {
+						box-sizing: border-box;
+						padding-right: 20px;
+						height: 282px;
+						overflow-y: auto;
+						.box2-main-item {
+							margin-left: 23px;
+							height: 47px;
+							width: 464px;
+							display: flex;
+							.itemLeftStatus1 {
+								color: rgba(82, 196, 26, 1) !important;
+								background: rgba(246, 255, 237, 1) !important;
+							}
+							.itemLeftStatus2 {
+								color: rgba(250, 140, 22, 1) !important;
+								background: rgba(255, 247, 230, 1) !important;
+							}
+							.item-left {
+								margin-top: 4px;
+								margin-left: 2px;
+								width: 40px;
+								height: 40px;
+								border-radius: 20px;
+								background: rgba(255, 241, 240);
+								color: rgba(245, 34, 45, 1);
+								font-family: Microsoft YaHei;
+								font-size: 12px;
+								font-weight: 400;
+								line-height: 14px;
+								box-sizing: border-box;
+								padding: 6px 4px;
+								text-align: center;
+							}
+							.item-right {
+								margin-left: 13px;
+								width: 408px;
+								height: 47px;
+								border-bottom: 1px solid rgba(240, 242, 244, 1);
+								display: flex;
+								.text {
+									width: 348px;
+									color: rgba(59, 65, 75, 1);
+									font-family: Microsoft YaHei;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 47px;
+								}
+								.time {
+									margin-left: 10px;
+									line-height: 47px;
+									color: rgba(132, 136, 142, 1);
+									font-family: Microsoft YaHei;
+									font-size: 14px;
+									font-weight: 400;
+								}
+							}
+						}
+					}
+					.box2-footer {
+						position: absolute;
+						left: 40px;
+						bottom: 20px;
+						width: 430px;
+						height: 42px;
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						align-items: center;
+						border-radius: 6px;
+						background: rgba(22, 119, 255, 1);
+						cursor: pointer;
+						.icon {
+							width: 16px;
+							height: 16px;
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.text {
+							margin-left: 8px;
+							color: rgba(255, 255, 255, 1);
+							font-family: Microsoft YaHei;
+							font-size: 14px;
+							font-weight: 400;
+							line-height: 22px;
+						}
+					}
+				}
+			}
+			.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 {
-							margin-top: 19px;
-							margin-left: 200px;
+							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: 16px;
+							line-height: 24px;
 							cursor: pointer;
 						}
 					}
-					.box2-main {
-						box-sizing: border-box;
-						padding-right: 20px;
-						height: 282px;
+					.box4-main {
+						height: 402px;
 						overflow-y: auto;
-						.box2-main-item {
-							margin-left: 23px;
-							height: 47px;
-							width: 464px;
+						box-sizing: border-box;
+						padding-top: 8px;
+						.box4-main-item {
+							margin-top: 16px;
 							display: flex;
-							.itemLeftStatus1 {
-								color: rgba(82, 196, 26, 1) !important;
-								background: rgba(246, 255, 237, 1) !important;
-							}
-							.itemLeftStatus2 {
-								color: rgba(250, 140, 22, 1) !important;
-								background: rgba(255, 247, 230, 1) !important;
+							margin-left: 21px;
+							.left {
+								margin-top: 5px;
+								width: 36px;
+								height: 36px;
+								img {
+									width: 100%;
+									height: 100%;
+								}
 							}
-							.item-left {
-								margin-top: 4px;
-								margin-left: 2px;
-								width: 40px;
-								height: 40px;
-								border-radius: 20px;
-								background: rgba(255, 241, 240);
-								color: rgba(245, 34, 45, 1);
-								font-family: Microsoft YaHei;
-								font-size: 12px;
-								font-weight: 400;
-								line-height: 14px;
+							.right {
+								margin-left: 10px;
+								width: 690px;
 								box-sizing: border-box;
-								padding: 6px 4px;
-								text-align: center;
-							}
-							.item-right {
-								margin-left: 13px;
-								width: 408px;
-								height: 47px;
-								border-bottom: 1px solid rgba(240, 242, 244, 1);
-								display: flex;
-								.text {
-									width: 348px;
+								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: 47px;
-								}
-								.time {
-									margin-left: 10px;
-									line-height: 47px;
-									color: rgba(132, 136, 142, 1);
-									font-family: Microsoft YaHei;
-									font-size: 14px;
-									font-weight: 400;
+									line-height: 24px;
 								}
 							}
 						}
 					}
-					.box2-footer {
-						position: absolute;
-						left: 40px;
-						bottom: 20px;
-						width: 430px;
-						height: 42px;
-						display: flex;
-						flex-direction: row;
-						justify-content: center;
-						align-items: center;
-						border-radius: 6px;
-						background: rgba(22, 119, 255, 1);
-						cursor: pointer;
-						.icon {
-							width: 16px;
-							height: 16px;
-							img {
-								width: 100%;
-								height: 100%;
-							}
-						}
-						.text {
-							margin-left: 8px;
-							color: rgba(255, 255, 255, 1);
-							font-family: Microsoft YaHei;
-							font-size: 14px;
-							font-weight: 400;
-							line-height: 22px;
-						}
-					}
 				}
 			}
 			.center-center1 {
@@ -2030,6 +2341,12 @@ onMounted(async () => {
 					}
 				}
 			}
+			.divide3 {
+				width: 1600px;
+				margin: 0 auto;
+				margin-top: 68px;
+				margin-bottom: 36px;
+			}
 			.center-footer {
 				margin-top: 21px;
 				height: 452px;
@@ -2267,9 +2584,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 +2640,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

 <template>
-<<<<<<< HEAD
 	<div class="home-wrapper">
 		<div class="home-main">
 			<div class="home-main-header">
@@ -225,7 +224,7 @@
 							</div>
 							<div class="header-title">{{ "涉及领域" }}</div>
 							<div class="box4-header-right">
-								<el-select v-model="curAreaYear" placeholder="选择发布时间" style="width: 120px">
+								<el-select v-model="curAreaYear" placeholder="选择发布时间" style="width: 100px">
 									<el-option
 										v-for="item in areaYearList"
 										:key="item.value"
@@ -239,265 +238,6 @@
 					</div>
 				</div>
 			</div>
-=======
-  <div class="home-wrapper">
-    <div class="home-main">
-      <div class="home-main-header">
-        <div class="home-main-header-top">
-          <span>国家科技安全 </span>> <span>中美博弈概览 </span>>
-          <span>市场准入限制</span>
-        </div>
-        <div class="home-main-header-center">
-          <el-input
-            v-model="input"
-            style="width: 838px; 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-footer">
-          <div class="home-main-header-footer-item">
-            <div class="item-top">142</div>
-            <div class="item-footer">总调查案件数</div>
-          </div>
-          <div class="home-main-header-footer-item">
-            <div class="item-top">28</div>
-            <div class="item-footer">调查中案件数</div>
-          </div>
-          <div class="home-main-header-footer-item">
-            <div class="item-top">326</div>
-            <div class="item-footer">涉及中企</div>
-          </div>
-          <div class="home-main-header-footer-item">
-            <div class="item-top">38%</div>
-            <div class="item-footer">胜诉/和解率</div>
-          </div>
-          <div class="home-main-header-footer-item">
-            <div class="item-top">285</div>
-            <div class="item-footer">分析报告</div>
-          </div>
-        </div>
-      </div>
-      <div class="home-main-center">
-        <div class="center-top">
-          <div class="box1">
-            <div class="box1-left">
-              <img src="./assets/images/box1-left.png" alt="" />
-            </div>
-            <div class="box1-right">
-              <img src="./assets/images/box1-right.png" alt="" />
-            </div>
-            <div class="box1-header">
-              <div class="box1-header-left">
-                <div class="icon">
-                  <img src="./assets/images/box1-header-icon.png" alt="" />
-                </div>
-                <div class="title">{{ "调查进展" }}</div>
-              </div>
-              <div class="box1-header-right" @click="handleClickToDetail()">
-                {{ "查看详情 >" }}
-              </div>
-            </div>
-            <div class="box1-main">
-              <div class="box1-main-header">
-                <div class="header-left">
-                  {{
-                    "美国ITC发布对外国制造的半导体器件及其下游产品和组件的337部分终裁"
-                  }}
-                </div>
-                <div class="header-right">
-                  <div class="tag1">{{ "337" }}</div>
-                  <div class="tag2">{{ "半导体" }}</div>
-                </div>
-              </div>
-              <div class="info-box">
-                <div class="info-header">
-                  <div class="icon"></div>
-                  <div class="time">{{ "2025-08-15" }}</div>
-                  <div class="title">{{ "部分终裁" }}</div>
-                </div>
-                <div class="info-content">
-                  {{
-                    "对本案行政法官于2025年7月31日作出的初裁（No.36）不予复审，即基于申请方撤回，终止本案对美国注册专利号9,093,473第4项申诉的调查。"
-                  }}
-                </div>
-              </div>
-              <div class="list-box">
-                <div class="list-item">
-                  <div class="icon"></div>
-                  <div class="list-left">{{ "调查案号：" }}</div>
-                  <div class="list-right">{{ "337-TA-1443" }}</div>
-                </div>
-                <div class="list-item">
-                  <div class="icon"></div>
-                  <div class="list-left">{{ "涉及产品：" }}</div>
-                  <div class="list-right">
-                    {{
-                      "对美出口、在美进口及销售的特定外国制造的半导体器件及其下游产品和组件（Certain Foreign-Fabricated ..."
-                    }}
-                  </div>
-                </div>
-                <div class="list-item">
-                  <div class="icon"></div>
-                  <div class="list-left">{{ "原告：" }}</div>
-                  <div class="list-right">
-                    {{
-                      "爱尔兰Longitude Licensing Ltd.、爱尔兰Marlin Semiconductor Limited"
-                    }}
-                  </div>
-                </div>
-                <div class="list-item">
-                  <div class="icon"></div>
-                  <div class="list-left">{{ "被告：" }}</div>
-                  <div class="list-right">
-                    {{
-                      "中国台湾地区Taiwan Semiconductor Manufacturing Company Limited of Taiwan、美国Apple Inc. of ...."
-                    }}
-                  </div>
-                </div>
-                <div class="list-item">
-                  <div class="icon"></div>
-                  <div class="list-left">{{ "涉案专利" }}</div>
-                  <div class="list-right">
-                    {{ "美国注册专利号7745847、9093473、9147747、9184292" }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="box2">
-            <div class="box2-header">
-              <div class="icon">
-                <img src="./assets/images/box2-header-icon.png" alt="" />
-              </div>
-              <div class="title">
-                <div class="text">{{ "风险信号" }}</div>
-                <div class="num">{{ warningList.length }}</div>
-              </div>
-              <div class="more">{{ "更多 >" }}</div>
-            </div>
-            <div class="box2-main">
-              <div
-                class="box2-main-item"
-                v-for="(item, index) in warningList"
-                :key="index"
-              >
-                <div
-                  class="item-left"
-                  :class="{
-                    itemLeftStatus1: item.status === '一般风险',
-                    itemLeftStatus2: item.status === '重大风险',
-                  }"
-                >
-                  {{ item.status }}
-                </div>
-                <div class="item-right">
-                  <div class="text">
-                    {{ item.title }}
-                  </div>
-                  <div class="time">{{ item.time }}</div>
-                </div>
-              </div>
-            </div>
-            <div class="box2-footer">
-              <div class="icon">
-                <img src="./assets/images/box2-footer-icon.png" alt="" />
-              </div>
-              <div class="text">{{ "风险处理" }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="center-center">
-          <div class="center-center-box1">
-            <div class="header">
-              <div class="header-left">{{ "301调查" }}</div>
-              <div class="header-right">{{ "52项" }}</div>
-            </div>
-            <div class="content-box">
-              <div class="item">{{ "可能措施: 加征关税、限制进口" }}</div>
-              <div class="item">
-                {{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
-              </div>
-            </div>
-          </div>
-          <div class="center-center-box2">
-            <div class="header">
-              <div class="header-left">{{ "232调查" }}</div>
-              <div class="header-right">{{ "3项" }}</div>
-            </div>
-            <div class="content-box">
-              <div class="item">{{ "可能措施: 加征关税、限制进口" }}</div>
-              <div class="item">
-                {{
-                  "依据《1962年贸易扩展法》第232条评估进口产品对国家安全影响"
-                }}
-              </div>
-            </div>
-          </div>
-          <div class="center-center-box3">
-            <div class="header">
-              <div class="header-left">{{ "337调查" }}</div>
-              <div class="header-right">{{ "87项" }}</div>
-            </div>
-            <div class="content-box">
-              <div class="item">{{ "可能措施: 排除令、禁止令" }}</div>
-              <div class="item">
-                {{ "依据《1930年关税法》第337条针对知识产权侵权行为" }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="center-footer">
-          <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 class="box3-header-right">
-                <div class="right-box rightBoxActive">
-                  {{ "按年度" }}
-                </div>
-                <div class="right-box">
-                  {{ "按月度" }}
-                </div>
-              </div>
-            </div>
-            <div class="box3-main" id="chart1"></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="box4-header-right">
-                <el-select
-                  v-model="curAreaYear"
-                  placeholder="选择发布时间"
-                  style="width: 100px"
-                >
-                  <el-option
-                    v-for="item in areaYearList"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </div>
-            </div>
-            <div class="box4-main" id="chart2"></div>
-          </div>
-        </div>
-      </div>
->>>>>>> 472380f98908a1b616c78da3af0082bf120e3559
 
 			<div class="home-main-footer">
 				<div class="home-main-footer-header">
@@ -938,10 +678,6 @@ onMounted(async () => {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
-			// position: sticky;
-			// left: 0;
-			// top: 0;
-			// z-index: 9999;
 			.home-main-header-top {
 				box-sizing: border-box;
 				width: 100%;
@@ -959,7 +695,7 @@ onMounted(async () => {
 				padding-left: 160px;
 			}
 			.home-main-header-center {
-				margin-top: 13px;
+				margin-top: 48px;
 				width: 960px;
 				height: 48px;
 				border-radius: 4px;
@@ -971,14 +707,15 @@ 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;
+					cursor: pointer;
 					.search-icon {
 						width: 18px;
 						height: 18px;
@@ -1030,7 +767,6 @@ onMounted(async () => {
 			}
 		}
 
-<<<<<<< HEAD
 		.home-main-center {
 			margin-top: 34px;
 			.center-top {
@@ -1640,9 +1376,10 @@ onMounted(async () => {
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
 					background: rgba(255, 255, 255, 1);
 					.box4-header {
-						width: 452px;
-						margin: 0 auto;
+						width: 521px;
 						height: 53px;
+						box-sizing: border-box;
+						padding: 0 20px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
 						display: flex;
 						position: relative;
@@ -1657,7 +1394,7 @@ onMounted(async () => {
 						}
 						.header-title {
 							margin-top: 16px;
-							margin-left: 26px;
+							margin-left: 15px;
 							height: 22px;
 							color: rgba(20, 89, 187, 1);
 							font-family: Microsoft YaHei;
@@ -1667,7 +1404,7 @@ onMounted(async () => {
 						}
 						.box4-header-right {
 							position: absolute;
-							right: 0;
+							right: 20px;
 							top: 10px;
 						}
 					}
@@ -1985,963 +1722,5 @@ onMounted(async () => {
 			}
 		}
 	}
-=======
-    .home-main-center {
-      margin-top: 34px;
-      .center-top {
-        height: 450px;
-        display: flex;
-        justify-content: center;
-        gap: 20px;
-        .box1 {
-          width: 1064px;
-          height: 450px;
-          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
-          background: #fff;
-          box-sizing: border-box;
-          padding-left: 31px;
-          padding-right: 41px;
-          position: relative;
-          .box1-left {
-            position: absolute;
-            left: 0;
-            top: 220px;
-            width: 24px;
-            height: 48px;
-            cursor: pointer;
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-          .box1-right {
-            position: absolute;
-            right: 0;
-            top: 220px;
-            width: 24px;
-            height: 48px;
-            cursor: pointer;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            
-          }
-          .box1-header {
-            height: 53px;
-            border-bottom: 1px solid rgba(240, 242, 244, 1);
-            display: flex;
-            justify-content: space-between;
-            .box1-header-left {
-              display: flex;
-              .icon {
-                width: 18px;
-                height: 18px;
-                margin-top: 19px;
-                img {
-                  width: 100%;
-                  height: 100%;
-                }
-              }
-              .title {
-                width: 152px;
-                height: 53px;
-                margin-left: 18px;
-                color: #fff;
-                background: rgba(10, 87, 166, 1);
-                font-family: Microsoft YaHei;
-                font-size: 20px;
-                font-weight: 700;
-                line-height: 53px;
-                text-align: center;
-              }
-            }
-            .box1-header-right {
-              margin-top: 19px;
-              height: 16px;
-              color: rgba(20, 89, 187, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 400;
-              line-height: 16px;
-              cursor: pointer;
-            }
-          }
-          .box1-main {
-            width: 1064px;
-            height: 354px;
-            margin-top: 22px;
-            .box1-main-header {
-              width: 990px;
-              height: 54px;
-              display: flex;
-              justify-content: space-between;
-              .header-left {
-                padding-left: 22px;
-                color: rgba(10, 87, 166, 1);
-                font-family: Microsoft YaHei;
-                font-size: 20px;
-                font-weight: 700;
-                line-height: 26px;
-              }
-              .header-right {
-                display: flex;
-                width: 200px;
-                justify-content: flex-end;
-                .tag1 {
-                  height: 24px;
-                  line-height: 24px;
-                  padding: 0 8px;
-                  box-sizing: border-box;
-                  color: rgba(10, 87, 166, 1);
-                  border: 1px solid rgba(145, 202, 255, 1);
-                  border-radius: 4px;
-                  background: rgba(230, 244, 255, 1);
-                }
-                .tag2 {
-                  margin-left: 8px;
-                  height: 24px;
-                  line-height: 24px;
-                  padding: 0 8px;
-                  box-sizing: border-box;
-                  color: rgba(19, 168, 168, 1);
-                  border: 1px solid rgba(135, 232, 222, 1);
-                  border-radius: 4px;
-                  background: rgba(230, 255, 251, 1);
-                }
-              }
-            }
-            .info-box {
-              margin-left: 6px;
-              width: 989px;
-              height: 108px;
-              box-sizing: border-box;
-              border: 1px solid rgba(231, 243, 255, 1);
-              border-radius: 4px;
-              background: rgba(246, 250, 255, 1);
-              .info-header {
-                height: 38px;
-                display: flex;
-                .icon {
-                  width: 4px;
-                  height: 4px;
-                  border-radius: 2px;
-                  background: rgba(59, 65, 75, 1);
-                  margin-left: 24px;
-                  margin-top: 20px;
-                }
-                .time {
-                  width: 98px;
-                  height: 24px;
-                  margin-top: 10px;
-                  margin-left: 12px;
-                  color: rgba(59, 65, 75, 1);
-                  font-family: Microsoft YaHei;
-                  font-size: 16px;
-                  font-weight: 700;
-                  line-height: 24px;
-                }
-                .title {
-                  margin-left: 11px;
-                  margin-top: 10px;
-                  height: 24px;
-                  color: rgba(59, 65, 75, 1);
-                  font-family: Microsoft YaHei;
-                  font-size: 16px;
-                  font-weight: 700;
-                  line-height: 24px;
-                }
-              }
-              .info-content {
-                width: 909px;
-                height: 60px;
-                color: rgba(59, 65, 75, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 400;
-                line-height: 30px;
-                margin-left: 41px;
-                margin-top: 4px;
-              }
-            }
-            .list-box {
-              margin-top: 18px;
-              margin-left: 28px;
-              width: 940px;
-              height: 185px;
-              .list-item {
-                height: 37px;
-                display: flex;
-                .icon {
-                  width: 4px;
-                  height: 4px;
-                  border-radius: 2px;
-                  background: rgba(59, 65, 75, 1);
-                  margin-top: 16px;
-                }
-                .list-left {
-                  margin-left: 18px;
-                  line-height: 37px;
-                  width: 100px;
-                  color: rgba(59, 65, 75, 1);
-                  font-family: Microsoft YaHei;
-                  font-size: 16px;
-                  font-weight: 700;
-                }
-                .list-right {
-                  line-height: 37px;
-                  margin-left: 17px;
-                  color: rgba(59, 65, 75, 1);
-                  font-family: Microsoft YaHei;
-                  font-size: 16px;
-                  font-weight: 400;
-                }
-              }
-            }
-          }
-        }
-        .box2 {
-          width: 521px;
-          padding-right: 20px;
-          height: 450px;
-          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
-          background: rgba(255, 255, 255, 1);
-          position: relative;
-          .box2-header {
-            height: 54px;
-            display: flex;
-            .icon {
-              width: 24px;
-              height: 22px;
-              margin-left: 33px;
-              margin-top: 18px;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
-            .title {
-              display: flex;
-              width: 148px;
-              background: rgba(206, 79, 81, 1);
-              margin-left: 25px;
-              .text {
-                margin-left: 15px;
-                margin-top: 16px;
-                height: 22px;
-                color: #fff;
-                font-family: Microsoft YaHei;
-                font-size: 20px;
-                font-weight: 700;
-                line-height: 22px;
-              }
-              .num {
-                width: 24px;
-                height: 20px;
-                line-height: 20px;
-                text-align: center;
-                color: rgba(255, 255, 255, 1);
-                font-family: Microsoft YaHei;
-                font-size: 12px;
-                margin-left: 15px;
-                margin-top: 18px;
-                border-radius: 100px;
-                background: rgba(255, 255, 255, 0.3);
-              }
-            }
-            .more {
-              margin-top: 19px;
-              margin-left: 200px;
-              color: rgba(20, 89, 187, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 400;
-              line-height: 16px;
-              cursor: pointer;
-            }
-          }
-          .box2-main {
-            height: 282px;
-            overflow-y: auto;
-            .box2-main-item {
-              margin-left: 23px;
-              height: 47px;
-              width: 464px;
-              display: flex;
-              .itemLeftStatus1 {
-                color: rgba(82, 196, 26, 1) !important;
-                background: rgba(246, 255, 237, 1) !important;
-              }
-              .itemLeftStatus2 {
-                color: rgba(250, 140, 22, 1) !important;
-                background: rgba(255, 247, 230, 1) !important;
-              }
-              .item-left {
-                margin-top: 4px;
-                margin-left: 2px;
-                width: 40px;
-                height: 40px;
-                border-radius: 20px;
-                background: rgba(255, 241, 240);
-                color: rgba(245, 34, 45, 1);
-                font-family: Microsoft YaHei;
-                font-size: 12px;
-                font-weight: 400;
-                line-height: 14px;
-                box-sizing: border-box;
-                padding: 6px 4px;
-                text-align: center;
-              }
-              .item-right {
-                margin-left: 13px;
-                width: 408px;
-                height: 47px;
-                border-top: 1px solid rgba(240, 242, 244, 1);
-                border-bottom: 1px solid rgba(240, 242, 244, 1);
-                display: flex;
-                .text {
-                  width: 348px;
-                  color: rgba(59, 65, 75, 1);
-                  font-family: Microsoft YaHei;
-                  font-size: 16px;
-                  font-weight: 400;
-                  line-height: 47px;
-                }
-                .time {
-                  margin-left: 10px;
-                  line-height: 47px;
-                  color: rgba(132, 136, 142, 1);
-                  font-family: Microsoft YaHei;
-                  font-size: 14px;
-                  font-weight: 400;
-                }
-              }
-            }
-          }
-          .box2-footer {
-            position: absolute;
-            left: 40px;
-            bottom: 20px;
-            width: 430px;
-            height: 42px;
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center;
-            border-radius: 6px;
-            background: rgba(22, 119, 255, 1);
-            cursor: pointer;
-            .icon {
-              width: 16px;
-              height: 16px;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
-            .text {
-              margin-left: 8px;
-              color: rgba(255, 255, 255, 1);
-              font-family: Microsoft YaHei;
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 22px;
-            }
-          }
-        }
-      }
-      .center-center {
-        width: 1600px;
-        margin: 24px auto;
-        height: 142px;
-        margin-top: 24px;
-        display: flex;
-        justify-content: space-between;
-        .center-center-box1 {
-          width: 520px;
-          height: 142px;
-          background: #fff;
-          border-radius: 4px;
-          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-          position: relative;
-          &::before {
-            content: "";
-            position: absolute;
-            z-index: 99;
-            left: 0;
-            top: 15px;
-            width: 4px;
-            height: 111px;
-            background: rgba(250, 140, 22, 1);
-          }
-          .header {
-            height: 56px;
-            display: flex;
-            justify-content: space-between;
-            .header-left {
-              margin-left: 30px;
-              margin-top: 26px;
-              color: rgba(59, 65, 75, 1);
-              font-family: Microsoft YaHei;
-              font-size: 20px;
-              font-weight: 700;
-              line-height: 26px;
-            }
-            .header-right {
-              margin-top: 28px;
-              margin-right: 35px;
-              height: 24px;
-              color: rgba(250, 140, 22, 1);
-              font-family: Microsoft YaHei;
-              font-size: 30px;
-              font-weight: 700;
-              line-height: 24px;
-            }
-          }
-          .content-box {
-            margin-left: 30px;
-            .item {
-              height: 24px;
-              color: rgba(95, 101, 108, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 400;
-              line-height: 24px;
-              margin-top: 8px;
-            }
-          }
-        }
-        .center-center-box2 {
-          width: 520px;
-          height: 142px;
-          background: #fff;
-          border-radius: 4px;
-          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-          position: relative;
-          &::before {
-            content: "";
-            position: absolute;
-            z-index: 99;
-            left: 0;
-            top: 15px;
-            width: 4px;
-            height: 111px;
-            background: rgba(114, 46, 209, 1);
-          }
-          .header {
-            height: 56px;
-            display: flex;
-            justify-content: space-between;
-            .header-left {
-              margin-left: 30px;
-              margin-top: 26px;
-              color: rgba(59, 65, 75, 1);
-              font-family: Microsoft YaHei;
-              font-size: 20px;
-              font-weight: 700;
-              line-height: 26px;
-            }
-            .header-right {
-              margin-top: 28px;
-              margin-right: 35px;
-              height: 24px;
-              color: rgba(114, 46, 209, 1);
-              font-family: Microsoft YaHei;
-              font-size: 30px;
-              font-weight: 700;
-              line-height: 24px;
-            }
-          }
-          .content-box {
-            margin-left: 30px;
-            .item {
-              height: 24px;
-              color: rgba(95, 101, 108, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 400;
-              line-height: 24px;
-              margin-top: 8px;
-            }
-          }
-        }
-        .center-center-box3 {
-          width: 520px;
-          height: 142px;
-          background: #fff;
-          border-radius: 4px;
-          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-          position: relative;
-          &::before {
-            content: "";
-            position: absolute;
-            z-index: 99;
-            left: 0;
-            top: 15px;
-            width: 4px;
-            height: 111px;
-            background: rgba(10, 87, 166, 1);
-          }
-          .header {
-            height: 56px;
-            display: flex;
-            justify-content: space-between;
-            .header-left {
-              margin-left: 30px;
-              margin-top: 26px;
-              color: rgba(59, 65, 75, 1);
-              font-family: Microsoft YaHei;
-              font-size: 20px;
-              font-weight: 700;
-              line-height: 26px;
-            }
-            .header-right {
-              margin-top: 28px;
-              margin-right: 35px;
-              height: 24px;
-              color: rgba(10, 87, 166, 1);
-              font-family: Microsoft YaHei;
-              font-size: 30px;
-              font-weight: 700;
-              line-height: 24px;
-            }
-          }
-          .content-box {
-            margin-left: 30px;
-            .item {
-              height: 24px;
-              color: rgba(95, 101, 108, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 400;
-              line-height: 24px;
-              margin-top: 8px;
-            }
-          }
-        }
-      }
-      .center-footer {
-        margin-top: 21px;
-        height: 450px;
-        display: flex;
-        justify-content: center;
-        .box3 {
-          width: 1064px;
-          height: 450px;
-          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
-          background: rgba(255, 255, 255, 1);
-          .box3-header {
-            height: 53px;
-            border-bottom: 1px solid rgba(240, 242, 244, 1);
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            padding: 0 20px;
-            .box3-header-left {
-              display: flex;
-              .box3-header-icon {
-                margin-top: 15px;
-                width: 13px;
-                height: 13px;
-                img {
-                  width: 100%;
-                  height: 100%;
-                }
-              }
-              .box3-header-title {
-                margin-top: 16px;
-                margin-left: 22px;
-                height: 22px;
-                color: rgba(20, 89, 187, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 700;
-                line-height: 22px;
-              }
-            }
-            .box3-header-right {
-              display: flex;
-              justify-content: flex-end;
-              width: 178px;
-              height: 22px;
-              margin-top: 11px;
-              .right-box {
-                height: 28px;
-                padding: 0 8px;
-                text-align: center;
-                line-height: 28px;
-                box-sizing: border-box;
-                border: 1px solid rgba(230, 231, 232, 1);
-                border-radius: 4px;
-                background: rgba(255, 255, 255, 1);
-                margin-left: 8px;
-                cursor: pointer;
-              }
-              .rightBoxActive {
-                color: rgba(10, 87, 166, 1);
-                border: 1px solid rgba(10, 87, 166, 1);
-                border-radius: 4px;
-                background: rgba(246, 250, 255, 1);
-              }
-            }
-          }
-          .box3-main {
-            height: 397px;
-          }
-        }
-        .box4 {
-          margin-left: 20px;
-          width: 521px;
-          height: 450px;
-          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
-          background: rgba(255, 255, 255, 1);
-          .box4-header {
-            width: 521px;
-            height: 53px;
-            box-sizing: border-box;
-            padding: 0 20px;
-            border-bottom: 1px solid rgba(240, 242, 244, 1);
-            display: flex;
-            position: relative;
-            .header-icon {
-              margin-top: 18px;
-              width: 18px;
-              height: 18px;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
-            .header-title {
-              margin-top: 16px;
-              margin-left: 15px;
-              height: 22px;
-              color: rgba(20, 89, 187, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 700;
-              line-height: 22px;
-            }
-            .box4-header-right {
-              position: absolute;
-              right: 20px;
-              top: 10px;
-            }
-          }
-          .box4-main {
-            width: 452px;
-            height: 360px;
-            margin: 8px auto;
-          }
-        }
-      }
-    }
-    .home-main-footer {
-      // width: 100%;
-      height: 1059px;
-      background: rgba(248, 249, 250, 1);
-      .home-main-footer-header {
-        width: 1600px;
-        height: 42px;
-        margin: 36px auto;
-        // background: orange;
-        display: flex;
-        justify-content: space-between;
-        .btn-box {
-          width: 1000px;
-          display: flex;
-          .btn {
-            color: rgba(95, 101, 108, 1);
-            font-family: Microsoft YaHei;
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 42px;
-            padding: 0 24px;
-            border-radius: 21px;
-            background: rgba(20, 89, 187, 0);
-            margin-right: 20px;
-            cursor: pointer;
-            &:hover {
-              background: rgba(20, 89, 187, 0.1);
-            }
-          }
-          .btnActive {
-            padding: 0 24px;
-            border-radius: 21px;
-            background: rgba(20, 89, 187, 1);
-            color: #fff;
-            &:hover {
-              color: #fff;
-              background: rgba(20, 89, 187, 1);
-            }
-          }
-        }
-        .select-box {
-          height: 42px;
-          box-sizing: border-box;
-          padding: 5px 0;
-        }
-      }
-      .home-main-footer-main {
-        width: 1600px;
-        margin-bottom: 20px;
-        height: 985px;
-        // 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: 20px;
-        display: flex;
-        .left {
-          width: 300px;
-          height: 560px;
-          border-radius: 4px;
-          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-          background: rgba(255, 255, 255, 1);
-          .left-box1 {
-            margin-top: 17px;
-            height: 260px;
-            .left-box1-header {
-              display: flex;
-              .icon {
-                width: 8px;
-                height: 16px;
-                margin-top: 4px;
-                border-radius: 2px 2px 0 0;
-                background: rgba(10, 87, 166, 1);
-              }
-              .title {
-                height: 2px;
-                margin-left: 17px;
-                color: rgba(10, 87, 166, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 700;
-                line-height: 24px;
-              }
-            }
-            .left-box1-main {
-              margin-top: 10px;
-              .time-label {
-                height: 35px;
-                margin-left: 25px;
-              }
-            }
-          }
-          .left-box2 {
-            margin-top: 17px;
-            height: 260px;
-            .left-box2-header {
-              display: flex;
-              .icon {
-                width: 8px;
-                height: 16px;
-                margin-top: 4px;
-                border-radius: 2px 2px 0 0;
-                background: rgba(10, 87, 166, 1);
-              }
-              .title {
-                height: 2px;
-                margin-left: 17px;
-                color: rgba(10, 87, 166, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 700;
-                line-height: 24px;
-              }
-            }
-            .left-box2-main {
-              margin-top: 10px;
-              .area-label {
-                height: 35px;
-                margin-left: 25px;
-              }
-            }
-          }
-        }
-        .right {
-          margin-left: 16px;
-          width: 1284px;
-          height: 899px;
-          border-radius: 4px;
-          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
-          background: rgba(255, 255, 255, 1);
-          .right-header {
-            height: 54px;
-            background: rgba(59, 65, 75, 1);
-            display: flex;
-            .header-item1 {
-              width: 500px;
-              color: rgba(255, 255, 255, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 700;
-              line-height: 54px;
-              padding-left: 80px;
-              box-sizing: border-box;
-            }
-            .header-item2 {
-              width: 196px;
-              color: rgba(255, 255, 255, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 700;
-              line-height: 54px;
-              padding-left: 20px;
-              box-sizing: border-box;
-            }
-            .header-item3 {
-              width: 196px;
-              color: rgba(255, 255, 255, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 700;
-              line-height: 54px;
-              padding-left: 20px;
-              box-sizing: border-box;
-            }
-            .header-item4 {
-              width: 196px;
-              color: rgba(255, 255, 255, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 700;
-              line-height: 54px;
-              padding-left: 20px;
-              box-sizing: border-box;
-            }
-            .header-item5 {
-              width: 196px;
-              color: rgba(255, 255, 255, 1);
-              font-family: Microsoft YaHei;
-              font-size: 16px;
-              font-weight: 700;
-              line-height: 54px;
-              padding-left: 20px;
-              box-sizing: border-box;
-            }
-          }
-          .right-main {
-            height: 780px;
-            // background: orange;
-            .item {
-              display: flex;
-              padding: 16px 0;
-              // height: 56px;
-              &:nth-child(2n) {
-                background: rgba(247, 248, 249, 1);
-              }
-              .item-box1 {
-                width: 500px;
-                display: flex;
-                .name {
-                  height: 22px;
-                  padding: 0 8px;
-                  box-sizing: border-box;
-                  border-radius: 4px;
-                  margin-left: 32px;
-                  margin-top: 10px;
-                  // display: flex;
-                  // align-items: center;
-                }
-                .name1 {
-                  color: rgba(250, 140, 22, 1);
-                  border: 1px solid rgba(255, 213, 145, 1);
-                  background: rgba(255, 247, 230, 1);
-                }
-                .name2 {
-                  color: rgba(10, 87, 166, 1);
-                  border: 1px solid rgba(145, 202, 255, 1);
-                  background: rgba(230, 244, 255, 1);
-                }
-                .name3 {
-                  color: rgba(114, 46, 209, 1);
-                  border: 1px solid rgba(211, 173, 247, 1);
-                  background: rgba(249, 240, 255, 1);
-                }
-                .title {
-                  margin-left: 12px;
-                  color: rgba(59, 65, 75, 1);
-                  font-family: Microsoft YaHei;
-                  font-size: 16px;
-                  font-weight: 700;
-                  line-height: 24px;
-                  display: flex;
-                  align-items: center;
-                }
-              }
-              .item-box2 {
-                width: 196px;
-                padding-left: 20px;
-                box-sizing: border-box;
-                color: rgba(59, 65, 75, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 400;
-                line-height: 24px;
-                display: flex;
-                align-items: center;
-              }
-              .item-box3 {
-                width: 196px;
-                padding-left: 20px;
-                box-sizing: border-box;
-                color: rgba(59, 65, 75, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 400;
-                line-height: 24px;
-                display: flex;
-                align-items: center;
-              }
-              .item-box4 {
-                width: 196px;
-                padding-left: 20px;
-                box-sizing: border-box;
-                color: rgba(59, 65, 75, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 400;
-                line-height: 24px;
-                display: flex;
-                align-items: center;
-              }
-              .item-box5 {
-                width: 196px;
-                padding-left: 20px;
-                box-sizing: border-box;
-                color: rgba(59, 65, 75, 1);
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 400;
-                line-height: 24px;
-                display: flex;
-                align-items: center;
-              }
-            }
-          }
-          .right-footer {
-            display: flex;
-            // height: 60px;
-            // background: orange;
-            justify-content: space-between;
-            .footer-left {
-              color: rgba(59, 65, 75, 1);
-              font-family: Microsoft YaHei;
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 18px;
-              margin-left: 24px;
-              margin-top: 6px;
-            }
-            .footer-right {
-              margin-right: 24px;
-            }
-          }
-        }
-      }
-    }
-  }
->>>>>>> 472380f98908a1b616c78da3af0082bf120e3559
 }
 </style>

src/views/overView/component/ResourceSupport.vue

+<!-- 中M博弈概览页 -->
+<template>
+  <div class="resource-box">
+
+    <img class="title-img" src="@/assets/images/bg/概览页模块标题2.png"></img>
+
+    <div style="margin-top: 20px;height: 450px;display: flex;">
+      <div class="resource-content" style="width: 45%; display: block;">
+        <div class="item-header">
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <div class="item-header-text">中美博弈资源新闻动态</div>
+          <div class="item-header-right"> 更多 +</div>
+        </div>
+        <div class="item-header-divider"></div>
+
+      </div>
+      <div class="resource-content" style="width: 45%;margin-left: 5%;">
+        <div class="item-header">
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <div class="item-header-text">创新主体排名</div>
+
+        </div>
+        <div class="item-header-divider"></div>
+
+      </div>
+
+    </div>
+    <div style="margin-top: 20px;height: 450px;display: flex;">
+      <div class="resource-content" style="width: 45%; display: block;">
+        <div class="item-header">
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <div class="item-header-text">研发投入情况</div>
+
+        </div>
+        <div class="item-header-divider"></div>
+        <div style="display: flex;height: calc(100% - 60px);" id="char3">
+
+        </div>
+      </div>
+      <div class="resource-content" style="width: 45%;margin-left: 5%;">
+        <div class="item-header">
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <div class="item-header-text">研发投入领域</div>
+          <div class="item-header-right"> 查看数据源> </div>
+        </div>
+        <div class="item-header-divider"></div>
+        <div style="display: flex;height: calc(100% - 60px);" id="char4">
+
+        </div>
+      </div>
+
+    </div>
+    <div style="margin-top: 20px;height: 450px;display: flex;">
+      <div class="resource-content" style="width: 45%; display: block;">
+        <div class="item-header">
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <div class="item-header-text">专利申请情况</div>
+
+        </div>
+        <div class="item-header-divider"></div>
+        <div style="display: flex;height: calc(100% - 60px);" id="char5">
+
+        </div>
+      </div>
+      <div class="resource-content" style="width: 45%;margin-left: 5%;">
+        <div class="item-header">
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <div class="item-header-text">论文发表情况</div>
+          <div class="item-header-right"> 查看数据源> </div>
+        </div>
+        <div class="item-header-divider"></div>
+        <div style="display: flex;height: calc(100% - 60px);" id="char6">
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from "vue";
+import * as echarts from "echarts";
+import getBarChart2 from '../js/barChart2.js'
+import radarChart2 from '../js/radarChart2.js'
+import getMultiLineChart1 from "../js/multiLineChart1.js";
+
+
+const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
+const data1 = [120, 200, 150, 80, 70]
+const data2 = [90, 230, 180, 110, 100]
+
+//专利申请情况
+const chart5Data = ref({
+  title: [
+    "2024-09",
+    "2024-10",
+    "2024-11",
+    "2024-12",
+    "2025-01",
+    "2025-02",
+    "2025-03",
+    "2025-04",
+    "2025-05",
+    "2025-06",
+    "2025-07",
+    "2025-08"
+  ],
+  data: [
+    {
+      name: "提出法案",
+      value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
+    },
+    {
+      name: "通过法案",
+      value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
+    }
+  ]
+});
+
+// 绘制echarts图表
+const setChart = (option, chartId) => {
+  let chartDom = document.getElementById(chartId);
+  chartDom.removeAttribute("_echarts_instance_");
+  let chart = echarts.init(chartDom);
+  chart.setOption(option);
+  return chart;
+};
+
+onMounted(() => {
+
+  let char3 = getBarChart2(names, data1, data2, false);
+
+  setChart(char3, "char3");
+
+  let char4 = radarChart2()
+  setChart(char4, "char4");
+
+  let chart5 = getMultiLineChart1(chart5Data.value.title, chart5Data.value.data[0].value, chart5Data.value.data[1].value);
+  setChart(chart5, "char5");
+  let chart6 = getMultiLineChart1(chart5Data.value.title, chart5Data.value.data[0].value, chart5Data.value.data[1].value);
+  setChart(chart6, "char6");
+});
+</script>
+
+<style lang="scss" scoped>
+.resource-box {
+  height: 1550px;
+}
+
+.title-text {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 42px;
+  margin: 40px;
+  text-align: center;
+}
+
+.title-img {
+  width: 100%;
+  height: 42px;
+}
+
+.resource-content {
+  /* 容器 480 */
+  width: 100%;
+  height: 450px;
+  box-sizing: border-box;
+  border: 1px solid rgba(234, 236, 238, 1);
+  border-radius: var(---, 10px);
+  /* 业务系统/模块阴影 */
+  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+  background: rgba(255, 255, 255, 1);
+
+  .item-header {
+    height: 48px;
+    width: 100%;
+    display: flex;
+
+    .item-header-icon {
+      width: 20px;
+      height: 20px;
+      margin: 15px;
+    }
+
+    .item-header-text {
+      width: 250px;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 26px;
+      background: rgba(255, 255, 255, 0.65);
+      color: #055FC2;
+      font-family: Microsoft YaHei;
+      font-size: 20px;
+      line-height: 48px;
+      text-align: left;
+
+    }
+
+    .item-header-right {
+      color: rgba(59, 65, 75, 1);
+      font-family: Microsoft YaHei;
+      font-size: 16px;
+      line-height: 48px;
+      text-align: right;
+
+      width: calc(100% - 350px);
+
+      .item-header-right-icon {
+        /* 容器 704 */
+        width: 14px;
+        height: 16px;
+      }
+    }
+  }
+
+  .timeLine-box {
+    height: 100%;
+    width: calc(100% - 50px);
+
+
+    .time-item-box {
+      width: 30%;
+      height: 165px;
+    }
+  }
+
+  .item-header-divider {
+    /* 矩形 249 */
+    width: 100%;
+    height: 1px;
+    background: #eaecee;
+  }
+
+  .resource-btn-left {
+    height: 100%;
+    width: 24px;
+  }
+
+  .resource-btn-right {
+    height: 100%;
+    width: 24px;
+  }
+
+  .resource-btn-icon {
+    height: 48px;
+    width: 100%;
+    margin-top: calc(50% - 24px);
+  }
+
+}
+</style>

src/views/overView/component/Thematicanalysis.vue

+<!-- 中M博弈概览页 -->
+<template>
+  <div class="thematic-box">
+    <div class="title-text">中美博弈专题分析</div>
+    <img class="title-img" src="@/assets/images/bg/概览页模块标题.png"></img>
+    <div class="thematic-content">
+      <div class="item-header">
+        <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+        <div class="item-header-text">对华打压历程</div>
+        <div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
+          数据来源：美国某某局</div>
+      </div>
+      <div class="item-header-divider"></div>
+      <div style="display: flex;height: calc(100% - 60px);">
+        <div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
+          <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
+
+        </div>
+        <div class="timeLine-box">
+          <div style="height: calc(50% - 8px);display: flex">
+            <div v-for="(item, index) in timeLineOddIndexItems" class="time-item-box">
+              {{ item.titlle }}
+            </div>
+          </div>
+          <img style=" width: 100%; height: 10px;" src="@/assets/images/bg/time-line.png"></img>
+          <div style="height: calc(50% - 8px);display: flex;">
+            <div v-for="(item, index) in timeLineIndexItems" class="time-item-box">
+              {{ item.titlle }}
+            </div>
+          </div>
+        </div>
+        <div class="thematic-btn-right" @click="changeBtn('right')">
+          <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
+
+        </div>
+      </div>
+
+    </div>
+    <div class="thematic-content" style="margin-top: 20px;height: 350px;">
+      <div class="item-header">
+        <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+        <div class="item-header-text">打压遏制手段分布</div>
+
+      </div>
+      <div class="item-header-divider"></div>
+      <div style="display: flex;height: calc(100% - 60px);">
+        <div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
+          <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
+
+        </div>
+        <div class="cup-box" style="display: flex;">
+          <div v-for="item in distribution" class="cup-item-box" :style="{
+            color: item.borderColor
+          }">
+            <div class="cup-title">
+              {{ item.titlle }}
+            </div>
+            <div class="cup" :style="{
+
+              borderColor: item.bgColor1,
+              outlineColor: item.bgColor1,
+            }">
+              <!-- 水位 -->
+              <div class="water" :style="{
+                '--percent': item.value,
+                '--c1': item.bgColor1,
+                '--c2': item.bgColor2,
+              }"></div>
+              <!-- 文字 -->
+              <span class="txt" :style="{ color: item.borderColor, }">{{ item.text }}</span>
+            </div>
+            <div style="margin-top: 20px;">
+              {{ item.change }}
+            </div>
+          </div>
+
+
+        </div>
+        <div class="thematic-btn-right" @click="changeBtn('right')">
+          <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
+
+        </div>
+      </div>
+
+    </div>
+    <div style="margin-top: 20px;height: 450px;display: flex;">
+      <div class="thematic-content" style="width: 45%; display: block;">
+        <div class="item-header">
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <div class="item-header-text">打压遏制强度变化</div>
+          <div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
+            数据来源：美国某某局</div>
+        </div>
+        <div class="item-header-divider"></div>
+        <div style="display: flex;height: calc(100% - 60px);" id="chart1">
+
+        </div>
+      </div>
+      <div class="thematic-content" style="width: 45%;margin-left: 5%;">
+        <div class="item-header">
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <div class="item-header-text">打压遏制强度变化</div>
+          <div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
+            数据来源：美国某某局</div>
+        </div>
+        <div class="item-header-divider"></div>
+        <div style="display: flex;height: calc(100% - 60px);" id="char2">
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from "vue";
+import * as echarts from "echarts";
+import getBarChart from '../js/barChart.js'
+import radarChart from '../js/radarChart.js'
+const timeLine = ref([
+  {
+    time: '2025年1月',
+    titlle: '《AI扩散暂行最终规则》发布0',
+    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
+  },
+  {
+    time: '2025年1月',
+    titlle: '《AI扩散暂行最终规则》发布1',
+    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
+  },
+  {
+    time: '2025年1月',
+    titlle: '特朗普签署EO 143202',
+    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
+  },
+  {
+    time: '2025年1月',
+    titlle: '《AI扩散暂行最终规则》发布3',
+    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
+  },
+  {
+    time: '2025年7月23日',
+    titlle: '《AI扩散暂行最终规则》发布4',
+    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
+  },
+])
+
+// 过滤出奇数下标（1,3,5...）
+const timeLineOddIndexItems = computed(() =>
+  timeLine.value.filter((_, idx) => idx % 2 === 1)
+)
+// 过滤出偶数下标（1,3,5...）
+const timeLineIndexItems = computed(() =>
+  timeLine.value.filter((_, idx) => idx % 2 === 0)
+)
+
+
+const distribution = ref([
+  {
+    titlle: '法案',
+    value: 80,
+    text: '1626个',
+    change: '较上个月+3',
+    bgColor1: '#E6F4FF',//浅色
+    bgColor2: '#91CAFF',//深色
+    borderColor: '#0958D9',
+  }, {
+    titlle: '法案',
+    value: 20,
+    text: '1626个',
+    change: '较上个月+3',
+    bgColor1: '#FFFBE6',//浅色
+    bgColor2: '#FDE19A',//深色
+    borderColor: '#D48806',
+  }, {
+    titlle: '法案',
+    value: 10,
+    text: '1626个',
+    change: '较上个月+3',
+    bgColor1: '#E6F4FF',//浅色
+    bgColor2: '#91CAFF',//深色
+    borderColor: '#0958D9',
+  }, {
+    titlle: '法案',
+    value: 40,
+    text: '1626个',
+    change: '较上个月+3',
+    bgColor1: '#E6F4FF',//浅色
+    bgColor2: '#91CAFF',//深色
+    borderColor: '#0958D9',
+  }, {
+    titlle: '法案',
+    value: 50,
+    text: '1626个',
+    change: '较上个月+3',
+    bgColor1: '#E6F4FF',//浅色
+    bgColor2: '#91CAFF',//深色
+    borderColor: '#0958D9',
+  }
+])
+const timeIndex = ref(0)
+//时间轴及遏制手段分布按钮
+function changeBtn(data, type) {
+  if (type === 'left') {
+    timeIndex.value === 0 ? '' : timeIndex.value = timeIndex.value - 1
+  } else {
+    (timeIndex.value.length - timeIndex.value <= 4) ? '' : timeIndex.value = timeIndex.value + 1
+
+  }
+}
+
+
+const chart1Data = ref({
+  name: [
+    "2024-12",
+    "2025-1",
+    "2025-2", "2025-3", "2025-4", "2025-5", "2025-6", "2025-7",
+  ],
+  value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
+});
+
+// 绘制echarts图表
+const setChart = (option, chartId) => {
+  let chartDom = document.getElementById(chartId);
+  console.log(chartDom, 'chartDomchartDomchartDom')
+  chartDom.removeAttribute("_echarts_instance_");
+  let chart = echarts.init(chartDom);
+  chart.setOption(option);
+  return chart;
+};
+
+onMounted(() => {
+  let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
+
+  setChart(char1, "chart1");
+
+  let char2 = radarChart()
+  setChart(char2, "char2");
+});
+</script>
+
+<style lang="scss" scoped>
+.cup-box {
+  overflow-x: auto;
+
+  .cup-item-box {
+    width: 220px;
+    text-align: center;
+    box-sizing: border-box;
+    border: 1px solid rgba(234, 236, 238, 1);
+    border-radius: var(---, 10px);
+    margin: 20px;
+    padding: 20px;
+
+    .cup-title {
+      font-family: Microsoft YaHei;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 26px;
+      letter-spacing: 0px;
+      text-align: center;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+/* 杯子：正圆 */
+.cup {
+  position: relative;
+  width: 130px;
+  height: 130px;
+  /* 本身高度设为 0，内容靠子元素或绝对定位 */
+  border-radius: 50%;
+  border: 4px #2196f3 solid;
+  overflow: hidden;
+  /* 关键：把超出部分裁掉 */
+  display: flex;
+  align-items: flex-end;
+  /* 水永远贴底 */
+  justify-content: center;
+  border: 4px solid #2196f3;
+  /* 内圈实线 */
+  outline: 4px solid #2196f3;
+  /* 外圈实线 */
+  outline-offset: 4px;
+  /* 两线间距，想再宽调大即可 */
+
+}
+
+/* 水位层 */
+.water {
+  width: 100%;
+  height: calc(var(--percent) * 1%);
+  /* 0~100 对应 0~100% */
+  background: linear-gradient(to top, var(--c1), var(--c2));
+  position: relative;
+  animation: wave 3s linear infinite;
+}
+
+/* 波浪 */
+.water::before,
+.water::after {
+  content: '';
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  top: -350px;
+  /* 把圆心顶到上面去 */
+  left: 50%;
+  border-radius: 45%;
+  transform: translate(-50%, 0);
+  background: rgba(255, 255, 255, .4);
+  animation: rotate 7s linear infinite;
+}
+
+.water::after {
+  top: -370px;
+  border-radius: 40%;
+  opacity: .7;
+  animation-duration: 9s;
+  animation-direction: reverse;
+
+}
+
+/* 旋转动画 */
+@keyframes rotate {
+  to {
+    transform: translate(-50%, 0) rotate(360deg);
+  }
+}
+
+/* 百分比文字 */
+.txt {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font: 24px/1 sans-serif;
+  color: #0d47a1;
+  z-index: 2;
+}
+
+.thematic-box {
+  height: 1500px;
+}
+
+.title-text {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 42px;
+  margin: 40px;
+  text-align: center;
+}
+
+.title-img {
+  width: 100%;
+  height: 42px;
+}
+
+.thematic-content {
+  /* 容器 480 */
+  width: 100%;
+  height: 450px;
+  box-sizing: border-box;
+  border: 1px solid rgba(234, 236, 238, 1);
+  border-radius: var(---, 10px);
+  /* 业务系统/模块阴影 */
+  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+  background: rgba(255, 255, 255, 1);
+
+  .item-header {
+    height: 48px;
+    width: 100%;
+    display: flex;
+
+    .item-header-icon {
+      width: 20px;
+      height: 20px;
+      margin: 15px;
+    }
+
+    .item-header-text {
+      width: 250px;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 26px;
+      background: rgba(255, 255, 255, 0.65);
+      color: #055FC2;
+      font-family: Microsoft YaHei;
+      font-size: 20px;
+      line-height: 48px;
+      text-align: left;
+
+    }
+
+    .item-header-right {
+      color: rgba(59, 65, 75, 1);
+      font-family: Microsoft YaHei;
+      font-size: 16px;
+      line-height: 48px;
+      text-align: right;
+
+      width: calc(100% - 350px);
+
+      .item-header-right-icon {
+        /* 容器 704 */
+        width: 14px;
+        height: 16px;
+      }
+    }
+  }
+
+  .timeLine-box {
+    height: 100%;
+    width: calc(100% - 50px);
+
+
+    .time-item-box {
+      width: 30%;
+      height: 165px;
+    }
+  }
+
+  .item-header-divider {
+    /* 矩形 249 */
+    width: 100%;
+    height: 1px;
+    background: #eaecee;
+  }
+
+  .thematic-btn-left {
+    height: 100%;
+    width: 24px;
+  }
+
+  .thematic-btn-right {
+    height: 100%;
+    width: 24px;
+  }
+
+  .thematic-btn-icon {
+    height: 48px;
+    width: 100%;
+    margin-top: calc(50% - 24px);
+  }
+
+}
+</style>

src/views/overView/component/strengthComparison.vue

+<!-- 中M博弈概览页 -->
+<template>
+  <div class="resource-box">
+
+    <img class="title-img" src="@/assets/images/bg/概览页模块标题3.png"></img>
+
+    <div style="margin-top: 20px;height: 450px;display: flex;">
+      <div class="resource-content" style="width:100%; display: flex;">
+        <div style="width: 50%;height: 100%;" id="char7">
+
+        </div>
+        <div style="width: 50%;height: 100%;text-align: center;">
+          <div v-for="value in data">
+            <div>{{ value.name }}</div>
+            <div class="progress-row">
+              <div class="progress-wrapper left">
+                <el-progress :percentage="value.value[0]" :stroke-width="20" class="left-progress" />
+                <span class="inner-text">{{ value.value[0] }}%</span>
+              </div>
+
+              <!-- 右侧进度条 -->
+              <div class="progress-wrapper right">
+                <el-progress :percentage="value.value[1]" :stroke-width="20" class="right-progress" />
+                <span class="inner-text">{{ value.value[0] }}%</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 左侧进度条 -->
+
+        </div>
+        <div>
+
+        </div>
+
+      </div>
+
+
+
+    </div>
+
+
+
+
+  </div>
+
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from "vue";
+import * as echarts from "echarts";
+import radarChart3 from '../js/radarChart3.js'
+
+
+
+// 绘制echarts图表
+const setChart = (option, chartId) => {
+  let chartDom = document.getElementById(chartId);
+  chartDom.removeAttribute("_echarts_instance_");
+  let chart = echarts.init(chartDom);
+  chart.setOption(option);
+  return chart;
+};
+
+const data = ref([
+  {
+    name: '竞争潜力',
+    value: [81.7, 75.4]
+  }, {
+    name: '研究人员总数',
+    value: [81.7, 75.4]
+  }, {
+    name: '研发经费投入总额',
+    value: [81.7, 75.4]
+  }, {
+    name: '研发经费占GDP的比重',
+    value: [81.7, 75.4]
+  }, {
+    name: '每万人研发经费投入额',
+    value: [81.7, 75.4]
+  }, {
+    name: '每万研究人员经费投入额',
+    value: [81.7, 75.4]
+  }, {
+    name: '每万人研究人员数',
+    value: [81.7, 75.4]
+  }
+])
+onMounted(() => {
+  let char7 = radarChart3()
+  setChart(char7, "char7");
+
+});
+</script>
+
+<style lang="scss" scoped>
+/* ========== 一行两个 ========== */
+.progress-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 10px;
+}
+
+/* ========== 公共外壳 ========== */
+.progress-wrapper {
+  position: relative;
+  flex: 1;
+  height: 20px;
+}
+
+/* 文字居中在彩色条内 */
+.inner-text {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  color: #fff;
+  font-weight: bold;
+  z-index: 2;
+}
+
+/* ========== 左侧：右侧斜切 + 左侧圆角 ========== */
+/* 左侧文字 */
+.left-text {
+  font-size: 12px;
+  color: #333;
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+.left-progress :deep(.el-progress-bar__outer) {
+  border-radius: 10px 0 0 10px;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
+  background: #aed6ff;
+  overflow: hidden;
+}
+
+.left-progress :deep(.el-progress-bar__inner) {
+  border-radius: 10px 0 0 10px;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
+  background: #aed6ff;
+}
+
+/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
+.right-progress :deep(.el-progress-bar__outer) {
+  border-radius: 0 10px 10px 0;
+  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
+  background: #ffccc7;
+  overflow: hidden;
+}
+
+.right-progress :deep(.el-progress-bar__inner) {
+  border-radius: 0 10px 10px 0;
+  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
+  background: #ff7875;
+}
+
+.resource-box {
+  height: 700px;
+}
+
+.title-text {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 42px;
+  margin: 40px;
+  text-align: center;
+}
+
+.title-img {
+  width: 100%;
+  height: 42px;
+}
+
+.resource-content {
+  /* 容器 480 */
+  width: 100%;
+  height: 450px;
+  box-sizing: border-box;
+  border: 1px solid rgba(234, 236, 238, 1);
+  border-radius: var(---, 10px);
+  /* 业务系统/模块阴影 */
+  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+  background: rgba(255, 255, 255, 1);
+
+  .item-header {
+    height: 48px;
+    width: 100%;
+    display: flex;
+
+    .item-header-icon {
+      width: 20px;
+      height: 20px;
+      margin: 15px;
+    }
+
+    .item-header-text {
+      width: 250px;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 26px;
+      background: rgba(255, 255, 255, 0.65);
+      color: #055FC2;
+      font-family: Microsoft YaHei;
+      font-size: 20px;
+      line-height: 48px;
+      text-align: left;
+
+    }
+
+    .item-header-right {
+      color: rgba(59, 65, 75, 1);
+      font-family: Microsoft YaHei;
+      font-size: 16px;
+      line-height: 48px;
+      text-align: right;
+
+      width: calc(100% - 350px);
+
+      .item-header-right-icon {
+        /* 容器 704 */
+        width: 14px;
+        height: 16px;
+      }
+    }
+  }
+
+
+
+  .item-header-divider {
+    /* 矩形 249 */
+    width: 100%;
+    height: 1px;
+    background: #eaecee;
+  }
+
+}
+</style>

src/views/overView/index.vue

+<!-- 中M博弈概览页 -->
+<template>
+	<div class="content-main">
+		<!-- 面包屑 -->
+		<div class="content-title"><span>国家科技安全</span>> <span>中美博弈概览 </span></div>
+		<!-- 中美博弈最新动态内容-->
+		<div class="content-box">
+			<div class="title-text">中美博弈最新动态 </div>
+			<div class="title-text-small">
+				提供半导体、AI、量子等关键领域的竞争动态、政策追踪与产业链分析，实时把握中美博弈全局
+			</div>
+			<div class="box">
+				<div class="item left">
+					<div class="item-header">
+						<img class="item-header-icon" src="@/assets/images/icon/overview-card-header-icon.png"></img>
+						<div class="item-header-text">机构动态</div>
+						<div class="item-header-more">更多 +</div>
+					</div>
+					<div class="item-header-divider"></div>
+					<div class="item-content">
+						<div class="item-card" style="">
+							<div class="item-card-btn-left" @click="changeOrganizationNews('left')">
+								<img class="item-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
+
+							</div>
+							<!-- 机构动态内容-->
+							<div class="item-card-content">
+								<div class="item-card-content-header">
+									<div style="width: calc(100% - 80px);">
+										<div class="item-card-content-title">
+											{{ organizationNews[organizationNewsShow].title }}
+										</div>
+										<div class="item-card-content-title-small">
+											{{ organizationNews[organizationNewsShow].time, organizationNews[organizationNewsShow].adress }}
+										</div>
+									</div>
+									<img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image" alt="">
+								</div>
+								<div class="item-header-divider"></div>
+								<div class="item-card-content-text  ">
+									{{ organizationNews[organizationNewsShow].content }}
+								</div>
+								<div style="display: flex">
+									<div class="item-card-content-tag" v-for="tag in organizationNews[organizationNewsShow].tag"
+										:style="{ color: tag.textColor, background: tag.color, borderColor: tag.color }">
+										{{ tag.text }}
+									</div>
+								</div>
+							</div>
+							<div class="item-card-btn-right" @click="changeOrganizationNews('right')">
+								<img class="item-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
+							</div>
+
+						</div>
+						<div class="item-card-right ">
+							<div class="item-list">
+								<div v-for="organizationItem in organizationList" style="height: 40px">
+									<div style="display: flex;margin: 10px">
+										<div class="item-list-punblier">
+											{{ organizationItem.punblier }}
+										</div>
+										<div class="item-list-content">
+											{{ organizationItem.content }}
+										</div>
+										<div class="item-list-time">
+											{{ organizationItem.time }}
+										</div>
+									</div>
+									<div class="item-header-divider"></div>
+								</div>
+
+							</div>
+						</div>
+					</div>
+				</div>
+				<!--风险信号-->
+				<div class="item left">
+					<div class="item-header">
+						<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png"></img>
+						<div class="item-header-text" style="background-color: #CE4F51;">风险信号</div>
+					</div>
+					<div class="item-header-divider"></div>
+					<div style="padding: 30px 10px;height: 350px;">
+						<div class="waring-item" v-for="(item, index) in warningList" :key="index">
+							<div style="display: flex;height: 40px;">
+								<div class="waring-status" :style="{
+									color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
+									backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
+								}">
+									{{ item.status === 0 ? '特别重大' : item.status === 1 ? '重大风险' : '一般风险'
+									}}
+								</div>
+								<div class="waring-text">
+									{{ item.title }}
+								</div>
+								<div class="waring-time">{{ item.time }}</div>
+							</div>
+							<div class="item-header-divider"></div>
+
+						</div>
+					</div>
+					<div class="item-btn">
+						查看更多
+					</div>
+				</div>
+				<!--新闻资讯-->
+				<div class="item right">
+					<div class="item-header">
+						<img class="item-header-icon" src="@/assets/images/icon/news-card-header-icon.png"></img>
+						<div class="item-header-text" style="background:  rgba(255, 255, 255, 0.65) ;color:#055FC2">新闻资讯</div>
+						<div class="item-header-more" style=" color:#055FC2">更多 +</div>
+					</div>
+					<div class="item-header-divider"></div>
+					<div class="news-box">
+						<div v-for="item in newsList" class="news-box-item">
+							<div style="	display: flex;">
+								<img :src="item.image"></img>
+								<div style="padding: 0 10px ;">
+									<div class="news-box-title">
+										{{ item.title }}
+									</div>
+									<div class="news-box-title-small">
+										{{ item.time + item.publier }}
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!--人物动态-->
+				<div class="item right">
+					<div class="item-header">
+						<img class="item-header-icon" src="@/assets/images/icon/people-card-header-icon.png"></img>
+						<div class="item-header-text" style="background:  rgba(255, 255, 255, 0.65) ;color:#055FC2">人物动态</div>
+						<div class="item-header-more" style=" color:#055FC2">更多 +</div>
+					</div>
+					<div class="item-header-divider"></div>
+					<div class="character-box">
+						<div class="character-item" v-for="item in characterDynamics">
+							<img :src="item.image" class="character-image"></img>
+							<div class="talk-box">
+								<div style="display: flex;">
+									<div class="talk-title">
+										{{ item.name }}
+									</div>
+									<div style="width: 60%;text-align: right;">
+										{{ item.position + '.' + item.time }}
+									</div>
+								</div>
+								{{ item.talk }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div>
+				<Thematicanalysis />
+				<ResourceSupport />
+				<strengthComparison />
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import Thematicanalysis from './component/Thematicanalysis.vue'
+import ResourceSupport from './component/ResourceSupport.vue'
+import strengthComparison from './component/strengthComparison.vue'
+import router from "@/router";
+import { color } from "echarts";
+const organizationNews = ref([
+	{
+		title: '1美国白宫发布关于进一步延长TikTok执法宽限期的行政令',
+		time: '2025年9月16日',
+		adress: '美国白宫',
+		image: '/testData/organizationNews-image1.png',
+		content: '9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需',
+		tag: [{
+			color: '#FFF1F0',
+			textColor: ' rgba(245, 34, 45, 1)',
+			text: '人工智能'
+		}, {
+			color: '#E6F4FF',
+			textColor: '  rgba(22, 119, 255, 1)',
+			text: '通信网络'
+		}]
+	},
+	{
+		title: '2美国白宫发布关于进一步延长TikTok执法宽限期的行政令',
+		time: '2025年9月16日',
+		adress: '美国白宫',
+		image: '/testData/organizationNews-image1.png',
+		content: '9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需',
+		tag: [{
+			color: '#F5222D',
+			textColor: ' #FFF1F0',
+			text: '人工智能'
+		}, {
+			color: '#E6F4FF',
+			textColor: '  #1677FF',
+			text: '通信网络'
+		}]
+	}
+	,
+	{
+		title: '3美国白宫发布关于进一步延长TikTok执法宽限期的行政令',
+		time: '2025年9月16日',
+		adress: '美国白宫',
+		image: '/testData/organizationNews-image1.png',
+		content: '9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需',
+		tag: [{
+			color: '#FFF1F0',
+			textColor: ' rgba(245, 34, 45, 1)',
+			text: '人工智能'
+		}, {
+			color: '#E6F4FF',
+			textColor: '  rgba(22, 119, 255, 1)',
+			text: '通信网络'
+		}]
+	}
+
+
+])//机构动态
+const organizationNewsShow = ref(0)//机构动态当前展示条目
+
+const organizationList = ref([
+	{
+		time: "1小时前",
+		content: "特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
+		punblier: "国会",
+	},
+	{
+		time: "10小时前",
+		content: "众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
+		punblier: "商务部",
+	},
+	{
+		time: "11小时前",
+		content: "民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
+		punblier: "财政部",
+	},
+	{
+		time: "一天前",
+		content: "众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
+		punblier: "FCC",
+	},
+	{
+		time: "周三",
+		content: "参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
+		punblier: "白宫",
+	},
+])//机构动态
+
+//风险信号
+const warningList = ref([
+	{
+		title: "美国大而美法案落地，总统签署通过",
+		time: "一天前",
+		status: 2
+	},
+	{
+		title: "美大而美法案7月1日以51:50的票数胜出",
+		time: "一天前",
+		status: 2
+	},
+	{
+		title: "首次提出“限制外国敏感实体获取补",
+		time: "一天前",
+		status: 1
+	},
+	{
+		title: "首次提出“限制外国敏感实体获取补偿",
+		time: "一天前",
+		status: 1
+	},
+	{
+		title: "首次提出“限制外国敏感实体获取补偿",
+		time: "一天前",
+		status: 0
+	}
+]);
+
+//新闻资讯
+const newsList = ref([
+	{
+		image: '/testData/news-1.png',
+		title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
+		time: '11-4',
+		publier: '华盛顿纽约'
+	}, {
+		image: '/testData/news-1.png',
+		title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
+		time: '11-4',
+		publier: '华盛顿纽约'
+	}, {
+		image: '/testData/news-1.png',
+		title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
+		time: '11-4',
+		publier: '华盛顿纽约'
+	}, {
+		image: '/testData/news-1.png',
+		title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
+		time: '11-4',
+		publier: '华盛顿纽约'
+	}, {
+		image: '/testData/news-1.png',
+		title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
+		time: '11-4',
+		publier: '华盛顿纽约'
+	}, {
+		image: '/testData/news-1.png',
+		title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
+		time: '11-4',
+		publier: '华盛顿纽约'
+	}
+])
+
+//人物动态
+const characterDynamics = ref([
+	{
+		image: '/testData/united_states 1.png',
+		name: '詹姆斯·刘易斯',
+		position: '商务部某办公室主任',
+		time: '一天前',
+		talk: '指出美国在AI赋能科学，特别是“自驱实验室”等自动化科研设施上的投资不足，呼吁进行系统性战略投资'
+	},
+	{
+		image: '/testData/united_states 2.png',
+		name: '迈克尔·霍洛维茨',
+		position: '某计划署主席',
+		time: '一天前',
+		talk: '评价特朗普政府《AI国家行动计划》，认为其关键在于通过技术出口和基础设施建设主动抢占全球AI主导权。'
+	},
+	{
+		image: '/testData/united_states 1.png',
+		name: '詹姆斯·戴维·万斯',
+		position: '副总统',
+		time: '一天前',
+		talk: '提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。'
+	},
+])
+
+function changeOrganizationNews(type) {
+	if (type === 'left') {
+		organizationNewsShow.value === 0 ? '' : organizationNewsShow.value = organizationNewsShow.value - 1
+	} else {
+		organizationNews.value === organizationNews.value.length - 1 ? '' : organizationNewsShow.value = organizationNewsShow.value + 1
+
+	}
+}
+onMounted(() => { });
+</script>
+
+<style lang="scss" scoped>
+.content-main {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+
+	.content-title {
+		height: 64px;
+		color: #fff;
+		font-family: Microsoft YaHei;
+		font-size: 20px;
+		font-weight: 700;
+		line-height: 26px;
+		line-height: 64px;
+		background: url("../../assets/images/bg//header-bg.png");
+		box-sizing: border-box;
+		padding-left: 160px;
+	}
+
+	.content-box {
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		padding: 0 160px;
+
+		.title-text {
+			font-size: 32px;
+			font-weight: 700;
+			line-height: 42px;
+			margin: 40px;
+			text-align: center;
+		}
+
+		.title-text-small {
+			font-size: 20px;
+			font-weight: 400;
+			line-height: 30px;
+			margin: 40px;
+			text-align: center;
+		}
+
+		/* 父级：2×2 网格，固定间距 */
+		.box {
+			display: grid;
+			grid-template-columns: 2fr 1fr;
+			/* 左列宽是右列的 2 倍 */
+			grid-auto-rows: 1fr;
+			/* 两行等高 */
+			gap: 16px;
+			/* 横竖间距都是 16 px */
+			height: 1000px;
+			/* 示例：撑满视口，可改 */
+		}
+
+		/* 子级：仅上色居中，方便观察 */
+		.item {
+			height: 450px;
+			justify-content: center;
+			box-sizing: border-box;
+			border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1));
+			border-radius: var(---, 10px);
+			/* 业务系统/模块阴影 */
+			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+			background: rgba(255, 255, 255, 0.65);
+
+			.item-header {
+				height: 48px;
+				width: 100%;
+				display: flex;
+
+				.item-header-icon {
+					width: 20px;
+					height: 20px;
+					margin: 15px;
+				}
+
+				.item-header-text {
+					width: 112px;
+					background: #055FC2;
+					color: #ffffff;
+					font-family: Microsoft YaHei;
+					font-size: 20px;
+					line-height: 48px;
+					text-align: center;
+
+				}
+
+				.item-header-more {
+					color: rgba(59, 65, 75, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					line-height: 48px;
+					text-align: center;
+					margin-left: calc(100% - 200px);
+					width: 50px;
+					margin-left: calc(100% - 250px);
+				}
+			}
+
+			.item-header-divider {
+				/* 矩形 249 */
+				width: 100%;
+				height: 1px;
+				background: #eaecee;
+			}
+
+			.item-card-content-tag {
+				width: 74px;
+				height: 24px;
+				padding: 1px 8px 1px 8px;
+				margin: 2px;
+				font-family: Microsoft YaHei;
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 20px;
+				letter-spacing: 0px;
+				text-align: justify;
+				box-sizing: border-box;
+				border: 1px;
+				border-radius: 4px;
+			}
+
+			.item-content {
+				height: calc(100% - 50px);
+				width: 100%;
+				display: flex;
+				padding: 20px;
+
+				.item-card {
+					width: 50%;
+					height: 100%;
+					display: flex;
+					box-sizing: border-box;
+					border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1));
+					border-radius: 10px;
+					/* 业务系统/模块阴影 */
+					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+					background: rgba(255, 255, 255, 0.3);
+
+					.item-card-btn-left {
+						height: 100%;
+						width: 24px;
+						padding-top: calc(50% - 20px);
+					}
+
+					.item-card-content {
+						height: 100%;
+						width: calc(100% - 50px);
+						padding: 20px;
+
+						.item-card-content-header {
+							display: flex;
+
+							.item-card-content-title {
+								color: var(rgba(59, 65, 75, 1));
+
+								font-family: Microsoft YaHei;
+								font-size: 20px;
+								font-weight: 700;
+								line-height: 26px;
+								letter-spacing: 0px;
+								text-align: justify;
+								overflow: hidden;
+								display: -webkit-box;
+								-webkit-box-orient: vertical;
+								-webkit-line-clamp: 2;
+								text-overflow: ellipsis;
+								word-break: break-all;
+							}
+
+							.item-card-content-title-small {
+								color: var(rgba(95, 101, 108, 1));
+
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 24px;
+								letter-spacing: 0px;
+								text-align: left;
+
+							}
+						}
+
+						.item-card-content-title-image {
+							height: 50px;
+							width: 50px;
+						}
+
+						.item-card-content-text {
+							color: var(rgba(95, 101, 108, 1));
+
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 30px;
+							letter-spacing: 0px;
+							text-align: left;
+
+							overflow: hidden;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							-webkit-line-clamp: 7;
+							text-overflow: ellipsis;
+							word-break: break-all;
+						}
+					}
+
+					.item-btn-icon {
+						height: 48px;
+						width: 100%;
+						margin-top: calc(50% - 24px);
+					}
+
+					.item-card-btn-right {
+						height: 100%;
+						width: 24px;
+						padding-top: calc(50% - 20px);
+					}
+
+
+				}
+
+				.item-card-right {
+					width: 50%;
+					height: 100%;
+					display: flex;
+
+
+
+					.item-list {
+
+						padding: 10px;
+
+						.item-list-punblier {
+							width: 64px;
+							height: 22px;
+							border-radius: 4px;
+							background: rgba(231, 243, 255, 1);
+							text-align: center;
+							padding: 1px 4px 1px 4px;
+							color: rgba(5, 95, 194, 1);
+
+							font-family: Microsoft YaHei;
+							font-size: 14px;
+							font-weight: 400;
+							line-height: 20px;
+							letter-spacing: 0px;
+							margin-right: 5px;
+						}
+
+						.item-list-content {
+							width: calc(100% - 150px);
+							overflow: hidden;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							-webkit-line-clamp: 1;
+							text-overflow: ellipsis;
+							word-break: break-all;
+						}
+
+						.item-list-time {
+							width: 68px;
+							color: rgba(132, 136, 142, 1);
+
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 24px;
+							letter-spacing: 0px;
+							text-align: right;
+						}
+					}
+				}
+
+			}
+
+			.waring-item {
+
+
+				.waring-status {
+					width: 40px;
+					height: 40px;
+					border-radius: 50%;
+					font-size: 14px;
+					margin-right: 5px;
+				}
+
+				.waring-text {
+					color: rgba(59, 65, 75, 1);
+					width: calc(100% - 180px);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 400;
+					line-height: 30px;
+					letter-spacing: 0px;
+					text-align: justify;
+					overflow: hidden;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 1;
+					text-overflow: ellipsis;
+					word-break: break-all;
+				}
+
+				.waring-time {
+					width: 68px;
+					color: rgba(132, 136, 142, 1);
+
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 400;
+					line-height: 24px;
+					letter-spacing: 0px;
+					text-align: right;
+				}
+			}
+
+			.item-btn {
+				/* Buttons按钮/主按钮/亮色/默认 */
+				width: 460px;
+				height: 42px;
+				margin: 0 20px;
+				/* 自动布局 */
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+				gap: 8;
+				padding: 5px 16px 5px 16px;
+
+				border-radius: 6px;
+				background: rgba(5, 95, 194, 1);
+				color: rgba(255, 255, 255, 1);
+
+				font-family: Microsoft YaHei;
+				font-size: 16px;
+				font-weight: 400;
+				line-height: 24px;
+				letter-spacing: 0px;
+				text-align: center;
+			}
+
+			/* 新闻资讯 */
+			.news-box {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				/* 两列，等宽 */
+				gap: 10px;
+				height: 400px;
+				overflow: hidden;
+
+				.news-box-item {
+					padding: 20px;
+
+					.news-box-item-img {
+						/* 矩形 265 */
+						width: 96px;
+						height: 72px;
+
+
+					}
+
+					.news-box-title {
+						color: rgba(59, 65, 75, 1);
+
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 700;
+						line-height: 24px;
+						letter-spacing: 0px;
+						text-align: justify;
+						overflow: hidden;
+						display: -webkit-box;
+						/* 旧语法，但必须写 */
+						-webkit-box-orient: vertical;
+						/* 垂直排列 */
+						-webkit-line-clamp: 2;
+						/* 限制两行 */
+						text-overflow: ellipsis;
+						/* 兜底，部分旧机需要 */
+						/* 可选：防止单词过长撑开 */
+						word-break: break-all;
+					}
+
+					.news-box-title-small {
+						color: rgba(95, 101, 108, 1);
+
+						font-family: Microsoft YaHei;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 22px;
+						letter-spacing: 0px;
+						text-align: left;
+					}
+				}
+			}
+
+			/* 人物动态 */
+			.character-box {
+				.character-item {
+					display: flex;
+					padding: 17px;
+
+					.character-image {
+						/* united_states 1 */
+						width: 36px;
+						height: 36px;
+						border-radius: 50%;
+					}
+
+					.talk-box {
+						height: 98px;
+						width: 100%;
+						padding: 17px;
+						color: rgba(59, 65, 75, 1);
+
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 24px;
+						letter-spacing: 0px;
+
+						background-image: url("../../assets/images/bg/characterDynamics-bg.png");
+						background-repeat: no-repeat;
+						/* 不重复 */
+						background-size: 100% 100%;
+						/* 自动拉伸并覆盖整个元素，保持比例 */
+						background-position: center center;
+
+						.talk-title {
+							width: 40%;
+							color: rgba(59, 65, 75, 1);
+
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 700;
+							line-height: 24px;
+							letter-spacing: 0px;
+							text-align: left;
+						}
+					}
+				}
+			}
+		}
+
+	}
+}
+</style>

src/views/overView/js/barChart.js

+import * as echarts from "echarts";
+const getColumnChart = (nameList, valueList, isPer) => {
+  const colorList = ['#0958D9', '#0958D9']
+  return {
+    tooltip: {},
+    grid: { top: '10%', right: '3%', bottom: '15%', left: '3%', containLabel: true },
+    color: colorList,
+    xAxis: {
+      type: 'category',
+      data: nameList,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        show: true,
+        rotate: 45,                // ① 文字 45°
+        color: '#666',
+        fontSize: 12
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { show: true, color: '#666' }, // ② Y 轴文字
+      splitLine: {                             // ③ 横向参考线
+        show: true,
+        lineStyle: { color: '#ebebeb', width: 1 }
+      }
+    },
+    series: [{
+      type: 'bar',
+      data: valueList.map((v, i) => ({
+        value: v,
+        label: { show: false, position: 'top', color: i < 3 ? colorList[0] : colorList[1] }
+      })),
+      barWidth: 16,
+      itemStyle: {
+        borderRadius: [8, 8, 0, 0],
+        color: params => {
+          const colors = params.dataIndex < 3
+            ? [colorList[0], 'rgba(255,255,255,0)']
+            : [colorList[1], 'rgba(255,255,255,0)']
+          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: colors[0] },
+            { offset: 1, color: colors[1] }
+          ])
+        }
+      },
+      label: {
+        show: true,
+        position: 'top',
+        formatter: v => (isPer ? v.value + '%' : v.value)
+      }
+    }]
+  }
+}
+
+export default getColumnChart
\ No newline at end of file

src/views/overView/js/barChart2.js

+import * as echarts from "echarts";
+const getColumnChart = (nameList, series1, series2, isPer) => {
+  // 两套渐变
+  const gradBlue = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: '#055FC2' },
+    { offset: 1, color: '#BAE0FF' }
+  ])
+  const gradCyan = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: '#CE4F51' },
+    { offset: 1, color: '#FFA39E' }
+  ])
+
+  return {
+    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+    grid: { top: '10%', right: '3%', bottom: '15%', left: '3%', containLabel: true },
+    legend: { data: ['中国', '美国'], top: 0 },
+    xAxis: {
+      type: 'category',
+      data: nameList,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { rotate: 45, color: '#666', fontSize: 12 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { show: true, color: '#666' },
+      splitLine: { show: true, lineStyle: { color: '#ebebeb' } }
+    },
+    series: [
+      {
+        name: '中国',
+        type: 'bar',
+        data: series1,
+        barWidth: 16,
+        label: { show: false },
+        itemStyle: { borderRadius: [8, 8, 0, 0], color: gradBlue }
+      },
+      {
+        name: '美国',
+        type: 'bar',
+        data: series2,
+        barWidth: 16,
+        label: { show: false },
+        itemStyle: { borderRadius: [8, 8, 0, 0], color: gradCyan }
+      }
+    ]
+  }
+}
+
+export default getColumnChart
\ No newline at end of file

src/views/overView/js/multiLineChart1.js

+import * as echarts from 'echarts'
+
+const getMultiLineChart = (dataX, dataY1, dataY2) => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    grid: {
+      top: '8%',
+      right: '5%',
+      bottom: '5%',
+      left: '5%',
+      containLabel: true
+    },
+    legend: {
+      data: ['中国', '美国'],
+      show: true
+    },
+    color: ['#AED6FF', '#FF7875'],
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: dataX
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '中国',
+        type: 'line',
+
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: '#0958D9' // 起始颜色
+          }, {
+            offset: 1,
+            color: 'rgba(22, 119, 255, 0)' // 结束颜色
+          }])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: dataY1
+      },
+      {
+        name: '美国',
+        type: 'line',
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: '#FF7875' // 起始颜色
+          }, {
+            offset: 1,
+            color: 'rgba(255, 172, 77, 0)' // 结束颜色
+          }])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: dataY2
+      }
+    ]
+  }
+}
+
+export default getMultiLineChart
\ No newline at end of file

src/views/overView/js/radarChart.js

+import * as echarts from "echarts";
+
+const getBarChart = (nameList, valueList, isPer) => {
+  const option = {
+    title: { text: '' },
+    legend: {
+      icon: 'circle',
+      orient: 'vertical',      // 纵向排列
+      right: 0,                // 贴右边
+      top: 'center',           // 垂直居中
+      align: 'left',           // 文字在图标左侧
+      data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
+    },
+    radar: {
+      indicator: [
+        { name: '能源', max: 6500 },
+        { name: '集成电路', max: 16000 },
+        { name: '人工智能', max: 30000 },
+        { name: '通信网络', max: 38000 },
+        { name: '量子科技', max: 52000 },
+        { name: '生物科技', max: 25000 }
+      ],
+      axisName: {
+        formatter: '{value}',
+        color: 'rgba(59, 65, 75, 1)',
+        fontSize: 16,
+        fontWeight: 700
+      }
+    },
+    series: [
+      {
+        name: 'Budget vs spending',
+        type: 'radar',
+        data: [
+          {
+            value: [4200, 3000, 20000, 35000, 50000, 18000],
+            name: '法案',
+            areaStyle: { color: 'rgba(10, 87, 166, 0.2)' }
+          },
+          {
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
+            name: '行政令',
+            areaStyle: { color: 'rgba(206, 79, 81, 0.2)' }
+          },
+          {
+            value: [4000, 14000, 18000, 21000, 32000, 10000],
+            name: '科技智库',
+            areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
+          },
+          {
+            value: [4000, 14000, 18000, 21000, 32000, 10000],
+            name: '出口管制',
+            areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
+          },
+          {
+            value: [4000, 14000, 18000, 21000, 32000, 10000],
+            name: '投融资限制',
+            areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
+          },
+          {
+            value: [4000, 14000, 18000, 21000, 32000, 10000],
+            name: '市场准入',
+            areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
+          }
+        ]
+      }
+    ]
+  }
+  return option
+}
+
+export default getBarChart
\ No newline at end of file

src/views/overView/js/radarChart2.js

+import * as echarts from "echarts";
+
+const getBarChart = (nameList, valueList, isPer) => {
+  const option = {
+    title: { text: '' },
+    legend: {
+      icon: 'circle',
+      orient: 'vertical',      // 纵向排列
+      right: 0,                // 贴右边
+      top: 'center',           // 垂直居中
+      align: 'left',           // 文字在图标左侧
+      data: ['中国', '美国']
+    },
+    radar: {
+      indicator: [
+        { name: '能源', max: 6500 },
+        { name: '集成电路', max: 16000 },
+        { name: '人工智能', max: 30000 },
+        { name: '通信网络', max: 38000 },
+        { name: '量子科技', max: 52000 },
+        { name: '生物科技', max: 25000 }
+      ],
+      axisName: {
+        formatter: '{value}',
+        color: 'rgba(59, 65, 75, 1)',
+        fontSize: 16,
+        fontWeight: 700
+      }
+    },
+    series: [
+      {
+        name: 'Budget vs spending',
+        type: 'radar',
+        data: [
+          {
+            value: [4200, 3000, 20000, 35000, 50000, 18000],
+            name: '中国',
+            areaStyle: { color: 'rgba(10, 87, 166, 0.2)' }
+          },
+          {
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
+            name: '美国',
+            areaStyle: { color: 'rgba(206, 79, 81, 0.2)' }
+          },
+
+        ]
+      }
+    ]
+  }
+  return option
+}
+
+export default getBarChart
\ No newline at end of file

src/views/overView/js/radarChart3.js

+import * as echarts from "echarts";
+
+const getBarChart = (nameList, valueList, isPer) => {
+  const option = {
+    title: { text: '' },
+    legend: {
+      show: false,
+      icon: 'circle',
+      orient: 'vertical',
+      right: 0,
+      top: 'center',
+      align: 'left',
+      data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
+    },
+    radar: {
+      shape: 'circle',          // ① 参考线变弧线
+      indicator: [
+        { name: '研究人员总数', max: 6500 },
+        { name: '每万人研究人员数', max: 16000 },
+        { name: '每万研究人员研发经费投入额', max: 30000 },
+        { name: '每万人研发经费投入额', max: 38000 },
+        { name: '研发经费占GDP的比重', max: 52000 },
+        { name: '研发经费投入总额', max: 25000 }
+      ],
+      axisName: {
+        // ② 文字在线上方 + 自动换两行
+        formatter: function (txt) {
+          // 按字数 10 左右自动断行
+          const len = txt.length;
+          if (len <= 5) return txt;
+          const br = Math.ceil(len / 2);
+          return txt.substring(0, br) + '\n' + txt.substring(br);
+        },
+        rich: {
+          a: { lineHeight: 20 }   // 行高
+        },
+        color: 'rgba(59, 65, 75, 1)',
+        fontSize: 14,
+        fontWeight: 600
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(200,200,200,.6)'
+        }
+      },
+      splitArea: { show: false },
+      axisLine: { show: false }
+    },
+    series: [{
+      name: 'Budget vs spending',
+      type: 'radar',
+      data: [
+        { value: [4200, 3000, 20000, 35000, 50000, 18000], name: '法案', areaStyle: { color: 'rgba(10, 87, 166, 0.2)' } },
+        { value: [5000, 14000, 28000, 26000, 42000, 21000], name: '行政令', areaStyle: { color: 'rgba(206, 79, 81, 0.2)' } },
+        { value: [4000, 14000, 18000, 21000, 32000, 10000], name: '科技智库', areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } },
+        { value: [4000, 14000, 18000, 21000, 32000, 10000], name: '出口管制', areaStyle: { color: 'rgba(22, 180, 120, 0.2)' } },
+        { value: [4000, 14000, 18000, 21000, 32000, 10000], name: '投融资限制', areaStyle: { color: 'rgba(120, 100, 200, 0.2)' } },
+        { value: [4000, 14000, 18000, 21000, 32000, 10000], name: '市场准入', areaStyle: { color: 'rgba(255, 100, 150, 0.2)' } }
+      ]
+    }],
+    // ③ 最外层弧线加粗：用 graphic 画一个圆环覆盖在最外层
+    graphic: [{
+      type: 'circle',
+      shape: { cx: 300, cy: 300, r: '65%' },
+      style: { stroke: '#333', lineWidth: 30, fill: 'transparent' },
+      z: 1000
+    }]
+  };
+
+
+  return option
+}
+
+export default getBarChart
\ No newline at end of file

src/views/portals/components/CardCustom.vue

+<template>
+	<el-card class="card">
+		<div class="wrap">
+			<div class="line" :style="{ backgroundColor: lineColor }"></div>
+			<div class="header" :style="{ height: headerHeight }">
+				<div class="iconWrap" :style="{ width: iconWidth }">
+					<slot name="icon">
+						<el-icon :size="20">
+							<Edit />
+						</el-icon>
+					</slot>
+				</div>
+				<div
+					class="titleWrap"
+					:style="{
+						backgroundColor: titleBackgroundColor,
+						color: titleColor,
+						paddingLeft: titleTextAlign === 'left' ? '0px' : '20px'
+					}"
+				>
+					{{ title }}
+				</div>
+				<div class="rightWrap">
+					<slot name="right">
+						<div class="moreWrap">
+							<el-button text @click="moreClick">
+								<span class="moreText">更多</span>
+								<el-icon :size="14"> <Plus /> </el-icon>
+							</el-button>
+						</div>
+					</slot>
+				</div>
+			</div>
+			<div class="body">
+				<slot name="default"> </slot>
+			</div>
+		</div>
+	</el-card>
+</template>
+
+<script setup>
+import { Edit, Plus } from "@element-plus/icons-vue";
+const emit = defineEmits(["moreClick"]);
+defineProps({
+	titleBackgroundColor: {
+		type: String,
+		default: "red"
+	},
+	titleColor: {
+		type: String,
+		default: "#fff"
+	},
+	titleTextAlign: {
+		type: String,
+		default: "center"
+	},
+	lineColor: {
+		type: String,
+		default: "transparent"
+	},
+	title: {
+		type: String,
+		default: "风险信号"
+	},
+	iconWidth: {
+		type: String,
+		default: "60px"
+	},
+	headerHeight: {
+		type: String,
+		default: "48px"
+	}
+});
+function moreClick() {
+	emit("moreClick");
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+	position: relative;
+	:deep(.el-card__body) {
+		padding: 0;
+		height: 100%;
+	}
+}
+.wrap {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+.line {
+	left: 1px;
+	right: 1px;
+	background-color: transparent;
+	height: 1px;
+	top: 0;
+	position: absolute;
+}
+.header {
+	height: 48px;
+	border-bottom: 1px solid rgba(234, 236, 238, 1);
+	display: flex;
+	flex-direction: row;
+	align-items: stretch;
+	z-index: 1;
+	position: relative;
+	flex-shrink: 0;
+}
+.iconWrap {
+	width: 60px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.titleWrap {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding-left: 20px;
+	padding-right: 20px;
+	background-color: red;
+	color: #fff;
+	font-size: 20px;
+	font-weight: 700;
+}
+.rightWrap {
+	display: flex;
+	justify-content: end;
+	align-items: center;
+	flex: 1;
+}
+.moreWrap {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 16px;
+	height: 100%;
+	padding-left: 10px;
+	padding-right: 10px;
+	cursor: pointer;
+	.moreText {
+		margin-right: 3px;
+	}
+}
+.body {
+	flex: 1;
+	padding: 14px 20px;
+}
+</style>

src/views/portals/components/PieProgress.vue

+<template>
+  <div class="wrap1">
+    <div class="chart" ref="chart"></div>
+    <div class="title">{{ data.title }}</div>
+    <div class="titleSub">{{ data.titleSub }}</div>
+    <div class="slope">
+      <div
+        class="slopeLine"
+        :style="{
+          transform: 'rotate(' + (data.current / data.total) * -25 + 'deg)',
+          top: -88 + (data.current / data.total) * 25 * 0.3 + 'px',
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useTemplateRef, onMounted } from "vue";
+import { setChart, getPieChart } from "../utils/charts";
+const { data } = defineProps({
+  data: {
+    type: Object,
+  },
+});
+// 第一个参数必须与模板中的 ref 值匹配
+const chart = useTemplateRef("chart");
+onMounted(() => {
+  setChart(
+    getPieChart((data.current / data.total) * 100, data.current, data.total),
+    chart.value
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.wrap1 {
+  width: 141.6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.chart {
+  width: 94px;
+  height: 94px;
+}
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-top: 12px;
+  color: rgba(59, 65, 75, 1);
+}
+.titleSub {
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: 2px;
+  color: rgba(10, 87, 166, 1);
+}
+.slope {
+  width: 68px;
+  height: 40px;
+  background-color: aqua;
+  margin-top: 2px;
+  background: linear-gradient(
+    180deg,
+    rgba(20, 67, 187, 0.3),
+    rgba(20, 67, 187, 0) 100%
+  );
+  position: relative;
+  overflow: hidden;
+}
+.slopeLine {
+  height: 100px;
+  width: 200%;
+  background-color: #fff;
+  border-bottom: 1.5px solid blue;
+  position: absolute;
+  top: -82px;
+  left: -50%;
+  transform: rotate(0deg);
+  transform-origin: center bottom;
+}
+</style>

src/views/portals/portal1/index.vue

+<template>
+	<div class="wrap">
+		<el-row>
+			<CardCustom
+				@more-click="moreClick"
+				title="风险信号"
+				:style="{ width: '986px', height: '540px' }"
+				title-background-color="rgba(206, 79, 81, 1)"
+			>
+				<template #icon>
+					<div class="icon icon1"></div>
+				</template>
+			</CardCustom>
+			<CardCustom
+				@more-click="moreClick"
+				title="安全速递"
+				:style="{ width: '600px', height: '540px', marginLeft: '14px' }"
+				title-background-color="rgba(206, 79, 81, 1)"
+			>
+				<template #icon>
+					<div class="icon icon1"></div>
+				</template>
+				<div class="item" v-for="(item, index) in securityExpressList" :key="index">
+					<span class="itemLevel" :class="levelMap[item.level].class">
+						{{ levelMap[item.level].text }}
+					</span>
+					<div class="itemText">{{ item.title }}</div>
+					<span class="itemTime">{{ item.time }}</span>
+					<span class="itemFlag" :style="{ backgroundImage: 'url(' + item.flag + ')' }"></span>
+				</div>
+			</CardCustom>
+		</el-row>
+		<el-card class="gap">
+			<el-row>
+				<PieProgress v-for="item in List" :data="item" />
+			</el-row>
+		</el-card>
+		<el-row class="gap">
+			<CardCustom
+				@more-click="moreClick"
+				title="科技动态"
+				:style="{ width: '792px', height: '360px' }"
+				title-background-color="rgba(10, 87, 166, 1)"
+				line-color="rgba(10, 87, 166, 1)"
+			>
+				<template #icon>
+					<div class="icon icon2"></div>
+				</template>
+				<div class="itemTrends" v-for="(item, index) in trendsList" :key="index">
+					<span class="itemTrendsIcon"> </span>
+					<div class="itemTrendsText">{{ item.title }}</div>
+					<span class="itemTrendsTime">{{ item.time }}</span>
+				</div>
+			</CardCustom>
+			<CardCustom
+				@more-click="moreClick"
+				title="科技政策"
+				:style="{ width: '792px', height: '360px', marginLeft: '16px' }"
+				title-background-color="rgba(10, 87, 166, 1)"
+				line-color="rgba(10, 87, 166, 1)"
+			>
+				<template #icon>
+					<div class="icon icon3"></div>
+				</template>
+				<div class="itemTrends" v-for="(item, index) in policyList" :key="index">
+					<span class="itemTrendsIcon"> </span>
+					<div class="itemTrendsText">{{ item.title }}</div>
+					<span class="itemTrendsTime">{{ item.time }}</span>
+				</div>
+			</CardCustom>
+		</el-row>
+		<div class="gap">
+			<el-row class="cardContainer">
+				<div class="itemCard">
+					<span class="itemCardIcon itemCardIcon1"></span>
+					<div class="itemCardTitle">业务协同</div>
+				</div>
+				<div class="itemCard">
+					<span class="itemCardIcon itemCardIcon2"></span>
+					<div class="itemCardTitle">专题研判</div>
+				</div>
+				<div class="itemCard">
+					<span class="itemCardIcon itemCardIcon3"></span>
+					<div class="itemCardTitle">数据直报</div>
+				</div>
+				<div class="itemCard">
+					<span class="itemCardIcon itemCardIcon4"></span>
+					<div class="itemCardTitle">专家库</div>
+				</div>
+			</el-row>
+		</div>
+		<el-row class="gap">
+			<CardCustom
+				@more-click="moreClick"
+				title="最新报告"
+				:style="{ width: '1600px', height: '360px' }"
+				title-background-color="rgba(10, 87, 166, 1)"
+				line-color="rgba(10, 87, 166, 1)"
+			>
+				<template #icon>
+					<div class="icon icon4"></div>
+				</template>
+				<template #right>
+					<div class="moreWrap">
+						<el-button text @click="moreClick" :style="{ marginLeft: '515px' }">
+							<span class="moreText">更多</span>
+							<el-icon :size="14"> <Plus /> </el-icon>
+						</el-button>
+						<el-button text @click="moreClick">
+							<span class="moreText">换一批</span>
+							<span class="shuaxinIcon"></span>
+						</el-button>
+					</div>
+				</template>
+				<el-row>
+					<div :style="{ width: '750px' }">
+						<div class="itemTrends" v-for="(item, index) in policyList" :key="index">
+							<span class="itemTrendsIcon"> </span>
+							<div class="itemTrendsText">{{ item.title }}</div>
+							<span class="itemTrendsTime">{{ item.time }}</span>
+						</div>
+					</div>
+					<div class="CardCustomRight">
+						<div class="itemCard1" v-for="item in 3">
+							<div class="itemCard1Img">
+								<div class="itemCard1Footer">国内外技术创新合作模式探索与实践</div>
+							</div>
+						</div>
+					</div>
+				</el-row>
+			</CardCustom>
+		</el-row>
+		<el-row class="gap spaceBetween">
+			<el-card v-for="(item, index) in catdList" class="itemCard2" :key="index">
+				<div class="itemCard2Line" :style="{ backgroundColor: item.bgColor }"></div>
+				<div class="itemCard2Container">
+					<div class="itemCard2BigTextWrap" :style="{ color: item.bgColor }">
+						{{ item.title }}
+					</div>
+					<div class="itemCard2TextWrap" v-for="(itemText, inde) in item.list" :key="index">
+						<div class="temCard2Title">{{ itemText.title }}</div>
+						<div class="temCard2Text">{{ itemText.text }}</div>
+					</div>
+				</div>
+			</el-card>
+		</el-row>
+	</div>
+</template>
+
+<script setup>
+import CardCustom from "../components/CardCustom.vue";
+import PieProgress from "../components/PieProgress.vue";
+import flag1 from "../assets/img/flag1.png";
+import flag2 from "../assets/img/flag2.png";
+import flag3 from "../assets/img/flag3.png";
+
+import { ref } from "vue";
+const levelMap = {
+	L1: { text: "特别重大", class: "level1" },
+	L2: { text: "重大风险", class: "level2" },
+	L3: { text: "一般风险", class: "level3" }
+};
+const securityExpressList = ref([
+	{
+		title: "美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实",
+		level: "L1",
+		time: "一天前",
+		flag: flag1
+	},
+	{
+		title: "美国加强对华AI芯片出口限制，考虑制...",
+		level: "L1",
+		time: "一天前",
+		flag: flag1
+	},
+	{
+		title: "日本出台《半导体材料出口管制令》...",
+		level: "L1",
+		time: "一天前",
+		flag: flag2
+	},
+	{
+		title: "日本对GAAFET技术、EUV光刻设备等...",
+		level: "L1",
+		time: "一天前",
+		flag: flag2
+	},
+	{
+		title: "欧盟签署协议限制高端AI芯片对华出口",
+		level: "L2",
+		time: "一天前",
+		flag: flag3
+	},
+	{
+		title: "欧盟第18轮制裁中首次将3家中资企业...",
+		level: "L2",
+		time: "一天前",
+		flag: flag3
+	},
+	{
+		title: "美国发布《保障信息和通信技术与服务...",
+		level: "L2",
+		time: "一天前",
+		flag: flag1
+	},
+	{
+		title: "日本将42家中国实体列入出口管制“...",
+		level: "L3",
+		time: "一天前",
+		flag: flag2
+	},
+	{
+		title: "美国政府放慢向英伟达和超威等芯片...",
+		level: "L3",
+		time: "一天前",
+		flag: flag1
+	},
+	{
+		title: "七国集团成员国就人工智能发表了以...",
+		level: "L3",
+		time: "一天前",
+		flag: flag3
+	}
+]);
+
+const trendsList = ref([
+	{
+		title: "韩研制用于存内计算的小型低功耗神经形态模块",
+		time: "08-16"
+	},
+	{
+		title: "中国科学院大学等在有机太阳能电池领域取得重要突破",
+		time: "08-16"
+	},
+	{
+		title: "德国于利希研究中心成功制造并实验验证全球首个二维半金属材料",
+		time: "08-16"
+	},
+	{
+		title: "浙江大学开发“女娲”AI模型，精准预测基因组调控序列",
+		time: "08-16"
+	},
+	{
+		title: "我国基于碳量子点材料制备出高效低成本有机太阳能电池",
+		time: "08-16"
+	},
+	{
+		title: "谷歌Gemini 2.5系列模型更新，实现高速推理与极致性价比",
+		time: "08-16"
+	},
+	{
+		title: "上海理工大学联合杜克大学在AI赋能仿生视觉技术领域实现突破",
+		time: "08-16"
+	}
+]);
+const policyList = ref([
+	{
+		title: "美国发布《2025财年国防授权法案》，拨款替换华为、中兴设备；禁止国防...",
+		time: "08-16"
+	},
+	{
+		title: "美国发布对华投资限制新规，限制美资在半导体、AI、量子技术等领域的对...",
+		time: "08-16"
+	},
+	{
+		title: "欧盟发布《网络弹性法案》（CRA），要求数字产品全生命周期安全合规，...",
+		time: "08-16"
+	},
+	{
+		title: "欧盟发布对外投资审查建议，要求成员国审查在半导体、AI、量子技术等领...",
+		time: "08-16"
+	},
+	{
+		title: "日本出台《半导体出口管制修正》加强对十余种半导体相关物项的出口管制...",
+		time: "08-16"
+	},
+	{
+		title: "日本拟出台“许可制”，限制外国留学生（特别提及中国）学习半导体、机...",
+		time: "08-16"
+	},
+	{
+		title: "日本通过并实施《经济安全保障推进法案》相关措施",
+		time: "08-16"
+	}
+]);
+const List = ref([
+	{
+		title: "当月/总数",
+		titleSub: "较上月+4",
+		progress: 90,
+		slope: "add",
+		total: 8,
+		current: 7
+	},
+	{
+		title: "人工智能",
+		titleSub: "较上月+4",
+		progress: 50,
+		slope: "add",
+		total: 26,
+		current: 3
+	},
+	{
+		title: "生物技术",
+		titleSub: "较上月+4",
+		progress: 60,
+		slope: "add",
+		total: 13,
+		current: 3
+	},
+	{
+		title: "航空航天",
+		titleSub: "较上月+4",
+		progress: 40,
+		slope: "add",
+		total: 15,
+		current: 3
+	},
+	{
+		title: "新一代信息技术",
+		titleSub: "较上月+4",
+		progress: 50,
+		slope: "add",
+		total: 12,
+		current: 3
+	},
+	{
+		title: "量子科技",
+		titleSub: "较上月+4",
+		progress: 20,
+		slope: "add",
+		total: 8,
+		current: 3
+	},
+	{
+		title: "新能源",
+		titleSub: "较上月+4",
+		progress: 90,
+		slope: "add",
+		total: 18,
+		current: 3
+	},
+	{
+		title: "集成电路",
+		titleSub: "较上月+4",
+		progress: 20,
+		slope: "add",
+		total: 16,
+		current: 3
+	},
+	{
+		title: "海洋",
+		titleSub: "较上月+4",
+		progress: 50,
+		slope: "add",
+		total: 8,
+		current: 3
+	},
+	{
+		title: "先进制造",
+		titleSub: "较上月+4",
+		progress: 50,
+		slope: "add",
+		total: 15,
+		current: 3
+	},
+	{
+		title: "新材料",
+		titleSub: "较上月+4",
+		progress: 50,
+		slope: "add",
+		total: 8,
+		current: 3
+	}
+]);
+const catdList = ref([
+	{
+		title: "数据资源管理",
+		bgColor: "rgba(206, 79, 81, 1)",
+		list: [
+			{
+				title: "数据资源目录",
+				text: "平台各类数据资源汇总导航"
+			},
+			{
+				title: "数据统计分析",
+				text: "查看资源发布量、各部门资源注册情况"
+			},
+			{
+				title: "信息空间",
+				text: "对数据资源的全生命周期进行管理"
+			}
+		]
+	},
+	{
+		title: "信息发布与管理",
+		bgColor: "rgba(19, 168, 168, 1)",
+		list: [
+			{
+				title: "信息编辑",
+				text: "信息的内容导入、格式编辑"
+			},
+			{
+				title: "信息审核",
+				text: "发布前内容自动审核、词库屏蔽"
+			},
+			{
+				title: "信息发布",
+				text: "提供点到点以及点到面的消息发送"
+			}
+		]
+	},
+	{
+		title: "应用支撑平台",
+		bgColor: "rgba(250, 140, 22, 1)",
+		list: [
+			{
+				title: "应用功能目录",
+				text: "快速访问和使用系统功能"
+			},
+			{
+				title: "应用工具目录",
+				text: "各项应用工具的使用方法和应用场景"
+			},
+			{
+				title: "应用功能与工具管理",
+				text: "实现功能及工具快捷访问配置入口"
+			}
+		]
+	},
+	{
+		title: "后台服务管理",
+		bgColor: "rgba(10, 87, 166, 1)",
+		list: [
+			{
+				title: "界面配置管理",
+				text: "支持界面布局、样式定制化修改"
+			},
+			{
+				title: "数据接口管理",
+				text: "实现数据接口的访问调用、权限控制等"
+			},
+			{
+				title: "系统配置管理",
+				text: "支持各分系统配置的定制与调整"
+			}
+		]
+	}
+]);
+function moreClick(n) {
+	alert(n);
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+	width: 1600px;
+	margin: 30px auto;
+}
+.gap {
+	margin-top: 24px;
+}
+.icon {
+	width: 24px;
+	height: 22px;
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+.icon1 {
+	background-image: url("../assets/img/icon1.png");
+}
+.icon2 {
+	background-image: url("../assets/img/icon2.png");
+}
+.icon3 {
+	background-image: url("../assets/img/icon3.png");
+}
+.icon4 {
+	background-image: url("../assets/img/icon4.png");
+}
+.item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 7px;
+}
+.itemLevel {
+	width: 40px;
+	height: 40px;
+	border-radius: 20px;
+	font-family: Microsoft YaHei;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 14px;
+	padding: 6px 4px;
+	text-align: center;
+	margin-right: 5px;
+}
+.itemTime {
+	color: rgba(132, 136, 142, 1);
+}
+.itemFlag {
+	width: 20px;
+	height: 20px;
+	background-size: cover;
+	background-repeat: no-repeat;
+	margin-left: 10px;
+}
+.itemTrends {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 20px;
+}
+.itemTrendsIcon {
+	width: 4px;
+	height: 4px;
+	background-color: rgba(206, 79, 81, 1);
+	border-radius: 50%;
+	margin-right: 14px;
+	margin-left: 20px;
+}
+.itemTrendsText {
+	flex: 1;
+}
+.itemTrendsTime {
+	margin-right: 6px;
+}
+.level1 {
+	background: rgb(255, 241, 240);
+	color: rgb(245, 34, 45);
+}
+.level2 {
+	color: rgb(250, 140, 22);
+	background: rgb(255, 247, 230);
+}
+.level3 {
+	color: rgb(82, 196, 26);
+	background: rgb(246, 255, 237);
+}
+.itemText {
+	flex: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cardContainer {
+	justify-content: space-between;
+}
+.itemCardWrap {
+	width: 400px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+.itemCard {
+	width: 388px;
+	height: 80px;
+	border-radius: 4px;
+	background-image: url("../assets/img/cardBg.png");
+	background-size: cover;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	.itemCardIcon {
+		width: 30px;
+		height: 30px;
+		background-size: contain;
+		margin-right: 7px;
+	}
+	.itemCardIcon1 {
+		background-image: url("../assets/img/cardIcon1.png");
+	}
+	.itemCardIcon2 {
+		background-image: url("../assets/img/cardIcon2.png");
+	}
+	.itemCardIcon3 {
+		background-image: url("../assets/img/cardIcon3.png");
+	}
+	.itemCardIcon4 {
+		background-image: url("../assets/img/cardIcon4.png");
+	}
+	.itemCardTitle {
+		font-size: 24px;
+		font-weight: 700;
+		color: #ffffff;
+	}
+}
+.moreWrap {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 16px;
+	height: 100%;
+	padding-left: 10px;
+	padding-right: 10px;
+	flex: 1;
+	.moreText {
+		margin-right: 3px;
+	}
+	.shuaxinIcon {
+		width: 16px;
+		height: 16px;
+		background-image: url("../assets/img/shuaxin.png");
+		background-size: contain;
+	}
+}
+.CardCustomRight {
+	flex: 1;
+	padding-left: 50px;
+	padding-right: 50px;
+	margin-left: 30px;
+	display: flex;
+	justify-content: space-between;
+}
+.itemCard1 {
+	.itemCard1Img {
+		position: relative;
+		width: 204px;
+		height: 266px;
+		background-image: url("../assets/img/book.png");
+		background-size: contain;
+		.itemCard1Footer {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			width: 204px;
+			height: 64px;
+			padding: 10px;
+			background-color: #000;
+			color: #fff;
+		}
+	}
+}
+.spaceBetween {
+	justify-content: space-between;
+}
+.itemCard2 {
+	width: 388px;
+	height: 360px;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	:deep(.el-card__body) {
+		padding-top: 0;
+	}
+	.itemCard2Line {
+		/* 矩形 214 */
+		width: 320px;
+		height: 4px;
+		background-color: rgba(206, 79, 81, 1);
+		position: absolute;
+		top: 0;
+		left: 34px;
+	}
+	.itemCard2Container {
+		width: 320px;
+		height: 360px;
+		.itemCard2BigTextWrap {
+			color: rgba(206, 79, 81, 1);
+			font-size: 24px;
+			font-weight: 700;
+			height: 83px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			border-bottom: 1px solid #ddd;
+		}
+		.itemCard2TextWrap {
+			height: 83px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			border-bottom: 1px solid #ddd;
+		}
+		.temCard2Title {
+			color: rgba(59, 65, 75, 1);
+			font-size: 20px;
+			font-weight: 700;
+		}
+		.temCard2Text {
+			color: rgba(95, 101, 108, 1);
+			font-size: 16px;
+			font-weight: 400;
+		}
+	}
+}
+</style>

src/views/portals/portal2/index.vue

+<template>
+	<div class="wrap">
+		<el-row>
+			<CardCustom
+				title="热门数据"
+				title-text-align="left"
+				title-color="rgba(10, 87, 166, 1)"
+				:style="{ width: '520px', height: '459px' }"
+				title-background-color="rgba(255, 255, 255, 1)"
+				header-height="53px"
+			>
+				<template #icon>
+					<div class="icon icon5"></div>
+				</template>
+				<template #right>
+					<div></div>
+				</template>
+				<div class="item" v-for="(item, index) in List" :key="index">
+					<span class="itemNumber" :style="{ color: getColor(index) }">
+						{{ index + 1 }}
+					</span>
+					<div class="itemText">{{ item.title }}</div>
+					<span class="itemClass">{{ item.class }}</span>
+				</div>
+			</CardCustom>
+			<CardCustom
+				title="数据分布"
+				title-text-align="left"
+				title-color="rgba(10, 87, 166, 1)"
+				:style="{ width: '1064px', height: '459px', marginLeft: '16px' }"
+				title-background-color="rgba(255, 255, 255, 1)"
+				header-height="53px"
+			>
+				<template #icon>
+					<div class="icon icon3"></div>
+				</template>
+				<template #right>
+					<div></div>
+				</template>
+			</CardCustom>
+		</el-row>
+       		<div class="gap">
+			<el-row class="cardContainer">
+				<div class="itemCard">
+					<div class="itemCardTitle">科研学术</div>
+					<div class="itemCardNumber">2465</div>
+				</div>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import CardCustom from "../components/CardCustom.vue";
+import { ref } from "vue";
+function getColor(index) {
+	const mapColor = ["rgba(206, 79, 81, 1)", "rgba(255, 169, 64, 1)", "rgba(255, 197, 61, 1)"];
+	let color = mapColor[index];
+	return color || "transparent";
+}
+const List = ref([
+	{
+		title: "H.R.1-119th-大而美法案",
+		class: "科技法案"
+	},
+	{
+		title: "欧盟单方面宣布对中国电动汽车加征反补贴...",
+		class: "媒体报道"
+	},
+	{
+		title: "禁止在中国建设半导体产能",
+		class: "总统政令"
+	},
+	{
+		title: "2025年实体清单",
+		class: "实体清单"
+	},
+	{
+		title: "2025年实体清单",
+		class: "实体清单"
+	},
+	{
+		title: "2025年实体清单",
+		class: "实体清单"
+	},
+	{
+		title: "2025年实体清单",
+		class: "实体清单"
+	},
+	{
+		title: "2025年实体清单",
+		class: "实体清单"
+	},
+	{
+		title: "2025年实体清单",
+		class: "实体清单"
+	},
+	{
+		title: "2025年实体清单",
+		class: "实体清单"
+	}
+]);
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+	width: 1600px;
+	margin: 30px auto;
+}
+.gap {
+	margin-top: 24px;
+}
+.icon {
+	width: 18px;
+	height: 18px;
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+.icon3 {
+	background-image: url("../assets/img/icon3.png");
+}
+.icon5 {
+	background-image: url("../assets/img/icon5.png");
+}
+.item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-top: 7px;
+
+}
+.itemNumber {
+	width: 40px;
+}
+.itemText {
+	flex: 1;
+}
+.itemClass {
+	color: rgba(132, 136, 142, 1);
+}
+.cardContainer {
+	justify-content: space-between;
+}
+.itemCard{
+   /* 容器 245 */
+width: 186px;
+height: 80px;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+border-radius: 4px;
+}
+.itemCardTitle{
+    font-size: 20px;
+    font-weight: 700;
+}
+.itemCardNumber{
+    margin-top: 5px;
+    font-size: 16px;
+}
+</style>

src/views/portals/utils/charts.js

+
+import * as echarts from "echarts";
+const getPieChart = (number, current, total) => {
+    const option = {
+        // 图表标题可置于中心，模拟居中文字的一部分
+        title: {
+            text: current + '/' + total, // 主百分比文字
+            left: 'center',
+            top: 'center',
+            textStyle: {
+                fontSize: 20,
+                fontWeight: 'bold',
+                color: '#333'
+            }
+        },
+        series: [
+            // 背景环系列
+            {
+                type: 'pie',
+                radius: ['84%', '96%'], // 细圆环：内半径50%，外半径55% [citation:5]
+                silent: true, // 禁用交互 [citation:2]
+                label: { show: false }, // 不显示标签 [citation:2]
+                data: [
+                    {
+                        value: 100, // 背景环占满100%，模拟完整圆环
+                        itemStyle: {
+                            color: '#f0f0f0' // 背景环颜色，通常为浅色
+                        }
+                    }
+                ]
+            },
+            // 数据进度环系列
+            {
+                type: 'pie',
+                radius: ['80%', '100%'], // 与背景环同样粗细
+                startAngle: 90, // 起始角度，从顶部开始 [citation:4]
+                labelLine: false,
+                silent: true,
+                data: [
+                    {
+                        value: number, // 实际进度值，对应70%
+                        itemStyle: {
+                            // 使用线性渐变
+                            color: {
+                                type: 'linear',
+                                x: 1,
+                                y: 0,
+                                x2: 0,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(105, 177, 255, 1)' // 渐变起始颜色
+                                }, {
+                                    offset: 1, color: 'rgba(255, 120, 117, 1)' // 渐变结束颜色
+                                }]
+                            }
+                        }
+                    },
+                    {
+                        value: 100 - number, // 剩余部分 (100 - 70)%
+                        itemStyle: {
+                            color: 'transparent' // 剩余部分透明，仅显示实际进度部分
+                        }
+                    }
+                ]
+            }
+        ]
+    };
+    return option
+}
+const setChart = (option, chartDom) => {
+    let chart = echarts.init(chartDom);
+    chart.setOption(option);
+    return chart;
+};
+export {
+    getPieChart,
+    setChart
+}
\ No newline at end of file

src/views/writtingAsstaint/index.vue

+<template>
+	<div class="writting-wrapper">
+		<div class="writting-header">
+			<div class="tab-box">
+				<div class="tab" :class="{ tabActive: item.active }" v-for="(item, index) in tabList" :key="index">
+					{{ item.name }}
+				</div>
+			</div>
+			<div class="edit-box"></div>
+			<div class="btn-box">
+				<div class="btn" @click="exportContent">
+					<div class="icon">
+						<img src="./assets/images/export-icon.png" alt="" />
+					</div>
+					<div class="text">{{ "导出" }}</div>
+				</div>
+				<div class="btn" @click="handleSwitchMode">
+					<div class="icon">
+						<img src="./assets/images/preview-icon.png" alt="" />
+					</div>
+					<div class="text">{{ isEditMode ? "预览" : "编辑" }}</div>
+				</div>
+				<div class="btn btn1">
+					<div class="icon">
+						<img src="./assets/images/save-icon.png" alt="" />
+					</div>
+					<div class="text text1">{{ "保存" }}</div>
+				</div>
+			</div>
+		</div>
+		<div class="writting-main">
+			<div class="sider">
+				<div class="sider-box1">
+					<div class="header">报文主题</div>
+					<div class="title-box">
+						<div class="title">主题名称</div>
+						<el-input
+							style="width: 476px; height: 32px"
+							class="title-input"
+							placeholder="输入主题名称，如：大而美法案"
+							v-model="writtingTitle"
+						/>
+					</div>
+					<div class="description-box">
+						<div class="title">主题描述</div>
+						<el-input
+							class="description-input"
+							type="textarea"
+							style="width: 476px"
+							:rows="8"
+							placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
+							v-model="descText"
+						/>
+					</div>
+				</div>
+				<div class="sider-box2">
+					<div class="header">报文模板</div>
+					<div class="template-box">
+						<div
+							class="template"
+							:class="{ tempActive: tempActiveIndex === index }"
+							v-for="(temp, index) in tempList"
+							:key="index"
+							@click="handleClickTemp(item, index)"
+						>
+							<div class="header">
+								<div class="title">{{ temp.title }}</div>
+								<div class="icon">
+									<img src="./assets/images/template-icon.png" alt="" />
+								</div>
+							</div>
+							<div class="content">{{ temp.desc }}</div>
+							<div class="active-icon" v-if="tempActiveIndex === index">
+								<img src="./assets/images/active-icon.png" alt="" />
+							</div>
+							<div class="selected-icon" v-if="tempActiveIndex === index">
+								<img src="./assets/images/selected-icon.png" alt="" />
+							</div>
+						</div>
+					</div>
+					<div class="tips">
+						<div class="tips-icon">
+							<img src="./assets/images/tips-icon.png" alt="" />
+						</div>
+						<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
+					</div>
+				</div>
+				<div class="submit-btn" @click="getStreamChat">
+					<div class="submit-icon">
+						<img src="./assets/images/ai.png" alt="" />
+					</div>
+					<div class="submit-text">生成报文</div>
+				</div>
+			</div>
+			<div class="main-box">
+				<div v-if="isEditMode" class="edit-panel">
+					<v-md-editor
+						v-model="reportContent"
+						height="calc(100% - 40px)"
+						:disabled-menus="[]"
+						@upload-image="handleUploadImage"
+						@save="handleSave"
+						left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save"
+						right-toolbar="preview toc sync-scroll fullscreen"
+					/>
+				</div>
+				<div v-else class="content-box" ref="scrollContainer" v-html="renderedContent"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { useMarkdownStream } from "@/hooks/useMarkdownStream";
+import { fetchEventSource } from "@microsoft/fetch-event-source";
+
+import VMdEditor from "@kangc/v-md-editor";
+import "@kangc/v-md-editor/lib/style/base-editor.css";
+import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
+import "@kangc/v-md-editor/lib/theme/style/vuepress.css";
+
+// 引入 Prism 相关依赖
+import Prism from "prismjs";
+
+VMdEditor.use(vuepressTheme, {
+	Prism
+});
+
+const isEditMode = ref(false);
+
+const handleSwitchMode = () => {
+	isEditMode.value = !isEditMode.value;
+	if (!isEditMode.value) {
+		console.log(reportContent.value);
+		updateContent(reportContent.value, scrollContainer.value);
+	}
+};
+
+// 保存处理函数
+const handleSave = (text, html) => {
+	console.log("保存内容:", {
+		markdown: text,
+		html: html
+	});
+
+	reportContent.value = text;
+	// 实际保存逻辑
+	// saveToLocalStorage(text);
+	ElMessage.success("保存成功！");
+};
+
+// 保存到本地存储
+const saveToLocalStorage = text => {
+	localStorage.setItem("markdown-content", text);
+};
+
+const abortController = ref(null);
+
+const scrollContainer = ref(null);
+const { renderedContent, updateContent } = useMarkdownStream();
+
+const reportContent = ref("");
+
+const getStreamChat = async (search, inputValue) => {
+	const params = {
+		query: "输出一篇报文"
+	};
+
+	abortController.value = new AbortController();
+
+	fetchEventSource("/sse/api/v1/chat/stream", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json"
+		},
+		body: JSON.stringify(params),
+		signal: abortController.value.signal,
+		openWhenHidden: true,
+		async onopen(res) {
+			console.log("流式回答开始", res);
+		},
+		async onmessage(res) {
+			let msgData = JSON.parse(res.data);
+			console.log("resss", msgData.content);
+			let str = msgData.content;
+			if (str !== "[DONE]") {
+				reportContent.value += str;
+				updateContent(reportContent.value, scrollContainer.value);
+			} else {
+				ElMessage.success("报文生成结束");
+				abortController.value.abort();
+				abortController.value = new AbortController();
+			}
+		},
+		onerror(error) {
+			ElMessage({
+				message: "写报生成报错!",
+				type: "warning"
+			});
+			abortController.value.abort();
+			abortController.value = new AbortController();
+			throw new Error(error);
+		}
+	}).catch(error => {
+		ElMessage({
+			message: "写报生成报错!",
+			type: "warning"
+		});
+		abortController.value.abort();
+		abortController.value = new AbortController();
+		throw new Error(error);
+	});
+};
+
+const writtingTitle = ref("");
+const descText = ref("");
+const tabList = ref([
+	{
+		name: "写报",
+		active: true
+	},
+	{
+		name: "收藏",
+		active: false
+	},
+	{
+		name: "问答",
+		active: false
+	}
+]);
+const tempList = ref([
+	{
+		title: "主题报",
+		desc: "基于特定主题生成各维度的综合分析报告"
+	},
+	{
+		title: "统计速报",
+		desc: "基于定期更新的数据源生成各关键指标统计"
+	}
+]);
+
+const tempActiveIndex = ref(0);
+
+const handleClickTemp = (item, index) => {
+	tempActiveIndex.value = index;
+};
+
+// 导出
+const exportContent = () => {
+	const blob = new Blob([reportContent.value], { type: "text/markdown" });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = `markdown-${new Date().getTime()}.md`;
+	a.click();
+	URL.revokeObjectURL(url);
+};
+
+onMounted(() => {
+	// const str = '# 欢迎使用 Markdown 编辑器\n\n这是一个功能丰富的 Markdown 编辑器示例。\n\n## 功能特性\n\n- ✨ **实时预览**\n- 🎨 **代码高亮**\n- 📁 **图片上传**\n- 📊 **表格支持**\n- 🔗 **链接管理**\n\n```javascript\n// 示例代码\nconst message = "Hello Markdown!";\nconsole.log(message);\n```'
+	// updateContent(str, scrollContainer.value);
+});
+
+onUnmounted(() => {
+	if (abortController.value) {
+		abortController.value.abort();
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.writting-wrapper {
+	width: 100%;
+	height: 100%;
+	.writting-header {
+		height: 60px;
+		box-sizing: border-box;
+		border-bottom: 1px solid rgba(234, 236, 238, 1);
+		border-top: 1px solid rgba(234, 236, 238, 1);
+		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+		background: rgba(255, 255, 255, 1);
+		display: flex;
+		position: relative;
+		.tab-box {
+			display: flex;
+			margin-left: 130px;
+			margin-top: 13px;
+			width: 260px;
+			height: 46px;
+			justify-content: space-between;
+			.tab {
+				color: rgba(95, 101, 108, 1);
+				font-family: Microsoft YaHei;
+				font-size: 20px;
+				font-weight: 400;
+				line-height: 30px;
+			}
+			.tabActive {
+				color: rgba(5, 95, 194, 1);
+				font-family: Microsoft YaHei;
+				font-size: 20px;
+				font-weight: 700;
+				line-height: 30px;
+				border-bottom: 4px solid rgba(5, 95, 194, 1);
+			}
+		}
+		.btn-box {
+			position: absolute;
+			top: 12px;
+			right: 39px;
+			display: flex;
+			gap: 12px;
+			.btn {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 88px;
+				height: 36px;
+				gap: 8px;
+				box-sizing: border-box;
+				border: 1px solid rgba(230, 231, 232, 1);
+				border-radius: 6px;
+				background: rgba(255, 255, 255, 1);
+				cursor: pointer;
+				.icon {
+					width: 16px;
+					height: 16px;
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.text {
+					width: 32px;
+					height: 24px;
+					color: rgba(95, 101, 108, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 400;
+					line-height: 24px;
+				}
+				.text1 {
+					color: #fff;
+				}
+			}
+			.btn1 {
+				background: rgba(5, 95, 194, 1);
+			}
+		}
+	}
+	.writting-main {
+		display: flex;
+		height: calc(100% - 60px);
+		.sider {
+			width: 520px;
+			box-sizing: border-box;
+			border-right: 1px solid rgba(234, 236, 238, 1);
+			border-top: 1px solid rgba(234, 236, 238, 1);
+			background: rgba(255, 255, 255, 1);
+			position: relative;
+			.sider-box1 {
+				margin-top: 21px;
+				margin-left: 22px;
+				.header {
+					color: rgba(59, 65, 75, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 700;
+					line-height: 24px;
+				}
+				.title-box {
+					margin-top: 15px;
+					.title {
+						color: rgba(95, 101, 108, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 24px;
+					}
+					.title-input {
+						margin-top: 15px;
+					}
+				}
+				.description-box {
+					margin-top: 24px;
+					.title {
+						height: 24px;
+						color: rgba(95, 101, 108, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 24px;
+					}
+					.description-input {
+						margin-top: 12px;
+						height: 200px;
+					}
+				}
+			}
+			.sider-box2 {
+				margin-top: 24px;
+				margin-left: 22px;
+				.header {
+					height: 24px;
+					color: rgba(59, 65, 75, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 700;
+					line-height: 24px;
+				}
+				.template-box {
+					margin-top: 19px;
+					height: 120px;
+					display: flex;
+					gap: 16px;
+
+					.template {
+						width: 230px;
+						height: 120px;
+						box-sizing: border-box;
+						border: 1px solid rgba(234, 236, 238, 1);
+						border-radius: 4px;
+						position: relative;
+						cursor: pointer;
+						.active-icon {
+							width: 24px;
+							height: 24px;
+							position: absolute;
+							top: 0;
+							right: 0;
+							z-index: 99;
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.selected-icon {
+							width: 8px;
+							height: 6px;
+							position: absolute;
+							top: -4px;
+							right: 3px;
+							z-index: 100;
+							img {
+								width: 8px;
+								height: 6px;
+							}
+						}
+						.header {
+							display: flex;
+							justify-content: space-between;
+							height: 50px;
+							.title {
+								height: 24px;
+								// color: rgba(59, 65, 75, 1);
+								color: #333;
+								font-family: Microsoft YaHei;
+								font-size: 16px;
+								font-weight: 700;
+								line-height: 24px;
+								margin-left: 15px;
+								margin-top: 16px;
+							}
+							.icon {
+								margin-top: 15px;
+								margin-right: 16px;
+								width: 30px;
+								height: 30px;
+								border-radius: 15px;
+								background: rgba(231, 243, 255, 1);
+								img {
+									width: 17px;
+									height: 14px;
+									margin-top: 8px;
+									margin-left: 7px;
+								}
+							}
+						}
+						.content {
+							margin: 0 auto;
+							width: 200px;
+							height: 48px;
+							margin-top: 10px;
+							color: rgba(132, 136, 142, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 24px;
+						}
+					}
+					.tempActive {
+						border: 1px solid rgba(5, 95, 194, 1);
+						background: rgba(246, 250, 255, 1);
+					}
+				}
+				.tips {
+					margin-top: 19px;
+					height: 22px;
+					display: flex;
+					.tips-icon {
+						width: 14px;
+						height: 16px;
+						margin-top: 3px;
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.tips-text {
+						margin-left: 8px;
+						color: rgba(132, 136, 142, 1);
+						font-family: Microsoft YaHei;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 22px;
+					}
+				}
+			}
+			.submit-btn {
+				position: absolute;
+				left: 22px;
+				bottom: 13px;
+				width: 476px;
+				height: 36px;
+				border-radius: 4px;
+				background: rgba(5, 95, 194, 1);
+				display: flex;
+				justify-content: center;
+				cursor: pointer;
+				&:hover {
+					background: rgba(5, 95, 194, 0.8);
+				}
+				.submit-icon {
+					/* AI-logo */
+					width: 21px;
+					height: 15px;
+					margin-top: 10px;
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.submit-text {
+					height: 24px;
+					margin-top: 5px;
+					color: rgba(255, 255, 255, 1);
+					font-family: Microsoft YaHei;
+					font-size: 16px;
+					font-weight: 400;
+					line-height: 24px;
+					margin-left: 8px;
+				}
+			}
+		}
+		.main-box {
+			flex: 1;
+			background: #f7f8f9;
+			.edit-panel {
+				width: calc(100% - 100px);
+				height: calc(100% - 40px);
+				margin: 20px 50px;
+			}
+			.content-box {
+				width: calc(100% - 100px);
+				height: calc(100% - 40px);
+				margin: 20px 50px;
+				// height: 500px;
+				overflow-y: auto;
+				padding: 20px;
+				border: 1px solid #dcdfe6;
+				border-radius: 8px;
+				background: #fafafa;
+				line-height: 1.7;
+				// font-size: 20px;
+				font-size: 16px;
+			}
+		}
+	}
+}
+
+:deep(.el-input__wrapper) {
+	background: #f7f8f9;
+}
+
+:deep(.el-input__inner::placeholder) {
+	color: rgba(132, 136, 142, 1);
+	font-family: Microsoft YaHei;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+}
+
+:deep(.el-input__inner) {
+	color: #333;
+	font-family: Microsoft YaHei;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+}
+
+:deep(.el-textarea__inner) {
+	background: #f7f8f9;
+}
+
+:deep(.el-textarea__inner) {
+	color: #333;
+	font-family: Microsoft YaHei;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+}
+
+:deep(.el-textarea__inner::placeholder) {
+	color: rgba(132, 136, 142, 1);
+	font-family: Microsoft YaHei;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+}
+</style>
\ No newline at end of file

vite.config.js

@@ -38,6 +38,16 @@ export default defineConfig({
         target: 'http://8.140.26.4:9085/',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
+      },
+      '/sse': {
+          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/, '')
       }
     }
   }