diff --git a/env/.env.prod b/env/.env.prod
index 28ebaa5..2b07ecf 100644
--- a/env/.env.prod
+++ b/env/.env.prod
@@ -5,3 +5,6 @@ VITE_DELETE_CONSOLE = true
 # 是否开启sourcemap
 VITE_SHOW_SOURCEMAP = false
 VITE_BASEURL = '//appointteam.szjixun.cn'
+
+# 文档查看
+VITE_PAGE_URL="http://172.16.100.22:8045"
diff --git a/env/.env.test b/env/.env.test
index 85b7459..d5060df 100644
--- a/env/.env.test
+++ b/env/.env.test
@@ -3,3 +3,7 @@ NODE_ENV = 'test'
 # 是否去除console 和 debugger
 VITE_DELETE_CONSOLE = false
 VITE_BASEURL = '//kid-art-test.szjixun.cn'
+
+# 文档查看
+# VITE_PAGE_URL="http://172.16.100.22:8045"
+VITE_PAGE_URL="http://192.168.88.50:5878"
diff --git a/package.json b/package.json
index 2461d78..35444d1 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^4.4.3",
+    "@onlyoffice/document-editor-vue": "^1.5.0",
     "@unocss/reset": "^0.61.9",
     "@vicons/ionicons5": "^0.13.0",
     "@vicons/utils": "^0.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25d0cb7..49bfe05 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@fingerprintjs/fingerprintjs':
         specifier: ^4.4.3
         version: 4.4.3
+      '@onlyoffice/document-editor-vue':
+        specifier: ^1.5.0
+        version: 1.5.0(vue@3.4.35)
       '@unocss/reset':
         specifier: ^0.61.9
         version: 0.61.9
@@ -1279,6 +1282,11 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@onlyoffice/document-editor-vue@1.5.0':
+    resolution: {integrity: sha512-HZEebUhBloP4LomspI5BddgoQdhtPq91h57yA9K/Lk70MMc1vgOTQ4Wq+N5TZYXNxdDTv+TSsEVFLnBCl1Y71A==}
+    peerDependencies:
+      vue: ^3.0.0
+
   '@polka/url@1.0.0-next.25':
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
 
@@ -5536,6 +5544,11 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@onlyoffice/document-editor-vue@1.5.0(vue@3.4.35)':
+    dependencies:
+      lodash: 4.17.21
+      vue: 3.4.35
+
   '@polka/url@1.0.0-next.25': {}
 
   '@rollup/plugin-babel@6.0.4(@babel/core@7.25.2)(rollup@4.20.0)':
diff --git a/src/router/index.js b/src/router/index.js
index 2223f35..7a4b470 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -143,6 +143,11 @@ const routes = [
       },
     ],
   },
+  {
+    path: '/office',
+    name: 'office',
+    component: () => import('@/views/office/index.vue'),
+  },
   
   // {
   //     path: '/companyprofil',
diff --git a/src/views/govern/size1440/index.vue b/src/views/govern/size1440/index.vue
index e20cab6..27f9a22 100644
--- a/src/views/govern/size1440/index.vue
+++ b/src/views/govern/size1440/index.vue
@@ -44,10 +44,10 @@
         </div>
         <div class="mt-auto">
           <a
-            :href="item.url"
             class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
-            style="font-size: 16px"
+            style="font-size: 16px; cursor: pointer;"
+            @click="handleViewDocument(item)"
           >
             View Document
             <svg
@@ -72,46 +72,83 @@
 </template>
 
 <script setup>
-import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
+import { reactive, onMounted } from 'vue'
+import axios from 'axios'
 
-import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
+import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
+import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
 
-import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
+import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
+
+import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
 
 const state = reactive({
   list: [
-    {
-      title: "AUDIT COMMITTEE CHARTER",
-      description:
-        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
-      url: quarterlyPdfone,
-      date: "May 30, 2025",
-    },
-    {
-      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
-      description:
-        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
-      url: quarterlyPdftwo,
-      date: "May 30, 2025",
-    },
-    {
-      title: "COMPENSATION COMMITTEE CHARTER",
-      description:
-        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
-      url: quarterlyPdfthree,
-      date: "May 30, 2025",
-    },
-    {
-      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
-      description:
-        "Provides the framework for director nominations and corporate governance matters.",
-      url: quarterlyPdffour,
-      date: "May 30, 2025",
-    },
+    // {
+    //   title: 'AUDIT COMMITTEE CHARTER',
+    //   description:
+    //     'Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.',
+    //   url: quarterlyPdfone,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'CODE OF BUSINESS CONDUCT AND ETHICS',
+    //   description:
+    //     'Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.',
+    //   url: quarterlyPdftwo,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'COMPENSATION COMMITTEE CHARTER',
+    //   description:
+    //     'Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.',
+    //   url: quarterlyPdfthree,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER',
+    //   description:
+    //     'Provides the framework for director nominations and corporate governance matters.',
+    //   url: quarterlyPdffour,
+    //   date: 'May 30, 2025',
+    // },
   ],
-});
+})
+
+onMounted(() => {
+  getGovernanceDisplay()
+})
+
+//获取官网展示文档
+const getGovernanceDisplay = () => {
+  // let url = 'https://common.szjixun.cn/api/fiee/governance/display'
+  let url = 'http://172.16.100.93:9020/api/fiee/governance/display'
+  let params = {}
+  axios
+    .get(url, { params })
+    .then((res) => {
+      // console.log(res)
+      if (res.status === 200) {
+        if (res.data.status === 0) {
+          state.list = res.data.data.data || []
+        }
+      }
+    })
+    .catch((err) => {
+      // console.log(err)
+    })
+}
+
+// 查看文档
+const handleViewDocument = (item) => {
+  // console.log(item)
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${
+      item.attachment
+    }&attachmentName=${item.attachmentName}`,
+    '_blank',
+  )
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/govern/size1920/index.vue b/src/views/govern/size1920/index.vue
index e20cab6..27f9a22 100644
--- a/src/views/govern/size1920/index.vue
+++ b/src/views/govern/size1920/index.vue
@@ -44,10 +44,10 @@
         </div>
         <div class="mt-auto">
           <a
-            :href="item.url"
             class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
-            style="font-size: 16px"
+            style="font-size: 16px; cursor: pointer;"
+            @click="handleViewDocument(item)"
           >
             View Document
             <svg
@@ -72,46 +72,83 @@
 </template>
 
 <script setup>
-import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
+import { reactive, onMounted } from 'vue'
+import axios from 'axios'
 
-import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
+import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
+import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
 
-import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
+import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
+
+import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
 
 const state = reactive({
   list: [
-    {
-      title: "AUDIT COMMITTEE CHARTER",
-      description:
-        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
-      url: quarterlyPdfone,
-      date: "May 30, 2025",
-    },
-    {
-      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
-      description:
-        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
-      url: quarterlyPdftwo,
-      date: "May 30, 2025",
-    },
-    {
-      title: "COMPENSATION COMMITTEE CHARTER",
-      description:
-        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
-      url: quarterlyPdfthree,
-      date: "May 30, 2025",
-    },
-    {
-      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
-      description:
-        "Provides the framework for director nominations and corporate governance matters.",
-      url: quarterlyPdffour,
-      date: "May 30, 2025",
-    },
+    // {
+    //   title: 'AUDIT COMMITTEE CHARTER',
+    //   description:
+    //     'Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.',
+    //   url: quarterlyPdfone,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'CODE OF BUSINESS CONDUCT AND ETHICS',
+    //   description:
+    //     'Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.',
+    //   url: quarterlyPdftwo,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'COMPENSATION COMMITTEE CHARTER',
+    //   description:
+    //     'Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.',
+    //   url: quarterlyPdfthree,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER',
+    //   description:
+    //     'Provides the framework for director nominations and corporate governance matters.',
+    //   url: quarterlyPdffour,
+    //   date: 'May 30, 2025',
+    // },
   ],
-});
+})
+
+onMounted(() => {
+  getGovernanceDisplay()
+})
+
+//获取官网展示文档
+const getGovernanceDisplay = () => {
+  // let url = 'https://common.szjixun.cn/api/fiee/governance/display'
+  let url = 'http://172.16.100.93:9020/api/fiee/governance/display'
+  let params = {}
+  axios
+    .get(url, { params })
+    .then((res) => {
+      // console.log(res)
+      if (res.status === 200) {
+        if (res.data.status === 0) {
+          state.list = res.data.data.data || []
+        }
+      }
+    })
+    .catch((err) => {
+      // console.log(err)
+    })
+}
+
+// 查看文档
+const handleViewDocument = (item) => {
+  // console.log(item)
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${
+      item.attachment
+    }&attachmentName=${item.attachmentName}`,
+    '_blank',
+  )
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/govern/size375/index.vue b/src/views/govern/size375/index.vue
index bf75baf..3d8acec 100644
--- a/src/views/govern/size375/index.vue
+++ b/src/views/govern/size375/index.vue
@@ -41,9 +41,10 @@
         </div>
         <div class="mt-auto">
           <a
