From a2fe7564d5b2385c329aa6307bdd4a4e9e88c732 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 16 Sep 2025 10:43:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A6=85=E9=81=93bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImagePreview/index.vue         |  37 +++--
 src/router/index.js                           |   4 +-
 .../components/addAndEditForm.vue             |  51 ++++---
 src/views/dataManage/pro-materials/index.vue  |   8 +-
 .../components/addAndEditForm.vue             | 132 +++++++++++-------
 src/views/login.vue                           |   5 +-
 src/views/publicService/components/navBar.vue |  14 +-
 .../components/card-container.vue             |  30 +++-
 .../components/case-container.vue             |  23 ++-
 .../publicService/productCenter/index.vue     |   5 +-
 .../productCenter/product-case-list.vue       |  15 +-
 .../productCenter/product-detail.vue          |  16 ++-
 12 files changed, 223 insertions(+), 117 deletions(-)

diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 43207bd..e220db3 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -1,13 +1,28 @@
 <template>
-    <el-image
-        :src="src1"
-        fit="cover"
-        :style="`width:${realWidth};height:${realHeight};border-radius: ${borderRadius}px;`"
-    >
-        <div slot="error" class="image-slot">
-            <i class="el-icon-picture-outline"></i>
-        </div>
-    </el-image>
+    <div>
+        <el-image
+            :src="src1"
+            fit="cover"
+            :style="`width:${realWidth};height:${realHeight};border-radius: ${borderRadius}px;`"
+            v-if="!isShowMask"
+        >
+            <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+            </div>
+        </el-image>
+
+        <el-image
+            :src="src1"
+            v-else
+            fit="cover"
+            :preview-src-list="realSrcList"
+            :style="`width:${realWidth};height:${realHeight};border-radius: ${borderRadius}px;`"
+        >
+            <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+            </div>
+        </el-image>
+    </div>
 </template>
 
 <script>
@@ -36,6 +51,10 @@ export default {
             type: [Number, String],
             default: 0,
         },
