From 294c9ccf4c8339333265bdde3a77897aa881e15e Mon Sep 17 00:00:00 2001
From: unknown <1627832236@qq.com>
Date: Fri, 24 Oct 2025 11:52:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9F=BA=E5=9C=B0=E6=A6=82?=
 =?UTF-8?q?=E5=86=B5=EF=BC=8C=E7=A7=91=E5=AD=A6=E7=A0=94=E7=A9=B6=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   3 +
 .idea/.gitignore                              |   8 +
 management/src/App.vue                        |   4 +
 management/src/router/index.ts                |  11 +
 .../src/views/baseoverview/BaseOverView.vue   | 242 +++++++++
 web/package-lock.json                         |  13 +-
 web/src/App.vue                               |   2 +-
 web/src/router/index.ts                       |  54 +-
 web/src/views/AcademicExchange.vue            |   5 +
 web/src/views/BaseOverview.vue                | 270 ++++++++++
 web/src/views/CaseResources.vue               |   5 +
 web/src/views/HomeContent.vue                 | 328 ++++++++++++
 web/src/views/HomeView.vue                    | 483 ++----------------
 web/src/views/JiDiView.vue                    |   5 +
 web/src/views/ScientificResearch.vue          | 164 ++++++
 web/src/views/SocialService.vue               |   5 +
 16 files changed, 1138 insertions(+), 464 deletions(-)
 create mode 100644 .idea/.gitignore
 create mode 100644 management/src/views/baseoverview/BaseOverView.vue
 create mode 100644 web/src/views/AcademicExchange.vue
 create mode 100644 web/src/views/BaseOverview.vue
 create mode 100644 web/src/views/CaseResources.vue
 create mode 100644 web/src/views/HomeContent.vue
 create mode 100644 web/src/views/ScientificResearch.vue
 create mode 100644 web/src/views/SocialService.vue

diff --git a/.gitignore b/.gitignore
index 4ff5d6bb..b076375c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,6 @@ server/.idea/server.iml
 server/.idea/modules.xml
 server/.idea/vcs.xml
 server/server/pkg/
+.idea/vcs.xml
+.idea/modules.xml
+.idea/hldrCenter.iml
diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 00000000..35410cac
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/management/src/App.vue b/management/src/App.vue
index 782be7d5..ea9ec25a 100644
--- a/management/src/App.vue
+++ b/management/src/App.vue
@@ -51,6 +51,10 @@
         <el-icon><Memo /></el-icon>
         <template #title>发布文章</template>
     </el-menu-item>
+    <el-menu-item index="/baseoverview">
+        <el-icon><Memo /></el-icon>
+        <template #title>编辑基地概况</template>
+    </el-menu-item>
     </el-menu>
       </el-aside>
 
diff --git a/management/src/router/index.ts b/management/src/router/index.ts
index 25c6bf22..62aaeb36 100644
--- a/management/src/router/index.ts
+++ b/management/src/router/index.ts
@@ -9,6 +9,7 @@ const NewsView = () => import('../views/news/NewsView.vue')
 const PublishView = () => import('../views/publish/PublishView.vue')
 const CommunityView = () => import('../views/community/CommunityView.vue')
 const ResourceView = () => import('../views/resource/ResourceView.vue')
+const BaseOverview = ()=> import('../views/baseoverview/BaseOverView.vue')
 
 // 定义路由规则（现在 RouteRecordRaw 导入正确）
 const routes: RouteRecordRaw[] = [
@@ -74,6 +75,16 @@ const routes: RouteRecordRaw[] = [
         meta: {
             title: '关于我们'
         }
+    },
+    {
+        
+        path: '/baseoverview',
+        name: 'baseoverview',
+        component: BaseOverview,
+        meta: {
+            title: '编辑基地概况',
+            requiresAuth: false
+        }
     }
 ]
 