-            :href="item.url"
             class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
+            style="cursor: pointer;"
+            @click="handleViewDocument(item)"
           >
             View Document
             <svg
@@ -68,46 +69,83 @@
 </template>
 
 <script setup>
-import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
+import { reactive, onMounted } from 'vue'
+import axios from 'axios'
 
-import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
+import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
+import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
 
-import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
+import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
+
+import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
 
 const state = reactive({
   list: [
-    {
-      title: "AUDIT COMMITTEE CHARTER",
-      description:
-        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
-      url: quarterlyPdfone,
-      date: "May 30, 2025",
-    },
-    {
-      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
-      description:
-        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
-      url: quarterlyPdftwo,
-      date: "May 30, 2025",
-    },
-    {
-      title: "COMPENSATION COMMITTEE CHARTER",
-      description:
-        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
-      url: quarterlyPdfthree,
-      date: "May 30, 2025",
-    },
-    {
-      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
-      description:
-        "Provides the framework for director nominations and corporate governance matters.",
-      url: quarterlyPdffour,
-      date: "May 30, 2025",
-    },
+    // {
+    //   title: 'AUDIT COMMITTEE CHARTER',
+    //   description:
+    //     'Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.',
+    //   url: quarterlyPdfone,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'CODE OF BUSINESS CONDUCT AND ETHICS',
+    //   description:
+    //     'Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.',
+    //   url: quarterlyPdftwo,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'COMPENSATION COMMITTEE CHARTER',
+    //   description:
+    //     'Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.',
+    //   url: quarterlyPdfthree,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER',
+    //   description:
+    //     'Provides the framework for director nominations and corporate governance matters.',
+    //   url: quarterlyPdffour,
+    //   date: 'May 30, 2025',
+    // },
   ],
-});
+})
+
+onMounted(() => {
+  getGovernanceDisplay()
+})
+
+//获取官网展示文档
+const getGovernanceDisplay = () => {
+  // let url = 'https://common.szjixun.cn/api/fiee/governance/display'
+  let url = 'http://172.16.100.93:9020/api/fiee/governance/display'
+  let params = {}
+  axios
+    .get(url, { params })
+    .then((res) => {
+      // console.log(res)
+      if (res.status === 200) {
+        if (res.data.status === 0) {
+          state.list = res.data.data.data || []
+        }
+      }
+    })
+    .catch((err) => {
+      // console.log(err)
+    })
+}
+
+// 查看文档
+const handleViewDocument = (item) => {
+  // console.log(item)
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${
+      item.attachment
+    }&attachmentName=${item.attachmentName}`,
+    '_blank',
+  )
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/govern/size768/index.vue b/src/views/govern/size768/index.vue
index bf75baf..3d8acec 100644
--- a/src/views/govern/size768/index.vue
+++ b/src/views/govern/size768/index.vue
@@ -41,9 +41,10 @@
         </div>
         <div class="mt-auto">
           <a
-            :href="item.url"
             class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
+            style="cursor: pointer;"
+            @click="handleViewDocument(item)"
           >
             View Document
             <svg
@@ -68,46 +69,83 @@
 </template>
 
 <script setup>
-import { reactive } from "vue";
-import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
+import { reactive, onMounted } from 'vue'
+import axios from 'axios'
 
-import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
+import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
+import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
 
-import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
+import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
+
+import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
 
 const state = reactive({
   list: [
-    {
-      title: "AUDIT COMMITTEE CHARTER",
-      description:
-        "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
-      url: quarterlyPdfone,
-      date: "May 30, 2025",
-    },
-    {
-      title: "CODE OF BUSINESS CONDUCT AND ETHICS",
-      description:
-        "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
-      url: quarterlyPdftwo,
-      date: "May 30, 2025",
-    },
-    {
-      title: "COMPENSATION COMMITTEE CHARTER",
-      description:
-        "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
-      url: quarterlyPdfthree,
-      date: "May 30, 2025",
-    },
-    {
-      title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
-      description:
-        "Provides the framework for director nominations and corporate governance matters.",
-      url: quarterlyPdffour,
-      date: "May 30, 2025",
-    },
+    // {
+    //   title: 'AUDIT COMMITTEE CHARTER',
+    //   description:
+    //     'Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.',
+    //   url: quarterlyPdfone,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'CODE OF BUSINESS CONDUCT AND ETHICS',
+    //   description:
+    //     'Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.',
+    //   url: quarterlyPdftwo,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'COMPENSATION COMMITTEE CHARTER',
+    //   description:
+    //     'Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.',
+    //   url: quarterlyPdfthree,
+    //   date: 'May 30, 2025',
+    // },
+    // {
+    //   title: 'NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER',
+    //   description:
+    //     'Provides the framework for director nominations and corporate governance matters.',
+    //   url: quarterlyPdffour,
+    //   date: 'May 30, 2025',
+    // },
   ],
-});
+})
+
+onMounted(() => {
+  getGovernanceDisplay()
+})
+
+//获取官网展示文档
+const getGovernanceDisplay = () => {
+  // let url = 'https://common.szjixun.cn/api/fiee/governance/display'
+  let url = 'http://172.16.100.93:9020/api/fiee/governance/display'
+  let params = {}
+  axios
+    .get(url, { params })
+    .then((res) => {
+      // console.log(res)
+      if (res.status === 200) {
+        if (res.data.status === 0) {
+          state.list = res.data.data.data || []
+        }
+      }
+    })
+    .catch((err) => {
+      // console.log(err)
+    })
+}
+
+// 查看文档
+const handleViewDocument = (item) => {
+  // console.log(item)
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${
+      item.attachment
+    }&attachmentName=${item.attachmentName}`,
+    '_blank',
+  )
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/index/size1920/index.vue b/src/views/index/size1920/index.vue
index 3c536e5..aa60994 100644
--- a/src/views/index/size1920/index.vue
+++ b/src/views/index/size1920/index.vue
@@ -1,16 +1,17 @@
 <script setup>
 import customHeader from '@/components/customHeader/index.vue'
 import customFooter from '@/components/customFooter/index.vue'
