From ad83188c6ff8b697abda2bd3a648df7d7d3d47df Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 11 Sep 2025 16:29:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=8E=A5=E5=8F=A3=E5=8A=A0?=
 =?UTF-8?q?=E5=AF=86=20=E4=BA=A7=E5=93=81=E4=B8=AD=E5=BF=83=E7=AD=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |    1 +
 src/api/login.js                              |   92 +-
 src/api/publicService/productCenter.js        |   10 +-
 src/components/ImagePreview/index.vue         |    4 +-
 src/plugins/modal.js                          |  158 +--
 src/store/modules/user.js                     |  261 ++--
 src/utils/configure.js                        |   23 +
 src/utils/sm.js                               |   50 +
 .../components/addAndEditForm.vue             |   12 +-
 src/views/login.vue                           |   42 +-
 .../components/card-container.vue             |  134 ++
 .../components/case-container.vue             |  141 +++
 .../publicService/productCenter/index.vue     |  267 ++--
 .../productCenter/product-detail-old.vue      | 1113 +++++++++++++++++
 .../productCenter/product-detail.vue          |  214 +---
 15 files changed, 1967 insertions(+), 555 deletions(-)
 create mode 100644 src/utils/configure.js
 create mode 100644 src/utils/sm.js
 create mode 100644 src/views/publicService/productCenter/components/card-container.vue
 create mode 100644 src/views/publicService/productCenter/components/case-container.vue
 create mode 100644 src/views/publicService/productCenter/product-detail-old.vue

diff --git a/package.json b/package.json
index f0981b9..95e7d54 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "nprogress": "0.2.0",
     "quill": "2.0.2",
     "screenfull": "5.0.2",
+    "sm-crypto": "^0.3.13",
     "sortablejs": "1.10.2",
     "splitpanes": "2.4.1",
     "vue": "2.6.12",
diff --git a/src/api/login.js b/src/api/login.js
index 7b7388f..6a29d3b 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -1,60 +1,70 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
-  const data = {
-    username,
-    password,
-    code,
-    uuid
-  }
-  return request({
-    url: '/login',
-    headers: {
-      isToken: false,
-      repeatSubmit: false
-    },
-    method: 'post',
-    data: data
-  })
+export function login(username, password, code, uuid, loginType) {
+    const data = {
+        username,
+        password,
+        code,
+        uuid,
+        loginType,
+    }
+    return request({
+        url: '/login',
+        headers: {
+            isToken: false,
+            repeatSubmit: false,
+        },
+        method: 'post',
+        data: data,
+    })
 }
 
 // 注册方法
 export function register(data) {
-  return request({
-    url: '/register',
-    headers: {
-      isToken: false
-    },
-    method: 'post',
-    data: data
-  })
+    return request({
+        url: '/register',
+        headers: {
+            isToken: false,
+        },
+        method: 'post',
+        data: data,
+    })
 }
 
 // 获取用户详细信息
 export function getInfo() {
-  return request({
-    url: '/getInfo',
-    method: 'get'
-  })
+    return request({
+        url: '/getInfo',
+        method: 'get',
+    })
 }
 
 // 退出方法
 export function logout() {
-  return request({
-    url: '/logout',
-    method: 'post'
-  })
+    return request({
+        url: '/logout',
+        method: 'post',
+    })
 }
 
 // 获取验证码
 export function getCodeImg() {
-  return request({
-    url: '/captchaImage',
-    headers: {
-      isToken: false
-    },
-    method: 'get',
-    timeout: 20000
-  })
-}
\ No newline at end of file
+    return request({
+        url: '/captchaImage',
+        headers: {
+            isToken: false,
+        },
+        method: 'get',
+        timeout: 20000,
+    })
+}
+
+// 获取短信验证码
+export function getPhoneCodeApi(data) {
+    return request({
+        url: '/sendPhone',
+        method: 'POST',
+        data,
+    })
+}
diff --git a/src/api/publicService/productCenter.js b/src/api/publicService/productCenter.js
index 1331a31..890c977 100644
--- a/src/api/publicService/productCenter.js
+++ b/src/api/publicService/productCenter.js
@@ -1,5 +1,4 @@
 import request from '@/utils/request'
-import request_formdata from '@/utils/request_formdata'
 
 // 查询产品中心列表
 export function getProductCenterListAPI(data) {
@@ -9,3 +8,12 @@ export function getProductCenterListAPI(data) {
         data,
     })
 }
