From 79b93495988f483649c125e27d09af01f34f373d Mon Sep 17 00:00:00 2001
From: lSun <15893999301@qq.com>
Date: Mon, 22 Sep 2025 11:14:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E4=B8=8A=E7=BA=BF=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   6 +
 src/views/publicService/components/navBar.vue | 590 +++++++++--------
 src/views/publicService/index.vue             | 363 ++++++-----
 .../publicService/proMaterials/index.vue      | 119 ++--
 .../publicService/productCenter/index.vue     | 613 ++++++++++--------
 5 files changed, 896 insertions(+), 795 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index b2b9d48..71d64e3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -110,6 +110,7 @@ export const constantRoutes = [
         component: () =>
           import('@/views/publicService/productCenter/index.vue'),
         name: 'ProductCenter',
+        meta: { showSearch: true } // 需要搜索框
       },
 
       // 产品中心 ---- 查看详情页面
@@ -120,6 +121,7 @@ export const constantRoutes = [
             '@/views/publicService/productCenter/product-detail.vue'
             ),
         name: 'ProductDetail',
+        meta: { showSearch: false } // 不需要搜索框
       },
       // 产品中心 ---- 查看案例页面
       {
@@ -129,6 +131,7 @@ export const constantRoutes = [
             '@/views/publicService/productCenter/product-case-list.vue'
             ),
         name: 'ProductCaseList',
+        meta: { showSearch: false } // 不需要搜索框
       },
       // 公共组件
       {
@@ -136,6 +139,7 @@ export const constantRoutes = [
         component: () =>
           import('@/views/publicService/commonCom/index.vue'),
         name: 'CommonCom',
+        meta: { showSearch: true } // 需要搜索框
       },
       // 宣传物料
       {
@@ -143,6 +147,7 @@ export const constantRoutes = [
         component: () =>
           import('@/views/publicService/proMaterials/index.vue'),
         name: 'ProMaterials',
+        meta: { showSearch: true } // 需要搜索框
       },
       // 文档中心
       {
@@ -150,6 +155,7 @@ export const constantRoutes = [
         component: () =>
           import('@/views/publicService/docCenter/index.vue'),
         name: 'DocCenter',
+        meta: { showSearch: true } // 需要搜索框
       },
     ],
   },
diff --git a/src/views/publicService/components/navBar.vue b/src/views/publicService/components/navBar.vue
index 57386ad..4bf9b83 100644
--- a/src/views/publicService/components/navBar.vue
+++ b/src/views/publicService/components/navBar.vue
@@ -1,377 +1,397 @@
 <template>
-    <div class="header_new">
-        <div class="header-content">
-            <div class="header-left">
-<!--                <div class="logo-section" @click="handleLogoClick">-->
-              <div class="logo-section" >
-                    <img
-                        src="../../../assets/logo/logo.png"
-                        alt="Logo"
-                        class="logo"
-                    />
-                    <span class="platform-title">{{ platformTitle }}</span>
-                </div>
-            </div>
-
-            <div class="header-nav">
-                <div
-                    class="nav-item"
-                    :key="item.routePath"
-                    v-for="item in navItems"
-                    @click="handleNavClick(item)"
-                    :class="{ active: activeNav === item.routePath }"
-                >
-                    <img :src="item.icon" :alt="item.label" class="nav-icon" />
-                    <span class="nav-text">{{ item.label }}</span>
-                </div>
-            </div>
-
-            <div v-if="showRightSection" class="header-right"> </div>
-
-            <el-dropdown
-                trigger="hover"
-                class="avatar-container right-menu-item hover-effect"
-            >
-                <div class="avatar-wrapper">
-                    <img :src="avatar" class="user-avatar" />
-                </div>
-                <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item @click.native="handleLogoClick">
-                        后台管理
-                    </el-dropdown-item>
-                    <el-dropdown-item divided @click.native="logout">
-                        <span>退出登录</span>
-                    </el-dropdown-item>
-                </el-dropdown-menu>
-            </el-dropdown>
+  <div class="header_new">
+    <div class="header-content">
+      <div class="header-left">
+        <!--                <div class="logo-section" @click="handleLogoClick">-->
+        <div class="logo-section">
+          <img
+            src="../../../assets/logo/logo.png"
+            alt="Logo"
+            class="logo"
+          />
+          <span class="platform-title">{{ platformTitle }}</span>
         </div>
+      </div>
+
+      <div class="header-nav">
+        <div
+          class="nav-item"
+          :key="item.routePath"
+          v-for="item in navItems"
+          @click="handleNavClick(item)"
+          :class="{ active: activeNav === item.routePath }"
+        >
+          <img :src="item.icon" :alt="item.label" class="nav-icon"/>
+          <span class="nav-text">{{ item.label }}</span>
+        </div>
+      </div>
+
+      <div v-if="showRightSection" class="header-right">
+        <div v-if="showSearch" class="search-box">
+          <input
+            v-model="internalSearchKeyword"
+            type="text"
+            placeholder="输入关键词搜索"
+            class="search-input"
+            @keyup.enter="handleSearch"
+          />
+          <button class="search-btn" @click="handleSearch">
+            <i class="el-icon-search"></i>
+          </button>
+        </div>
+      </div>
+
+      <el-dropdown
+        trigger="hover"
+        class="avatar-container right-menu-item hover-effect"
+      >
+        <div class="avatar-wrapper">
+          <img :src="avatar" class="user-avatar"/>
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="handleLogoClick">
+            后台管理
+          </el-dropdown-item>
+          <el-dropdown-item divided @click.native="logout">
+            <span>退出登录</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
+  </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import {getPermissions} from "../../../utils/auth";
+
 export default {
-    name: 'NavBar',
-    props: {
-        logoUrl: {
-            type: String,
-            default: '/img/psp/productCenter/logo.png',
-        },
-        platformTitle: {
-            type: String,
-            default: '公共服务平台',
-        },
-        showRightSection: {
-            type: Boolean,
-            default: true,
-        },
-        showSearch: {
-            type: Boolean,
-            default: true,
-        },
-        showUserAvatar: {
-            type: Boolean,
-            default: true,
-        },
-        userAvatar: {
-            type: String,
-            default: '',
-        },
-        searchKeyword: {
-            type: String,
-            default: '',
-        },
+  name: 'NavBar',
+  props: {
+    logoUrl: {
+      type: String,
+      default: '/img/psp/productCenter/logo.png',
     },
+    platformTitle: {
+      type: String,
+      default: '公共服务平台',
+    },
+    showRightSection: {
+      type: Boolean,
+      default: true,
+    },
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    showUserAvatar: {
+      type: Boolean,
+      default: true,
+    },
+    userAvatar: {
+      type: String,
+      default: '',
+    },
+    searchKeyword: {
+      type: String,
+      default: '',
+    },
+  },
 
-    computed: {
-        ...mapGetters(['avatar']),
-      // 将 activeNav 改为计算属性，根据当前路由自动判断
-      activeNav() {
-        // 根据当前路由名称返回对应的导航项
-        const routeName = this.$route.name;
-        const routePath = this.$route.path;
+  computed: {
+    ...mapGetters(['avatar']),
+    // 将 activeNav 改为计算属性，根据当前路由自动判断
+    activeNav() {
+      // 根据当前路由名称返回对应的导航项
+      const routeName = this.$route.name;
+      const routePath = this.$route.path;
 
-        // 匹配路由名称
-        if (routeName) {
-          const matchedItem = this.navItems.find(item => item.routePath === routeName);
-          if (matchedItem) {
-            return matchedItem.routePath;
-          }
+      // 匹配路由名称
+      if (routeName) {
+        const matchedItem = this.navItems.find(item => item.routePath === routeName);
+        if (matchedItem) {
+          return matchedItem.routePath;
         }
+      }
 
-        // 匹配路由路径
-        if (routePath) {
-          const matchedItem = this.navItems.find(item =>
-            routePath.includes(item.routePath.toLowerCase())
-          );
-          if (matchedItem) {
-            return matchedItem.routePath;
-          }
+      // 匹配路由路径
+      if (routePath) {
+        const matchedItem = this.navItems.find(item =>
+          routePath.includes(item.routePath.toLowerCase())
+        );
+        if (matchedItem) {
+          return matchedItem.routePath;
         }
+      }
 
-        // 默认返回产品中心
-        return 'ProductCenter';
+      // 默认返回产品中心
+      return 'ProductCenter';
+    },
+    setting: {
+      get() {
+        return this.$store.state.settings.showSettings
       },
-        setting: {
-            get() {
-                return this.$store.state.settings.showSettings
-            },
-        },
-        topNav: {
-            get() {
-                return this.$store.state.settings.topNav
-            },
-        },
     },
-    data() {
-        return {
-            // activeNav: 'ProductCenter', // 默认选中产品中心
-            userAvatarUrl: this.userAvatar,
-            internalSearchKeyword: this.searchKeyword,
-            permissions:getPermissions(),
-            navItems: [
-                {
-                    label: '产品中心',
-                    routePath: 'ProductCenter',
-                    icon: require('../../../assets/images/productCenter/products.png'),
-                },
-                {
-                    label: '公共组件',
-                    routePath: 'CommonCom',
-                    icon: require('../../../assets/images/productCenter/components.png'),
-                },
-                {
-                    label: '宣传物料',
-                    routePath: 'ProMaterials',
-                    icon: require('../../../assets/images/productCenter/materials.png'),
-                },
-                {
-                    label: '文档中心',
-                    routePath: 'DocCenter',
-                    icon: require('../../../assets/images/productCenter/docs.png'),
-                },
-            ],
-        }
-    },
-    watch: {
-      '$route'() {
-        // 路由变化时会自动更新 activeNav 计算属性
+    topNav: {
+      get() {
+        return this.$store.state.settings.topNav
       },
-        searchKeyword(newVal) {
-            this.internalSearchKeyword = newVal
-        },
-        userAvatar(newVal) {
-            this.userAvatarUrl = newVal
-        },
     },
-    methods: {
-        handleNavClick(item) {
-            // this.activeNav = item.routePath
-            this.$router.push({
-                name: item.routePath,
-            })
+  },
+  data() {
+    return {
+      // activeNav: 'ProductCenter', // 默认选中产品中心
+      userAvatarUrl: this.userAvatar,
+      internalSearchKeyword: this.searchKeyword,
+      permissions: getPermissions(),
+      navItems: [
+        {
+          label: '产品中心',
+          routePath: 'ProductCenter',
+          icon: require('../../../assets/images/productCenter/products.png'),
         },
-        handleSearch() {
-            // 修复搜索功能，直接使用internalSearchKeyword
-            this.$emit('update:searchKeyword', this.internalSearchKeyword)
-            this.$emit('search', this.internalSearchKeyword)
+        {
+          label: '公共组件',
+          routePath: 'CommonCom',
+          icon: require('../../../assets/images/productCenter/components.png'),
         },
-
-        // 跳转后台
-        handleLogoClick() {
-          if(this.permissions.includes(2) ){
-            this.$router.push('/')
-          }else{
-            // 提示没有权限
-            this.$message.error('没有后台权限，请联系管理员')
-          }
-
+        {
+          label: '宣传物料',
+          routePath: 'ProMaterials',
+          icon: require('../../../assets/images/productCenter/materials.png'),
         },
-
-        logout() {
-            this.$confirm('确定注销并退出系统吗？', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-            })
-                .then(() => {
-                    this.$store.dispatch('LogOut').then(() => {
-                        location.href =
-                            process.env.VUE_APP_ENV === 'production'
-                                ? '/pubSerPlatform/index'
-                                : '/index'
-                    })
-                })
-                .catch(() => {})
+        {
+          label: '文档中心',
+          routePath: 'DocCenter',
+          icon: require('../../../assets/images/productCenter/docs.png'),
         },
+      ],
+    }
+  },
+  watch: {
+    '$route'() {
+      // 路由变化时会自动更新 activeNav 计算属性
     },
+    searchKeyword(newVal) {
+      this.internalSearchKeyword = newVal
+    },
+    userAvatar(newVal) {
+      this.userAvatarUrl = newVal
+    },
+    internalSearchKeyword(newVal) {
+      // 当搜索关键词变化时，实时通知父组件
+      this.$emit('update:searchKeyword', newVal)
+    }
+  },
+  methods: {
+    handleNavClick(item) {
+      // this.activeNav = item.routePath
+      this.$router.push({
+        name: item.routePath,
+      })
+    },
+    handleSearch() {
+      console.log('执行搜索:', this.internalSearchKeyword)
+
+      // 发送搜索事件给父组件
+      this.$emit('search', this.internalSearchKeyword.trim())
+    },
+
+    // 跳转后台
+    handleLogoClick() {
+      if (this.permissions.includes(2)) {
+        this.$router.push('/')
+      } else {
+        // 提示没有权限
+        this.$message.error('没有后台权限，请联系管理员')
+      }
+
+    },
+
+    logout() {
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$store.dispatch('LogOut').then(() => {
+            location.href =
+              process.env.VUE_APP_ENV === 'production'
+                ? '/pubSerPlatform/index'
+                : '/index'
+          })
+        })
+        .catch(() => {
+        })
+    },
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .header_new {
-    background-image: url('../../../assets/images/productCenter/topbg.png');
-    color: white;
-    padding: 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-image: url('../../../assets/images/productCenter/topbg.png');
+  color: white;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .header-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 100vw;
-    margin: 0 auto;
-    padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100vw;
+  margin: 0 auto;
+  padding: 12px 20px;
 }
 
 .header-left {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .logo-section {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    //cursor: pointer;
-    cursor: context-menu;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  //cursor: pointer;
+  cursor: context-menu;
 }
 
 .logo {
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
 }
 
 .platform-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: white;
+  font-size: 18px;
+  font-weight: 600;
+  color: white;
 }
 
 .header-nav {
-    display: flex;
-    gap: 32px;
-    justify-content: space-between;
+  display: flex;
+  gap: 32px;
+  justify-content: space-between;
 }
 
 .nav-item {
-    padding: 8px 16px;
-    cursor: pointer;
-    border-radius: 6px;
-    transition: all 0.2s ease;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
 }
 
 .nav-icon {
-    width: 20px;
-    height: 20px;
-    object-fit: contain;
-    margin-right: 10px;
-    flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  margin-right: 10px;
+  flex-shrink: 0;
 }
 
 .nav-text {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 .nav-item:hover,
 .nav-item.active {
-    background-color: rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.15);
 }
 
 .header-right {
-    display: flex;
-    align-items: center;
-    gap: 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
 .search-box {
-    display: flex;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 20px;
-    padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  padding: 6px 12px;
 }
 
 .search-input {
-    background: transparent;
-    border: none;
-    outline: none;
-    color: white;
-    font-size: 14px;
-    width: 200px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: white;
+  font-size: 14px;
+  width: 200px;
 }
 
 .search-input::placeholder {
-    color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .search-btn {
-    background: none;
-    border: none;
-    color: white;
-    cursor: pointer;
-    padding: 4px;
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 4px;
 }
 
 .user-avatar img {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    border: 2px solid rgba(255, 255, 255, 0.3);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.3);
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-    .header-content {
-        flex-direction: column;
-        gap: 12px;
-        padding: 16px;
-    }
+  .header-content {
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+  }
 
-    .header-nav {
-        gap: 16px;
-    }
+  .header-nav {
+    gap: 16px;
+  }
 
-    .search-input {
-        width: 150px;
-    }
+  .search-input {
+    width: 150px;
+  }
 }
 
 .avatar-container {
-    margin-right: 0px;
-    padding-right: 0px;
+  margin-right: 0px;
+  padding-right: 0px;
 
-    .avatar-wrapper {
-        margin-top: 10px;
-        position: relative;
+  .avatar-wrapper {
+    margin-top: 10px;
+    position: relative;
 
-        .user-avatar {
-            cursor: pointer;
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-        }
-
-        .user-nickname {
-            position: relative;
-            bottom: 10px;
-            font-size: 14px;
-            font-weight: bold;
-        }
-
-        .el-icon-caret-bottom {
-            cursor: pointer;
-            position: absolute;
-            right: -20px;
-            top: 25px;
-            font-size: 12px;
-        }
+    .user-avatar {
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
     }
+
+    .user-nickname {
+      position: relative;
+      bottom: 10px;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    .el-icon-caret-bottom {
+      cursor: pointer;
+      position: absolute;
+      right: -20px;
+      top: 25px;
+      font-size: 12px;
+    }
+  }
 }
 </style>
diff --git a/src/views/publicService/index.vue b/src/views/publicService/index.vue
index 7ce815c..842195c 100644
--- a/src/views/publicService/index.vue
+++ b/src/views/publicService/index.vue
@@ -1,13 +1,17 @@
 <template>
-    <div class="platform-container">
-        <!-- 使用导航栏组件 -->
-        <NavBar />
+  <div class="platform-container">
+    <!-- 使用导航栏组件 -->
+    <NavBar
+      @search="handleSearch"
+      :searchKeyword.sync="searchKeyword"
+      :showSearch="showSearch"
+    />
 
-        <div class="main-content-1">
-            <!-- 主体内容 -->
-            <router-view />
-        </div>
+    <div class="main-content-1">
+      <!-- 主体内容 -->
+      <router-view :search-keyword="searchKeyword"/>
     </div>
+  </div>
 </template>
 
 <script>
@@ -15,25 +19,48 @@
 import NavBar from './components/navBar.vue'
 
 export default {
-    name: 'PublicService',
-    components: {
-        NavBar,
-    },
+  name: 'PublicService',
+  components: {
+    NavBar,
+  },
+  data() {
+    return {
+      searchKeyword: '' // 搜索关键词
+    }
+  },
+  computed: {
+    // 根据路由元信息控制搜索框显示
+    showSearch() {
+      // 检查当前路由的元信息
+      return this.$route.meta.showSearch !== false
+    }
+  },
+  methods: {
+    // 处理搜索事件
+    handleSearch(keyword) {
+      console.log('接收到搜索关键词:', keyword)
+      this.searchKeyword = keyword
+
+      // 可以在这里添加全局搜索逻辑
+      // 例如触发当前页面的搜索方法
+      this.$refs.currentView?.search(keyword)
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
 .platform-container {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .main-content-1 {
-    flex: 1;
-    width: 100%;
-    overflow: auto;
+  flex: 1;
+  width: 100%;
+  overflow: auto;
 }
 
 /* 顶部导航栏 */
@@ -45,273 +72,273 @@ export default {
 // }
 
 .header-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 100vw;
-    margin: 0 auto;
-    padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100vw;
+  margin: 0 auto;
+  padding: 12px 20px;
 }
 
 .header-left {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .logo-section {
-    display: flex;
-    align-items: center;
-    gap: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 .logo {
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
 }
 
 .platform-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: white;
+  font-size: 18px;
+  font-weight: 600;
+  color: white;
 }
 
 .header-nav {
-    display: flex;
-    gap: 32px;
-    justify-content: space-between;
+  display: flex;
+  gap: 32px;
+  justify-content: space-between;
 }
 
 .nav-item {
-    padding: 8px 16px;
-    cursor: pointer;
-    border-radius: 6px;
-    transition: all 0.2s ease;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
 }
 
 .nav-icon {
-    width: 20px;
-    height: 20px;
-    object-fit: contain;
-    margin-right: 10px;
-    flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  margin-right: 10px;
+  flex-shrink: 0;
 }
 
 .nav-text {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 .nav-item:hover,
 .nav-item.active {
-    background-color: rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.15);
 }
 
 .header-right {
-    display: flex;
-    align-items: center;
-    gap: 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
 .search-box {
-    display: flex;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 20px;
-    padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  padding: 6px 12px;
 }
 
 .search-input {
-    background: transparent;
-    border: none;
-    outline: none;
-    color: white;
-    font-size: 14px;
-    width: 200px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: white;
+  font-size: 14px;
+  width: 200px;
 }
 
 .search-input::placeholder {
-    color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .search-btn {
-    background: none;
-    border: none;
-    color: white;
-    cursor: pointer;
-    padding: 4px;
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 4px;
 }
 
 .user-avatar img {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    border: 2px solid rgba(255, 255, 255, 0.3);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.3);
 }
 
 /* 主体内容 */
 .main-content {
-    display: flex;
-    max-width: 95%;
-    margin: 0 auto;
-    padding: 24px 20px;
-    gap: 24px;
+  display: flex;
+  max-width: 95%;
+  margin: 0 auto;
+  padding: 24px 20px;
+  gap: 24px;
 }
 
 /* 左侧分类菜单 */
 .sidebar {
-    width: 160px;
-    flex-shrink: 0;
+  width: 160px;
+  flex-shrink: 0;
 }
 
 .category-item {
-    padding: 12px 16px;
-    margin-bottom: 8px;
-    background: white;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 14px;
-    color: #666;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  background: white;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  color: #666;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .category-item:hover {
-    background-color: #f0f7ff;
-    color: #4a90e2;
+  background-color: #f0f7ff;
+  color: #4a90e2;
 }
 
 .category-item.active {
-    background-color: #4a90e2;
-    color: white;
+  background-color: #4a90e2;
+  color: white;
 }
 
 /* 服务卡片区域 */
 .content-area {
-    flex: 1;
+  flex: 1;
 }
 
 .services-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
 }
 
 .service-card {
-    background: white;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
-    cursor: pointer;
-    height: 100%; /* 让卡片高度撑满 grid 单元格 */
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  height: 100%; /* 让卡片高度撑满 grid 单元格 */
 }
 
 .service-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 }
 
 .card-image {
-    height: 180px; /* 固定高度，可根据设计调整 */
-    overflow: hidden;
-    background-color: #f8f9fa; /* 图片加载前的占位背景 */
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  height: 180px; /* 固定高度，可根据设计调整 */
+  overflow: hidden;
+  background-color: #f8f9fa; /* 图片加载前的占位背景 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .card-image img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
-    transition: transform 0.3s ease;
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
+  transition: transform 0.3s ease;
 }
 
 .service-card:hover .card-image img {
-    transform: scale(1.05);
+  transform: scale(1.05);
 }
 
 .card-content {
-    padding: 16px;
+  padding: 16px;
 }
 
 .card-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
-    margin: 0 0 16px 0;
-    line-height: 1.4;
-    text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 16px 0;
+  line-height: 1.4;
+  text-align: center;
 }
 
 .card-actions {
-    display: flex;
-    gap: 8px;
+  display: flex;
+  gap: 8px;
 }
 
 .btn {
-    padding: 8px 16px;
-    border-radius: 6px;
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: 1px solid transparent;
-    flex: 1;
-    text-align: center;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  flex: 1;
+  text-align: center;
 }
 
 .btn-primary {
-    background-color: #4a90e2;
-    color: white;
-    border-color: #4a90e2;
+  background-color: #4a90e2;
+  color: white;
+  border-color: #4a90e2;
 }
 
 .btn-primary:hover {
-    background-color: #357abd;
-    border-color: #357abd;
+  background-color: #357abd;
+  border-color: #357abd;
 }
 
 .btn-outline {
-    background-color: transparent;
-    color: #4a90e2;
-    border-color: #4a90e2;
+  background-color: transparent;
+  color: #4a90e2;
+  border-color: #4a90e2;
 }
 
 .btn-outline:hover {
-    background-color: #4a90e2;
-    color: white;
+  background-color: #4a90e2;
+  color: white;
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-    .header-content {
-        flex-direction: column;
-        gap: 12px;
-        padding: 16px;
-    }
+  .header-content {
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+  }
 
-    .header-nav {
-        gap: 16px;
-    }
+  .header-nav {
+    gap: 16px;
+  }
 
-    .main-content {
-        flex-direction: column;
-        padding: 16px;
-    }
+  .main-content {
+    flex-direction: column;
+    padding: 16px;
+  }
 
-    .sidebar {
-        width: 100%;
-    }
+  .sidebar {
+    width: 100%;
+  }
 
-    .services-grid {
-        grid-template-columns: 1fr;
-    }
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
 
-    .search-input {
-        width: 150px;
-    }
+  .search-input {
+    width: 150px;
+  }
 }
 </style>
diff --git a/src/views/publicService/proMaterials/index.vue b/src/views/publicService/proMaterials/index.vue
index 6427cbd..7de4bea 100644
--- a/src/views/publicService/proMaterials/index.vue
+++ b/src/views/publicService/proMaterials/index.vue
@@ -68,7 +68,6 @@
 
               <div
                 class="primary-btn"
-
                 @click="handleDownload(item)"
               >
                 下 载
@@ -77,6 +76,7 @@
           </div>
 
         </div>
+
         <DialogModel
           :dialogConfig="dialogConfig"
           @closeDialogOuter="handleCloseDialogOuter"
@@ -105,8 +105,6 @@
       </div>
 
     </div>
-
-
   </div>
 </template>
 
@@ -124,6 +122,12 @@ export default {
     DialogModel,
   },
   dicts: ['tb_product_type'],
+  props: {
+    searchKeyword: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
       downloading: false, // 添加下载状态标识
@@ -189,37 +193,6 @@ export default {
       }, 300);
     },
 
-    // 统一的筛选方法
-    // updateFilteredList() {
-    //   let filtered = this.proMaterialsListAll;
-    //
-    //   // 应用分类筛选
-    //   if (this.activeTypeValue !== 'all') {
-    //     filtered = filtered.filter(item => item.typeId === Number(this.activeTypeValue));
-    //   }
-    //
-    //   // 应用类型筛选
-    //   if (this.selectedTypes.length > 0) {
-    //     filtered = filtered.filter(item =>
-    //       this.selectedTypes.includes(item.fileType.toString())
-    //     );
-    //   }
-    //
-    //   this.showProMaterialsDuctList = filtered;
-    // },
-    // 统一的筛选方法
-    updateFilteredList() {
-      this.currentPage = 1;
-      // 添加防抖
-      if (this.requestTimeout) {
-        clearTimeout(this.requestTimeout);
-      }
-      this.requestTimeout = setTimeout(() => {
-        this.getProductCenterListInScreenFun();
-      }, 300);
-    },
-
-
     // 获取产品卡片宽度
     getItemWidth() {
       this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
@@ -245,7 +218,6 @@ export default {
       }
     },
     // 下载
-    // 下载
     async handleDownload(service) {
 
       // 防止重复点击
@@ -319,31 +291,32 @@ export default {
       }
 
       this.executeGetProductList();
-
     },
 
     // 实际执行获取列表的方法
     async executeGetProductList() {
       try {
-              let fileType = "";
-              if (this.selectedTypes.length > 0 && this.selectedTypes.length < 2) {
-                fileType = this.selectedTypes.join(',');
-              }
-              // 根据图片中的参数格式，调整为 list 参数
-              const requestParams = {
-                pageNum: this.currentPage,
-                pageSize: this.pageSize,
-                typeId: this.activeTypeValue !== 'all' ? this.activeTypeValue : undefined,
-                fileType: fileType
-              };
+        let fileType = "";
+        if (this.selectedTypes.length > 0 && this.selectedTypes.length < 2) {
+          fileType = this.selectedTypes.join(',');
+        }
+        // 根据图片中的参数格式，调整为 list 参数
+        const requestParams = {
+          pageNum: this.currentPage,
+          pageSize: this.pageSize,
+          typeId: this.activeTypeValue !== 'all' ? this.activeTypeValue : undefined,
+          fileType: fileType,
+          // 添加搜索关键词参数
+          name: this.searchKeyword || undefined
+        };
 
-              const res = await getMaterialListAPI(requestParams);
-              this.proMaterialsListAll = res.rows;
-              this.total = res.total || 0;
-              this.showProMaterialsDuctList = this.proMaterialsListAll;
-            } catch (error) {
-              console.error('获取物料列表失败:', error);
-            }
+        const res = await getMaterialListAPI(requestParams);
+        this.proMaterialsListAll = res.rows;
+        this.total = res.total || 0;
+        this.showProMaterialsDuctList = this.proMaterialsListAll;
+      } catch (error) {
+        console.error('获取物料列表失败:', error);
+      }
     },
 
     // 关闭弹框
@@ -419,9 +392,22 @@ export default {
       }, 300);
     },
 
+    // 根据搜索关键词过滤物料列表（前端过滤备用方法）
+    filterMaterialsByKeyword(materials, keyword) {
+      if (!keyword) return materials
+
+      const lowerKeyword = keyword.toLowerCase()
+      return materials.filter(item =>
+        // 在物料名称、描述等字段中搜索
+        (item.name && item.name.toLowerCase().includes(lowerKeyword)) ||
+        (item.description && item.description.toLowerCase().includes(lowerKeyword)) ||
+        (item.version && item.version.toLowerCase().includes(lowerKeyword)) ||
+        (item.typeName && item.typeName.toLowerCase().includes(lowerKeyword))
+      )
+    }
   },
 
-  // 监听分类变化
+  // 监听分类变化和搜索关键词变化
   watch: {
     activeTypeValue() {
       this.currentPage = 1;
@@ -433,6 +419,29 @@ export default {
         this.getProductCenterListInScreenFun();
       }, 300);
     },
+
+    // 监听搜索关键词变化
+    searchKeyword(newVal) {
+      this.currentPage = 1;
+      // 添加防抖
+      if (this.requestTimeout) {
+        clearTimeout(this.requestTimeout);
+      }
+      this.requestTimeout = setTimeout(() => {
+        this.getProductCenterListInScreenFun();
+      }, 300);
+    },
+
+    selectedTypes() {
+      this.currentPage = 1;
+      // 添加防抖
+      if (this.requestTimeout) {
+        clearTimeout(this.requestTimeout);
+      }
+      this.requestTimeout = setTimeout(() => {
+        this.getProductCenterListInScreenFun();
+      }, 300);
+    }
   },
   beforeDestroy() {
     if (this.requestTimeout) {
diff --git a/src/views/publicService/productCenter/index.vue b/src/views/publicService/productCenter/index.vue
index 32964b5..f4a4db5 100644
--- a/src/views/publicService/productCenter/index.vue
+++ b/src/views/publicService/productCenter/index.vue
@@ -1,296 +1,337 @@
 <template>
-    <!-- 产品中心 -->
-    <div class="product-center">
-        <div class="sidebar">
-            <div
-                :key="item.value"
-                class="category-item"
-                v-for="item in leftMenuList"
-                @click="activeTypeValue = item.value"
-                :class="{ active: activeTypeValue == item.value }"
-            >
-                {{ item.label }}
-            </div>
-        </div>
+  <!-- 产品中心 -->
+  <div class="product-center">
+    <div class="sidebar">
+      <div
+        :key="item.value"
+        class="category-item"
+        v-for="item in leftMenuList"
+        @click="activeTypeValue = item.value"
+        :class="{ active: activeTypeValue == item.value }"
+      >
+        {{ item.label }}
+      </div>
+    </div>
 
-        <div class="content-area"
-             :class="{ 'compact-grid': showProductList.length >= 5 && showProductList.length <= 8 }"
-             ref="servicesGrid">
-            <div
-                :key="item.id"
-                class="services-grid"
-                v-for="item in showProductList"
-            >
-                <div class="card-image">
-                    <ImagePreview
-                        :height="150"
-                        :borderRadius="10"
-                        :width="itemWidth"
-                        :src1="item.linkImage"
-                        :isShowMask="true"
-                    />
-                </div>
-                <div
-                    class="card-title"
-                    :style="{ width: itemWidth - 40 + 'px' }"
-                >
-                    {{ item.name }}
-                </div>
-                <div class="card-actions">
-                    <div
-                        class="primary-btn"
-                        :class="{
+    <div class="content-area"
+         :class="{ 'compact-grid': showProductList.length >= 5 && showProductList.length <= 8 }"
+         ref="servicesGrid">
+      <div
+        :key="item.id"
+        class="services-grid"
+        v-for="item in showProductList"
+      >
+        <div class="card-image">
+          <ImagePreview
+            :height="150"
+            :borderRadius="10"
+            :width="itemWidth"
+            :src1="item.linkImage"
+            :isShowMask="true"
+          />
+        </div>
+        <div
+          class="card-title"
+          :style="{ width: itemWidth - 40 + 'px' }"
+        >
+          {{ item.name }}
+        </div>
+        <div class="card-actions">
+          <div
+            class="primary-btn"
+            :class="{
                             isDisabled: item.isAccess == 0,
                         }"
-                        @click="handleDemo(item)"
-                    >
-                        访问演示
-                    </div>
-                    <div @click="handleDetail(item)"> 查看详情 </div>
-                </div>
-            </div>
+            @click="handleDemo(item)"
+          >
+            访问演示
+          </div>
+          <div @click="handleDetail(item)"> 查看详情 </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { getProductCenterListAPI } from '@/api/publicService/productCenter'
 export default {
-    name: 'ProductCenter',
-    dicts: ['tb_product_type'],
-    data() {
-        return {
-            activeTypeValue: 'all', // 当前激活的分类
-            leftMenuList: [
-                {
-                    label: '全部',
-                    value: 'all',
-                },
-            ], // 左侧菜单列表
-            productListAll: [], // 所有产品列表
-            showProductList: [], // 需要显示的产品列表
-            itemWidth: 0, // 产品卡片宽度
-        }
+  name: 'ProductCenter',
+  dicts: ['tb_product_type'],
+  props: {
+    searchKeyword: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      activeTypeValue: 'all', // 当前激活的分类
+      leftMenuList: [
+        {
+          label: '全部',
+          value: 'all',
+        },
+      ], // 左侧菜单列表
+      productListAll: [], // 所有产品列表
+      showProductList: [], // 需要显示的产品列表
+      itemWidth: 0, // 产品卡片宽度
+    }
+  },
+
+  created() {
+    this.getProductCenterListInScreenFun()
+  },
+  mounted() {
+    // 监听字典数据加载完成事件
+    this.$on('dictReady', (dict) => {
+      this.initLeftMenuList()
+    })
+
+    // 如果字典数据已经加载完成，直接初始化
+    if (this.dict && this.dict.type && this.dict.type.tb_product_type) {
+      this.initLeftMenuList()
+    }
+
+    this.getItemWidth()
+  },
+  methods: {
+    // 获取产品卡片宽度
+    getItemWidth() {
+      this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
     },
 
-    created() {
-        this.getProductCenterListInScreenFun()
-    },
-    mounted() {
-        // 监听字典数据加载完成事件
-        this.$on('dictReady', (dict) => {
-            this.initLeftMenuList()
-        })
-
-        // 如果字典数据已经加载完成，直接初始化
-        if (this.dict && this.dict.type && this.dict.type.tb_product_type) {
-            this.initLeftMenuList()
-        }
-
-        this.getItemWidth()
-    },
-    methods: {
-        // 获取产品卡片宽度
-        getItemWidth() {
-            this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
-        },
-
-        // 初始化左侧菜单列表
-        initLeftMenuList() {
-            try {
-                if (
-                    this.dict &&
-                    this.dict.type &&
-                    this.dict.type.tb_product_type
-                ) {
-                    // 添加字典数据到菜单
-                    this.dict.type.tb_product_type.forEach((item) => {
-                        this.leftMenuList.push({
-                            label: item.label,
-                            value: item.value,
-                        })
-                    })
-                }
-            } catch (error) {}
-        },
-        // 访问演示地址
-        handleDemo(service) {
-            if (service.isAccess == 0) {
-                this.$modal.msgWarning('该产品不支持访问')
-                return
-            }
-
-            // 确保 URL 是完整的绝对路径
-            let url = service.linkUrl
-            // 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
-            if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                // 如果 URL 以 www. 开头，直接添加 https://
-                if (url.startsWith('www.')) {
-                    url = 'https://' + url
-                } else {
-                    // 其他情况，添加 https://
-                    url = 'https://' + url
-                }
-            }
-
-            window.open(url, '_blank')
-        },
-        //  查看详情
-        handleDetail(service) {
-            this.$router.push({
-                name: 'ProductDetail',
-                params: { id: service.id },
+    // 初始化左侧菜单列表
+    initLeftMenuList() {
+      try {
+        if (
+          this.dict &&
+          this.dict.type &&
+          this.dict.type.tb_product_type
+        ) {
+          // 添加字典数据到菜单
+          this.dict.type.tb_product_type.forEach((item) => {
+            this.leftMenuList.push({
+              label: item.label,
+              value: item.value,
             })
-        },
-        // 鼠标悬浮
-        handleCardHover(serviceId) {
-            this.hoveredCard = serviceId
-        },
-        // 鼠标离开
-        handleCardLeave() {
-            this.hoveredCard = null
-        },
+          })
+        }
+      } catch (error) {}
+    },
+    // 访问演示地址
+    handleDemo(service) {
+      if (service.isAccess == 0) {
+        this.$modal.msgWarning('该产品不支持访问')
+        return
+      }
 
-        // 获取产品列表
-        async getProductCenterListInScreenFun() {
-            const res = await getProductCenterListAPI({})
-            this.productListAll = res.data
-            this.showProductList = this.productListAll
-        },
+      // 确保 URL 是完整的绝对路径
+      let url = service.linkUrl
+      // 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
+      if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        // 如果 URL 以 www. 开头，直接添加 https://
+        if (url.startsWith('www.')) {
+          url = 'https://' + url
+        } else {
+          // 其他情况，添加 https://
+          url = 'https://' + url
+        }
+      }
+
+      window.open(url, '_blank')
+    },
+    //  查看详情
+    handleDetail(service) {
+      this.$router.push({
+        name: 'ProductDetail',
+        params: { id: service.id },
+      })
+    },
+    // 鼠标悬浮
+    handleCardHover(serviceId) {
+      this.hoveredCard = serviceId
+    },
+    // 鼠标离开
+    handleCardLeave() {
+      this.hoveredCard = null
     },
 
-    // 监听分类变化
-    watch: {
-        activeTypeValue(newVal) {
-            if (newVal === 'all') {
-                this.showProductList = this.productListAll
-            } else {
-                this.showProductList = this.productListAll.filter(
-                    (item) => item.typeId === newVal,
-                )
-            }
-        },
+    // 获取产品列表
+    async getProductCenterListInScreenFun() {
+      const res = await getProductCenterListAPI({})
+      this.productListAll = res.data
+      this.showProductList = this.productListAll
     },
+
+    // 根据搜索关键词过滤产品列表
+    filterProductsByKeyword(products, keyword) {
+      if (!keyword) return products
+
+      const lowerKeyword = keyword.toLowerCase()
+      return products.filter(item =>
+        // 在产品名称、描述等字段中搜索
+        (item.name && item.name.toLowerCase().includes(lowerKeyword)) ||
+        (item.description && item.description.toLowerCase().includes(lowerKeyword)) ||
+        (item.typeName && item.typeName.toLowerCase().includes(lowerKeyword))
+      )
+    }
+  },
+
+  // 监听分类变化和搜索关键词变化
+  watch: {
+    activeTypeValue(newVal) {
+      let filteredProducts = []
+
+      if (newVal === 'all') {
+        filteredProducts = this.productListAll
+      } else {
+        filteredProducts = this.productListAll.filter(
+          (item) => item.typeId === newVal,
+        )
+      }
+
+      // 应用搜索过滤
+      this.showProductList = this.filterProductsByKeyword(filteredProducts, this.searchKeyword)
+    },
+
+    // 监听搜索关键词变化
+    searchKeyword(newVal) {
+      let filteredProducts = []
+
+      // 先根据分类过滤
+      if (this.activeTypeValue === 'all') {
+        filteredProducts = this.productListAll
+      } else {
+        filteredProducts = this.productListAll.filter(
+          (item) => item.typeId === this.activeTypeValue,
+        )
+      }
+
+      // 再根据搜索关键词过滤
+      this.showProductList = this.filterProductsByKeyword(filteredProducts, newVal)
+    }
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .product-center {
-    width: 100%;
-    height: 100%; /* 设置视口高度 */
-    display: flex;
-    margin: 0 auto;
-    padding: 40px 20px 0;
-    gap: 24px;
-    box-sizing: border-box; /* 确保padding包含在高度内 */
+  width: 100%;
+  height: 100%; /* 设置视口高度 */
+  display: flex;
+  margin: 0 auto;
+  padding: 40px 20px 0;
+  gap: 24px;
+  box-sizing: border-box; /* 确保padding包含在高度内 */
 
-    /* 左侧分类菜单 */
-    .sidebar {
-        width: 160px;
-        flex-shrink: 0;
+  /* 左侧分类菜单 */
+  .sidebar {
+    width: 160px;
+    flex-shrink: 0;
+  }
+
+  .content-area {
+    flex: 1;
+    height: 100%;
+    padding-bottom: 20px;
+    padding-right: 12px;
+    padding-top: 2px;
+    max-height: calc(100vh - 80px); /* 减去顶部padding */
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 33px;
+
+    .services-grid {
+      height: 260px; /* 给子元素设置固定高度以便测试滚动 */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+      border: 1px solid #d6d1d1;
+      border-radius: 10px;
+      align-content: flex-start;
+      justify-items: center;
+
+      // background-color: skyblue;
     }
 
-    .content-area {
-        flex: 1;
-        height: 100%;
-        padding-bottom: 20px;
-        padding-right: 12px;
-        padding-top: 2px;
-        max-height: calc(100vh - 80px); /* 减去顶部padding */
-        overflow-y: auto;
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 33px;
-
-        .services-grid {
-            height: 260px; /* 给子元素设置固定高度以便测试滚动 */
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: all 0.3s ease;
-            border: 1px solid #d6d1d1;
-            border-radius: 10px;
-            align-content: flex-start;
-            justify-items: center;
-
-            // background-color: skyblue;
-        }
-
-        .card-image {
-            height: 165px;
-            border-top-left-radius: 10px;
-            border-top-right-radius: 10px;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            border-bottom: 1px solid #d6d1d1;
-        }
-
-        .services-grid:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-        }
-
-        .card-title {
-            color: #333;
-            font-size: 16px;
-            padding: 8px 0;
-            font-weight: bold;
-            font-family: 'PingFang SC', sans-serif;
-            letter-spacing: 1px;
-            text-align: center;
-            // 多行文本溢出
-            white-space: nowrap; /* 禁止文本换行 */
-            overflow: hidden; /* 超出容器部分隐藏 */
-            text-overflow: ellipsis; /* 溢出部分用省略号表示 */
-        }
-
-        .card-actions {
-            flex: 1;
-            width: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-
-            div {
-                padding: 4px 6px;
-                border-radius: 4px;
-                color: #000;
-                font-size: 12px;
-                cursor: pointer;
-                font-family: 'PingFang SC', sans-serif;
-                transition: all 0.3s ease;
-                box-sizing: border-box;
-            }
-
-            & div:hover {
-                transform: translateY(-1px);
-                box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
-            }
-
-            .primary-btn {
-                color: white;
-                background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
-            }
-
-            & div:last-child {
-                border: 1px solid #00c7ef;
-            }
-
-            .isDisabled {
-                border-color: #ccc !important;
-                cursor: not-allowed !important;
-                background-color: #ccc !important;
-            }
-        }
+    .card-image {
+      height: 165px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border-bottom: 1px solid #d6d1d1;
     }
 
+    .services-grid:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    }
+
+    .card-title {
+      color: #333;
+      font-size: 16px;
+      padding: 8px 0;
+      font-weight: bold;
+      font-family: 'PingFang SC', sans-serif;
+      letter-spacing: 1px;
+      text-align: center;
+      // 多行文本溢出
+      white-space: nowrap; /* 禁止文本换行 */
+      overflow: hidden; /* 超出容器部分隐藏 */
+      text-overflow: ellipsis; /* 溢出部分用省略号表示 */
+    }
+
+    .card-actions {
+      flex: 1;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+
+      div {
+        padding: 4px 6px;
+        border-radius: 4px;
+        color: #000;
+        font-size: 12px;
+        cursor: pointer;
+        font-family: 'PingFang SC', sans-serif;
+        transition: all 0.3s ease;
+        box-sizing: border-box;
+      }
+
+      & div:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
+      }
+
+      .primary-btn {
+        color: white;
+        background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
+      }
+
+      & div:last-child {
+        border: 1px solid #00c7ef;
+      }
+
+      .isDisabled {
+        border-color: #ccc !important;
+        cursor: not-allowed !important;
+        background-color: #ccc !important;
+      }
+    }
+  }
+
   .compact-grid {
     flex: 1;
     height: 75%;
@@ -391,36 +432,34 @@ export default {
       }
     }
   }
-
-
 }
 
 .category-item {
-    padding: 12px 16px;
-    margin-bottom: 8px;
-    background: white;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 14px;
-    color: #000;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    transition: all 0.2s ease;
-    font-family: 'PingFang SC', sans-serif;
-    text-align: center;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  background: white;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  color: #000;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  font-family: 'PingFang SC', sans-serif;
+  text-align: center;
 }
 
 .category-item:hover {
-    background-color: #f0f7ff;
-    color: #4a90e2;
-    transform: translateY(-2px);
+  background-color: #f0f7ff;
+  color: #4a90e2;
+  transform: translateY(-2px);
 }
 
 .category-item.active {
-    // background-color: #4a90e2;
-    background: url('../../../assets/images/publicService/btn-sel.png')
-        no-repeat center center;
-    background-size: 100% 100%;
-    color: white;
+  // background-color: #4a90e2;
+  background: url('../../../assets/images/publicService/btn-sel.png')
+  no-repeat center center;
+  background-size: 100% 100%;
+  color: white;
 }
 </style>