+import { NScrollbar } from 'naive-ui'
 </script>
 
 <template>
   <div class="flex flex-col h-screen">
     <customHeader></customHeader>
-    <div
-      class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1 overflow-auto"
-    >
-      <router-view />
-    </div>
+    <n-scrollbar class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1">
+      <div>
+        <router-view />
+      </div>
+    </n-scrollbar>
     <customFooter></customFooter>
   </div>
 </template>
diff --git a/src/views/index/size375/index.vue b/src/views/index/size375/index.vue
index a389624..0888872 100644
--- a/src/views/index/size375/index.vue
+++ b/src/views/index/size375/index.vue
@@ -1,16 +1,19 @@
 <script setup>
 import customHeader from '@/components/customHeader/index.vue'
 import customFooter from '@/components/customFooter/index.vue'
+import { NScrollbar } from 'naive-ui'
 </script>
 
 <template>
   <div class="flex flex-col h-100svh">
     <customHeader />
-    <div
-      class="bg-[url('@/assets/image/bg-mobile.png')] bg-cover bg-center flex-1 overflow-auto"
+    <n-scrollbar
+      class="bg-[url('@/assets/image/bg-mobile.png')] bg-cover bg-center flex-1"
     >
-      <router-view />
-    </div>
+      <div>
+        <router-view />
+      </div>
+    </n-scrollbar>
     <customFooter />
   </div>
 </template>
diff --git a/src/views/myHome/size1440/index.vue b/src/views/myHome/size1440/index.vue
index 2eb3c04..826e430 100644
--- a/src/views/myHome/size1440/index.vue
+++ b/src/views/myHome/size1440/index.vue
@@ -83,7 +83,7 @@
             <div
               style="font-size: 18px"
               class="cursor-pointer"
-              @click="handleLink(item.router, item.time)"
+              @click="handleLink(item)"
             >
               View Press Release<img
                 class="ml-[10px]"
