优化

src/api/publicService/productCenter.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+import request_formdata from '@/utils/request_formdata'
+
+// 查询产品中心列表
+export function getProductCenterListAPI(data) {
+    return request({
+        url: '/product/screen/getProductList',
+        method: 'POST',
+        data,
+    })
+}

src/views/dataManage/product-center/index.vue

@@ -81,8 +81,8 @@
                     @click="onHandleExport"
                 >
                     导出
-                </el-button> -->
+                </el-button>
-            </el-col>
+            </el-col> -->
         </el-row>
 
         <!-- 表格 -->

src/views/login.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="login-content">
+    <!-- <div class="login-content"> -->
     <div class="login-container">
         <!-- 左侧背景区域 -->
         <div class="login-left">
@@ -171,7 +171,7 @@
             </div>
         </div>
     </div>
-    </div>
+    <!-- </div> -->
 </template>
 
 <script>
@@ -394,12 +394,12 @@ export default {
 }
 .login-container {
     display: flex;
-    height: 80%;
+    height: 100%;
-    width: 80%;
+    width: 100%;
     background: #f5f7fa;
     overflow: hidden;
-    border-radius: 10px;
+    // border-radius: 10px;
-    box-shadow: 0 0 10px 0 rgba(164, 51, 199, 0.658);
+    // box-shadow: 0 0 10px 0 rgba(164, 51, 199, 0.658);
 }
 
 // 左侧背景区域

src/views/publicService/productCenter/index.vue

@@ -6,11 +6,11 @@
             <!-- 左侧分类菜单 -->
             <div class="sidebar">
                 <div
-                    v-for="category in categories"
                     :key="category.key"
                     class="category-item"
-                    :class="{ active: activeCategory === category.key }"
+                    v-for="category in categories"
                     @click="activeCategory = category.key"
+                    :class="{ active: activeCategory === category.key }"
                 >
                     {{ category.label }}
                 </div>
@@ -20,30 +20,27 @@
             <div class="content-area">
                 <div class="services-grid">
                     <div
-                        v-for="service in filteredServices"
+                        :key="item.id"
-                        :key="service.id"
                         class="service-card"
-                        @mouseenter="handleCardHover(service.id)"
                         @mouseleave="handleCardLeave"
+                        v-for="item in productListAll"
+                        @mouseenter="handleCardHover(service.id)"
                     >
                         <div class="card-image">
-                            <img
+                            <img :src="item.linkImage" :alt="item.name" />
-                                :src="apiBase + service.image"
-                                :alt="service.title"
-                            />
                         </div>
                         <div class="card-content">
-                            <h3 class="card-title">{{ service.title }}</h3>
+                            <h3 class="card-title">{{ item.name }}</h3>
                             <div class="card-actions">
                                 <button
                                     class="btn btn-primary"
-                                    @click="handleDemo(service)"
+                                    @click="handleDemo(item)"
                                 >
                                     访问演示
                                 </button>
                                 <button
                                     class="btn btn-outline"
-                                    @click="handleDetail(service)"
+                                    @click="handleDetail(item)"
                                 >
                                     查看详情
                                 </button>
@@ -57,6 +54,7 @@
 </template>
 
 <script>
+import { getProductCenterListAPI } from '@/api/publicService/productCenter'
 export default {
     name: 'ProductCenter',
     data() {
@@ -152,32 +150,34 @@ export default {
                     description: '应急响应智能化中心',
                 },
             ],
+
+            productListAll: [], // 所有产品列表
         }
     },
     computed: {
         filteredServices() {
-            let filtered = this.services
+            // let filtered = this.services
-
+            // // 按分类筛选
-            // 按分类筛选
+            // if (this.activeCategory !== 'all') {
-            if (this.activeCategory !== 'all') {
+            //     filtered = filtered.filter(
-                filtered = filtered.filter(
+            //         (service) => service.category === this.activeCategory,
-                    (service) => service.category === this.activeCategory,
+            //     )
-                )
+            // }
-            }
+            // // 按搜索关键词筛选
-
+            // if (this.searchKeyword.trim()) {
-            // 按搜索关键词筛选
+            //     const keyword = this.searchKeyword.toLowerCase()
-            if (this.searchKeyword.trim()) {
+            //     filtered = filtered.filter(
-                const keyword = this.searchKeyword.toLowerCase()
+            //         (service) =>
-                filtered = filtered.filter(
+            //             service.title.toLowerCase().includes(keyword) ||
-                    (service) =>
+            //             service.description.toLowerCase().includes(keyword),
-                        service.title.toLowerCase().includes(keyword) ||
+            //     )
-                        service.description.toLowerCase().includes(keyword),
+            // }
-                )
+            // return filtered
-            }
-
-            return filtered
         },
     },
+    created() {
+        this.getProductCenterListInScreenFun()
+    },
     methods: {
         handleNavChange(navKey) {
             this.activeNav = navKey
@@ -185,9 +185,7 @@ export default {
         },
 
         handleDemo(service) {
-            console.log('访问演示:', service.title)
+            window.open(service.link, '_blank')
-            // 这里可以跳转到演示页面
-            this.$message.success(`正在打开 ${service.title} 演示`)
         },
         // 在 index.vue 中的 handleDetail 方法
         handleDetail(service) {
@@ -208,6 +206,15 @@ export default {
         handleCardLeave() {
             this.hoveredCard = null
         },
+
+        // 获取产品列表
+        async getProductCenterListInScreenFun() {
+            const res = await getProductCenterListAPI({})
+
+            console.log(res, 'res')
+            this.productListAll = res.data
+            // this.services = res.data
+        },
     },
 }
 </script>
@@ -343,7 +350,10 @@ export default {
 }
 
 .category-item.active {
-    background-color: #4a90e2;
+    // background-color: #4a90e2;
+    background: url('../../../assets/images/publicService/btn-sel.png')
+        no-repeat center center;
+    background-size: 100% 100%;
     color: white;
 }
 
@@ -385,7 +395,7 @@ export default {
 .card-image img {
     width: 100%;
     height: 100%;
-    object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
+    // object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
     transition: transform 0.3s ease;
 }