diff --git a/management/src/views/baseoverview/BaseOverView.vue b/management/src/views/baseoverview/BaseOverView.vue
new file mode 100644
index 00000000..72e24021
--- /dev/null
+++ b/management/src/views/baseoverview/BaseOverView.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="base-overview-admin">
+    <!-- 页面标题 -->
+    <el-card class="page-header-card">
+      <h1 class="page-title">基地概况管理</h1>
+    </el-card>
+
+    <!-- 标签页切换 -->
+    <el-tabs v-model="activeTab" type="card" class="mt-4">
+
+      <el-tab-pane label="基地简介" name="introduction">
+        <el-card class="mt-2">
+          <el-form ref="introductionForm" :model="formData" label-width="120px">
+            <el-form-item label="简介内容">
+              <el-input
+                type="textarea"
+                v-model="formData.introduction"
+                rows="10"
+                placeholder="请输入基地简介内容"
+                clearable
+                resize="vertical"
+              />
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="基地成员" name="members">
+        <el-card class="mt-2">
+          <el-form ref="membersForm" :model="formData" label-width="120px">
+            <el-form-item label="主任">
+              <el-input v-model="formData.director" placeholder="请输入主任姓名" clearable />
+            </el-form-item>
+            <el-form-item label="副主任">
+              <el-input v-model="formData.deputyDirector" placeholder="请输入副主任姓名" clearable />
+            </el-form-item>
+            <el-form-item label="研究人员">
+              <el-input v-model="formData.researchers" placeholder="请输入研究人员（逗号分隔）" clearable />
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="规章制度" name="regulations">
+        <el-card class="mt-2">
+          <el-form ref="regulationsForm" :model="formData" label-width="120px">
+            <el-form-item label="制度内容">
+              <el-input
+                type="textarea"
+                v-model="formData.regulations"
+                rows="10"
+                placeholder="请输入规章制度内容"
+                clearable
+                resize="vertical"
+              />
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="联系我们" name="contact">
+        <el-card class="mt-2">
+          <el-form ref="contactForm" :model="formData" label-width="120px">
+            <el-form-item label="地址">
+              <el-input v-model="formData.address" placeholder="请输入地址" clearable />
+            </el-form-item>
+            <el-form-item label="电话">
+              <el-input v-model="formData.phone" placeholder="请输入电话" clearable />
+            </el-form-item>
+            <el-form-item label="邮箱">
+              <el-input v-model="formData.email" placeholder="请输入邮箱" clearable />
+            </el-form-item>
+            <el-form-item label="网站">
+              <el-input v-model="formData.website" placeholder="请输入网站地址" clearable />
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 操作按钮 -->
+    <div class="action-buttons mt-4">
+      <el-button type="primary" @click="saveAll">保存全部</el-button>
+      <el-button @click="saveCurrent">保存当前标签</el-button>
+      <el-button type="info" @click="outputIntroduction">输出简介内容</el-button>
+      <el-button @click="resetAll">重置全部</el-button>
+      <el-button @click="resetCurrent">重置当前标签</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 激活的标签页（默认显示基地简介）
+const activeTab = ref('introduction');
+
+// 统一管理表单数据（与数据库字段对应）
+const formData = reactive({
+  introduction: '探索健康设计的新路径，引领知识创新的新范式...',
+  director: '张三',
+  deputyDirector: '李四',
+  researchers: '王五,赵六,孙七',
+  regulations: '1. 科研项目管理办法...',
+  address: '湖北省武汉市江夏区阳光大道1号',
+  phone: '027-87186XXX',
+  email: 'hldrcenter@wtu.edu.cn',
+  website: 'http://www.wtu.edu.cn/hldrcenter',
+});
+
+// 保存全部内容（打印原始数据 + Markdown格式）
+const saveAll = () => {
+  // 1. 打印可直接存入数据库的原始数据（保留所有格式）
+  console.log('【数据库存储格式】基地概况完整原始数据：');
+  console.log('='.repeat(50));
+  console.log(formData); // 直接打印对象，保留原始文本格式
+  console.log('\n【原始文本详情】：');
+  Object.entries(formData).forEach(([key, value]) => {
+    console.log(`- ${key}：`);
+    console.log(value); // 单独打印每个字段的原始文本
+    console.log('---');
+  });
+
+  // 2. 构建Markdown格式内容（仅用于展示，不影响原始数据）
+  const mdContent = `# 基地概况\n\n` +
+    `## 基地简介\n${formData.introduction}\n\n` + // 不做格式化，直接使用原始文本
+    `## 基地成员\n` +
+    `- 主任：${formData.director}\n` +
+    `- 副主任：${formData.deputyDirector}\n` +
+    `- 研究人员：${formData.researchers}\n\n` +
+    `## 规章制度\n${formData.regulations}\n\n` + // 不做格式化
+    `## 联系我们\n` +
+    `- 地址：${formData.address}\n` +
+    `- 电话：${formData.phone}\n` +
+    `- 邮箱：${formData.email}\n` +
+    `- 网站：${formData.website}`;
+
+  console.log('\n\n【Markdown格式】基地概况内容：\n');
+  console.log(mdContent);
+
+  ElMessage.success('全部内容保存成功，已在控制台输出原始数据和Markdown格式内容');
+};
+
+// 单独输出基地简介（仅打印原始文本）
+const outputIntroduction = () => {
+  console.log('【数据库存储格式】基地简介原始内容：');
+  console.log('='.repeat(50));
+  console.log('原始文本（可直接存入数据库）：');
+  console.log(formData.introduction); // 直接打印原始文本，保留所有换行和格式
+
+  // 可选：同时打印带换行符标记的文本，方便查看换行位置
+  console.log('\n\n带换行符标记的文本（便于调试）：');
+  console.log(formData.introduction.replace(/\n/g, '\\n'));
+
+  // Markdown格式仍使用原始文本
+  const introMd = `# 基地简介\n\n${formData.introduction}`;
+  console.log('\n\n【Markdown格式】基地简介内容：\n');
+  console.log(introMd);
+
+  ElMessage.success('基地简介内容已在控制台输出');
+};
+
+// 保存当前标签页内容（打印原始数据）
+const saveCurrent = () => {
+  const currentKey = activeTab.value as keyof typeof formData;
+  const currentValue = formData[currentKey];
+  
+  console.log(`【数据库存储格式】当前标签（${activeTab.value}）原始内容：`);
+  console.log('='.repeat(50));
+  console.log('字段名：', currentKey);
+  console.log('原始文本：');
+  console.log(currentValue); // 直接打印原始文本
+  console.log('\n带换行符标记的文本：');
+  console.log(currentValue.replace(/\n/g, '\\n')); // 便于调试换行位置
+
+  ElMessage.success(`当前标签（${activeTab.value}）内容保存成功，已在控制台输出原始数据`);
+};
+
+// 重置全部内容到初始值
+const resetAll = () => {
+  Object.assign(formData, {
+    introduction: '探索健康设计的新路径，引领知识创新的新范式...',
+    director: '张三',
+    deputyDirector: '李四',
+    researchers: '王五,赵六,孙七',
+    regulations: '1. 科研项目管理办法...',
+    address: '湖北省武汉市江夏区阳光大道1号',
+    phone: '027-87186XXX',
+    email: 'hldrcenter@wtu.edu.cn',
+    website: 'http://www.wtu.edu.cn/hldrcenter',
+  });
+  ElMessage.info('全部内容已重置！');
+};
+
+// 重置当前标签页内容到初始值
+const resetCurrent = () => {
+  const initialValues = {
+    introduction: '探索健康设计的新路径，引领知识创新的新范式...',
+    director: '张三',
+    deputyDirector: '李四',
+    researchers: '王五,赵六,孙七',
+    regulations: '1. 科研项目管理办法...',
+    address: '湖北省武汉市江夏区阳光大道1号',
+    phone: '027-87186XXX',
+    email: 'hldrcenter@wtu.edu.cn',
+    website: 'http://www.wtu.edu.cn/hldrcenter',
+  };
+  
+  formData[activeTab.value as keyof typeof initialValues] = initialValues[activeTab.value as keyof typeof initialValues];
+  ElMessage.info('当前标签内容已重置！');
+};
+</script>
+
+<style scoped>
+.base-overview-admin {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-header-card {
+  margin-bottom: 20px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap; /* 适配小屏幕换行 */
+}
+
+:deep(.el-textarea__inner) {
+  min-height: 200px;
+  resize: vertical;
+}
+</style>
\ No newline at end of file
diff --git a/web/package-lock.json b/web/package-lock.json
index 03415398..68fda628 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -4661,10 +4661,11 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "7.1.9",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-7.1.9.tgz",
-      "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
+      "version": "7.1.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
+      "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "dev": true,
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -8105,9 +8106,9 @@
       "dev": true
     },
     "vite": {
-      "version": "7.1.9",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-7.1.9.tgz",
-      "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
+      "version": "7.1.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
+      "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "dev": true,
       "peer": true,
       "requires": {
diff --git a/web/src/App.vue b/web/src/App.vue
index b3c5cf51..aeffce29 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <HomeView></HomeView>
+  <router-view />
   <FooterView></FooterView>
 </template>
 
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 3e49915c..76bc3846 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,23 +1,61 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory , createWebHashHistory} from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import AboutView from '@/views/AboutView.vue';
+
+import BaseOverview from '@/views/BaseOverview.vue';
+import ScientificResearch from '@/views/ScientificResearch.vue';
+import AcademicExchange from '@/views/AcademicExchange.vue';
+import SocialService from '@/views/SocialService.vue';
+import CaseResources from '@/views/CaseResources.vue';
+import HomeContent from '@/views/HomeContent.vue';
+
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
       name: 'home',
       component: HomeView,
+      children: [
+        {
+          path: '', // ✅ 默认子路由：访问 / 时显示首页内容
+          name: 'home-content',
+          component: HomeContent
+        },
+        {
+          path: 'base-overview',
+          name: 'BaseOverview',
+          component: BaseOverview
+        },
+        {
+          path: 'scientific-research',
+          name: 'ScientificResearch',
+          component: ScientificResearch
+        },
+        {
+          path: 'academic-exchange',
+          name: 'AcademicExchange',
+          component: AcademicExchange
+        },
+        {
+          path: 'social-service',
+          name: 'SocialService',
+          component: SocialService
+        },
+        {
+          path: 'case-resources',
+          name: 'CaseResources',
+          component: CaseResources
+        }
+      ]
     },
     {
       path: '/about',
       name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
-    },
-  ],
+      component: AboutView
+    }
+  ]
 })
 
 export default router