@@ -205,6 +205,7 @@
 import { onMounted, ref, onUnmounted, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
+import axios from 'axios'
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
 
 getStockQuate();
@@ -214,17 +215,44 @@ const contentRef = ref(null);
 const isInView = ref(false);
 let observer = null;
 const newList = ref([
-  {
-    time: "June 3, 2025",
-    title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
-    router: "/news",
-  },
-  {
-    time: "June 2, 2025",
-    title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
-    router: "/news",
-  },
+  // {
+  //   time: "June 3, 2025",
+  //   title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
+  //   router: "/news",
+  // },
+  // {
+  //   time: "June 2, 2025",
+  //   title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
+  //   router: "/news",
+  // },
 ]);
+
+// 获取新闻发布(展示在首页的)
+const getPressReleasesDisplay = () => {
+  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
+  let params = {
+    page: 1,
+    pageSize: 10,
+    display: 2, // 1: 不展示在首页 2: 展示在首页
+  }
+  console.log(params)
+  axios.post(url, params).then((res) => {
+    console.log(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        res.data.data?.data?.forEach((item) => {
+          item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          })
+        })
+        newList.value = res.data.data?.data || []
+      }
+    }
+  })
+}
+
 onMounted(() => {
   if (contentRef.value && "IntersectionObserver" in window) {
     observer = new IntersectionObserver(
@@ -249,6 +277,7 @@ onMounted(() => {
     // 回退方案：如果不支持IntersectionObserver则直接显示
     isInView.value = true;
   }
+  getPressReleasesDisplay()
 });
 
 onUnmounted(() => {
@@ -258,11 +287,11 @@ onUnmounted(() => {
 });
 import { useRouter } from "vue-router";
 const router = useRouter();
-const handleLink = (routers, index) => {
+const handleLink = (item) => {
   router.push({
-    path: routers,
+    path: "/news",
     query: {
-      date: index,
+      id: item.id,
     },
   });
 };
diff --git a/src/views/myHome/size1920/index.vue b/src/views/myHome/size1920/index.vue
index aeba25c..305cc6d 100644
--- a/src/views/myHome/size1920/index.vue
+++ b/src/views/myHome/size1920/index.vue
@@ -82,7 +82,7 @@
             <div
               style="font-size: 18px"
               class="cursor-pointer"
-              @click="handleLink(item.router, item.time)"
+              @click="handleLink(item)"
             >
               View Press Release<img
                 class="ml-[10px]"
@@ -194,24 +194,51 @@
 import { onMounted, ref, onUnmounted, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
+import axios from 'axios'
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
 getStockQuate();
 // 示例数据
 const sampleDate = ref(formatted);
 
 const newList = ref([
-  {
-    time: "June 3, 2025",
-    title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
-    router: "/news",
-  },
-  {
-    time: "June 2, 2025",
-    title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
-    router: "/news",
-  },
+  // {
+  //   time: "June 3, 2025",
+  //   title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
+  //   router: "/news",
+  // },
+  // {
+  //   time: "June 2, 2025",
+  //   title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
+  //   router: "/news",
+  // },
 ]);
 
+// 获取新闻发布(展示在首页的)
+const getPressReleasesDisplay = () => {
+  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
+  let params = {
+    page: 1,
+    pageSize: 10,
+    display: 2, // 1: 不展示在首页 2: 展示在首页
+  }
+  console.log(params)
+  axios.post(url, params).then((res) => {
+    console.log(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        res.data.data?.data?.forEach((item) => {
+          item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          })
+        })
+        newList.value = res.data.data?.data || []
+      }
+    }
+  })
+}
+
 const { t: $t } = useI18n();
 const contentRef = ref(null);
 const isInView = ref(false);
@@ -240,6 +267,7 @@ onMounted(() => {
     // 回退方案：如果不支持IntersectionObserver则直接显示
     isInView.value = true;
   }
+  getPressReleasesDisplay()
 });
 
 onUnmounted(() => {
@@ -249,11 +277,11 @@ onUnmounted(() => {
 });
 import { useRouter } from "vue-router";
 const router = useRouter();
-const handleLink = (routers, index) => {
+const handleLink = (item) => {
   router.push({
-    path: routers,
+    path: "/news",
     query: {
-      date: index,
+      id: item.id,
     },
   });
 };
diff --git a/src/views/myHome/size375/index.vue b/src/views/myHome/size375/index.vue
index 9b65cf4..f2127ba 100644
--- a/src/views/myHome/size375/index.vue
+++ b/src/views/myHome/size375/index.vue
@@ -83,7 +83,7 @@
             <div
               style="font-size: 18px"
               class="cursor-pointer"
-              @click="handleLink(item.router, item.time)"
+              @click="handleLink(item)"
             >
               View Press Release<img
                 class="ml-[10px]"
@@ -205,6 +205,7 @@
 import { onMounted, ref, onUnmounted, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
+import axios from 'axios'
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
 getStockQuate();
 const { t: $t } = useI18n();
@@ -212,17 +213,44 @@ const contentRef = ref(null);
 const isInView = ref(false);
 let observer = null;
 const newList = ref([
-  {
-    time: "June 3, 2025",
-    title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
-    router: "/news",
-  },
-  {
-    time: "June 2, 2025",
-    title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
-    router: "/news",
-  },
+  // {
+  //   time: "June 3, 2025",
+  //   title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
+  //   router: "/news",
+  // },
+  // {
+  //   time: "June 2, 2025",
+  //   title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
+  //   router: "/news",
+  // },
 ]);
+
+// 获取新闻发布(展示在首页的)
+const getPressReleasesDisplay = () => {
+  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
+  let params = {
+    page: 1,
+    pageSize: 10,
+    display: 2, // 1: 不展示在首页 2: 展示在首页
+  }
+  console.log(params)
+  axios.post(url, params).then((res) => {
+    console.log(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        res.data.data?.data?.forEach((item) => {
+          item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          })
+        })
+        newList.value = res.data.data?.data || []
+      }
+    }
+  })
+}
+
 onMounted(() => {
   if (contentRef.value && "IntersectionObserver" in window) {
     observer = new IntersectionObserver(
@@ -247,6 +275,7 @@ onMounted(() => {
     // 回退方案：如果不支持IntersectionObserver则直接显示
     isInView.value = true;
   }
+  getPressReleasesDisplay()
 });
 
 onUnmounted(() => {
@@ -256,11 +285,11 @@ onUnmounted(() => {
 });
 import { useRouter } from "vue-router";
 const router = useRouter();
-const handleLink = (routers, index) => {
+const handleLink = (item) => {
   router.push({
-    path: routers,
+    path: "/news",
     query: {
-      date: index,
+      id: item.id,
     },
   });
 };
diff --git a/src/views/myHome/size768/index.vue b/src/views/myHome/size768/index.vue
index 6ccbe73..2c8e440 100644
--- a/src/views/myHome/size768/index.vue
+++ b/src/views/myHome/size768/index.vue
@@ -83,7 +83,7 @@
             <div
               style="font-size: 18px"
               class="cursor-pointer"
-              @click="handleLink(item.router, item.time)"
+              @click="handleLink(item)"
             >
               View Press Release<img
                 class="ml-[10px]"
@@ -205,6 +205,7 @@
 import { onMounted, ref, onUnmounted, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
+import axios from 'axios'
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
 
 getStockQuate();
@@ -238,20 +239,47 @@ onMounted(() => {
     // 回退方案：如果不支持IntersectionObserver则直接显示
     isInView.value = true;
   }
+  getPressReleasesDisplay()
 });
 const newList = ref([
-  {
-    time: "June 3, 2025",
-    title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
-    router: "/news",
-  },
-  {
-    time: "June 2, 2025",
-    title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
-    router: "/news",
-  },
+  // {
+  //   time: "June 3, 2025",
+  //   title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
+  //   router: "/news",
+  // },
+  // {
+  //   time: "June 2, 2025",
+  //   title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
+  //   router: "/news",
+  // },
 ]);
 
+// 获取新闻发布(展示在首页的)
+const getPressReleasesDisplay = () => {
+  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
+  let params = {
+    page: 1,
+    pageSize: 10,
+    display: 2, // 1: 不展示在首页 2: 展示在首页
+  }
+  console.log(params)
+  axios.post(url, params).then((res) => {
+    console.log(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        res.data.data?.data?.forEach((item) => {
+          item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          })
+        })
+        newList.value = res.data.data?.data || []
+      }
+    }
+  })
+}
+
 onUnmounted(() => {
   if (observer) {
     observer.disconnect();
@@ -259,11 +287,11 @@ onUnmounted(() => {
 });
 import { useRouter } from "vue-router";
 const router = useRouter();
-const handleLink = (routers, index) => {
+const handleLink = (item) => {
   router.push({
-    path: routers,
+    path: "/news",
     query: {
-      date: index,
+      id: item.id,
     },
   });
 };
diff --git a/src/views/office/index.vue b/src/views/office/index.vue
new file mode 100644
index 0000000..d8307d2
--- /dev/null
+++ b/src/views/office/index.vue
@@ -0,0 +1,119 @@
+<!-- 从chat-PC接入的文档查看 -->
+<template>
+  <DocumentEditor
+    id="docEditor"
+    :documentServerUrl="documentServerUrl"
+    :config="config"
+    :events_onDocumentReady="onDocumentReady"
+    :onLoadComponentError="onLoadComponentError"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { DocumentEditor } from "@onlyoffice/document-editor-vue"
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+const documentServerUrl = 'https://onlyoffice.fontree.cn'
+const route = useRoute()
+
+onMounted(() => {
+  // 动态插入 Content-Security-Policy meta 标签，只在本页面生效
+  if (!document.querySelector('meta[http-equiv="Content-Security-Policy"]')) {
+    const meta = document.createElement('meta')
+    meta.httpEquiv = 'Content-Security-Policy'
+    meta.content = 'upgrade-insecure-requests'
+    document.head.appendChild(meta)
+  }
+})
+
+// 判断文件类型
+function getDocumentTypes(url) {
+  const extension = url.split('.').pop().toLowerCase()
+  const types = {
+    'docx': { fileType: 'docx', documentType: 'word' },
+    'doc': { fileType: 'doc', documentType: 'word' },
+    'xlsx': { fileType: 'xlsx', documentType: 'cell' },
+    'xls': { fileType: 'xls', documentType: 'cell' },
+    'pptx': { fileType: 'pptx', documentType: 'slide' },
+    'ppt': { fileType: 'ppt', documentType: 'slide' },
+    'pdf': { fileType: 'pdf', documentType: 'word' }
+  }
+  return types[extension] || { fileType: 'docx', documentType: 'word' }
+}
+
+const url = route.query.url
+if (!url) {
+  alert(t('PAGES.FiEEInfoManage.document.readFailed'))
+}
+let attachmentName = route.query.attachmentName
+const fileName = attachmentName ? attachmentName : url ? url.split('/').pop() : ''
+const { fileType, documentType } = getDocumentTypes(url || '')
+
+const config = {
+  document: {
+    fileType,
+    key: 'doc_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
+    title: fileName,
+    url
+  },
+  documentType,
+  editorConfig: {
+    
+    mode: 'view',
+    lang: 'en-US',
+    user: {
+      id: 'user_' + new Date().getTime(),
+      name: 'Guest User'
+    },
+    customization: {
+      about: false,        // 不显示“关于”页面
+      help: false,         // 不显示帮助菜单
+      chat: false,
+      commentAuthorOnly: false,
+      compactToolbar: true,
+      hideRightMenu: false, // 隐藏右侧菜单
+      compatibility: true,
+      showReviewChanges: false,
+      loaderLogo: '',  // 设置为空字符串来隐藏加载 logo
+      logo: {
+        image: '',     // 设置为空字符串
+        imageDark: '', // 设置为空字符串
+        url: '',       // 设置为空字符串
+        visible: false // 设置为 false 来隐藏 logo
+      }
+    }
+  }
+}
+
+const onDocumentReady = () => {
+  console.log("文档加载完成")
+}
+
+const onLoadComponentError = (errorCode, errorDescription) => {
+  switch(errorCode) {
+    case -1: // 加载组件时发生未知错误
+      console.log(errorDescription)
+      break
+    case -2: // 从文档服务器加载 DocsAPI 时发生错误
+      console.log(errorDescription)
+      break
+    case -3: // DocsAPI 未定义
+      console.log(errorDescription)
+      break
+  }
+}
+</script>
+
+<style>
+iframe[name="frameEditor"] {
+  width: 100% !important;
+  height: 100vh !important;
+  min-height: 100vh !important;
+  border: none !important;
+  display: block;
+}
+</style>
+
diff --git a/src/views/press-releases/size1440/index.vue b/src/views/press-releases/size1440/index.vue
index 0c5b6fa..06868bd 100644
--- a/src/views/press-releases/size1440/index.vue
+++ b/src/views/press-releases/size1440/index.vue
@@ -1,56 +1,59 @@
 <template>
   <div class="press-releases-page">
-    <main class="p-[35px] max-w-[1200px] mx-auto">
-      <div class="title mb-[20px]">
-        {{ t("press_releases.title") }}
-      </div>
-      <div class="search-container">
-        <n-select
-          :options="state.selectOptions"
-          v-model:value="state.selectedValue"
-          class="search-select"
-        />
-        <n-input
-          v-model:value="state.inputValue"
-          type="text"
-          :placeholder="t('press_releases.search.placeholder')"
-          class="search-input"
-        />
-        <n-button
-          type="primary"
-          @click="handleSearch"
-          class="search-button w-[80px]"
-        >
-          {{ t("press_releases.search.button") }}
-        </n-button>
-      </div>
-      <div v-for="(item, idx) in state.filterNewsData" :key="idx">
-        <div class="news-item mt-[10px]">
-          <div class="news-item-date">{{ item.date }}</div>
-          <div
-            class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
-            @click="handleNewClick(item)"
+    <n-infinite-scroll :distance="0" @load="doLoadMore">
+      <main class="p-[35px] max-w-[1200px] mx-auto">
+        <div class="title mb-[20px]">
+          {{ t('press_releases.title') }}
+        </div>
+        <div class="search-container">
+          <n-select
+            :options="state.selectOptions"
+            v-model:value="state.selectedValue"
+            class="search-select"
+          />
+          <n-input
+            v-model:value="state.inputValue"
+            type="text"
+            :placeholder="t('press_releases.search.placeholder')"
+            class="search-input"
+          />
+          <n-button
+            type="primary"
+            @click="handleSearch"
+            class="search-button w-[80px]"
           >
-            {{ item.title }}
-          </div>
-          <div class="news-item-content">
-            {{
-              item.content.length > 230
-                ? item.content.substring(0, 230) + "..."
-                : item.content
-            }}
+            {{ t('press_releases.search.button') }}
+          </n-button>
+        </div>
+        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+          <div class="news-item mt-[10px]">
+            <div class="news-item-date">{{ item.date }}</div>
+            <div
+              class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
+              @click="handleNewClick(item)"
+            >
+              {{ item.title }}
+            </div>
+            <div class="news-item-content" style="word-break: break-all;">
+              {{
+                item.summary?.length > 199
+                  ? item.summary.substring(0, 199) + '...'
+                  : item.summary
+              }}
+            </div>
           </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </n-infinite-scroll>
   </div>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive, onMounted, watch } from "vue";
-import { NSelect, NInput, NButton } from "naive-ui";
+import { NSelect, NInput, NButton, NInfiniteScroll } from "naive-ui";
 import { useI18n } from "vue-i18n";
+import axios from 'axios'
 
 import { useRouter } from "vue-router";
 const router = useRouter();
@@ -90,12 +93,59 @@ const state = reactive({
     },
   ],
   filterNewsData: [],
+  loading: false, //是否正在加载数据
+  hasMore: true, //是否还有更多数据
+  currentPage: 1, //当前页码
 });
 
 onMounted(() => {
-  state.filterNewsData = state.newsData;
+  // state.filterNewsData = state.newsData;
+  getPressReleasesDisplay()
 });
 
+// 获取新闻列表
+const getPressReleasesDisplay = () => {
+  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
+  let params = {
+    query: state.inputValue,
+    page: state.currentPage,
+    pageSize: 10,
+    timeStart: state.selectedValue
+      ? state.selectedValue === 'all_years'
+        ? null
+        : new Date(state.selectedValue).getTime()
+      : null,
+  }
+  // console.log(params)
+  axios.post(url, params).then((res) => {
+    // console.log(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        res.data.data?.data?.forEach((item) => {
+          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          })
+        })
+        if (state.currentPage === 1) {
+          state.filterNewsData = res.data.data?.data || []
+        } else {
+          state.filterNewsData = [
+            ...state.filterNewsData,
+            ...(res.data.data?.data || []),
+          ]
+        }
+        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
+          state.hasMore = true
+        } else {
+          state.hasMore = false
+        }
+      }
+    }
+  })
+}
+
 const handleFilter = () => {
   // 筛选逻辑
   let filteredData = [...state.newsData];
@@ -130,14 +180,17 @@ const handleFilter = () => {
 watch(
   () => [state.selectedValue, state.inputValue],
   () => {
-    handleFilter();
-  },
-  { immediate: true }
+    // handleFilter();
+    state.currentPage = 1
+    getPressReleasesDisplay()
+  }
 );
 
 const handleSearch = () => {
   // 手动触发筛选（保留这个函数以保持兼容性）
-  handleFilter();
+  // handleFilter();
+  state.currentPage = 1
+  getPressReleasesDisplay()
   // console.log("筛选结果:", state.filterNewsData);
 };
 
@@ -145,10 +198,23 @@ const handleNewClick = (item) => {
   router.push({
     path: "/news",
     query: {
-      date: item.date,
+      id: item.id,
     },
   });
 };
+
+//加载更多数据
+const doLoadMore = () => {
+  if (!state.hasMore || state.loading) {
+    return
+  }
+  // console.log('触底了')
+  state.loading = true
+  state.currentPage++
+  getPressReleasesDisplay().finally(() => {
+    state.loading = false
+  })
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/press-releases/size1920/index.vue b/src/views/press-releases/size1920/index.vue
index 051e8be..590990e 100644
--- a/src/views/press-releases/size1920/index.vue
+++ b/src/views/press-releases/size1920/index.vue
@@ -1,56 +1,59 @@
 <template>
   <div class="press-releases-page">
-    <main class="p-[35px] max-w-[1200px] mx-auto">
-      <div class="title mb-[20px]">
-        {{ t("press_releases.title") }}
-      </div>
-      <div class="search-container">
-        <n-select
-          :options="state.selectOptions"
-          v-model:value="state.selectedValue"
-          class="search-select"
-        />
-        <n-input
-          v-model:value="state.inputValue"
-          type="text"
-          :placeholder="t('press_releases.search.placeholder')"
-          class="search-input"
-        />
-        <n-button
-          type="primary"
-          @click="handleSearch"
-          class="search-button w-[60px]"
-        >
-          {{ t("press_releases.search.button") }}
-        </n-button>
-      </div>
-      <div v-for="(item, idx) in state.filterNewsData" :key="idx">
-        <div class="news-item mt-[10px]">
-          <div class="news-item-date">{{ item.date }}</div>
-          <div
-            class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
-            @click="handleNewClick(item)"
+    <n-infinite-scroll :distance="0" @load="doLoadMore">
+      <main class="p-[35px] max-w-[1200px] mx-auto">
+        <div class="title mb-[20px]">
+          {{ t('press_releases.title') }}
+        </div>
+        <div class="search-container">
+          <n-select
+            :options="state.selectOptions"
+            v-model:value="state.selectedValue"
+            class="search-select"
+          />
+          <n-input
+            v-model:value="state.inputValue"
+            type="text"
+            :placeholder="t('press_releases.search.placeholder')"
+            class="search-input"
+          />
+          <n-button
+            type="primary"
+            @click="handleSearch"
+            class="search-button w-[60px]"
           >
-            {{ item.title }}
-          </div>
-          <div class="news-item-content">
-            {{
-              item.content.length > 230
-                ? item.content.substring(0, 230) + "..."
-                : item.content
-            }}
+            {{ t('press_releases.search.button') }}
+          </n-button>
+        </div>
+        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+          <div class="news-item mt-[10px]">
+            <div class="news-item-date">{{ item.date }}</div>
+            <div
+              class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
+              @click="handleNewClick(item)"
+            >
+              {{ item.title }}
+            </div>
+            <div class="news-item-content" style="word-break: break-all;">
+              {{
+                item.summary?.length > 199
+                  ? item.summary.substring(0, 199) + '...'
+                  : item.summary
+              }}
+            </div>
           </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </n-infinite-scroll>
   </div>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive, onMounted, watch } from "vue";
-import { NSelect, NInput, NButton } from "naive-ui";
+import { NSelect, NInput, NButton, NInfiniteScroll } from "naive-ui";
 import { useI18n } from "vue-i18n";
+import axios from 'axios'
 
 import { useRouter } from "vue-router";
 const router = useRouter();
@@ -90,12 +93,59 @@ const state = reactive({
     },
   ],
   filterNewsData: [],
+  loading: false, //是否正在加载数据
+  hasMore: true, //是否还有更多数据
+  currentPage: 1, //当前页码
 });
 
 onMounted(() => {
-  state.filterNewsData = state.newsData;
+  // state.filterNewsData = state.newsData;
+  getPressReleasesDisplay()
 });
 