+
+// 查询产品中心详情
+export function getProductCenterDetailAPI(data) {
+    return request({
+        url: '/product/screen/getProductDetails',
+        method: 'POST',
+        data,
+    })
+}
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index fdc0d60..c9892dd 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -81,9 +81,9 @@ export default {
 
 <style lang="scss" scoped>
 .el-image {
-    border-radius: 5px;
+    // border-radius: 5px;
     background-color: #ebeef5;
-    box-shadow: 0 0 5px 1px #ccc;
+    // box-shadow: 0 0 5px 1px #ccc;
     ::v-deep .el-image__inner {
         transition: all 0.3s;
         cursor: pointer;
diff --git a/src/plugins/modal.js b/src/plugins/modal.js
index 92bc1ef..eb24159 100644
--- a/src/plugins/modal.js
+++ b/src/plugins/modal.js
@@ -3,81 +3,85 @@ import { Message, MessageBox, Notification, Loading } from 'element-ui'
 let loadingInstance
 
 export default {
-  // 消息提示
-  msg(content) {
-    Message.info(content)
-  },
-  // 错误消息
-  msgError(content) {
-    Message.error(content)
-  },
-  // 成功消息
-  msgSuccess(content) {
-    Message.success(content)
-  },
-  // 警告消息
-  msgWarning(content) {
-    Message.warning(content)
-  },
-  // 弹出提示
-  alert(content) {
-    MessageBox.alert(content, "系统提示")
-  },
-  // 错误提示
-  alertError(content) {
-    MessageBox.alert(content, "系统提示", { type: 'error' })
-  },
-  // 成功提示
-  alertSuccess(content) {
-    MessageBox.alert(content, "系统提示", { type: 'success' })
-  },
-  // 警告提示
-  alertWarning(content) {
-    MessageBox.alert(content, "系统提示", { type: 'warning' })
-  },
-  // 通知提示
-  notify(content) {
-    Notification.info(content)
-  },
-  // 错误通知
-  notifyError(content) {
-    Notification.error(content)
-  },
-  // 成功通知
-  notifySuccess(content) {
-    Notification.success(content)
-  },
-  // 警告通知
-  notifyWarning(content) {
-    Notification.warning(content)
-  },
-  // 确认窗体
-  confirm(content) {
-    return MessageBox.confirm(content, "系统提示", {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: "warning",
-    })
-  },
-  // 提交内容
-  prompt(content) {
-    return MessageBox.prompt(content, "系统提示", {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: "warning",
-    })
-  },
-  // 打开遮罩层
-  loading(content) {
-    loadingInstance = Loading.service({
-      lock: true,
-      text: content,
-      spinner: "el-icon-loading",
-      background: "rgba(0, 0, 0, 0.7)",
-    })
-  },
-  // 关闭遮罩层
-  closeLoading() {
-    loadingInstance.close()
-  }
+    // 消息提示
+    msg(content) {
+        Message.closeAll()
+        Message.info(content)
+    },
+    // 错误消息
+    msgError(content) {
+        Message.closeAll()
+        Message.error(content)
+    },
+    // 成功消息
+    msgSuccess(content) {
+        Message.closeAll()
+        Message.success(content)
+    },
+    // 警告消息
+    msgWarning(content) {
+        Message.closeAll()
+        Message.warning(content)
+    },
+    // 弹出提示
+    alert(content) {
+        MessageBox.alert(content, '系统提示')
+    },
+    // 错误提示
+    alertError(content) {
+        MessageBox.alert(content, '系统提示', { type: 'error' })
+    },
+    // 成功提示
+    alertSuccess(content) {
+        MessageBox.alert(content, '系统提示', { type: 'success' })
+    },
+    // 警告提示
+    alertWarning(content) {
+        MessageBox.alert(content, '系统提示', { type: 'warning' })
+    },
+    // 通知提示
+    notify(content) {
+        Notification.info(content)
+    },
+    // 错误通知
+    notifyError(content) {
+        Notification.error(content)
+    },
+    // 成功通知
+    notifySuccess(content) {
+        Notification.success(content)
+    },
+    // 警告通知
+    notifyWarning(content) {
+        Notification.warning(content)
+    },
+    // 确认窗体
+    confirm(content) {
+        return MessageBox.confirm(content, '系统提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        })
+    },
+    // 提交内容
+    prompt(content) {
+        return MessageBox.prompt(content, '系统提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        })
+    },
+    // 打开遮罩层
+    loading(content) {
+        loadingInstance = Loading.service({
+            lock: true,
+            text: content,
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)',
+        })
+    },
+    // 关闭遮罩层
+    closeLoading() {
+        loadingInstance.close()
+    },
 }
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 6a7b710..b4e10f5 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,125 +1,164 @@
 import router from '@/router'
-import { MessageBox, } from 'element-ui'
+import { MessageBox } from 'element-ui'
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
-import { isHttp, isEmpty } from "@/utils/validate"
+import { isHttp, isEmpty } from '@/utils/validate'
 import defAva from '@/assets/images/profile.jpg'
+import { encryptWithSM4 } from '@/utils/sm'
 
 const user = {
-  state: {
-    token: getToken(),
-    id: '',
-    name: '',
-    nickName: '',
-    avatar: '',
-    roles: [],
-    permissions: []
-  },
-
-  mutations: {
-    SET_TOKEN: (state, token) => {
-      state.token = token
-    },
-    SET_ID: (state, id) => {
-      state.id = id
-    },
-    SET_NAME: (state, name) => {
-      state.name = name
-    },
-    SET_NICK_NAME: (state, nickName) => {
-      state.nickName = nickName
-    },
-    SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
-    },
-    SET_ROLES: (state, roles) => {
-      state.roles = roles
-    },
-    SET_PERMISSIONS: (state, permissions) => {
-      state.permissions = permissions
-    }
-  },
-
-  actions: {
-    // 登录
-    Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
-      const password = userInfo.password
-      const code = userInfo.code
-      const uuid = userInfo.uuid
-      return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
-          setToken(res.token)
-          commit('SET_TOKEN', res.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
+    state: {
+        token: getToken(),
+        id: '',
+        name: '',
+        nickName: '',
+        avatar: '',
+        roles: [],
+        permissions: [],
     },
 
-    // 获取用户信息
-    GetInfo({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        getInfo().then(res => {
-          const user = res.user
-          let avatar = user.avatar || ""
-          if (!isHttp(avatar)) {
-            avatar = (isEmpty(avatar)) ? defAva : process.env.VUE_APP_BASE_API + avatar
-          }
-          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', res.roles)
-            commit('SET_PERMISSIONS', res.permissions)
-          } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
-          }
-          commit('SET_ID', user.userId)
-          commit('SET_NAME', user.userName)
-          commit('SET_NICK_NAME', user.nickName)
-          commit('SET_AVATAR', avatar)
-          /* 初始密码提示 */
-          if(res.isDefaultModifyPwd) {
-            MessageBox.confirm('您的密码还是初始密码，请修改密码！',  '安全提示', {  confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning' }).then(() => {
-              router.push({ name: 'Profile', params: { activeTab: 'resetPwd' } })
-            }).catch(() => {})
-          }
-          /* 过期密码提示 */
-          if(!res.isDefaultModifyPwd && res.isPasswordExpired) {
-            MessageBox.confirm('您的密码已过期，请尽快修改密码！',  '安全提示', {  confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning' }).then(() => {
-              router.push({ name: 'Profile', params: { activeTab: 'resetPwd' } })
-            }).catch(() => {})
-          }
-          resolve(res)
-        }).catch(error => {
-          reject(error)
-        })
-      })
+    mutations: {
+        SET_TOKEN: (state, token) => {
+            state.token = token
+        },
+        SET_ID: (state, id) => {
+            state.id = id
+        },
+        SET_NAME: (state, name) => {
+            state.name = name
+        },
+        SET_NICK_NAME: (state, nickName) => {
+            state.nickName = nickName
+        },
+        SET_AVATAR: (state, avatar) => {
+            state.avatar = avatar
+        },
+        SET_ROLES: (state, roles) => {
+            state.roles = roles
+        },
+        SET_PERMISSIONS: (state, permissions) => {
+            state.permissions = permissions
+        },
     },
 
-    // 退出系统
-    LogOut({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          commit('SET_PERMISSIONS', [])
-          removeToken()
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
+    actions: {
+        // 登录
+        Login({ commit }, userInfo) {
+            const username = encryptWithSM4(userInfo.username.trim())
+            const password = encryptWithSM4(userInfo.password)
+            const code = userInfo.code
+            const uuid = userInfo.uuid
+            const loginType = userInfo.loginType
 
-    // 前端 登出
-    FedLogOut({ commit }) {
-      return new Promise(resolve => {
-        commit('SET_TOKEN', '')
-        removeToken()
-        resolve()
-      })
-    }
-  }
+            console.log(userInfo, 'userInfo')
+            return new Promise((resolve, reject) => {
+                login(username, password, code, uuid, loginType)
+                    .then((res) => {
+                        setToken(res.token)
+                        commit('SET_TOKEN', res.token)
+                        resolve()
+                    })
+                    .catch((error) => {
+                        reject(error)
+                    })
+            })
+        },
+
+        // 获取用户信息
+        GetInfo({ commit, state }) {
+            return new Promise((resolve, reject) => {
+                getInfo()
+                    .then((res) => {
+                        const user = res.user
+                        let avatar = user.avatar || ''
+                        if (!isHttp(avatar)) {
+                            avatar = isEmpty(avatar)
+                                ? defAva
+                                : process.env.VUE_APP_BASE_API + avatar
+                        }
+                        if (res.roles && res.roles.length > 0) {
+                            // 验证返回的roles是否是一个非空数组
+                            commit('SET_ROLES', res.roles)
+                            commit('SET_PERMISSIONS', res.permissions)
+                        } else {
+                            commit('SET_ROLES', ['ROLE_DEFAULT'])
+                        }
+                        commit('SET_ID', user.userId)
+                        commit('SET_NAME', user.userName)
+                        commit('SET_NICK_NAME', user.nickName)
+                        commit('SET_AVATAR', avatar)
+                        /* 初始密码提示 */
+                        if (res.isDefaultModifyPwd) {
+                            MessageBox.confirm(
+                                '您的密码还是初始密码，请修改密码！',
+                                '安全提示',
+                                {
+                                    confirmButtonText: '确定',
+                                    cancelButtonText: '取消',
+                                    type: 'warning',
+                                },
+                            )
+                                .then(() => {
+                                    router.push({
+                                        name: 'Profile',
+                                        params: { activeTab: 'resetPwd' },
+                                    })
+                                })
+                                .catch(() => {})
+                        }
+                        /* 过期密码提示 */
+                        if (!res.isDefaultModifyPwd && res.isPasswordExpired) {
+                            MessageBox.confirm(
+                                '您的密码已过期，请尽快修改密码！',
+                                '安全提示',
+                                {
+                                    confirmButtonText: '确定',
+                                    cancelButtonText: '取消',
+                                    type: 'warning',
+                                },
+                            )
+                                .then(() => {
+                                    router.push({
+                                        name: 'Profile',
+                                        params: { activeTab: 'resetPwd' },
+                                    })
+                                })
+                                .catch(() => {})
+                        }
+                        resolve(res)
+                    })
+                    .catch((error) => {
+                        reject(error)
+                    })
+            })
+        },
+
+        // 退出系统
+        LogOut({ commit, state }) {
+            return new Promise((resolve, reject) => {
+                logout(state.token)
+                    .then(() => {
+                        commit('SET_TOKEN', '')
+                        commit('SET_ROLES', [])
+                        commit('SET_PERMISSIONS', [])
+                        removeToken()
+                        resolve()
+                    })
+                    .catch((error) => {
+                        reject(error)
+                    })
+            })
+        },
+
+        // 前端 登出
+        FedLogOut({ commit }) {
+            return new Promise((resolve) => {
+                commit('SET_TOKEN', '')
+                removeToken()
+                resolve()
+            })
+        },
+    },
 }
 
 export default user
diff --git a/src/utils/configure.js b/src/utils/configure.js
new file mode 100644
index 0000000..6e26ee8
--- /dev/null
+++ b/src/utils/configure.js
@@ -0,0 +1,23 @@
+// SM 配置
+export const SM_CONFIG = {
+  SALT: '2cc0c5f9f1749f1632efa9f63e902323', // SM3 盐值（16 字节）
+  SM4_KEY:"78d1295afa99449b99d6f83820e6965c",     // SM4 对称加密密钥
+  SM4_SALT:"f555adf6c01d0ab0761e626a2dae34a2",
+  SM2_PUBLIC_KEY: 'your-public-key',   // SM2 公钥
+  SM2_PRIVATE_KEY: 'your-private-key'  // SM2 私钥
+}
+// AES 配置
+export const AES_CONFIG = {
+  AES_KEY: 'zhgd@bonus@zhgd@bonus@1234567890', // AES key值
+  AES_IV: '1234567812345678' // AES 偏移量
+}
+
+export function generateUUID() {
+  // 使用当前时间戳和随机数生成一个 UUID
+  return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0; // 生成随机数
+    const v = c === 'x' ? r : (r & 0x3 | 0x8); // 根据 UUID 规范生成相应的值
+    return v.toString(16); // 转换为十六进制
+  });
+}
+
diff --git a/src/utils/sm.js b/src/utils/sm.js
new file mode 100644
index 0000000..8ed7008
--- /dev/null
+++ b/src/utils/sm.js
@@ -0,0 +1,50 @@
+// src/utils/encryption.js
+import { sm2, sm3, sm4 } from 'sm-crypto'
+// 配置项，例如盐值、SM2 公私钥、SM4 密钥
+import { SM_CONFIG } from './configure'
+import SM4 from 'sm-crypto/src/sm4'
+import { hexToArray } from 'sm-crypto/src/sm2/utils'
+
+// SM3 哈希
+export function hashSM3(text) {
+  // 对数据进行哈希计算
+  return sm3(text)
+}
+
+// 使用 SM3 进行哈希并加入盐值
+export function hashWithSM3AndSalt(text) {
+  // 将文本和盐值拼接在一起
+  const textWithSalt = SM_CONFIG.SALT + text
+  // 使用 SM3 进行哈希
+  return hashSM3(textWithSalt)
+}
+
+// SM2 加密
+export function encryptWithSM2(text) {
+  // SM2 公钥加密
+  return sm2.doEncrypt(text, SM_CONFIG.SM2_PUBLIC_KEY)
+}
+
+// SM2 解密
+export function decryptWithSM2(encryptedText) {
+  // SM2 私钥解密
+  return sm2.doDecrypt(encryptedText, SM_CONFIG.SM2_PRIVATE_KEY)
+}
+/**
+ * 加密函数
+ * @param {string} plainText
+ * @returns {string} 加密后的密文（Hex 编码格式）
+ */
+export function encryptWithSM4(plainText) {
+  return sm4.encrypt(plainText, SM_CONFIG.SM4_KEY,{ mode: 'cbc', padding: 'pkcs#5',iv:SM_CONFIG.SM4_SALT});
+}
+
+/**
+ * 解密函数
+ * @param {string} cipherText
+ * @returns {string} 解密后的明文
+ */
+export function decryptWithSM4(cipherText){
+  return SM4.decrypt(cipherText, SM_CONFIG.SM4_KEY,{ mode: 'cbc', padding: 'pkcs#5' ,iv:SM_CONFIG.SM4_SALT});
+}
+
diff --git a/src/views/dataManage/product-center/components/addAndEditForm.vue b/src/views/dataManage/product-center/components/addAndEditForm.vue
index 9952981..300af2d 100644
--- a/src/views/dataManage/product-center/components/addAndEditForm.vue
+++ b/src/views/dataManage/product-center/components/addAndEditForm.vue
@@ -338,12 +338,12 @@ export default {
         handleCancel() {
             // 重置基本信息表单
             this.$refs.addAndEditForm?.resetFields()
-            // 重置所有案例表单
-            this.editableTabs.forEach((tab) => {
-                this.$refs[`caseForm_${tab.name}`]?.resetFields()
-            })
-            // 回到第一个Tab
-            this.currentTab = '1'
+            // // 重置所有案例表单
+            // this.editableTabs.forEach((tab) => {
+            //     this.$refs[`caseForm_${tab.name}`]?.resetFields()
+            // })
+            // // 回到第一个Tab
+            // this.currentTab = '1'
 
             this.$emit('closeDialog', false)
         },
diff --git a/src/views/login.vue b/src/views/login.vue
index 3caae74..9cf4844 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -19,21 +19,15 @@
                 <!-- 登录方式切换 -->
                 <div class="login-type-switch">
                     <span
-                        :class="[
-                            'switch-item',
-                            { active: loginType === 'password' },
-                        ]"
-                        @click="switchLoginType('password')"
+                        :class="['switch-item', { active: loginType === 1 }]"
+                        @click="switchLoginType(1)"
                     >
                         密码登录
                     </span>
                     <span class="divider">|</span>
                     <span
-                        :class="[
-                            'switch-item',
-                            { active: loginType === 'sms' },
-                        ]"
-                        @click="switchLoginType('sms')"
+                        :class="['switch-item', { active: loginType === 2 }]"
+                        @click="switchLoginType(2)"
                     >
                         验证码登录
                     </span>
@@ -47,7 +41,7 @@
                     class="login-form"
                 >
                     <!-- 密码登录表单 -->
-                    <template v-if="loginType === 'password'">
+                    <template v-if="loginType === 1">
                         <el-form-item prop="username">
                             <el-input
                                 v-model="loginForm.username"
@@ -178,6 +172,8 @@
 import { getCodeImg } from '@/api/login'
 import Cookies from 'js-cookie'
 import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { getPhoneCodeApi } from '@/api/login'
+import { encryptWithSM4 } from '@/utils/sm'
 
 export default {
     name: 'Login',
@@ -185,7 +181,7 @@ export default {
         return {
             title: process.env.VUE_APP_TITLE,
             codeUrl: '',
-            loginType: 'password', // 登录类型：password 或 sms
+            // loginType: 'password', // 登录类型：password 或 sms
             loginForm: {
                 username: 'admin',
                 password: 'admin123',
@@ -245,6 +241,7 @@ export default {
             redirect: undefined,
             // 短信验证码倒计时
             smsCountdown: 0,
+            loginType: 1,
         }
     },
     watch: {
@@ -269,8 +266,10 @@ export default {
             })
         },
         // 发送短信验证码
-        sendSmsCode() {
+        async sendSmsCode() {
             this.$message.closeAll()
+
+            if (this.smsCountdown > 0) return
             if (!this.loginForm.mobile) {
                 this.$message.warning('请先输入手机号')
                 return
@@ -282,12 +281,18 @@ export default {
 
             // 这里应该调用发送短信验证码的API
             // 模拟发送成功
+
+            // console.log(this.loginForm.mobile, 'encryptWithSM4')
+            const res = await getPhoneCodeApi({
+                username: encryptWithSM4(this.loginForm.mobile),
+            })
+
             this.$message.success('验证码已发送')
             this.startCountdown()
         },
         // 开始倒计时
         startCountdown() {
-            this.smsCountdown = 60
+            this.smsCountdown = 120
             const timer = setInterval(() => {
                 this.smsCountdown--
                 if (this.smsCountdown <= 0) {
@@ -326,7 +331,7 @@ export default {
                     this.loading = true
 
                     // 根据登录类型处理不同的登录逻辑
-                    if (this.loginType === 'password') {
+                    if (this.loginType === 1) {
                         // 密码登录逻辑
                         if (this.loginForm.rememberMe) {
                             Cookies.set('username', this.loginForm.username, {
@@ -349,6 +354,7 @@ export default {
                             Cookies.remove('password')
                             Cookies.remove('rememberMe')
                         }
+                        this.loginForm.loginType = 1
                     } else {
                         // 短信验证码登录逻辑
                         // 这里可以添加短信验证码登录的特殊处理
@@ -357,6 +363,10 @@ export default {
                             this.loginForm.mobile,
                             this.loginForm.smsCode,
                         )
+
+                        this.loginForm.loginType = 2
+                        this.loginForm.code = this.loginForm.smsCode
+                        this.loginForm.username = this.loginForm.mobile
                     }
 
                     // 调用登录接口
@@ -364,7 +374,7 @@ export default {
                         .dispatch('Login', this.loginForm)
                         .then(() => {
                             this.$router
-                                .push({ path: this.redirect || '/' })
+                                .push({ path: '/index_1' })
                                 .catch(() => {})
                         })
                         .catch(() => {
diff --git a/src/views/publicService/productCenter/components/card-container.vue b/src/views/publicService/productCenter/components/card-container.vue
new file mode 100644
index 0000000..cc1511e
--- /dev/null
+++ b/src/views/publicService/productCenter/components/card-container.vue
@@ -0,0 +1,134 @@
+<template>
+    <!-- 产品卡片 -->
+    <div class="card-container">
+        <div class="card-header">
+            <span> {{ cardTitle }} </span>
+            <span> 查看更多 </span>
+        </div>
+
+        <div class="card-list" ref="cardList">
+            <div class="card-item" v-for="item in cardList" :key="item.id">
+                <div class="card-item-image" ref="cardItemImage">
+                    <ImagePreview
+                        :height="160"
+                        :src1="item.url"
+                        :width="itemWidth"
+                    />
+                </div>
+                <div class="card-item-text">
+                    {{ item.name }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CardItem',
+    props: {
+        // 卡片标题
+        cardTitle: {
+            type: String,
+            default: '',
+        },
+        // 卡片列表
+        cardList: {
+            type: Array,
+            default: [],
+        },
+    },
+    data() {
+        return {
+            itemWidth: 100,
+        }
+    },
+
+    mounted() {
+        this.getItemWidth()
+    },
+    methods: {
+        //  动态获取 itemWidth
+        getItemWidth() {
+            this.itemWidth = (this.$refs.cardList.clientWidth - 260) / 4
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.card-container {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+
+    & span:first-child {
+        font-weight: bold;
+        font-size: 18px;
+        color: #333333;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        font-family: 'PingFang SC', sans-serif;
+        letter-spacing: 1px;
+    }
+
+    & span:last-child {
+        font-size: 16px;
+        background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        cursor: pointer;
+        letter-spacing: 1px;
+        font-family: 'PingFang SC', sans-serif;
+    }
+}
+
+.card-list {
+    width: 100%;
+    padding: 0 10px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 60px;
+
+    .card-item {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: 8px;
+        background: #ffffff;
+        box-shadow: 0px 0px 6px 0px rgba(0, 55, 202, 0.2);
+        border-radius: 8px;
+        overflow: hidden;
+        cursor: pointer;
+        background: white;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+        .card-item-image {
+            width: 100%;
+        }
+
+        .card-item-text {
+            padding: 10px;
+            font-size: 14px;
+            color: #000;
+            font-weight: 400;
+            font-family: 'PingFang SC', sans-serif;
+            letter-spacing: 1px;
+            text-align: left;
+            text-transform: none;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+</style>
diff --git a/src/views/publicService/productCenter/components/case-container.vue b/src/views/publicService/productCenter/components/case-container.vue
new file mode 100644
index 0000000..02285da
--- /dev/null
+++ b/src/views/publicService/productCenter/components/case-container.vue
@@ -0,0 +1,141 @@
+<template>
+    <!-- 产品案例 -->
+    <div class="case-container">
+        <div class="case-header">
+            <span> {{ cardTitle }} </span>
+            <span> 查看更多 </span>
+        </div>
+
+        <div class="case-list" v-for="item in cardList" :key="item.id">
+            <div class="case-left-img">
+                <ImagePreview
+                    :height="160"
+                    :width="320"
+                    :src1="item.imageList[0].url"
+                />
+            </div>
+
+            <div class="case-right-content">
+                <h3>{{ item.caseCompany }}</h3>
+                <div>{{ item.caseIntroduction }} </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CaseContainer',
+    props: {
+        cardTitle: {
+            type: String,
+            default: '',
+        },
+
+        cardList: {
+            type: Array,
+            default: [],
+        },
+    },
+    data() {
+        return {
+            itemWidth: 100,
+        }
+    },
+
+    mounted() {
+        this.getItemWidth()
+    },
+    methods: {
+        //  动态获取 itemWidth
+        getItemWidth() {
+            this.itemWidth = this.$refs.cardItemImage[0].clientWidth
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.case-container {
+    width: 100%;
+    padding-bottom: 20px;
+    font-family: 'PingFang SC', sans-serif;
+    letter-spacing: 1px;
+    text-align: left;
+    text-transform: none;
+}
+
+.case-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+
+    & span:first-child {
+        font-weight: bold;
+        font-size: 18px;
+        color: #333333;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        font-family: 'PingFang SC', sans-serif;
+        letter-spacing: 1px;
+    }
+
+    & span:last-child {
+        font-size: 16px;
+        background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        cursor: pointer;
+        letter-spacing: 1px;
+        font-family: 'PingFang SC', sans-serif;
+    }
+}
+
+.case-list {
+    width: 100%;
+    padding: 0 10px;
+    display: flex;
+}
+
+.case-left-img {
+    box-sizing: border-box;
+}
+
+.case-right-content {
+    flex: 1;
+    height: 160px;
+    padding-left: 36px;
+    background-color: #f0f0f0;
+
+    h3 {
+        padding: 0;
+        margin: 0;
+    }
+
+    h3 {
+        padding-top: 36px;
+        height: 70px;
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+    }
+    div {
+        height: 90px;
+        font-size: 14px;
+        color: #333333;
+        line-height: 1.8;
+
+        // 多行文本截断：最多显示两行
+        display: -webkit-box;
+        -webkit-line-clamp: 2 !important;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        white-space: normal;
+    }
+}
+</style>
diff --git a/src/views/publicService/productCenter/index.vue b/src/views/publicService/productCenter/index.vue
index dc31dbc..3180a04 100644
--- a/src/views/publicService/productCenter/index.vue
+++ b/src/views/publicService/productCenter/index.vue
@@ -6,13 +6,13 @@
             <!-- 左侧分类菜单 -->
             <div class="sidebar">
                 <div
-                    :key="category.key"
+                    :key="item.value"
                     class="category-item"
-                    v-for="category in categories"
-                    @click="activeCategory = category.key"
-                    :class="{ active: activeCategory === category.key }"
+                    v-for="item in leftMenuList"
+                    @click="activeTypeValue = item.value"
+                    :class="{ active: activeTypeValue === item.value }"
                 >
-                    {{ category.label }}
+                    {{ item.label }}
                 </div>
             </div>
 
@@ -22,9 +22,7 @@
                     <div
                         :key="item.id"
                         class="service-card"
-                        @mouseleave="handleCardLeave"
-                        v-for="item in productListAll"
-                        @mouseenter="handleCardHover(service.id)"
+                        v-for="item in showProductList"
                     >
                         <div class="card-image">
                             <img :src="item.linkImage" :alt="item.name" />
@@ -33,8 +31,12 @@
                             <h3 class="card-title">{{ item.name }}</h3>
                             <div class="card-actions">
                                 <button
-                                    class="btn btn-primary"
+                                    class="btn"
                                     @click="handleDemo(item)"
+                                    :class="{
+                                        isDisabled: item.isAccess == 0,
+                                        'btn-primary': item.isAccess == 1,
+                                    }"
                                 >
                                     访问演示
                                 </button>
@@ -57,152 +59,91 @@
 import { getProductCenterListAPI } from '@/api/publicService/productCenter'
 export default {
     name: 'ProductCenter',
+    dicts: ['tb_product_type'],
     data() {
         return {
-            activeNav: 'products',
-            activeCategory: 'all',
-            searchKeyword: '',
-            hoveredCard: null,
-            apiBase: process.env.VUE_APP_BASE_API,
-            navItems: [
-                {
-                    key: 'products',
-                    label: '产品中心',
-                    icon: '/img/psp/productCenter/products.png',
-                },
-                {
-                    key: 'components',
-                    label: '公共组件',
-                    icon: '/img/psp/productCenter/components.png',
-                },
-                {
-                    key: 'materials',
-                    label: '宣传物料',
-                    icon: '/img/psp/productCenter/materials.png',
-                },
-                {
-                    key: 'docs',
-                    label: '文档中心',
-                    icon: '/img/psp/productCenter/docs.png',
-                },
-            ],
-            categories: [
-                { key: 'all', label: '全部' },
-                { key: 'smart', label: '智慧基建' },
-                { key: 'system', label: '智慧后勤' },
-                { key: 'safety', label: '数智安监' },
-            ],
-            services: [
-                {
-                    id: 1,
-                    title: '绿智食堂',
-                    image: '/profile/avatar/2025/09/03/001_20250903132300A001.JPG',
-                    category: 'smart',
-                    description: '智能化食堂管理系统',
-                },
-                {
-                    id: 2,
-                    title: '智能机具管理系统',
-                    image: '/placeholder.svg?height=200&width=300',
-                    category: 'system',
-                    description: '设备智能化管理平台',
-                },
-                {
-                    id: 3,
-                    title: '智慧楼宇',
-                    image: '/placeholder.svg?height=200&width=300',
-                    category: 'smart',
-                    description: '楼宇智能化控制系统',
-                },
-                {
-                    id: 4,
-                    title: '产业工人实名制',
-                    image: '/placeholder.svg?height=200&width=300',
-                    category: 'system',
-                    description: '工人身份认证管理',
-                },
-                {
-                    id: 5,
-                    title: '安全质量智慧决策中心',
-                    image: '/placeholder.svg?height=200&width=300',
-                    category: 'safety',
-                    description: '安全质量智能决策平台',
-                },
-                {
-                    id: 6,
-                    title: '智慧工地',
-                    image: '/placeholder.svg?height=200&width=300',
-                    category: 'smart',
-                    description: '工地智能化管理系统',
-                },
-                {
-                    id: 7,
-                    title: 'VR警示教育室',
-                    image: '/placeholder.svg?height=200&width=300',
-                    category: 'safety',
-                    description: 'VR安全教育培训系统',
-                },
-                {
-                    id: 8,
-                    title: '应急智中心建设',
-                    image: '/placeholder.svg?height=200&width=300',
-                    category: 'safety',
-                    description: '应急响应智能化中心',
-                },
-            ],
-
+            activeTypeValue: 'all', // 当前激活的分类
+            leftMenuList: [], // 左侧菜单列表
             productListAll: [], // 所有产品列表
+            showProductList: [], // 需要显示的产品列表
         }
     },
-    computed: {
-        filteredServices() {
-            // let filtered = this.services
-            // // 按分类筛选
-            // if (this.activeCategory !== 'all') {
-            //     filtered = filtered.filter(
-            //         (service) => service.category === this.activeCategory,
-            //     )
-            // }
-            // // 按搜索关键词筛选
-            // if (this.searchKeyword.trim()) {
-            //     const keyword = this.searchKeyword.toLowerCase()
-            //     filtered = filtered.filter(
-            //         (service) =>
-            //             service.title.toLowerCase().includes(keyword) ||
-            //             service.description.toLowerCase().includes(keyword),
-            //     )
-            // }
-            // return filtered
-        },
-    },
+
     created() {
         this.getProductCenterListInScreenFun()
     },
+    mounted() {
+        // 监听字典数据加载完成事件
+        this.$on('dictReady', (dict) => {
+            this.initLeftMenuList()
+        })
+
+        // 如果字典数据已经加载完成，直接初始化
+        if (this.dict && this.dict.type && this.dict.type.tb_product_type) {
+            this.initLeftMenuList()
+        }
+    },
     methods: {
-        handleNavChange(navKey) {
-            this.activeNav = navKey
-            // 可以根据导航项做页面跳转或其他操作
-        },
+        // 初始化左侧菜单列表
+        initLeftMenuList() {
+            try {
+                if (
+                    this.dict &&
+                    this.dict.type &&
+                    this.dict.type.tb_product_type
+                ) {
+                    // 清空现有菜单
+                    this.leftMenuList = [
+                        {
+                            label: '全部',
+                            value: 'all',
+                        },
+                    ]
 
+                    // 添加字典数据到菜单
+                    this.dict.type.tb_product_type.forEach((item) => {
+                        this.leftMenuList.push({
+                            label: item.label,
+                            value: item.value,
+                        })
+                    })
+                }
+            } catch (error) {}
+        },
+        // 访问演示地址
         handleDemo(service) {
-            window.open(service.link, '_blank')
-        },
-        // 在 index.vue 中的 handleDetail 方法
-        handleDetail(service) {
-            // console.log('查看详情:', service.title)
-            // this.$router.push({
-            //     name: 'ProductDetail',
-            //     params: { id: service.id },
-            // })
+            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 },
             })
         },
+        // 鼠标悬浮
         handleCardHover(serviceId) {
             this.hoveredCard = serviceId
         },
+        // 鼠标离开
         handleCardLeave() {
             this.hoveredCard = null
         },
@@ -210,10 +151,21 @@ export default {
         // 获取产品列表
         async getProductCenterListInScreenFun() {
             const res = await getProductCenterListAPI({})
-
-            console.log(res, 'res')
             this.productListAll = res.data
-            // this.services = res.data
+            this.showProductList = this.productListAll
+        },
+    },
+
+    // 监听分类变化
+    watch: {
+        activeTypeValue(newVal) {
+            if (newVal === 'all') {
+                this.showProductList = this.productListAll
+            } else {
+                this.showProductList = this.productListAll.filter(
+                    (item) => item.typeId === newVal,
+                )
+            }
         },
     },
 }
@@ -364,7 +316,7 @@ export default {
 
 .services-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }
 
@@ -427,26 +379,45 @@ export default {
     font-size: 12px;
     cursor: pointer;
     transition: all 0.2s ease;
-    border: 1px solid transparent;
+    border: none;
     flex: 1;
     text-align: center;
 }
 
 .btn-primary {
-    background-color: #4a90e2;
+    // background-color: #4a90e2;
     color: white;
-    border-color: #4a90e2;
+    // border-color: #4a90e2;
+
+    background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
+}
+
+.isDisabled {
+    background-color: #ccc;
+    color: #fff;
+    border-color: #ccc;
+    cursor: not-allowed;
 }
 
 .btn-primary:hover {
-    background-color: #357abd;
-    border-color: #357abd;
+    // background-color: #357abd;
+    // border-color: #357abd;
+    background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
 }
 
 .btn-outline {
     background-color: transparent;
     color: #4a90e2;
-    border-color: #4a90e2;
+    // border-color: #4a90e2;
+
+    // border-image: linear-gradient(
+    //         180deg,
+    //         rgba(0, 199, 239, 1),
+    //         rgba(0, 94, 239, 1)
+    //     )
+    //     1 1;
+
+    border: 1px solid #00c7ef;
 }
 
 .btn-outline:hover {
@@ -475,6 +446,12 @@ export default {
         width: 100%;
     }
 
+    .services-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 480px) {
     .services-grid {
         grid-template-columns: 1fr;
     }
diff --git a/src/views/publicService/productCenter/product-detail-old.vue b/src/views/publicService/productCenter/product-detail-old.vue
new file mode 100644
index 0000000..fa3d81c
--- /dev/null
+++ b/src/views/publicService/productCenter/product-detail-old.vue
@@ -0,0 +1,1113 @@
+<template>
+    <div class="product-detail">
+        <!-- Added breadcrumb navigation with back button -->
+        <div class="breadcrumb">
+            <div class="breadcrumb-nav">
+                <span class="breadcrumb-link">产品中心</span>
+                <span class="breadcrumb-separator">></span>
+                <span class="breadcrumb-current">产品详情</span>
+            </div>
+            <div>
+                <i class="arrow-left-icon">←</i>
+                <button class="btn-edit" @click="goBack">返回</button>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="section product-intro">
+                <div class="intro-content">
+                    <div class="intro-image">
+                        <img :src="productDetail.linkImage" alt="产品介绍" />
+                    </div>
+                    <div class="intro-text">
+                        <div class="intro-header">
+                            <h2>产品介绍</h2>
+                            <button class="btn-primary">访问演示</button>
+                        </div>
+                        <p>
+                            {{ productDetail.introduction }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-header">
+                    <h3>宣传手册</h3>
+                    <a href="#" class="view-more">查看更多</a>
+                </div>
+                <div class="carousel-container">
+                    <!-- <button class="carousel-btn prev" @click="prevBrochure">
+                        <i class="arrow-left"></i>
+                    </button> -->
+                    <div
+                        class="carousel-content"
+                        ref="brochureCarousel"
+                        @mouseenter="pauseBrochureScroll"
+                        @mouseleave="resumeBrochureScroll"
+                    >
+                        <div class="carousel-track" :style="brochureTrackStyle">
+                            <div
+                                v-for="(item, index) in productBrochures"
+                                :key="`brochure-${index}`"
+                                class="carousel-item brochure-item"
+                            >
+                                <div class="item-image">
+                                    <img :src="item.url" :alt="item.name" />
+                                </div>
+                                <p class="item-title">{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- <button class="carousel-btn next" @click="nextBrochure">
+                        <i class="arrow-right"></i>
+                    </button> -->
+                </div>
+            </div>
+
+            <!-- Promotional Videos -->
+            <div class="section">
+                <div class="section-header">
+                    <h3>宣传视频</h3>
+                    <a href="#" class="view-more">查看更多</a>
+                </div>
+                <!-- Updated carousel with infinite loop scrolling -->
+                <div class="carousel-container">
+                    <button class="carousel-btn prev" @click="prevVideo">
+                        <i class="arrow-left"></i>
+                    </button>
+                    <div
+                        class="carousel-content"
+                        ref="videoCarousel"
+                        @mouseenter="pauseVideoScroll"
+                        @mouseleave="resumeVideoScroll"
+                    >
+                        <div class="carousel-track" :style="videoTrackStyle">
+                            <div
+                                v-for="(item, index) in displayVideos"
+                                :key="`video-${index}`"
+                                class="carousel-item video-item"
+                                @click="playVideo(item)"
+                            >
+                                <!--                <div class="item-image video-thumbnail">
+                  <img :src="apiBase + item.thumbnail" :alt="item.title" />
+                  <div class="play-overlay">
+                    <div class="play-button">
+                      <i class="play-icon">▶</i>
+                    </div>
+                  </div>
+                </div>-->
+                                <div class="item-image video-thumbnail">
+                                    <video
+                                        :src="apiBase + item.thumbnail"
+                                        :alt="item.title"
+                                        preload="metadata"
+                                        muted
+                                        @error="handleVideoError"
+                                        @loadedmetadata="handleVideoLoaded"
+                                        style="height: 180px; width: 240px"
+                                    >
+                                        <img
+                                            :src="'/placeholder.svg?height=180&width=240'"
+                                            :alt="item.title"
+                                        />
+                                    </video>
+                                    <div class="play-overlay">
+                                        <div class="play-button">
+                                            <i class="play-icon">▶</i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <p class="item-title">{{ item.title }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="carousel-btn next" @click="nextVideo">
+                        <i class="arrow-right"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Product Cases -->
+            <div class="section">
+                <div class="section-header">
+                    <h3>产品案例</h3>
+                    <a href="#" class="view-more" @click.prevent="viewCase">
+                        查看更多
+                    </a>
+                </div>
+                <div class="carousel-container cases-carousel">
+                    <button
+                        class="carousel-btn prev"
+                        @click="prevCase"
+                        :disabled="caseIndex === 0"
+                    >
+                        <i class="arrow-left"></i>
+                    </button>
+                    <div class="carousel-content" ref="caseCarousel">
+                        <div class="carousel-track" :style="caseTrackStyle">
+                            <div
+                                v-for="(item, index) in productCases"
+                                :key="index"
+                                class="case-item"
+                            >
+                                <div class="case-image">
+                                    <img
+                                        :src="item.imageList[0].url"
+                                        :alt="item.caseCompany"
+                                    />
+                                </div>
+                                <div class="case-content">
+                                    <h4>{{ item.caseCompany }}</h4>
+                                    <p>{{ item.caseIntroduction }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button
+                        class="carousel-btn next"
+                        @click="nextCase"
+                        :disabled="caseIndex >= maxCaseIndex"
+                    >
+                        <i class="arrow-right"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// 引入导航栏组件
+import NavBar from '@/views/psp/navBar.vue'
+import { getProductCenterDetailAPI } from '@/api/publicService/productCenter'
+
+export default {
+    name: 'ProductDetail',
+    components: {
+        NavBar,
+    },
+    data() {
+        return {
+            activeNav: 'products',
+            searchKeyword: '',
+            brochureIndex: 0,
+            videoIndex: 0,
+            caseIndex: 0,
+            itemsPerView: 4,
+            autoPlayInterval: null,
+            brochureOffset: 0,
+            videoOffset: 0,
+            brochureAutoInterval: null,
+            videoAutoInterval: null,
+            brochurePaused: false,
+            videoPaused: false,
+            scrollSpeed: 0.5, // pixels per frame
+            apiBase: process.env.VUE_APP_BASE_API,
+            intro: '/profile/avatar/2025/09/03/ldst.png',
+            navItems: [
+                {
+                    key: 'products',
+                    label: '产品中心',
+                    icon: '/img/psp/productCenter/products.png',
+                },
+                {
+                    key: 'components',
+                    label: '公共组件',
+                    icon: '/img/psp/productCenter/components.png',
+                },
+                {
+                    key: 'materials',
+                    label: '宣传物料',
+                    icon: '/img/psp/productCenter/materials.png',
+                },
+                {
+                    key: 'docs',
+                    label: '文档中心',
+                    icon: '/img/psp/productCenter/docs.png',
+                },
+            ],
+            brochures: [
+                {
+                    title: '智慧食堂产品手册1',
+                    image: '/profile/avatar/2025/09/03/ldst.png',
+                },
+                {
+                    title: '智慧食堂产品手册2',
+                    image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg',
+                },
+                {
+                    title: '智慧食堂产品手册3',
+                    image: '/profile/avatar/2025/09/03/ldst.png',
+                },
+                {
+                    title: '智慧食堂产品手册4',
+                    image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg',
+                },
+                {
+                    title: '智慧食堂产品手册5',
+                    image: '/profile/avatar/2025/09/03/ldst.png',
+                },
+                {
+                    title: '智慧食堂产品手册6',
+                    image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg',
+                },
+            ],
+            videos: [
+                {
+                    title: '智慧食堂产品视频1',
+                    thumbnail: '/profile/avatar/2025/09/03/vi1.mp4',
+                },
+                {
+                    title: '智慧食堂产品视频2',
+                    thumbnail: '/profile/avatar/2025/09/03/vi2.mp4',
+                },
+                {
+                    title: '智慧食堂产品视频3',
+                    thumbnail: '/profile/avatar/2025/09/03/vi1.mp4',
+                },
+                {
+                    title: '智慧食堂产品视频4',
+                    thumbnail: '/profile/avatar/2025/09/03/vi2.mp4',
+                },
+                {
+                    title: '智慧食堂产品视频5',
+                    thumbnail: '/profile/avatar/2025/09/03/vi1.mp4',
+                },
+                {
+                    title: '智慧食堂产品视频6',
+                    thumbnail: '/profile/avatar/2025/09/03/vi2.mp4',
+                },
+            ],
+            cases: [
+                {
+                    company: '安徽送变电工程有限公司',
+                    description:
+                        '基于移动互联网(微信、APP)，整合所有数据资源(在线订餐、充值、点评)，由内到外的为学校师生提供便民服务，深度定制餐厅、校本文档精准、适用于智慧食堂数据资源，通过设备、消费设备、自助充值、智慧收银、零售管理、多样化计方式)，致力提升学校整体服务和管理的能力，打造名副其实与时俱进的互联网餐厅。',
+                    image: '/profile/avatar/2025/09/03/ldst.png?height=280&width=400',
+                },
+                {
+                    company: '北京科技大学智慧食堂',
+                    description:
+                        '通过智慧食堂系统的实施，学校食堂管理效率提升了40%，学生满意度达到95%以上，实现了真正的数字化转型，为师生提供更便捷的用餐体验。',
+                    image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg?height=280&width=400',
+                },
+                {
+                    company: '上海交通大学',
+                    description:
+                        '采用先进的人工智能技术，实现了食堂的智能化管理，包括智能点餐、营养分析、库存管理等功能，大大提升了运营效率。',
+                    image: '/profile/avatar/2025/09/03/ldst.png?height=280&width=400',
+                },
+            ],
+            animationFrame: null,
+
+            productDetail: {}, // 产品详情
+            productBrochures: [], // 产品宣传手册
+            productVideos: [], // 产品宣传视频
+            productCases: [], // 产品案例
+        }
+    },
+    created() {
+        // this.productId = this.$route.params.id
+        // console.log('产品ID:', this.productId)
+
+        this.getProductCenterDetailInScreenFun(this.$route.params?.id)
+    },
+    computed: {
+        maxBrochureIndex() {
+            return Math.max(0, this.brochures.length - this.itemsPerView)
+        },
+        maxVideoIndex() {
+            return Math.max(0, this.videos.length - this.itemsPerView)
+        },
+        maxCaseIndex() {
+            return Math.max(0, this.cases.length - 1)
+        },
+        displayBrochures() {
+            return [...this.brochures, ...this.brochures, ...this.brochures]
+        },
+        displayVideos() {
+            return [...this.videos, ...this.videos, ...this.videos]
+        },
+        brochureTrackStyle() {
+            const itemWidth = 280 // approximate width including gap
+            return {
+                transform: `translateX(-${this.brochureOffset}px)`,
+                transition: 'none',
+            }
+        },
+        videoTrackStyle() {
+            const itemWidth = 280 // approximate width including gap
+            return {
+                transform: `translateX(-${this.videoOffset}px)`,
+                transition: 'none',
+            }
+        },
+        caseTrackStyle() {
+            return {
+                transform: `translateX(-${this.caseIndex * 100}%)`,
+            }
+        },
+    },
+    mounted() {
+        this.startAutoPlay()
+        this.startSmoothScroll()
+        this.handleResize()
+        window.addEventListener('resize', this.handleResize)
+    },
+    beforeDestroy() {
+        this.stopAutoPlay()
+        this.stopSmoothScroll()
+        window.removeEventListener('resize', this.handleResize)
+    },
+    methods: {
+        // 获取产品中心详情
+        async getProductCenterDetailInScreenFun(id) {
+            const res = await getProductCenterDetailAPI({ id })
+            console.log(res, 'res详情')
+
+            const {
+                name,
+                list,
+                image,
+                typeId,
+                linkUrl,
+                typeName,
+                linkImage,
+                isAccess,
+                introduction,
+                videoList,
+                fileList,
+            } = res?.data
+
+            this.productDetail = {
+                name,
+                image,
+                typeId,
+                linkUrl,
+                typeName,
+                linkImage,
+                isAccess,
+                introduction,
+            }
+
+            this.productCases = list
+            this.productVideos = videoList
+            this.productBrochures = fileList
+        },
+
+        handleNavChange(navKey) {
+            this.activeNav = navKey
+            // 可以根据导航项做页面跳转或其他操作
+        },
+        goBack() {
+            this.$router.go(-1)
+        },
+
+        prevBrochure() {
+            const containerWidth = this.$refs.brochureCarousel.offsetWidth
+            this.brochureOffset -= containerWidth
+            if (this.brochureOffset < 0) {
+                this.brochureOffset = this.brochures.length * 280
+            }
+        },
+        nextBrochure() {
+            const containerWidth = this.$refs.brochureCarousel.offsetWidth
+            this.brochureOffset += containerWidth
+            const maxOffset = this.brochures.length * 280
+            if (this.brochureOffset >= maxOffset * 2) {
+                this.brochureOffset = maxOffset
+            }
+        },
+        prevVideo() {
+            const containerWidth = this.$refs.videoCarousel.offsetWidth
+            this.videoOffset -= containerWidth
+            if (this.videoOffset < 0) {
+                this.videoOffset = this.videos.length * 280
+            }
+        },
+        nextVideo() {
+            const containerWidth = this.$refs.videoCarousel.offsetWidth
+            this.videoOffset += containerWidth
+            const maxOffset = this.videos.length * 280
+            if (this.videoOffset >= maxOffset * 2) {
+                this.videoOffset = maxOffset
+            }
+        },
+        prevCase() {
+            if (this.caseIndex > 0) {
+                this.caseIndex--
+            }
+        },
+        nextCase() {
+            if (this.caseIndex < this.maxCaseIndex) {
+                this.caseIndex++
+            }
+        },
+        startAutoPlay() {
+            this.autoPlayInterval = setInterval(() => {
+                // Auto-advance cases every 5 seconds
+                if (this.caseIndex < this.maxCaseIndex) {
+                    this.caseIndex++
+                } else {
+                    this.caseIndex = 0
+                }
+            }, 5000)
+        },
+        stopAutoPlay() {
+            if (this.autoPlayInterval) {
+                clearInterval(this.autoPlayInterval)
+                this.autoPlayInterval = null
+            }
+        },
+        startSmoothScroll() {
+            const animate = () => {
+                if (!this.brochurePaused) {
+                    this.brochureOffset += 0.5
+                    const itemWidth = 280
+                    const maxOffset = this.brochures.length * itemWidth
+
+                    if (this.brochureOffset >= maxOffset * 2) {
+                        this.brochureOffset = maxOffset
+                    }
+                }
+
+                if (!this.videoPaused) {
+                    this.videoOffset += 0.5
+                    const itemWidth = 280
+                    const maxOffset = this.videos.length * itemWidth
+
+                    if (this.videoOffset >= maxOffset * 2) {
+                        this.videoOffset = maxOffset
+                    }
+                }
+
+                this.animationFrame = requestAnimationFrame(animate)
+            }
+
+            const itemWidth = 280
+            this.brochureOffset = this.brochures.length * itemWidth
+            this.videoOffset = this.videos.length * itemWidth
+
+            this.animationFrame = requestAnimationFrame(animate)
+        },
+        stopSmoothScroll() {
+            if (this.animationFrame) {
+                cancelAnimationFrame(this.animationFrame)
+                this.animationFrame = null
+            }
+        },
+        pauseBrochureScroll() {
+            this.brochurePaused = true
+        },
+        resumeBrochureScroll() {
+            this.brochurePaused = false
+        },
+        pauseVideoScroll() {
+            this.videoPaused = true
+        },
+        resumeVideoScroll() {
+            this.videoPaused = false
+        },
+        startInfiniteScroll() {},
+        stopInfiniteScroll() {},
+        playVideo(video) {
+            console.log('Playing video:', video.title)
+            // 实现视频播放逻辑
+        },
+        handleVideoError(event) {
+            console.log('[v0] Video loading error:', event.target.src)
+            // 视频加载失败时，可以设置默认缩略图
+            event.target.style.display = 'none'
+            const img = document.createElement('img')
+            img.src = '/placeholder.svg?height=180&width=240'
+            img.alt = 'Video thumbnail'
+            img.style.width = '100%'
+            img.style.height = '100%'
+            img.style.objectFit = 'cover'
+            event.target.parentNode.appendChild(img)
+        },
+
+        handleVideoLoaded(event) {
+            console.log('[v0] Video metadata loaded:', event.target.src)
+            // 视频元数据加载完成，第一帧应该可以显示了
+        },
+
+        viewCase() {
+            // 跳转到产品详情页，传递当前产品ID
+            // this.$router.push(`/product-detail/${this.productId}`);
+            this.$router.push({
+                name: 'ProductCase',
+                params: { id: `${this.productId}` },
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+.product-detail {
+    height: 100%;
+    width: 100%;
+}
+
+/* 顶部导航栏 */
+.header {
+    background-image: url('/img/psp/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;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+}
+
+.logo-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.logo {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+}
+
+.platform-title {
+    color: white;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.header-nav {
+    display: flex;
+    gap: 32px;
+    justify-content: space-between;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    color: rgba(255, 255, 255, 0.8);
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.nav-item:hover,
+.nav-item.active {
+    color: white;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.nav-icon {
+    width: 20px;
+    height: 20px;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.search-box {
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    padding: 6px 12px;
+}
+
+.search-input {
+    background: none;
+    border: none;
+    color: white;
+    outline: none;
+    width: 200px;
+    font-size: 14px;
+}
+
+.search-input::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.search-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+}
+
+.search-btn img {
+    width: 16px;
+    height: 16px;
+    filter: brightness(0) invert(1);
+}
+
+.user-avatar img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+}
+
+/* Enhanced breadcrumb styling with back button */
+.breadcrumb {
+    padding: 16px 24px;
+    background: #f8f9fa;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e8eaec;
+}
+
+.breadcrumb-nav {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.back-button {
+    background: white;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    padding: 8px 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    color: #374151;
+    transition: all 0.2s ease;
+}
+
+.back-button:hover {
+    background: #f3f4f6;
+    border-color: #9ca3af;
+}
+
+.arrow-left-icon {
+    font-size: 20px;
+    font-weight: bold;
+    color: #4a90e2;
+}
+
+.breadcrumb-link {
+    text-decoration: none;
+    font-size: 14px;
+}
+
+.breadcrumb-separator {
+    margin: 0 4px;
+    color: #9ca3af;
+    font-size: 14px;
+}
+
+.breadcrumb-current {
+    color: #374151;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.btn-edit {
+    color: #4a90e2;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    background: transparent;
+}
+
+/* Main Content */
+.main-content {
+    padding: 24px;
+    background: #f8f9fa;
+}
+
+.section {
+    background: white;
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 24px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+    border: 1px solid #e5e7eb;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+}
+
+.section-header h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0;
+}
+
+.view-more {
+    color: #4a90e2;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.view-more:hover {
+    text-decoration: underline;
+}
+
+/* Product Introduction */
+.product-intro {
+    border: none;
+    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.08);
+}
+
+.intro-content {
+    display: flex;
+    gap: 48px;
+    align-items: center;
+    min-height: 320px;
+}
+
+.intro-image {
+    flex: 0 0 400px;
+}
+
+.intro-image img {
+    width: 100%;
+    height: 280px;
+    object-fit: cover;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(74, 144, 226, 0.12);
+}
+
+.intro-text {
+    flex: 1;
+}
+
+.intro-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+}
+
+.intro-text h2 {
+    font-size: 28px;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0;
+}
+
+.intro-text p {
+    color: #4b5563;
+    line-height: 1.8;
+    margin: 0;
+    font-size: 15px;
+}
+
+/* Enhanced button styling */
+.btn-primary {
+    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
+    color: white;
+    border: none;
+    padding: 12px 28px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
+}
+
+/* Enhanced carousel styling for infinite loop */
+.carousel-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.carousel-btn {
+    background: white;
+    border: 2px solid #e5e7eb;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    z-index: 2;
+}
+
+.carousel-btn:hover {
+    background: #4a90e2;
+    border-color: #4a90e2;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
+}
+
+.carousel-btn:hover .arrow-left,
+.carousel-btn:hover .arrow-right {
+    border-color: white;
+}
+
+/* Added arrow icons */
+.arrow-left,
+.arrow-right {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    transition: border-color 0.3s ease;
+}
+
+.arrow-left {
+    border-width: 6px 8px 6px 0;
+    border-color: transparent #6b7280 transparent transparent;
+}
+
+.arrow-right {
+    border-width: 6px 0 6px 8px;
+    border-color: transparent transparent transparent #6b7280;
+}
+
+.carousel-content {
+    flex: 1;
+    overflow: hidden;
+    border-radius: 12px;
+}
+
+.carousel-track {
+    display: flex;
+    gap: 20px;
+    /* Remove transition as we're using smooth animation */
+}
+
+/* Enhanced carousel items */
+.carousel-item {
+    flex: 0 0 260px; /* Fixed width instead of percentage */
+    text-align: center;
+}
+
+.brochure-item .item-image,
+.video-item .item-image {
+    position: relative;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+}
+
+.brochure-item:hover .item-image,
+.video-item:hover .item-image {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.item-image img {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+}
+
+.item-title {
+    font-size: 14px;
+    color: #374151;
+    margin: 16px 0 0 0;
+    font-weight: 500;
+}
+
+/* Enhanced video styling */
+.video-thumbnail {
+    position: relative;
+    cursor: pointer;
+}
+
+.play-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.video-item:hover .play-overlay {
+    opacity: 1;
+}
+
+.play-button {
+    background: rgba(74, 144, 226, 0.9);
+    color: white;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    transition: all 0.3s ease;
+}
+
+.play-button:hover {
+    background: #357abd;
+    transform: scale(1.1);
+}
+
+.play-icon {
+    margin-left: 3px;
+}
+
+/* Enhanced case items */
+.cases-carousel .carousel-track {
+    gap: 0;
+}
+
+.case-item {
+    display: flex;
+    gap: 32px;
+    align-items: center;
+    width: 100%;
+    flex: 0 0 100%;
+    padding: 32px;
+    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+}
+
+.case-image {
+    flex: 0 0 400px;
+}
+
+.case-image img {
+    width: 100%;
+    height: 280px;
+    object-fit: cover;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.case-content {
+    flex: 1;
+    padding-left: 16px;
+}
+
+.case-content h4 {
+    font-size: 22px;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0 0 20px 0;
+}
+
+.case-content p {
+    color: #4b5563;
+    line-height: 1.8;
+    margin: 0;
+    font-size: 15px;
+}
+
+/* Enhanced responsive design */
+@media (max-width: 1024px) {
+    .carousel-item {
+        flex: 0 0 calc(33.333% - 14px);
+    }
+}
+
+@media (max-width: 768px) {
+    .breadcrumb {
+        padding: 12px 16px;
+    }
+
+    .breadcrumb-nav {
+        gap: 8px;
+    }
+
+    .main-content {
+        padding: 16px;
+    }
+
+    .intro-content {
+        flex-direction: column;
+        gap: 24px;
+        text-align: center;
+    }
+
+    .intro-image {
+        flex: none;
+        width: 100%;
+    }
+
+    .intro-header {
+        flex-direction: column;
+        gap: 16px;
+        align-items: center;
+    }
+
+    .carousel-item {
+        flex: 0 0 calc(50% - 10px);
+    }
+
+    .case-item {
+        flex-direction: column;
+        gap: 20px;
+        padding: 24px;
+    }
+
+    .case-image {
+        flex: none;
+        width: 100%;
+    }
+
+    .case-content {
+        padding-left: 0;
+        text-align: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .carousel-container {
+        gap: 12px;
+    }
+
+    .carousel-btn {
+        width: 36px;
+        height: 36px;
+    }
+
+    .carousel-item {
+        flex: 0 0 calc(100% - 0px);
+    }
+}
+</style>
diff --git a/src/views/publicService/productCenter/product-detail.vue b/src/views/publicService/productCenter/product-detail.vue
index a664aa7..1bbfaa4 100644
--- a/src/views/publicService/productCenter/product-detail.vue
+++ b/src/views/publicService/productCenter/product-detail.vue
@@ -17,7 +17,7 @@
             <div class="section product-intro">
                 <div class="intro-content">
                     <div class="intro-image">
-                        <img :src="apiBase + intro" alt="产品介绍" />
+                        <img :src="productDetail.linkImage" alt="产品介绍" />
                     </div>
                     <div class="intro-text">
                         <div class="intro-header">
@@ -25,171 +25,33 @@
                             <button class="btn-primary">访问演示</button>
                         </div>
                         <p>
-                            基于移动互联网(微信、APP)，整合所有数据资源(在线订餐、充值、点评)，由内到外的为学校师生提供便民服务，深度定制餐厅、校
-                            本文档精准、适用于智慧食堂数据资源，通过设备、消费设备、自助充值、智慧收银、零售管理、多样化计
-                            方式)，致力提升学校整体服务和管理的能力，打造名副其实与时俱进的互联网餐厅。
+                            {{ productDetail.introduction }}
                         </p>
                     </div>
                 </div>
             </div>
-
-            <div class="section">
-                <div class="section-header">
-                    <h3>宣传手册</h3>
-                    <a href="#" class="view-more">查看更多</a>
-                </div>
-                <div class="carousel-container">
-                    <button class="carousel-btn prev" @click="prevBrochure">
-                        <i class="arrow-left"></i>
-                    </button>
-                    <div
-                        class="carousel-content"
-                        ref="brochureCarousel"
-                        @mouseenter="pauseBrochureScroll"
-                        @mouseleave="resumeBrochureScroll"
-                    >
-                        <div class="carousel-track" :style="brochureTrackStyle">
-                            <div
-                                v-for="(item, index) in displayBrochures"
-                                :key="`brochure-${index}`"
-                                class="carousel-item brochure-item"
-                            >
-                                <div class="item-image">
-                                    <img
-                                        :src="apiBase + item.image"
-                                        :alt="item.title"
-                                    />
-                                </div>
-                                <p class="item-title">{{ item.title }}</p>
-                            </div>
-                        </div>
-                    </div>
-                    <button class="carousel-btn next" @click="nextBrochure">
-                        <i class="arrow-right"></i>
-                    </button>
-                </div>
-            </div>
-
-            <!-- Promotional Videos -->
-            <div class="section">
-                <div class="section-header">
-                    <h3>宣传视频</h3>
-                    <a href="#" class="view-more">查看更多</a>
-                </div>
-                <!-- Updated carousel with infinite loop scrolling -->
-                <div class="carousel-container">
-                    <button class="carousel-btn prev" @click="prevVideo">
-                        <i class="arrow-left"></i>
-                    </button>
-                    <div
-                        class="carousel-content"
-                        ref="videoCarousel"
-                        @mouseenter="pauseVideoScroll"
-                        @mouseleave="resumeVideoScroll"
-                    >
-                        <div class="carousel-track" :style="videoTrackStyle">
-                            <div
-                                v-for="(item, index) in displayVideos"
-                                :key="`video-${index}`"
-                                class="carousel-item video-item"
-                                @click="playVideo(item)"
-                            >
-                                <!--                <div class="item-image video-thumbnail">
-                  <img :src="apiBase + item.thumbnail" :alt="item.title" />
-                  <div class="play-overlay">
-                    <div class="play-button">
-                      <i class="play-icon">▶</i>
-                    </div>
-                  </div>
-                </div>-->
-                                <div class="item-image video-thumbnail">
-                                    <video
-                                        :src="apiBase + item.thumbnail"
-                                        :alt="item.title"
-                                        preload="metadata"
-                                        muted
-                                        @error="handleVideoError"
-                                        @loadedmetadata="handleVideoLoaded"
-                                        style="height: 180px; width: 240px"
-                                    >
-                                        <img
-                                            :src="'/placeholder.svg?height=180&width=240'"
-                                            :alt="item.title"
-                                        />
-                                    </video>
-                                    <div class="play-overlay">
-                                        <div class="play-button">
-                                            <i class="play-icon">▶</i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <p class="item-title">{{ item.title }}</p>
-                            </div>
-                        </div>
-                    </div>
-                    <button class="carousel-btn next" @click="nextVideo">
-                        <i class="arrow-right"></i>
-                    </button>
-                </div>
-            </div>
-
-            <!-- Product Cases -->
-            <div class="section">
-                <div class="section-header">
-                    <h3>产品案例</h3>
-                    <a href="#" class="view-more" @click.prevent="viewCase"
-                        >查看更多</a
-                    >
-                </div>
-                <div class="carousel-container cases-carousel">
-                    <button
-                        class="carousel-btn prev"
-                        @click="prevCase"
-                        :disabled="caseIndex === 0"
-                    >
-                        <i class="arrow-left"></i>
-                    </button>
-                    <div class="carousel-content" ref="caseCarousel">
-                        <div class="carousel-track" :style="caseTrackStyle">
-                            <div
-                                v-for="(item, index) in cases"
-                                :key="index"
-                                class="case-item"
-                            >
-                                <div class="case-image">
-                                    <img
-                                        :src="apiBase + item.image"
-                                        :alt="item.company"
-                                    />
-                                </div>
-                                <div class="case-content">
-                                    <h4>{{ item.company }}</h4>
-                                    <p>{{ item.description }}</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <button
-                        class="carousel-btn next"
-                        @click="nextCase"
-                        :disabled="caseIndex >= maxCaseIndex"
-                    >
-                        <i class="arrow-right"></i>
-                    </button>
-                </div>
-            </div>
         </div>
+
+        <CardContainer cardTitle="宣传手册" :cardList="productBrochures" />
+        <CardContainer
+            cardTitle="宣传视频"
+            :cardList="productVideos"
+            v-if="productVideos.length > 0"
+        />
+        <CaseContainer cardTitle="产品案例" :cardList="productCases" />
     </div>
 </template>
 
 <script>
-// 引入导航栏组件
-import NavBar from '@/views/psp/navBar.vue'
+import CardContainer from './components/card-container'
+import CaseContainer from './components/case-container'
+import { getProductCenterDetailAPI } from '@/api/publicService/productCenter'
 
 export default {
     name: 'ProductDetail',
     components: {
-        NavBar,
+        CardContainer,
+        CaseContainer,
     },
     data() {
         return {
@@ -304,13 +166,18 @@ export default {
                 },
             ],
             animationFrame: null,
+
+            productDetail: {}, // 产品详情
+            productBrochures: [], // 产品宣传手册
+            productVideos: [], // 产品宣传视频
+            productCases: [], // 产品案例
         }
     },
     created() {
-        this.productId = this.$route.params.id
-        console.log('产品ID:', this.productId)
+        // this.productId = this.$route.params.id
+        // console.log('产品ID:', this.productId)
 
-        console.log('产品详情:', this.$route)
+        this.getProductCenterDetailInScreenFun(this.$route.params?.id)
     },
     computed: {
         maxBrochureIndex() {
@@ -360,6 +227,41 @@ export default {
         window.removeEventListener('resize', this.handleResize)
     },
     methods: {
+        // 获取产品中心详情
+        async getProductCenterDetailInScreenFun(id) {
+            const res = await getProductCenterDetailAPI({ id })
+            console.log(res, 'res详情')
+
+            const {
+                name,
+                list,
+                image,
+                typeId,
+                linkUrl,
+                typeName,
+                linkImage,
+                isAccess,
+                introduction,
+                videoList,
+                fileList,
+            } = res?.data
+
+            this.productDetail = {
+                name,
+                image,
+                typeId,
+                linkUrl,
+                typeName,
+                linkImage,
+                isAccess,
+                introduction,
+            }
+
+            this.productCases = list
+            this.productVideos = videoList
+            this.productBrochures = fileList
+        },
+
         handleNavChange(navKey) {
             this.activeNav = navKey
             // 可以根据导航项做页面跳转或其他操作