+        isShowMask: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         realSrc() {
diff --git a/src/router/index.js b/src/router/index.js
index e66d45d..71b5446 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -94,7 +94,7 @@ export const constantRoutes = [
         children: [
             // 产品中心
             {
-                path: 'productCenter',
+                path: 'ProductCenter',
                 component: () =>
                     import('@/views/publicService/productCenter/index.vue'),
                 name: 'ProductCenter',
@@ -123,7 +123,7 @@ export const constantRoutes = [
                 path: 'commonCom',
                 component: () =>
                     import('@/views/publicService/commonCom/index.vue'),
-                name: 'commonCom',
+                name: 'CommonCom',
             },
             // 宣传物料
             {
diff --git a/src/views/dataManage/pro-materials/components/addAndEditForm.vue b/src/views/dataManage/pro-materials/components/addAndEditForm.vue
index 61cd42d..a0cc493 100644
--- a/src/views/dataManage/pro-materials/components/addAndEditForm.vue
+++ b/src/views/dataManage/pro-materials/components/addAndEditForm.vue
@@ -85,7 +85,6 @@
                         <el-select
                             clearable
                             filterable
-                            multiple
                             style="width: 100%"
                             placeholder="请选择类型"
                             @change="handleProductIdChange"
@@ -167,7 +166,7 @@ export default {
                 cover: [], // 封面
                 version: '', // 版本
                 productName: '', // 归属产品
-                productId: '', // 归属产品
+                productId: [], // 归属产品
                 description: '', // 描述
             },
             // 基本信息表单校验规则
@@ -236,12 +235,9 @@ export default {
                     typeId, // 类型
                     version, // 版本
                     typeName, // 类型名称
-                    productName: productName.substring(
-                        0,
-                        productName.length - 1,
-                    ), // 归属产品
+                    productName, // 归属产品
                     description,
-                    productId: productId.join(','),
+                    productId,
                 }
                 const formData = new FormData()
                 const fileMsg = []
@@ -305,11 +301,15 @@ export default {
 
         // 类型ID改变事件
         handleTypeIdChange(value) {
-            this.addAndEditForm.typeName = this.dict.type.tb_product_type.find(
-                (item) => item.value === value,
-            ).label
+            this.addAndEditForm.productId = ''
+            if (value) {
+                this.addAndEditForm.typeName =
+                    this.dict.type.tb_product_type.find(
+                        (item) => item.value === value,
+                    ).label
 
-            this.getProductList(value)
+                this.getProductList(value)
+            }
         },
 
         // 获取归属产品下拉选
@@ -321,15 +321,23 @@ export default {
 
         // 归属产品ID改变事件
         handleProductIdChange(value) {
-            this.addAndEditForm.productName = ''
-            if (value.length > 0) {
-                {
-                    value.forEach((item) => {
-                        this.addAndEditForm.productName +=
-                            this.productList.find((j) => item == j.id).name +
-                            ','
-                    })
-                }
+            // this.addAndEditForm.productName = ''
+            // if (value.length > 0) {
+            //     {
+            //         value.forEach((item) => {
+            //             this.addAndEditForm.productName +=
+            //                 this.productList.find((j) => item == j.id).name +
+            //                 ','
+            //         })
+            //     }
+            // }
+
+            if (value) {
+                this.addAndEditForm.productName = this.productList.find(
+                    (j) => value == j.id,
+                ).name
+            } else {
+                this.addAndEditForm.productName = ''
             }
         },
 
@@ -353,7 +361,8 @@ export default {
                 typeId: typeId + '',
                 version,
                 typeName,
-                productId: productIds.map((e) => e * 1),
+                // productId: productIds.map((e) => e * 1),
+                productId: productIds * 1,
                 description,
                 productName,
                 file: files
diff --git a/src/views/dataManage/pro-materials/index.vue b/src/views/dataManage/pro-materials/index.vue
index 43c1c39..3b41c84 100644
--- a/src/views/dataManage/pro-materials/index.vue
+++ b/src/views/dataManage/pro-materials/index.vue
@@ -100,10 +100,16 @@
                 :prop="column.prop"
                 :label="column.label"
                 v-for="column in columns"
+                show-overflow-tooltip
             >
                 <template slot-scope="scope">
                     <template v-if="column.prop === 'file'">
-                        {{ scope.row.files[0].originalName }}
+                        <!-- {{ scope.row.files[0].originalName }} -->
+
+                        <span v-if="scope.row.files.length > 0">
+                            {{ scope.row.files[0].originalName }}
+                        </span>
+                        <span v-else> / </span>
                     </template>
                     <template v-if="column.prop === 'fileType'">
                         <el-tag size="mini" type="primary">
diff --git a/src/views/dataManage/product-center/components/addAndEditForm.vue b/src/views/dataManage/product-center/components/addAndEditForm.vue
index 300af2d..c55f18c 100644
--- a/src/views/dataManage/product-center/components/addAndEditForm.vue
+++ b/src/views/dataManage/product-center/components/addAndEditForm.vue
@@ -349,7 +349,6 @@ export default {
         },
         // 保存操作：校验所有表单
         async handleSave() {
-            console.log(this.addAndEditForm, '基本信息表单')
             this.$message.closeAll()
             try {
                 // 1. 校验基本信息表单
@@ -375,48 +374,51 @@ export default {
                 let errorCaseIndex = ''
 
                 // 遍历所有案例表单
-                this.editableTabs.forEach((tab, tabIndex) => {
-                    if (!isValid) return // 如果已经发现错误，停止检查
 
-                    // 检查当前案例的每个必填字段
-                    requiredFields.forEach((field) => {
-                        if (!isValid) return
+                if (this.editableTabs.length > 0) {
+                    this.editableTabs.forEach((tab, tabIndex) => {
+                        if (!isValid) return // 如果已经发现错误，停止检查
 
-                        const value = tab.formInfo[field.key]
-                        // 检查值是否为空（考虑空字符串、undefined、null）
-                        if (
-                            value === '' ||
-                            value === undefined ||
-                            value === null
-                        ) {
+                        // 检查当前案例的每个必填字段
+                        requiredFields.forEach((field) => {
+                            if (!isValid) return
+
+                            const value = tab.formInfo[field.key]
+                            // 检查值是否为空（考虑空字符串、undefined、null）
+                            if (
+                                value === '' ||
+                                value === undefined ||
+                                value === null
+                            ) {
+                                isValid = false
+                                errorCaseIndex = tabIndex
+                                errorMessage = `案例${tabIndex + 1}的${
+                                    field.name
+                                }为必填项`
+                            }
+                            // 对数字类型进行额外检查（避免0被误判）
+                            else if (
+                                field.key === 'caseSort' &&
+                                (isNaN(value) || value === '')
+                            ) {
+                                isValid = false
+                                errorCaseIndex = tabIndex
+                                errorMessage = `案例${tabIndex + 1}的${
+                                    field.name
+                                }必须为有效数字`
+                            }
+                        })
+
+                        // 检查案例图片（如果需要必填的话）
+                        if (isValid && tab.formInfo.caseImage.length === 0) {
                             isValid = false
+                            errorMessage = `案例${
+                                tabIndex + 1
+                            }请至少上传一张案例图片`
                             errorCaseIndex = tabIndex
-                            errorMessage = `案例${tabIndex + 1}的${
-                                field.name
-                            }为必填项`
-                        }
-                        // 对数字类型进行额外检查（避免0被误判）
-                        else if (
-                            field.key === 'caseSort' &&
-                            (isNaN(value) || value === '')
-                        ) {
-                            isValid = false
-                            errorCaseIndex = tabIndex
-                            errorMessage = `案例${tabIndex + 1}的${
-                                field.name
-                            }必须为有效数字`
                         }
                     })
-
-                    // 检查案例图片（如果需要必填的话）
-                    if (isValid && tab.formInfo.caseImage.length === 0) {
-                        isValid = false
-                        errorMessage = `案例${
-                            tabIndex + 1
-                        }请至少上传一张案例图片`
-                        errorCaseIndex = tabIndex
-                    }
-                })
+                }
 
                 // 如果校验失败，抛出错误
                 if (!isValid) {
@@ -439,7 +441,15 @@ export default {
                 // 组装参数
                 const formData = new FormData()
                 const filesTypes = []
-                const { cover } = this.addAndEditForm
+                const {
+                    cover,
+                    name, // 名称
+                    typeId, // 类型
+                    typeName, // 类型名称
+                    linkUrl, // 链接
+                    isAccess, // 是否支持访问
+                    introduction, // 产品介绍
+                } = this.addAndEditForm
                 cover.forEach((item) => {
                     if (!item.id) {
                         formData.append('files', item.raw)
@@ -447,8 +457,15 @@ export default {
                     }
                 })
 
-                const addAndEditFormParams = this.addAndEditForm
-                delete addAndEditFormParams.cover
+                const addAndEditFormParams = {
+                    name, // 名称
+                    typeId, // 类型
+                    typeName, // 类型名称
+                    linkUrl, // 链接
+                    isAccess, // 是否支持访问
+                    introduction, // 产品介绍
+                }
+
                 for (const key in addAndEditFormParams) {
                     formData.append(key, addAndEditFormParams[key])
                 }
@@ -491,9 +508,9 @@ export default {
                     this.$emit('closeDialog', true)
                 }
             } catch (error) {
-                console.log(error, 'error')
+                // console.log(error, 'error')
                 // 校验失败，提示用户
-                this.$message.error('请完善所有必填项后再保存')
+                // this.$message.error('请完善所有必填项后再保存')
             }
         },
         // 新增产品案例Tab
@@ -517,10 +534,10 @@ export default {
         // 移除产品案例Tab
         handleRemoveTab(removeTabName) {
             // 禁止删除最后一个Tab
-            if (this.editableTabs.length <= 1) {
-                this.$message.warning('至少保留一个案例')
-                return
-            }
+            // if (this.editableTabs.length <= 1) {
+            //     this.$message.warning('至少保留一个案例')
+            //     return
+            // }
 
             // 找到要删除的Tab索引
             const removeIndex = this.editableTabs.findIndex(
@@ -536,22 +553,31 @@ export default {
             this.editableTabs.splice(removeIndex, 1)
 
             // 如果删除的是当前激活的Tab，切换到第一个Tab
-            if (removeTabName === this.currentTab) {
+            if (
+                removeTabName === this.currentTab &&
+                this.editableTabs.length > 0
+            ) {
                 this.currentTab = this.editableTabs[0].name
             }
 
             // 当前激活的Tab索引 如果大于删除的Tab索引，则减1
-            if (this.currentTabIndex >= removeIndex) {
+            if (
+                this.currentTabIndex >= removeIndex &&
+                this.editableTabs.length > 0
+            ) {
                 this.currentTab =
                     this.editableTabs[this.currentTabIndex - 1].name
             }
 
             // 重新计算排序（可选：保持排序连续）
-            this.editableTabs.forEach((tab, index) => {
-                tab.title = `案例${index + 1}`
-                tab.name = (index + 1).toString()
-                tab.formInfo.caseSort = index + 1
-            })
+
+            if (this.editableTabs.length > 0) {
+                this.editableTabs.forEach((tab, index) => {
+                    tab.title = `案例${index + 1}`
+                    tab.name = (index + 1).toString()
+                    tab.formInfo.caseSort = index + 1
+                })
+            }
         },
         // Tab切换事件：触发当前Tab的表单校验
         handleTabClick() {
diff --git a/src/views/login.vue b/src/views/login.vue
index 8134bb7..70ed1d2 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -17,7 +17,8 @@
                 <h2 class="welcome-title">欢迎登录公共服务平台</h2>
 
                 <!-- 登录方式切换 -->
-                <div class="login-type-switch">
+                <!-- 9.16 暂时关闭验证码登录 -->
+                <!-- <div class="login-type-switch">
                     <span
                         :class="['switch-item', { active: loginType === 1 }]"
                         @click="switchLoginType(1)"
@@ -31,7 +32,7 @@
                     >
                         验证码登录
                     </span>
-                </div>
+                </div> -->
 
                 <!-- 登录表单 -->
                 <el-form
diff --git a/src/views/publicService/components/navBar.vue b/src/views/publicService/components/navBar.vue
index 22d265f..37be96e 100644
--- a/src/views/publicService/components/navBar.vue
+++ b/src/views/publicService/components/navBar.vue
@@ -65,28 +65,28 @@ export default {
     },
     data() {
         return {
-            activeNav: 'productCenter', // 默认选中产品中心
+            activeNav: 'ProductCenter', // 默认选中产品中心
             userAvatarUrl: this.userAvatar,
             internalSearchKeyword: this.searchKeyword,
             navItems: [
                 {
                     label: '产品中心',
-                    routePath: 'productCenter',
+                    routePath: 'ProductCenter',
                     icon: require('../../../assets/images/productCenter/products.png'),
                 },
                 {
                     label: '公共组件',
-                    routePath: 'commonCom',
+                    routePath: 'CommonCom',
                     icon: require('../../../assets/images/productCenter/components.png'),
                 },
                 {
                     label: '宣传物料',
-                    routePath: 'proMaterials',
+                    routePath: 'ProMaterials',
                     icon: require('../../../assets/images/productCenter/materials.png'),
                 },
                 {
                     label: '文档中心',
-                    routePath: 'docCenter',
+                    routePath: 'DocCenter',
                     icon: require('../../../assets/images/productCenter/docs.png'),
                 },
             ],
@@ -103,7 +103,9 @@ export default {
     methods: {
         handleNavClick(item) {
             this.activeNav = item.routePath
-            this.$router.push(item.routePath)
+            this.$router.push({
+                name: item.routePath,
+            })
         },
         handleSearch() {
             // 修复搜索功能，直接使用internalSearchKeyword
diff --git a/src/views/publicService/productCenter/components/card-container.vue b/src/views/publicService/productCenter/components/card-container.vue
index 8cc11dd..ad42253 100644
--- a/src/views/publicService/productCenter/components/card-container.vue
+++ b/src/views/publicService/productCenter/components/card-container.vue
@@ -111,7 +111,7 @@ export default {
         },
         scrollDuration: {
             type: Number,
-            default: 30, // 滚动完一轮的时间（秒）
+            default: 50, // 滚动完一轮的时间（秒）- 增加时间让滚动更慢更平滑
         },
         scrollDirection: {
             type: String,
@@ -133,6 +133,8 @@ export default {
             isTransitioning: false,
             transitionStart: 0,
             transitionProgress: 0,
+            // 记录当前滚动位置，用于切换后继续滚动
+            currentScrollPosition: 0,
         }
     },
 
@@ -171,6 +173,7 @@ export default {
     methods: {
         getItemWidth() {
             if (this.$refs.cardWrapper) {
+                // 无论有多少个盒子，都按照4个盒子计算宽度
                 this.itemWidth = (this.$refs.cardWrapper.clientWidth - 30) / 4
             }
         },
@@ -217,15 +220,23 @@ export default {
 
             let newPosition
             if (this.scrollDirection === 'left') {
-                // 向左滚动 - 使用取模实现无缝循环
-                newPosition = normalizedProgress * this.totalScrollWidth
+                // 向左滚动 - 从起始位置开始，使用取模实现无缝循环
+                newPosition =
+                    (this.startPosition +
+                        normalizedProgress * this.totalScrollWidth) %
+                    this.totalScrollWidth
             } else {
-                // 向右滚动 - 使用取模实现无缝循环
-                newPosition = (1 - normalizedProgress) * this.totalScrollWidth
+                // 向右滚动 - 从起始位置开始，使用取模实现无缝循环
+                newPosition =
+                    (this.startPosition +
+                        (1 - normalizedProgress) * this.totalScrollWidth) %
+                    this.totalScrollWidth
             }
 
             // 应用新位置
             this.$refs.cardWrapper.scrollLeft = newPosition
+            // 更新当前滚动位置
+            this.currentScrollPosition = newPosition
 
             // 继续动画
             this.animationId = requestAnimationFrame(this.smoothScroll)
@@ -248,8 +259,9 @@ export default {
                 cancelAnimationFrame(this.animationId)
             }
 
-            // 从当前位置开始动画
+            // 从当前位置开始动画，保持当前滚动位置
             this.startPosition = this.$refs.cardWrapper.scrollLeft || 0
+            this.currentScrollPosition = this.startPosition
 
             // 启动动画
             this.animationId = requestAnimationFrame(this.smoothScroll)
@@ -282,6 +294,8 @@ export default {
             // 平滑滚动到新位置
             this.$refs.cardWrapper.style.scrollBehavior = 'smooth'
             this.$refs.cardWrapper.scrollLeft = newPosition
+            // 更新当前滚动位置
+            this.currentScrollPosition = newPosition
 
             // 恢复自动滚动
             setTimeout(() => {
@@ -307,6 +321,8 @@ export default {
             // 平滑滚动到新位置
             this.$refs.cardWrapper.style.scrollBehavior = 'smooth'
             this.$refs.cardWrapper.scrollLeft = newPosition
+            // 更新当前滚动位置
+            this.currentScrollPosition = newPosition
 
             // 恢复自动滚动
             setTimeout(() => {
@@ -419,6 +435,8 @@ export default {
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     min-width: calc(25% - 45px);
+    width: calc(25% - 45px);
+    flex: 0 0 calc(25% - 45px);
 
     &:hover {
         transform: translateY(-5px);
diff --git a/src/views/publicService/productCenter/components/case-container.vue b/src/views/publicService/productCenter/components/case-container.vue
index daef6e0..968fbb6 100644
--- a/src/views/publicService/productCenter/components/case-container.vue
+++ b/src/views/publicService/productCenter/components/case-container.vue
@@ -32,6 +32,7 @@
                                     :height="160"
                                     :width="320"
                                     :src1="j.url"
+                                    :isShowMask="true"
                                 />
                             </el-carousel-item>
                         </el-carousel>
@@ -87,7 +88,7 @@ export default {
             currentIndex: 0, // 当前显示的索引，从1开始（因为我们在开头添加了最后一个元素的副本）
             transitionDuration: '0.5s', // 过渡动画时长
             timer: null, // 自动轮播计时器
-            interval: 10000, // 轮播间隔时间(ms)
+            interval: 5000, // 轮播间隔时间(ms)
         }
     },
     computed: {
@@ -103,8 +104,10 @@ export default {
         },
     },
     mounted() {
-        // 启动自动轮播
-        this.startAutoPlay()
+        // 只有在有多项数据时才启动自动轮播
+        if (this.cardList.length > 1) {
+            this.startAutoPlay()
+        }
 
         // 监听鼠标进入/离开，暂停/恢复自动轮播
         const container = this.$el.querySelector('.carousel-wrapper')
@@ -125,6 +128,10 @@ export default {
     methods: {
         // 开始自动轮播
         startAutoPlay() {
+            // 只有在有多项数据时才启动自动轮播
+            if (this.cardList.length <= 1) {
+                return
+            }
             this.stopAutoPlay() // 先清除已有计时器
             this.timer = setInterval(() => {
                 this.nextSlide() // 自动轮播方向：从左到右
@@ -141,6 +148,11 @@ export default {
 
         // 下一张（向右切换）- 从左到右显示
         nextSlide() {
+            // 如果只有一项数据，不执行切换
+            if (this.cardList.length <= 1) {
+                return
+            }
+
             // 当到达最后一个真实元素时，切换到复制的第一个元素
             if (this.currentIndex === this.cardList.length) {
                 this.transitionDuration = '0.5s'
@@ -159,6 +171,11 @@ export default {
 
         // 上一张（向左切换）- 从右到左显示
         prevSlide() {
+            // 如果只有一项数据，不执行切换
+            if (this.cardList.length <= 1) {
+                return
+            }
+
             // 当在第一个真实元素时，先切换到复制的最后一个元素
             if (this.currentIndex === 1) {
                 this.transitionDuration = '0.5s'
diff --git a/src/views/publicService/productCenter/index.vue b/src/views/publicService/productCenter/index.vue
index 5b0afdd..5cc6cb8 100644
--- a/src/views/publicService/productCenter/index.vue
+++ b/src/views/publicService/productCenter/index.vue
@@ -25,6 +25,7 @@
                         :borderRadius="10"
                         :width="itemWidth"
                         :src1="item.linkImage"
+                        :isShowMask="true"
                     />
                 </div>
                 <div
@@ -297,9 +298,11 @@ export default {
     cursor: pointer;
     transition: all 0.2s ease;
     font-size: 14px;
-    color: #666;
+    color: #000;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     transition: all 0.2s ease;
+    font-family: 'PingFang SC', sans-serif;
+    // font-weight: 600;
 }
 
 .category-item:hover {
diff --git a/src/views/publicService/productCenter/product-case-list.vue b/src/views/publicService/productCenter/product-case-list.vue
index c4e8c2a..cd5c775 100644
--- a/src/views/publicService/productCenter/product-case-list.vue
+++ b/src/views/publicService/productCenter/product-case-list.vue
@@ -22,6 +22,7 @@
                             :height="160"
                             :width="320"
                             :src1="j.url"
+                            :isShowMask="true"
                         />
                     </el-carousel-item>
                 </el-carousel>
@@ -183,19 +184,15 @@ export default {
         color: #333333;
     }
     div {
-        height: 90px;
+        // 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;
+        display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
+        -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
+        -webkit-line-clamp: 2; /* 限制显示的行数为4行 */
+        overflow: hidden; /* 超出部分隐藏 */
     }
 }
 
diff --git a/src/views/publicService/productCenter/product-detail.vue b/src/views/publicService/productCenter/product-detail.vue
index 622a554..d2be867 100644
--- a/src/views/publicService/productCenter/product-detail.vue
+++ b/src/views/publicService/productCenter/product-detail.vue
@@ -14,10 +14,17 @@
 
         <div class="product-content">
             <div class="product-image">
-                <el-image
+                <!-- <el-image
                     fit="cover"
                     :src="productDetail.linkImage"
                     style="width: 480px; height: 270px"
+                /> -->
+
+                <ImagePreview
+                    :height="270"
+                    :width="480"
+                    :isShowMask="true"
+                    :src1="productDetail.linkImage"
                 />
             </div>
 
@@ -57,6 +64,7 @@
             cardTitle="产品案例"
             :productId="productId"
             :cardList="productCases"
+            v-if="productCases && productCases.length > 0"
         />
 
         <DialogModel
@@ -100,8 +108,8 @@ export default {
             dialogConfig: {
                 outerTitle: '查看',
                 outerVisible: false,
-                outerWidth: '90%',
-                minHeight: '90vh',
+                // outerWidth: '90%',
+                // minHeight: '90vh',
             },
             productId: '',
             lookFile: 'http://192.168.0.14:8012/onlinePreview?url=',
@@ -901,7 +909,7 @@ export default {
 }
 
 .preview-docs {
-    width: 100%;
+    // width: 100%;
     height: 79vh;
 }
 </style>