+// 获取新闻列表
+const getPressReleasesDisplay = () => {
+  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
+  let params = {
+    query: state.inputValue,
+    page: state.currentPage,
+    pageSize: 10,
+    timeStart: state.selectedValue
+      ? state.selectedValue === 'all_years'
+        ? null
+        : new Date(state.selectedValue).getTime()
+      : null,
+  }
+  // console.log(params)
+  axios.post(url, params).then((res) => {
+    // console.log(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        res.data.data?.data?.forEach((item) => {
+          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          })
+        })
+        if (state.currentPage === 1) {
+          state.filterNewsData = res.data.data?.data || []
+        } else {
+          state.filterNewsData = [
+            ...state.filterNewsData,
+            ...(res.data.data?.data || []),
+          ]
+        }
+        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
+          state.hasMore = true
+        } else {
+          state.hasMore = false
+        }
+      }
+    }
+  })
+}
+
 const handleFilter = () => {
   // 筛选逻辑
   let filteredData = [...state.newsData];
@@ -130,14 +180,17 @@ const handleFilter = () => {
 watch(
   () => [state.selectedValue, state.inputValue],
   () => {
-    handleFilter();
-  },
-  { immediate: true }
+    // handleFilter();
+    state.currentPage = 1
+    getPressReleasesDisplay()
+  }
 );
 
 const handleSearch = () => {
   // 手动触发筛选（保留这个函数以保持兼容性）
-  handleFilter();
+  // handleFilter();
+  state.currentPage = 1
+  getPressReleasesDisplay()
   // console.log("筛选结果:", state.filterNewsData);
 };
 
@@ -145,10 +198,23 @@ const handleNewClick = (item) => {
   router.push({
     path: "/news",
     query: {
-      date: item.date,
+      id: item.id,
     },
   });
 };
+
+//加载更多数据
+const doLoadMore = () => {
+  if (!state.hasMore || state.loading) {
+    return
+  }
+  // console.log('触底了')
+  state.loading = true
+  state.currentPage++
+  getPressReleasesDisplay().finally(() => {
+    state.loading = false
+  })
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/press-releases/size375/index.vue b/src/views/press-releases/size375/index.vue
index 4a2303b..624bf39 100644
--- a/src/views/press-releases/size375/index.vue
+++ b/src/views/press-releases/size375/index.vue
@@ -1,62 +1,68 @@
 <template>
   <div class="press-releases-page">
-    <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 285px">
-      <div class="title mb-[24px]">
-        {{ t("press_releases.title") }}
-      </div>
-      <div class="search-container">
-        <n-select
-          :options="state.selectOptions"
-          v-model:value="state.selectedValue"
-          class="search-select"
-          :font-size="72"
-        />
-        <n-input
-          v-model:value="state.inputValue"
-          type="text"
-          :placeholder="t('press_releases.search.placeholder')"
-          class="search-input"
-          clearable
-          :font-size="72"
-        />
-        <n-button
-          type="primary"
-          @click="handleSearch"
-          class="search-button"
-          :font-size="72"
-        >
-          {{ t("press_releases.search.button") }}
-        </n-button>
-      </div>
-      <div v-for="(item, idx) in state.filterNewsData" :key="idx">
-        <div class="news-item mt-[10px]">
-          <div class="news-item-date">{{ item.date }}</div>
-          <div
-            class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
-            @click="handleNewClick(item)"
+    <n-infinite-scroll :distance="0" @load="doLoadMore">
+      <main
+        class="p-[80px] mx-auto"
+        style="max-width: 100vw; min-width: 285px;"
+      >
+        <div class="title mb-[24px]">
+          {{ t('press_releases.title') }}
+        </div>
+        <div class="search-container">
+          <n-select
+            :options="state.selectOptions"
+            v-model:value="state.selectedValue"
+            class="search-select"
+            :font-size="72"
+          />
+          <n-input
+            v-model:value="state.inputValue"
+            type="text"
+            :placeholder="t('press_releases.search.placeholder')"
+            class="search-input"
+            clearable
+            :font-size="72"
+          />
+          <n-button
+            type="primary"
+            @click="handleSearch"
+            class="search-button"
+            :font-size="72"
           >
-            {{ item.title }}
-          </div>
-          <div class="news-item-content">
-            {{
-              item.content.length > 230
-                ? item.content.substring(0, 230) + "..."
-                : item.content
-            }}
+            {{ t('press_releases.search.button') }}
+          </n-button>
+        </div>
+        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+          <div class="news-item mt-[10px]">
+            <div class="news-item-date">{{ item.date }}</div>
+            <div
+              class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
+              @click="handleNewClick(item)"
+            >
+              {{ item.title }}
+            </div>
+            <div class="news-item-content" style="word-break: break-all;">
+              {{
+                item.summary?.length > 199
+                  ? item.summary.substring(0, 199) + '...'
+                  : item.summary
+              }}
+            </div>
           </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </n-infinite-scroll>
   </div>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive, onMounted, watch } from "vue";
-import { NSelect, NInput, NButton } from "naive-ui";
+import { NSelect, NInput, NButton, NInfiniteScroll } from "naive-ui";
 import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
+import axios from 'axios'
 
+import { useRouter } from "vue-router";
 const router = useRouter();
 const { t } = useI18n();
 
@@ -94,12 +100,59 @@ const state = reactive({
     },
   ],
   filterNewsData: [],
+  loading: false, //是否正在加载数据
+  hasMore: true, //是否还有更多数据
+  currentPage: 1, //当前页码
 });
 
 onMounted(() => {
-  state.filterNewsData = state.newsData;
+  // state.filterNewsData = state.newsData;
+  getPressReleasesDisplay()
 });
 