diff --git a/web/src/views/AcademicExchange.vue b/web/src/views/AcademicExchange.vue
new file mode 100644
index 00000000..46ad7d4d
--- /dev/null
+++ b/web/src/views/AcademicExchange.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    基地概况
+  </div>
+</template>
diff --git a/web/src/views/BaseOverview.vue b/web/src/views/BaseOverview.vue
new file mode 100644
index 00000000..9e025d25
--- /dev/null
+++ b/web/src/views/BaseOverview.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="base-overview-container">
+    <!-- 页面标题区域 -->
+    <div class="page-header">
+      <h1 class="main-title">基地概况</h1>
+      <p class="english-title">Base Overview</p>
+    </div>
+
+    <!-- 导航标签区域 -->
+    <el-tabs
+      v-model="activeTab"
+      class="content-tabs"
+      :border="false"
+    >
+
+      <el-tab-pane label="基地简介" name="introduction">
+        <div class="tab-content">
+          <div class="content-layout">
+            <div class="content-left">
+              <h2 class="section-title">基地简介</h2>
+              <p class="section-english">Base Introduction</p>
+            </div>
+            <div class="content-right">
+              <div class="text-content">
+                <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
+                <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
+                <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+
+     <el-tab-pane label="基地成员" name="members">
+      <div class="tab-content">
+        <div class="content-layout">
+          <div class="content-left">
+            <h2 class="section-title">基地成员</h2>
+            <p class="section-english">Members</p>
+          </div>
+          <div class="content-right">
+            <div class="text-content">
+              <p><strong>主任：</strong> 张三</p>
+              <p><strong>副主任：</strong> 李四</p>
+              <p><strong>研究人员：</strong> 王五、赵六、孙七 等20余人</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="规章制度" name="regulations">
+        <div class="tab-content">
+          <div class="content-layout">
+            <div class="content-left">
+              <h2 class="section-title">规章制度</h2>
+              <p class="section-english">Regulations</p>
+            </div>
+            <div class="content-right">
+              <div class="text-content">
+                <p><strong>1. 科研项目管理办法</strong>：规范中心科研项目的申报、立项、实施、验收等全流程管理，确保项目质量和成果产出。</p>
+                <p><strong>2. 学术活动管理规定</strong>：鼓励开展高水平学术交流活动，提升中心学术影响力和社会知名度。</p>
+                <p><strong>3. 经费使用管理办法</strong>：严格规范科研经费的使用，确保经费专款专用、合理高效。</p>
+                <p><strong>4. 成果管理办法</strong>：对科研成果的鉴定、登记、转化等进行规范管理，促进成果应用和社会效益发挥。</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="联系我们" name="contact">
+        <div class="tab-content">
+          <div class="content-layout">
+            <div class="content-left">
+              <h2 class="section-title">联系我们</h2>
+              <p class="section-english">Contact Us</p>
+            </div>
+            <div class="content-right">
+              <div class="text-content">
+                <p><strong>地址：</strong> 湖北省武汉市江夏区阳光大道1号 武汉纺织大学 设计学院</p>
+                <p><strong>邮编：</strong> 430200</p>
+                <p><strong>电话：</strong> 027-87186XXX</p>
+                <p><strong>邮箱：</strong> hldrcenter@wtu.edu.cn</p>
+                <p><strong>网站：</strong> <a href="http://www.wtu.edu.cn/hldrcenter" target="_blank">http://www.wtu.edu.cn/hldrcenter</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 底部二维码区域 -->
+    <div class="qrcode-container">
+      <div class="qrcode-item">
+        <img src="https://picsum.photos/100/100?random=1" alt="微信公众号" class="qrcode-img">
+      </div>
+      <div class="qrcode-item">
+        <img src="https://picsum.photos/100/100?random=2" alt="官方网站" class="qrcode-img">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTabs, ElTabPane } from 'element-plus';
+
+// 控制当前激活的标签页，默认显示基地简介
+const activeTab = ref('introduction');
+</script>
+
+<style scoped>
+.base-overview-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  box-sizing: border-box;
+}
+
+/* 页面标题样式 */
+.page-header {
+  margin-bottom: 40px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.main-title {
+  font-size: 28px;
+  color: #333;
+  margin: 0 0 8px 0;
+  font-weight: 500;
+}
+
+.english-title {
+  font-size: 16px;
+  color: #999;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* 标签页样式 */
+.content-tabs {
+  margin-bottom: 40px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.el-tabs__nav) {
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+}
+
+:deep(.el-tabs__item) {
+  font-size: 16px;
+  color: #666;
+  padding: 0 20px;
+  margin-right: 10px;
+}
+
+:deep(.el-tabs__item.is-active) {
+  color: #b50009;
+  font-weight: 500;
+}
+
+:deep(.el-tabs__active-bar) {
+  background-color: #b50009;
+}
+
+/* 内容区域样式 */
+.tab-content {
+  padding: 30px 0;
+}
+
+/* 左侧标题 + 右侧内容的布局 */
+.content-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr; /* 左侧固定宽度，右侧自适应 */
+  gap: 30px;
+  align-items: start;
+}
+
+.content-left {
+  padding-right: 20px;
+  border-right: 1px solid #e0e0e0;
+}
+
+.section-title {
+  font-size: 24px;
+  color: #333;
+  margin: 0 0 10px 0;
+  font-weight: 500;
+}
+
+.section-english {
+  font-size: 16px;
+  color: #999;
+  margin: 0 0 20px 0;
+  text-transform: uppercase;
+}
+
+.text-content {
+  line-height: 1.8;
+  color: #555;
+  font-size: 16px;
+}
+
+.text-content p {
+  margin: 0 0 20px 0;
+  text-align: justify;
+}
+
+.text-content a {
+  color: #b50009;
+  text-decoration: none;
+}
+
+.text-content a:hover {
+  text-decoration: underline;
+}
+
+/* 底部二维码区域 - 靠右对齐 */
+.qrcode-container {
+  display: flex;
+  justify-content: flex-end; /* 靠右显示 */
+  gap: 30px;
+  margin-top: 50px;
+  padding-top: 20px;
+  border-top: 1px solid #e0e0e0;
+}
+
+.qrcode-item {
+  width: 100px;
+  height: 100px;
+}
+
+.qrcode-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border: 1px solid #eee;
+  padding: 4px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .content-layout {
+    grid-template-columns: 1fr; /* 移动端单列布局 */
+  }
+
+  .content-left {
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 15px;
+    margin-bottom: 20px;
+  }
+
+  .qrcode-container {
+    justify-content: center; /* 移动端居中显示二维码 */
+  }
+
+  .main-title {
+    font-size: 24px;
+  }
+
+  .text-content {
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/web/src/views/CaseResources.vue b/web/src/views/CaseResources.vue
new file mode 100644
index 00000000..46ad7d4d
--- /dev/null
+++ b/web/src/views/CaseResources.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    基地概况
+  </div>
+</template>
diff --git a/web/src/views/HomeContent.vue b/web/src/views/HomeContent.vue
new file mode 100644
index 00000000..36dff503
--- /dev/null
+++ b/web/src/views/HomeContent.vue
@@ -0,0 +1,328 @@
+<template>
+  <div class="home-content">
+    <!-- 轮播图 -->
+    <el-carousel
+      class="carousel-container"
+      height="400px"
+      autoplay
+      arrow="always"
+    >
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img src="https://picsum.photos/1920/400?random=1" alt="健康生活研究" class="carousel-img">
+          <div class="carousel-caption">
+            <h3>健康生活环境设计研究成果展</h3>
+            <p>探索健康设计新路径，引领人居环境创新</p>
+          </div>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img src="https://picsum.photos/1920/400?random=2" alt="学术研讨会" class="carousel-img">
+          <div class="carousel-caption">
+            <h3>2025健康设计国际学术研讨会</h3>
+            <p>汇聚全球专家智慧，共话健康人居未来</p>
+          </div>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img src="https://picsum.photos/1920/400?random=3" alt="社区服务案例" class="carousel-img">
+          <div class="carousel-caption">
+            <h3>社区健康服务创新实践</h3>
+            <p>以设计赋能社区，提升居民生活品质</p>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+
+    <!-- 新闻动态 -->
+    <div class="news-section">
+      <div class="section-header">
+        <h2>新闻动态 <span class="en-title">News</span></h2>
+        <el-link class="more-btn" :to="{ path: '/news-more' }">More</el-link>
+      </div>
+      <div class="news-cards">
+        <el-card
+          class="news-card"
+          v-for="(news, index) in newsList"
+          :key="index"
+          shadow="hover"
+          :body-style="{ padding: '0px' }"
+        >
+          <img :src="news.imageUrl" alt="新闻图片" class="card-img">
+          <div class="card-content">
+            <h3 class="card-title">{{ news.title }}</h3>
+            <p class="card-desc">{{ news.desc }}</p>
+            <el-button type="text" class="detail-btn">
+              <el-icon><ArrowRight /></el-icon> 详情
+            </el-button>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <!-- 案例资源 -->
+    <div class="news-section">
+      <div class="section-header">
+        <h2>案例资源 <span class="en-title">Resource</span></h2>
+        <el-link class="more-btn" :to="{ path: '/resource-more' }">More</el-link>
+      </div>
+      <div class="news-cards">
+        <el-card
+          class="news-card"
+          v-for="(resource, index) in resourceList"
+          :key="index"
+          shadow="hover"
+          :body-style="{ padding: '0px' }"
+        >
+          <img :src="resource.imageUrl" alt="案例资源图片" class="card-img">
+          <div class="card-content">
+            <h3 class="card-title">{{ resource.title }}</h3>
+            <p class="card-desc">{{ resource.desc }}</p>
+            <el-button type="text" class="detail-btn">
+              <el-icon><ArrowRight /></el-icon> 详情
+            </el-button>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <!-- 社区服务 -->
+    <div class="news-section">
+      <div class="section-header">
+        <h2>社区服务 <span class="en-title">Community</span></h2>
+        <el-link class="more-btn" :to="{ path: '/community-more' }">More</el-link>
+      </div>
+      <div class="news-cards">
+        <el-card
+          class="news-card"
+          v-for="(service, index) in communityList"
+          :key="index"
+          shadow="hover"
+          :body-style="{ padding: '0px' }"
+        >
+          <img :src="service.imageUrl" alt="社区服务图片" class="card-img">
+          <div class="card-content">
+            <h3 class="card-title">{{ service.title }}</h3>
+            <p class="card-desc">{{ service.desc }}</p>
+            <el-button type="text" class="detail-btn">
+              <el-icon><ArrowRight /></el-icon> 详情
+            </el-button>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { ElCarousel, ElCarouselItem, ElLink, ElCard, ElButton, ElIcon } from 'element-plus';
+import { ArrowRight } from '@element-plus/icons-vue';
+
+// 数据结构
+interface NewsItem {
+  imageUrl: string;
+  title: string;
+  desc: string;
+}
+
+interface Article {
+  id: number;
+  title: string;
+  cover: string;
+  excerpt: string;
+}
+
+// 响应式数据
+const newsList = ref<NewsItem[]>([]);
+const resourceList = ref<NewsItem[]>([]);
+const communityList = ref<NewsItem[]>([]);
+
+// HTML转纯文本工具函数
+function stripHtml(htmlStr: string): string {
+  if (!htmlStr) return '';
+  const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
+  return doc.body.textContent || "";
+}
+
+// 通用请求函数
+const fetchArticlesByTopic = async (topic: string): Promise<NewsItem[]> => {
+  try {
+    const response = await fetch('http://localhost:8080/api/articles/getarticle', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ page: 1, size: 3, topic })
+    });
+
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const data = await response.json();
+
+    if (data && Array.isArray(data.Article_list)) {
+      return data.Article_list.map((article: Article) => {
+        const plainTextDesc = stripHtml(article.excerpt);
+        const truncatedDesc = plainTextDesc.length > 100 ? `${plainTextDesc.substring(0, 100)}...` : plainTextDesc;
+        return {
+          imageUrl: article.cover,
+          title: article.title,
+          desc: truncatedDesc,
+        };
+      });
+    }
+    return [];
+  } catch (error) {
+    console.error(`Failed to fetch ${topic}:`, error);
+    return [];
+  }
+};
+
+// 挂载时请求数据
+onMounted(async () => {
+  const [newsData, resourceData, communityData] = await Promise.all([
+    fetchArticlesByTopic('新闻'),
+    fetchArticlesByTopic('案例资源'),
+    fetchArticlesByTopic('社区服务')
+  ]);
+  newsList.value = newsData;
+  resourceList.value = resourceData;
+  communityList.value = communityData;
+});
+</script>
+
+<style scoped>
+/* 轮播图样式 */
+.carousel-container {
+  width: 100%;
+  overflow: hidden;
+}
+.carousel-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.carousel-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.carousel-caption {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
+  width: 80%;
+}
+.carousel-caption h3 {
+  font-size: 32px;
+  margin-bottom: 15px;
+  font-weight: 500;
+}
+.carousel-caption p {
+  font-size: 18px;
+}
+
+/* 新闻列表样式 */
+.news-section {
+  max-width: 1200px;
+  margin: 50px auto;
+  padding: 0 20px;
+}
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 10px;
+}
+.section-header h2 {
+  font-size: 26px;
+  margin: 0;
+  font-weight: 400;
+}
+.en-title {
+  font-size: 16px;
+  color: #999;
+  margin-left: 10px;
+  text-transform: uppercase;
+}
+.more-btn {
+  color: #999;
+  font-size: 14px;
+}
+.more-btn:hover {
+  color: #b50009;
+}
+
+/* 卡片样式 */
+.news-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px;
+}
+.news-card {
+  border: 1px solid #e0e0e0;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+.news-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+.card-img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  display: block;
+}
+.card-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.card-title {
+  font-size: 18px;
+  margin: 0 0 10px 0;
+  font-weight: 500;
+  color: #333;
+}
+.card-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.7;
+  flex-grow: 1;
+  margin-bottom: 15px;
+}
+.detail-btn {
+  color: #b50009 !important;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 !important;
+  align-self: flex-start;
+}
+
+/* 响应式调整 */
+@media (max-width: 992px) {
+  .news-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .carousel-caption h3 {
+    font-size: 20px;
+  }
+  .carousel-caption p {
+    font-size: 14px;
+  }
+  .news-cards {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 5940fcb9..4697bbe9 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="header-with-carousel">
+  <div class="home-view">
     <header class="top-navigation">
       <div class="nav-left">
         <div class="nav-title">湖北健康生活与康居环境设计研究中心</div>
@@ -13,476 +13,61 @@
         active-text-color="#ffd700"
         :default-active="activeIndex"
         @select="handleSelect"
+        router
       >
-        <el-menu-item index="1">首页</el-menu-item>
-        <el-menu-item index="2">基地概况</el-menu-item>
-        <el-menu-item index="3">科学研究</el-menu-item>
-        <el-menu-item index="4">学术交流</el-menu-item>
-        <el-menu-item index="5">社会服务</el-menu-item>
-        <el-menu-item index="6">案例资源</el-menu-item>
+        <el-menu-item index="/">首页</el-menu-item>
+        <el-menu-item index="/base-overview">基地概况</el-menu-item>
+        <el-menu-item index="/scientific-research">科学研究</el-menu-item>
+        <el-menu-item index="/academic-exchange">学术交流</el-menu-item>
+        <el-menu-item index="/social-service">社会服务</el-menu-item>
+        <el-menu-item index="/case-resources">案例资源</el-menu-item>
+        <el-menu-item index="/about">关于我们</el-menu-item>
       </el-menu>
     </header>
-
-    <el-carousel
-      class="carousel-container"
-      height="400px"
-      autoplay
-      arrow="always"
-    >
-      <el-carousel-item>
-        <div class="carousel-item">
-          <img
-            src="https://picsum.photos/1920/400?random=1"
-            alt="健康生活研究"
-            class="carousel-img"
-          >
-          <div class="carousel-caption">
-            <h3>健康生活环境设计研究成果展</h3>
-            <p>探索健康设计新路径，引领人居环境创新</p>
-          </div>
-        </div>
-      </el-carousel-item>
-
-      <el-carousel-item>
-        <div class="carousel-item">
-          <img
-            src="https://picsum.photos/1920/400?random=2"
-            alt="学术研讨会"
-            class="carousel-img"
-          >
-          <div class="carousel-caption">
-            <h3>2025健康设计国际学术研讨会</h3>
-            <p>汇聚全球专家智慧，共话健康人居未来</p>
-          </div>
-        </div>
-      </el-carousel-item>
-
-      <el-carousel-item>
-        <div class="carousel-item">
-          <img
-            src="https://picsum.photos/1920/400?random=3"
-            alt="社区服务案例"
-            class="carousel-img"
-          >
-          <div class="carousel-caption">
-            <h3>社区健康服务创新实践</h3>
-            <p>以设计赋能社区，提升居民生活品质</p>
-          </div>
-        </div>
-      </el-carousel-item>
-    </el-carousel>
-  </div>
-
-  <div class="news-section">
-    <div class="section-header">
-      <h2>新闻动态 <span class="en-title">News</span></h2>
-      <el-link class="more-btn">More</el-link>
-    </div>
-
-    <div class="news-cards">
-      <el-card
-        class="news-card"
-        v-for="(news, index) in newsList"
-        :key="index"
-        shadow="hover"
-        :body-style="{ padding: '0px' }"
-      >
-        <img :src="news.imageUrl" alt="新闻图片" class="card-img">
-        <div class="card-content">
-          <h3 class="card-title">{{ news.title }}</h3>
-          <p class="card-desc">{{ news.desc }}</p>
-          <el-button type="text" class="detail-btn">
-            <el-icon><ArrowRight /></el-icon> 详情
-          </el-button>
-        </div>
-      </el-card>
-    </div>
-  </div>
-
-  <div class="news-section">
-    <div class="section-header">
-      <h2>案例资源 <span class="en-title">Resource</span></h2>
-      <el-link class="more-btn">More</el-link>
-    </div>
-
-    <div class="news-cards">
-      <el-card
-        class="news-card"
-        v-for="(resource, index) in resourceList"
-        :key="index"
-        shadow="hover"
-        :body-style="{ padding: '0px' }"
-      >
-        <img :src="resource.imageUrl" alt="案例资源图片" class="card-img">
-        <div class="card-content">
-          <h3 class="card-title">{{ resource.title }}</h3>
-          <p class="card-desc">{{ resource.desc }}</p>
-          <el-button type="text" class="detail-btn">
-            <el-icon><ArrowRight /></el-icon> 详情
-          </el-button>
-        </div>
-      </el-card>
-    </div>
-  </div>
-
-  <div class="news-section">
-    <div class="section-header">
-      <h2>社区服务 <span class="en-title">Community</span></h2>
-      <el-link class="more-btn">More</el-link>
-    </div>
-
-    <div class="news-cards">
-      <el-card
-        class="news-card"
-        v-for="(service, index) in communityList"
-        :key="index"
-        shadow="hover"
-        :body-style="{ padding: '0px' }"
-      >
-        <img :src="service.imageUrl" alt="社区服务图片" class="card-img">
-        <div class="card-content">
-          <h3 class="card-title">{{ service.title }}</h3>
-          <p class="card-desc">{{ service.desc }}</p>
-          <el-button type="text" class="detail-btn">
-            <el-icon><ArrowRight /></el-icon> 详情
-          </el-button>
-        </div>
-      </el-card>
-    </div>
+    <router-view />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import {
-  ElMenu,
-  ElMenuItem,
-  ElCarousel,
-  ElCarouselItem,
-  ElLink,
-  ElCard,
-  ElButton,
-  ElIcon
-} from 'element-plus';
-import { ArrowRight } from '@element-plus/icons-vue';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { ElMenu, ElMenuItem } from 'element-plus';
+
+const route = useRoute();
+const activeIndex = ref('/');
 
-// 导航菜单激活项
-const activeIndex = ref('1');
 const handleSelect = (index: string) => {
   activeIndex.value = index;
 };
 
-// --- Data Structures ---
-interface NewsItem {
-  imageUrl: string;
-  title: string;
-  desc: string;
-}
-
-interface Article {
-    id: number;
-    title: string;
-    cover: string;
-    excerpt: string;
-}
-
-// **修改点1: 为每个版块创建独立的响应式数组**
-const newsList = ref<NewsItem[]>([]);
-const resourceList = ref<NewsItem[]>([]);
-const communityList = ref<NewsItem[]>([]);
-
-// --- Utility Function ---
-/**
- * @description 将HTML字符串转换为纯文本
- * @param htmlStr HTML字符串
- * @returns 纯文本字符串
- */
-function stripHtml(htmlStr: string): string {
-  if (!htmlStr) return '';
-  const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
-  return doc.body.textContent || "";
-}
-
-// **修改点2: 创建一个通用的、可复用的 fetch 函数**
-/**
- * @description 根据主题从后端获取文章列表
- * @param topic 文章主题 (e.g., "新闻", "案例资源")
- * @returns 处理过的文章列表
- */
-const fetchArticlesByTopic = async (topic: string): Promise<NewsItem[]> => {
-  try {
-    const response = await fetch('http://8.155.160.224:8080/api/articles/getarticle', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        page: 1,
-        size: 3, // 只请求需要的前3条数据
-        topic: topic
-      })
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error for topic ${topic}! status: ${response.status}`);
-    }
-
-    const data = await response.json();
-
-    if (data && Array.isArray(data.Article_list)) {
-      const articles: Article[] = data.Article_list;
-      
-      return articles.map(article => {
-        const plainTextDesc = stripHtml(article.excerpt);
-        const truncatedDesc = plainTextDesc.length > 100 
-          ? plainTextDesc.substring(0, 100) + '...' 
-          : plainTextDesc;
-
-        return {
-          imageUrl: article.cover,
-          title: article.title,
-          desc: truncatedDesc,
-        };
-      });
-    } else {
-       console.error(`API response for topic ${topic} is not in the expected format:`, data);
-       return []; // 返回空数组以防错误
-    }
-  } catch (error) {
-    console.error(`Failed to fetch articles for topic ${topic}:`, error);
-    return []; // 发生错误时返回空数组
-  }
-};
-
-// **修改点3: 在组件挂载时，并行获取所有版块的数据**
-onMounted(async () => {
-  // 使用 Promise.all 来同时触发所有API请求，提高加载效率
-  const [newsData, resourceData, communityData] = await Promise.all([
-    fetchArticlesByTopic('新闻'),
-    fetchArticlesByTopic('案例资源'),
-    fetchArticlesByTopic('社区服务')
-  ]);
-  
-  // 将获取到的数据赋值给对应的列表
-  newsList.value = newsData;
-  resourceList.value = resourceData;
-  communityList.value = communityData;
-});
+watch(
+  () => route.path,
+  (newPath) => {
+    activeIndex.value = newPath;
+  },
+  { immediate: true }
+);
 </script>
-<style scoped>
-.header-with-carousel {
-  width: 100%;
-}
 
-/* 顶部导航样式 */
+<style scoped>
 .top-navigation {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 50px; /* 增加左右边距 */
+  padding: 10px 50px;
   color: #fff;
   background-color: #b50009;
   width: 100%;
   box-sizing: border-box;
 }
-
-.nav-left {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.4;
-}
-
-.nav-title {
-  font-size: 18px; /* 稍大一些 */
-  font-weight: bold;
-}
-
-.nav-subtitle {
-  font-size: 12px; /* 稍小一些，形成对比 */
-  opacity: 0.9;
-}
-
-.nav-right {
-  display: flex;
-  align-items: center;
-}
-
-/* ⭐️ 移除 el-menu 组件自带的边框 */
-.el-menu--horizontal {
-  border-bottom: none;
-}
-/* 上面这行代码有时可能因为scoped的限制而不生效，
-  因此更推荐、更可靠的方式是使用 :deep() 
-*/
-:deep(.el-menu--horizontal) {
-  border-bottom: none !important;
-}
-
-
-.el-menu-item {
-  padding: 0 20px !important; /* 增加菜单项间距 */
-  font-size: 16px;
-}
-
-/* 轮播图样式 */
-.carousel-container {
-  width: 100%;
-  overflow: hidden;
-}
-
-.carousel-item {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.carousel-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover; /* 保持图片比例并填充容器 */
-}
-
-.carousel-caption {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  color: #fff;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.7); /* 加深阴影 */
-  width: 80%;
-}
-
-.carousel-caption h3 {
-  font-size: 32px; /* 加大标题字号 */
-  margin-bottom: 15px;
-  font-weight: 500;
-}
-
-.carousel-caption p {
-  font-size: 18px;
-}
-
-/* --- 新闻动态部分 --- */
-.news-section {
-  max-width: 1200px; /* 内容居中，限制最大宽度 */
-  margin: 50px auto; /* 增加上下外边距 */
-  padding: 0 20px;
-}
-
-/* 标题栏 */
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-bottom: 30px; /* 增加标题和内容间距 */
-  border-bottom: 1px solid #e0e0e0;
-  padding-bottom: 10px;
-}
-
-.section-header h2 {
-  font-size: 26px; /* 加大标题字号 */
-  margin: 0;
-  font-weight: 400;
-}
-
-.en-title {
-  font-size: 16px;
-  color: #999;
-  margin-left: 10px;
-  text-transform: uppercase; /* 英文大写 */
-}
-
-.more-btn {
-  color: #999;
-  font-size: 14px;
-}
-.more-btn:hover {
-  color: #b50009;
-}
-
-/* 新闻卡片列表 */
-.news-cards {
-  display: grid; /* 使用 Grid 布局，更灵活 */
-  grid-template-columns: repeat(3, 1fr);
-  gap: 25px; /* 卡片之间的间距 */
-}
-
-.news-card {
-  border: 1px solid #e0e0e0; /* 添加一个细微的边框 */
-  transition: all 0.3s ease;
-  display: flex;
-  flex-direction: column;
-}
-
-.news-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-
-.card-img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-  display: block;
-}
-
-.card-content {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1; /* 让内容区域填满卡片剩余空间 */
-}
-
-.card-title {
-  font-size: 18px;
-  margin: 0 0 10px 0;
-  font-weight: 500;
-  color: #333;
-}
-
-.card-desc {
-  font-size: 14px;
-  color: #666;
-  line-height: 1.7;
-  flex-grow: 1; /* 让描述文本占满，将按钮推到底部 */
-  margin-bottom: 15px;
-}
-
-.detail-btn {
-  color: #b50009 !important; /* 按钮文字为红色主色调 */
-  display: flex;
-  align-items: center;
-  gap: 5px; /* 图标与文字间距 */
-  padding: 0 !important; /* 去除按钮默认 padding */
-  align-self: flex-start; /* 让按钮在左侧 */
-}
-
-
-/* --- 响应式调整 --- */
-@media (max-width: 992px) {
-  .news-cards {
-    grid-template-columns: repeat(2, 1fr); /* 平板：一行两个 */
-  }
-}
-
+.nav-left { display: flex; flex-direction: column; line-height: 1.4; }
+.nav-title { font-size: 18px; font-weight: bold; }
+.nav-subtitle { font-size: 12px; opacity: 0.9; }
+.nav-right { display: flex; align-items: center; }
+:deep(.el-menu--horizontal) { border-bottom: none !important; }
+.el-menu-item { padding: 0 20px !important; font-size: 16px; }
 @media (max-width: 768px) {
-  .top-navigation {
-    flex-direction: column;
-    padding: 15px;
-  }
-  .nav-left {
-    margin-bottom: 15px;
-    text-align: center;
-  }
-  .carousel-caption h3 {
-    font-size: 20px;
-  }
-  .carousel-caption p {
-    font-size: 14px;
-  }
-  .news-cards {
-    grid-template-columns: 1fr; /* 手机：一行一个 */
-  }
+  .top-navigation { flex-direction: column; padding: 15px; }
+  .nav-left { margin-bottom: 15px; text-align: center; }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/JiDiView.vue b/web/src/views/JiDiView.vue
index e69de29b..46ad7d4d 100644
--- a/web/src/views/JiDiView.vue
+++ b/web/src/views/JiDiView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    基地概况
+  </div>
+</template>
diff --git a/web/src/views/ScientificResearch.vue b/web/src/views/ScientificResearch.vue
new file mode 100644
index 00000000..a44c257c
--- /dev/null
+++ b/web/src/views/ScientificResearch.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="scientific-research-page">
+    <!-- 页面标题区域 -->
+    <div class="page-header">
+      <h1 class="main-title">科学研究</h1>
+      <p class="english-title">Base Overview</p>
+    </div>
+
+    <!-- 导航标签区域 -->
+    <div class="nav-tabs">
+      <el-tabs v-model="activeTab" class="tabs-container">
+        <el-tab-pane label="科学研究" name="research"></el-tab-pane>
+        <el-tab-pane label="基地开放项目管理制度" name="management"></el-tab-pane>
+        <el-tab-pane label="基地开放项目立项结果" name="approval"></el-tab-pane>
+        <el-tab-pane label="基地开放项目中期检查" name="midterm"></el-tab-pane>
+        <el-tab-pane label="基地开放项目成果" name="results"></el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="content-area">
+      <div class="content-title">
+        <h2 class="chinese-title">基地开放项目管理制度</h2>
+        <p class="english-subtitle">Base Open Project Management System</p>
+      </div>
+
+      <div class="content-text">
+        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
+        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
+        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
+        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTabs, ElTabPane } from 'element-plus';
+
+// 控制当前激活的标签页
+const activeTab = ref('management');
+</script>
+
+<style scoped>
+.scientific-research-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  box-sizing: border-box;
+}
+
+/* 页面标题样式 */
+.page-header {
+  background-color: #f5f5f5;
+  padding: 60px 40px;
+  margin-bottom: 30px;
+  text-align: left;
+}
+
+.main-title {
+  font-size: 36px;
+  color: #333;
+  margin: 0 0 10px 0;
+  font-weight: 500;
+}
+
+.english-title {
+  font-size: 18px;
+  color: #666;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* 导航标签样式 */
+.nav-tabs {
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 40px;
+}
+
+:deep(.el-tabs__nav) {
+  display: flex;
+  justify-content: flex-start;
+}
+
+:deep(.el-tabs__item) {
+  font-size: 16px;
+  color: #666;
+  padding: 0 20px;
+  margin-right: 10px;
+  height: 50px;
+  line-height: 50px;
+}
+
+:deep(.el-tabs__item.is-active) {
+  color: #333;
+  font-weight: 500;
+}
+
+:deep(.el-tabs__active-bar) {
+  background-color: #333;
+  height: 2px;
+}
+
+/* 内容区域样式 */
+.content-area {
+  padding: 0 10px;
+}
+
+.content-title {
+  margin-bottom: 30px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.chinese-title {
+  font-size: 24px;
+  color: #333;
+  margin: 0 0 10px 0;
+  font-weight: 500;
+}
+
+.english-subtitle {
+  font-size: 16px;
+  color: #999;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.content-text {
+  line-height: 1.8;
+  color: #555;
+  font-size: 16px;
+  column-count: 2; /* 双列布局 */
+  column-gap: 40px;
+}
+
+.content-text p {
+  margin: 0 0 20px 0;
+  text-align: justify;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .page-header {
+    padding: 40px 20px;
+  }
+
+  .main-title {
+    font-size: 28px;
+  }
+
+  .content-text {
+    column-count: 1; /* 移动端单列显示 */
+  }
+
+  :deep(.el-tabs__item) {
+    font-size: 14px;
+    padding: 0 10px;
+  }
+}
+</style>
diff --git a/web/src/views/SocialService.vue b/web/src/views/SocialService.vue
new file mode 100644
index 00000000..46ad7d4d
--- /dev/null
+++ b/web/src/views/SocialService.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    基地概况
+  </div>
+</template>