+// 获取新闻列表
+const getPressReleasesDisplay = () => {
+  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
+  let params = {
+    query: state.inputValue,
+    page: state.currentPage,
+    pageSize: 10,
+    timeStart: state.selectedValue
+      ? state.selectedValue === 'all_years'
+        ? null
+        : new Date(state.selectedValue).getTime()
+      : null,
+  }
+  // console.log(params)
+  axios.post(url, params).then((res) => {
+    // console.log(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        res.data.data?.data?.forEach((item) => {
+          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          })
+        })
+        if (state.currentPage === 1) {
+          state.filterNewsData = res.data.data?.data || []
+        } else {
+          state.filterNewsData = [
+            ...state.filterNewsData,
+            ...(res.data.data?.data || []),
+          ]
+        }
+        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
+          state.hasMore = true
+        } else {
+          state.hasMore = false
+        }
+      }
+    }
+  })
+}
+
 const handleFilter = () => {
   // 筛选逻辑
   let filteredData = [...state.newsData];
@@ -134,14 +187,17 @@ const handleFilter = () => {
 watch(
   () => [state.selectedValue, state.inputValue],
   () => {
-    handleFilter();
-  },
-  { immediate: true }
+    // handleFilter();
+    state.currentPage = 1
+    getPressReleasesDisplay()
+  }
 );
 
 const handleSearch = () => {
   // 手动触发筛选（保留这个函数以保持兼容性）
-  handleFilter();
+  // handleFilter();
+  state.currentPage = 1
+  getPressReleasesDisplay()
   // console.log("筛选结果:", state.filterNewsData);
 };
 
@@ -149,10 +205,23 @@ const handleNewClick = (item) => {
   router.push({
     path: "/news",
     query: {
-      date: item.date,
+      id: item.id,
     },
   });
 };
+
+//加载更多数据
+const doLoadMore = () => {
+  if (!state.hasMore || state.loading) {
+    return
+  }
+  // console.log('触底了')
+  state.loading = true
+  state.currentPage++
+  getPressReleasesDisplay().finally(() => {
+    state.loading = false
+  })
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/press-releases/size768/index.vue b/src/views/press-releases/size768/index.vue
index c416783..57d0e1b 100644
--- a/src/views/press-releases/size768/index.vue
+++ b/src/views/press-releases/size768/index.vue
@@ -1,56 +1,59 @@
 <template>
   <div class="press-releases-page">
-    <main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px)">
-      <div class="title mb-[20px]">
-        {{ t("press_releases.title") }}
-      </div>
-      <div class="search-container">
-        <n-select
-          :options="state.selectOptions"
-          v-model:value="state.selectedValue"
-          class="search-select"
-        />
-        <n-input
-          v-model:value="state.inputValue"
-          type="text"
-          :placeholder="t('press_releases.search.placeholder')"
-          class="search-input"
-        />
-        <n-button
-          type="primary"
-          @click="handleSearch"
-          class="search-button w-[120px]"
-        >
-          {{ t("press_releases.search.button") }}
-        </n-button>
-      </div>
-      <div v-for="(item, idx) in state.filterNewsData" :key="idx">
-        <div class="news-item mt-[10px]">
-          <div class="news-item-date">{{ item.date }}</div>
-          <div
-            class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
-            @click="handleNewClick(item)"
+    <n-infinite-scroll :distance="0" @load="doLoadMore">
+      <main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px);">
+        <div class="title mb-[20px]">
+          {{ t('press_releases.title') }}
+        </div>
+        <div class="search-container">
+          <n-select
+            :options="state.selectOptions"
+            v-model:value="state.selectedValue"
+            class="search-select"
+          />
+          <n-input
+            v-model:value="state.inputValue"
+            type="text"
+            :placeholder="t('press_releases.search.placeholder')"
+            class="search-input"
+          />
+          <n-button
+            type="primary"
+            @click="handleSearch"
+            class="search-button w-[120px]"
           >
-            {{ item.title }}
-          </div>
-          <div class="news-item-content">
-            {{
-              item.content.length > 230
-                ? item.content.substring(0, 230) + "..."
-                : item.content
-            }}
+            {{ t('press_releases.search.button') }}
+          </n-button>
+        </div>
+        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
+          <div class="news-item mt-[10px]">
+            <div class="news-item-date">{{ item.date }}</div>
+            <div
+              class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
+              @click="handleNewClick(item)"
+            >
+              {{ item.title }}
+            </div>
+            <div class="news-item-content" style="word-break: break-all;">
+              {{
+                item.summary?.length > 199
+                  ? item.summary.substring(0, 199) + '...'
+                  : item.summary
+              }}
+            </div>
           </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </n-infinite-scroll>
   </div>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive, onMounted, watch } from "vue";
-import { NSelect, NInput, NButton } from "naive-ui";
+import { NSelect, NInput, NButton, NInfiniteScroll } from "naive-ui";
 import { useI18n } from "vue-i18n";
+import axios from 'axios'
 
 import { useRouter } from "vue-router";
 const router = useRouter();
@@ -90,12 +93,59 @@ const state = reactive({
     },
   ],
   filterNewsData: [],
+  loading: false, //是否正在加载数据
+  hasMore: true, //是否还有更多数据
+  currentPage: 1, //当前页码
 });
 
 onMounted(() => {
-  state.filterNewsData = state.newsData;
+  // state.filterNewsData = state.newsData;
+  getPressReleasesDisplay()
 });
 
+// 获取新闻列表
+const getPressReleasesDisplay = () => {
+  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
+  let params = {
+    query: state.inputValue,
+    page: state.currentPage,
+    pageSize: 10,
+    timeStart: state.selectedValue
+      ? state.selectedValue === 'all_years'
+        ? null
+        : new Date(state.selectedValue).getTime()
+      : null,
+  }
+  // console.log(params)
+  axios.post(url, params).then((res) => {
+    // console.log(res)
+    if (res.status === 200) {
+      if (res.data.status === 0) {
+        res.data.data?.data?.forEach((item) => {
+          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          })
+        })
+        if (state.currentPage === 1) {
+          state.filterNewsData = res.data.data?.data || []
+        } else {
+          state.filterNewsData = [
+            ...state.filterNewsData,
+            ...(res.data.data?.data || []),
+          ]
+        }
+        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
+          state.hasMore = true
+        } else {
+          state.hasMore = false
+        }
+      }
+    }
+  })
+}
+
 const handleFilter = () => {
   // 筛选逻辑
   let filteredData = [...state.newsData];
@@ -130,14 +180,17 @@ const handleFilter = () => {
 watch(
   () => [state.selectedValue, state.inputValue],
   () => {
-    handleFilter();
-  },
-  { immediate: true }
+    // handleFilter();
+    state.currentPage = 1
+    getPressReleasesDisplay()
+  }
 );
 
 const handleSearch = () => {
   // 手动触发筛选（保留这个函数以保持兼容性）
-  handleFilter();
+  // handleFilter();
+  state.currentPage = 1
+  getPressReleasesDisplay()
   // console.log("筛选结果:", state.filterNewsData);
 };
 
@@ -145,15 +198,28 @@ const handleNewClick = (item) => {
   router.push({
     path: "/news",
     query: {
-      date: item.date,
+      id: item.id,
     },
   });
 };
+
+//加载更多数据
+const doLoadMore = () => {
+  if (!state.hasMore || state.loading) {
+    return
+  }
+  // console.log('触底了')
+  state.loading = true
+  state.currentPage++
+  getPressReleasesDisplay().finally(() => {
+    state.loading = false
+  })
+}
 </script>
 
 <style scoped lang="scss">
 .title {
-  font-size: 40px;
+  font-size: 63px;
   color: #333;
 }