diff --git a/src/api/publicService/productCenter.js b/src/api/publicService/productCenter.js
index 890c977..8c8c9e7 100644
--- a/src/api/publicService/productCenter.js
+++ b/src/api/publicService/productCenter.js
@@ -17,3 +17,13 @@ export function getProductCenterDetailAPI(data) {
         data,
     })
 }
+
+// 查询产品中心详情
+export function getProductCenterCaseDetailAPI(data) {
+  return request({
+    url: '/product/screen/getProductDetailsById',
+    method: 'POST',
+    data,
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 71d64e3..5d0c307 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -123,6 +123,19 @@ export const constantRoutes = [
         name: 'ProductDetail',
         meta: { showSearch: false } // 不需要搜索框
       },
+
+
+      // 产品中心 ---- 查看产品案例详情页面
+      {
+        path: 'productCenter/caseDetail/:id',
+        component: () =>
+          import(
+            '@/views/publicService/productCenter/product-case-detail.vue'
+            ),
+        name: 'ProductCaseDetail',
+        meta: { showSearch: false } // 不需要搜索框
+      },
+
       // 产品中心 ---- 查看案例页面
       {
         path: 'productCenter/caseList',
diff --git a/src/views/dataManage/product-center/components/addAndEditForm.vue b/src/views/dataManage/product-center/components/addAndEditForm.vue
index 73f5490..39a7d3a 100644
--- a/src/views/dataManage/product-center/components/addAndEditForm.vue
+++ b/src/views/dataManage/product-center/components/addAndEditForm.vue
@@ -193,16 +193,15 @@
             <el-form-item
               label="案例图片"
               prop="caseImage"
-              required
             >
               <UploadImgFormData
-                :limit="6"
+                :limit="10"
                 :file-size="10"
                 :file-type="['jpg', 'png', 'jpeg']"
                 :file-list.sync="item.formInfo.caseImage"
                 @onSelectDeleteFileId="handleSelectDeleteFileId"
                 :is-uploaded="
-                                    item.formInfo.caseImage.length >= 6
+                                    item.formInfo.caseImage.length >= 10
                                 "
               />
             </el-form-item>
@@ -324,10 +323,31 @@ export default {
         ],
         caseImage: [
           {
-            required: true,
-            trigger: 'change',
-            message: '请上传案例图片',
-          },
+            validator: (rule, value, callback) => {
+              console.log('【校验案例图片】当前图片列表:', value);
+
+              // 确保是数组
+              if (!Array.isArray(value)) {
+                return callback(new Error('请上传案例图片'));
+              }
+
+              // 过滤出上传成功或已有 url 的有效图片
+              const validFiles = value.filter(file => {
+                return file.url || (file.response && file.response.url) || file.status === 'success';
+              });
+
+              if (validFiles.length === 0) {
+                callback(new Error('请上传案例图片'));
+              } else if (validFiles.length < 5) {
+                callback(new Error(`请至少上传 5 张案例图片，当前已上传 ${validFiles.length} 张`));
+              } else if (validFiles.length > 10) {
+                callback(new Error('最多上传 10 张案例图片'));
+              } else {
+                callback(); // 校验通过
+              }
+            },
+            trigger: 'change' // 图片变化时触发
+          }
         ],
         caseSort: [
           {required: true, message: '请输入排序', trigger: 'blur'},
@@ -464,13 +484,25 @@ export default {
               }
             })
 
-            // 检查案例图片（如果需要必填的话）
-            if (isValid && tab.formInfo.caseImage.length === 0) {
-              isValid = false
-              errorMessage = `案例${
-                tabIndex + 1
-              }请至少上传一张案例图片`
-              errorCaseIndex = tabIndex
+            // 检查图片数量（5~10 张）
+            if (isValid) {
+              const validImages = tab.formInfo.caseImage.filter(file => {
+                return file.url || (file.response && file.response.url) || file.status === 'success'
+              })
+
+              if (validImages.length === 0) {
+                isValid = false
+                errorMessage = `案例${tabIndex + 1}请上传案例图片`
+                errorCaseIndex = tabIndex
+              } else if (validImages.length < 5) {
+                isValid = false
+                errorMessage = `案例${tabIndex + 1}请至少上传 5 张案例图片，当前已上传 ${validImages.length} 张`
+                errorCaseIndex = tabIndex
+              } else if (validImages.length > 10) {
+                isValid = false
+                errorMessage = `案例${tabIndex + 1}最多上传 10 张案例图片，当前已上传 ${validImages.length} 张`
+                errorCaseIndex = tabIndex
+              }
             }
           })
         }
diff --git a/src/views/publicService/productCenter/components/case-container-old.vue b/src/views/publicService/productCenter/components/case-container-old.vue
new file mode 100644
index 0000000..e0f4fbc
--- /dev/null
+++ b/src/views/publicService/productCenter/components/case-container-old.vue
@@ -0,0 +1,417 @@
+<template>
+    <!-- 产品案例 -->
+    <div class="case-container">
+        <div class="case-header">
+            <span> {{ cardTitle }} </span>
+            <span @click="onHandleViewMore"> 查看更多 </span>
+        </div>
+
+        <!-- 轮播容器 -->
+        <div class="carousel-wrapper">
+            <!-- 轮播轨道 - 使用transition实现平滑过渡 -->
+            <div
+                class="carousel-track"
+                :style="{
+                    transform: `translateX(-${currentIndex * 100}%)`,
+                    transition: transitionDuration,
+                }"
+            >
+                <!-- 复制第一个元素到末尾，最后一个元素到开头，实现无缝衔接 -->
+                <div
+                    :key="index"
+                    class="case-item"
+                    v-for="(item, index) in extendedCardList"
+                >
+                    <div class="case-left-img">
+                        <el-carousel height="160px">
+                            <el-carousel-item
+                                v-for="j in item.imageList"
+                                :key="j.id"
+                            >
+                              <el-image
+                                :src="j.url"
+                                fit="cover"
+                                style="width: 320px; height: 160px;"
+                              />
+<!--                                <ImagePreview
+                                    :height="160"
+                                    :width="320"
+                                    :src1="j.url"
+                                    :isShowMask="true"
+                                />-->
+                            </el-carousel-item>
+                        </el-carousel>
+                    </div>
+
+                    <div class="case-right-content">
+                        <h3>{{ item.caseCompany }}</h3>
+                        <!-- <div>{{ item.caseIntroduction }} </div> -->
+                        <div v-if="item.isTextOverflow">
+                            <el-tooltip effect="dark" placement="top">
+                                <div
+                                    slot="content"
+                                    class="product-info-tooltip"
+                                >
+                                    {{ item.caseIntroduction }}
+                                </div>
+                                <div class="product-info-content">
+                                    {{ item.caseIntroduction }}
+                                </div>
+                            </el-tooltip>
+                        </div>
+
+                        <div
+                            class="product-info-content"
+                            v-else
+                            :ref="`caseInfoContent-${index}`"
+                        >
+                            {{ item.caseIntroduction }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 左右控制按钮 -->
+            <img
+                alt="向左切换"
+                class="arrow-left"
+                @click="prevSlide"
+                v-if="cardList.length > 1"
+                src="@/assets/images/publicService/arrow-left.png"
+            />
+            <img
+                alt="向右切换"
+                @click="nextSlide"
+                class="arrow-right"
+                v-if="cardList.length > 1"
+                src="@/assets/images/publicService/arrow-right.png"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import TextTip from '@/components/TextTip/index'
+export default {
+    name: 'CaseContainer',
+    components: {
+        TextTip,
+    },
+    props: {
+        cardTitle: {
+            type: String,
+            default: '',
+        },
+
+        cardList: {
+            type: Array,
+            default: () => [],
+        },
+
+        productId: {
+            type: [String, Number],
+            default: '',
+        },
+    },
+    data() {
+        return {
+            currentIndex: 0, // 当前显示的索引，从1开始（因为我们在开头添加了最后一个元素的副本）
+            transitionDuration: '0.5s', // 过渡动画时长
+            timer: null, // 自动轮播计时器
+            interval: 5000, // 轮播间隔时间(ms)
+            extendedCardList: [],
+        }
+    },
+    computed: {
+        // 扩展列表：在开头添加最后一个元素的副本，在末尾添加第一个元素的副本，实现无缝滚动
+        // extendedCardList() {
+        //     if (this.cardList.length <= 1) return this.cardList
+        //     return [
+        //         this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
+        //         ...this.cardList, // 原始列表
+        //         this.cardList[0], // 第一个元素的副本放在末尾
+        //     ]
+        // },
+    },
+    mounted() {
+        // 只有在有多项数据时才启动自动轮播
+        if (this.cardList.length > 1) {
+            this.startAutoPlay()
+        }
+
+        // 监听鼠标进入/离开，暂停/恢复自动轮播
+        const container = this.$el.querySelector('.carousel-wrapper')
+        container.addEventListener('mouseenter', this.stopAutoPlay)
+        container.addEventListener('mouseleave', this.startAutoPlay)
+    },
+    beforeDestroy() {
+        // 清理计时器
+        this.stopAutoPlay()
+
+        // 移除事件监听
+        const container = this.$el.querySelector('.carousel-wrapper')
+        if (container) {
+            container.removeEventListener('mouseenter', this.stopAutoPlay)
+            container.removeEventListener('mouseleave', this.startAutoPlay)
+        }
+    },
+    methods: {
+        // 开始自动轮播
+        startAutoPlay() {
+            // 只有在有多项数据时才启动自动轮播
+            if (this.cardList.length <= 1) {
+                return
+            }
+            this.stopAutoPlay() // 先清除已有计时器
+            this.timer = setInterval(() => {
+                this.nextSlide() // 自动轮播方向：从左到右
+            }, this.interval)
+        },
+
+        // 停止自动轮播
+        stopAutoPlay() {
+            if (this.timer) {
+                clearInterval(this.timer)
+                this.timer = null
+            }
+        },
+
+        // 下一张（向右切换）- 从左到右显示
+        nextSlide() {
+            // 如果只有一项数据，不执行切换
+            if (this.cardList.length <= 1) {
+                return
+            }
+
+            // 当到达最后一个真实元素时，切换到复制的第一个元素
+            if (this.currentIndex === this.cardList.length) {
+                this.transitionDuration = '0.5s'
+                this.currentIndex++
+
+                // 动画完成后，瞬间切换到真实的第一个元素
+                setTimeout(() => {
+                    this.transitionDuration = '0s'
+                    this.currentIndex = 1
+                }, 500)
+            } else {
+                this.transitionDuration = '0.5s'
+                this.currentIndex++
+            }
+        },
+
+        // 上一张（向左切换）- 从右到左显示
+        prevSlide() {
+            // 如果只有一项数据，不执行切换
+            if (this.cardList.length <= 1) {
+                return
+            }
+
+            // 当在第一个真实元素时，先切换到复制的最后一个元素
+            if (this.currentIndex === 1) {
+                this.transitionDuration = '0.5s'
+                this.currentIndex--
+
+                // 动画完成后，瞬间切换到真实的最后一个元素
+                setTimeout(() => {
+                    this.transitionDuration = '0s'
+                    this.currentIndex = this.cardList.length
+                }, 500)
+            } else {
+                this.transitionDuration = '0.5s'
+                this.currentIndex--
+            }
+        },
+
+        // 查看更多
+        onHandleViewMore() {
+            this.$router.push({
+                name: 'ProductCaseList',
+                query: {
+                    id: this.productId,
+                },
+            })
+        },
+    },
+
+    watch: {
+        cardList: {
+            handler(newValue) {
+                if (newValue <= 1) {
+                    this.extendedCardList = newValue
+                } else {
+                    this.extendedCardList = [
+                        this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
+                        ...this.cardList, // 原始列表
+                        this.cardList[0], // 第一个元素的副本放在末尾
+                    ]
+                }
+
+                this.$nextTick(() => {
+                    this.extendedCardList.forEach((item, index) => {
+                        item.isTextOverflow =
+                            this.$refs[`caseInfoContent-${index}`][0]
+                                .clientHeight <
+                            this.$refs[`caseInfoContent-${index}`][0]
+                                .scrollHeight
+                    })
+                })
+            },
+            deep: true,
+            immediate: true,
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.case-container {
+    width: 100%;
+    padding: 0 14px 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: 14px;
+        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;
+    }
+}
+
+// 轮播容器样式 - 确保不会显示溢出内容
+.carousel-wrapper {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    // padding: 0 10px;
+    // 添加额外的裁剪区域，确保不会显示相邻项的边缘
+    clip-path: inset(0 0 0 0);
+}
+
+// 轮播轨道样式
+.carousel-track {
+    display: flex;
+    width: 100%;
+    will-change: transform; // 优化动画性能
+}
+
+// 单个案例项样式 - 确保占满整个宽度，不会露出相邻项
+.case-item {
+    width: 100%; // 确保每个项目占满容器宽度
+    flex-shrink: 0; // 防止项目被压缩
+    display: flex;
+    position: relative;
+}
+
+.arrow-left,
+.arrow-right {
+    position: absolute;
+    top: 50%;
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 10; // 确保按钮在内容上方
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 50%;
+    padding: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+.arrow-left {
+    left: 10px;
+}
+
+.arrow-right {
+    right: 10px;
+}
+
+.arrow-left:hover,
+.arrow-right:hover {
+    background-color: white;
+    transform: translateY(-50%) scale(1.1);
+}
+
+.case-left-img {
+    width: 320px;
+    height: 160px;
+    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 {
+        // width: 100%;
+        // height: 90px;
+        font-size: 14px;
+        color: #333333;
+        line-height: 1.8;
+        display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
+        -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
+        -webkit-line-clamp: 2; /* 限制显示的行数为4行 */
+        overflow: hidden; /* 超出部分隐藏 */
+    }
+}
+
+::v-deep .el-carousel__arrow {
+    display: none;
+}
+
+::v-deep .el-carousel__button {
+    background-color: #827e7e;
+    height: 4px;
+    width: 18px;
+    border-radius: 2px;
+}
+
+.product-info-tooltip {
+    max-width: 80vw !important;
+    padding: 6px 8px;
+    border-radius: 12px;
+    font-size: 14px;
+    line-height: 1.5;
+    font-family: 'PingFang SC', sans-serif;
+    letter-spacing: 0.5px;
+}
+</style>
diff --git a/src/views/publicService/productCenter/components/case-container.vue b/src/views/publicService/productCenter/components/case-container.vue
index e0f4fbc..25c7244 100644
--- a/src/views/publicService/productCenter/components/case-container.vue
+++ b/src/views/publicService/productCenter/components/case-container.vue
@@ -1,417 +1,279 @@
 <template>
-    <!-- 产品案例 -->
-    <div class="case-container">
-        <div class="case-header">
-            <span> {{ cardTitle }} </span>
-            <span @click="onHandleViewMore"> 查看更多 </span>
-        </div>
-
-        <!-- 轮播容器 -->
-        <div class="carousel-wrapper">
-            <!-- 轮播轨道 - 使用transition实现平滑过渡 -->
-            <div
-                class="carousel-track"
-                :style="{
-                    transform: `translateX(-${currentIndex * 100}%)`,
-                    transition: transitionDuration,
-                }"
-            >
-                <!-- 复制第一个元素到末尾，最后一个元素到开头，实现无缝衔接 -->
-                <div
-                    :key="index"
-                    class="case-item"
-                    v-for="(item, index) in extendedCardList"
-                >
-                    <div class="case-left-img">
-                        <el-carousel height="160px">
-                            <el-carousel-item
-                                v-for="j in item.imageList"
-                                :key="j.id"
-                            >
-                              <el-image
-                                :src="j.url"
-                                fit="cover"
-                                style="width: 320px; height: 160px;"
-                              />
-<!--                                <ImagePreview
-                                    :height="160"
-                                    :width="320"
-                                    :src1="j.url"
-                                    :isShowMask="true"
-                                />-->
-                            </el-carousel-item>
-                        </el-carousel>
-                    </div>
-
-                    <div class="case-right-content">
-                        <h3>{{ item.caseCompany }}</h3>
-                        <!-- <div>{{ item.caseIntroduction }} </div> -->
-                        <div v-if="item.isTextOverflow">
-                            <el-tooltip effect="dark" placement="top">
-                                <div
-                                    slot="content"
-                                    class="product-info-tooltip"
-                                >
-                                    {{ item.caseIntroduction }}
-                                </div>
-                                <div class="product-info-content">
-                                    {{ item.caseIntroduction }}
-                                </div>
-                            </el-tooltip>
-                        </div>
-
-                        <div
-                            class="product-info-content"
-                            v-else
-                            :ref="`caseInfoContent-${index}`"
-                        >
-                            {{ item.caseIntroduction }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 左右控制按钮 -->
-            <img
-                alt="向左切换"
-                class="arrow-left"
-                @click="prevSlide"
-                v-if="cardList.length > 1"
-                src="@/assets/images/publicService/arrow-left.png"
-            />
-            <img
-                alt="向右切换"
-                @click="nextSlide"
-                class="arrow-right"
-                v-if="cardList.length > 1"
-                src="@/assets/images/publicService/arrow-right.png"
-            />
-        </div>
+  <!-- 产品案例 -->
+  <div class="case-container">
+    <div class="case-header">
+      <span> {{ cardTitle }} </span>
+<!--      <span @click="onHandleViewMore"> 查看更多 </span>-->
+      <span ></span>
     </div>
+
+    <!-- 案例网格容器 -->
+    <div class="case-grid-wrapper">
+      <!-- 案例网格 -->
+      <div class="case-grid">
+        <div
+          v-for="(item, index) in displayedCardList"
+          :key="index"
+          class="case-item-grid"
+        >
+          <div class="case-left-img"  @click="handleCaseDetail(item)">
+<!--            <el-carousel height="200px">
+              <el-carousel-item
+                v-for="j in item.imageList"
+                :key="j.id"
+              >
+                <el-image
+                  :src="j.url"
+                  fit="cover"
+                  style="width: 100%; height: 200px;"
+                />
+              </el-carousel-item>
+            </el-carousel>-->
+
+<!--            <el-image-->
+<!--              :src="item.imageList[0]?.url"-->
+<!--              style="width: 100%; height: 200px;"-->
+<!--            />-->
+            <el-image
+              :src="item.imageList[0].url"
+              fit="cover"
+              style="width: 100%; height: 200px;"
+            />
+
+          </div>
+          <div class="case-right-content">
+            <div>{{ item.caseCompany }}</div>
+<!--            <div v-if="item.isTextOverflow">
+              <el-tooltip effect="dark" placement="top">
+                <div slot="content" class="product-info-tooltip">
+                  {{ item.caseIntroduction }}
+                </div>
+                <div class="product-info-content">
+                  {{ item.caseIntroduction }}
+                </div>
+              </el-tooltip>
+            </div>
+            <div v-else class="product-info-content">
+              {{ item.caseIntroduction }}
+            </div>-->
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载更多按钮 -->
+      <div v-if="cardList.length > 8 && showLoadMoreButton" class="load-more-btn">
+        <el-button
+          type="text"
+          @click="showAllCases"
+          size="small"
+          style="color: #999; font-size: 14px; padding: 8px 16px; border-radius: 20px; border: 1px solid #e5e5e5;"
+        >
+          加载更多
+        </el-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import TextTip from '@/components/TextTip/index'
 export default {
-    name: 'CaseContainer',
-    components: {
-        TextTip,
+  name: 'CaseContainer',
+  props: {
+    cardTitle: {
+      type: String,
+      default: '',
     },
-    props: {
-        cardTitle: {
-            type: String,
-            default: '',
-        },
-
-        cardList: {
-            type: Array,
-            default: () => [],
-        },
-
-        productId: {
-            type: [String, Number],
-            default: '',
-        },
+    cardList: {
+      type: Array,
+      default: () => [],
     },
-    data() {
-        return {
-            currentIndex: 0, // 当前显示的索引，从1开始（因为我们在开头添加了最后一个元素的副本）
-            transitionDuration: '0.5s', // 过渡动画时长
-            timer: null, // 自动轮播计时器
-            interval: 5000, // 轮播间隔时间(ms)
-            extendedCardList: [],
-        }
+    productId: {
+      type: [String, Number],
+      default: '',
     },
-    computed: {
-        // 扩展列表：在开头添加最后一个元素的副本，在末尾添加第一个元素的副本，实现无缝滚动
-        // extendedCardList() {
-        //     if (this.cardList.length <= 1) return this.cardList
-        //     return [
-        //         this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
-        //         ...this.cardList, // 原始列表
-        //         this.cardList[0], // 第一个元素的副本放在末尾
-        //     ]
-        // },
-    },
-    mounted() {
-        // 只有在有多项数据时才启动自动轮播
-        if (this.cardList.length > 1) {
-            this.startAutoPlay()
+  },
+  data() {
+    return {
+      displayedCardList: [],
+      showAll: false,
+      showLoadMoreButton: true, // 添加这个状态控制按钮显示
+    }
+  },
+  watch: {
+    cardList: {
+      handler(newValue) {
+        if (newValue.length <= 8) {
+          this.displayedCardList = newValue;
+          this.showAll = true;
+        } else {
+          this.displayedCardList = newValue.slice(0, 8);
+          this.showAll = false;
         }
 
-        // 监听鼠标进入/离开，暂停/恢复自动轮播
-        const container = this.$el.querySelector('.carousel-wrapper')
-        container.addEventListener('mouseenter', this.stopAutoPlay)
-        container.addEventListener('mouseleave', this.startAutoPlay)
+        this.$nextTick(() => {
+          this.updateTextOverflow();
+        });
+      },
+      deep: true,
+      immediate: true,
     },
-    beforeDestroy() {
-        // 清理计时器
-        this.stopAutoPlay()
-
-        // 移除事件监听
-        const container = this.$el.querySelector('.carousel-wrapper')
-        if (container) {
-            container.removeEventListener('mouseenter', this.stopAutoPlay)
-            container.removeEventListener('mouseleave', this.startAutoPlay)
+  },
+  methods: {
+    updateTextOverflow() {
+      this.displayedCardList.forEach((item, index) => {
+        const el = this.$refs[`caseInfoContent-${index}`];
+        if (el && el[0]) {
+          item.isTextOverflow =
+            el[0].clientHeight < el[0].scrollHeight;
         }
-    },
-    methods: {
-        // 开始自动轮播
-        startAutoPlay() {
-            // 只有在有多项数据时才启动自动轮播
-            if (this.cardList.length <= 1) {
-                return
-            }
-            this.stopAutoPlay() // 先清除已有计时器
-            this.timer = setInterval(() => {
-                this.nextSlide() // 自动轮播方向：从左到右
-            }, this.interval)
-        },
-
-        // 停止自动轮播
-        stopAutoPlay() {
-            if (this.timer) {
-                clearInterval(this.timer)
-                this.timer = null
-            }
-        },
-
-        // 下一张（向右切换）- 从左到右显示
-        nextSlide() {
-            // 如果只有一项数据，不执行切换
-            if (this.cardList.length <= 1) {
-                return
-            }
-
-            // 当到达最后一个真实元素时，切换到复制的第一个元素
-            if (this.currentIndex === this.cardList.length) {
-                this.transitionDuration = '0.5s'
-                this.currentIndex++
-
-                // 动画完成后，瞬间切换到真实的第一个元素
-                setTimeout(() => {
-                    this.transitionDuration = '0s'
-                    this.currentIndex = 1
-                }, 500)
-            } else {
-                this.transitionDuration = '0.5s'
-                this.currentIndex++
-            }
-        },
-
-        // 上一张（向左切换）- 从右到左显示
-        prevSlide() {
-            // 如果只有一项数据，不执行切换
-            if (this.cardList.length <= 1) {
-                return
-            }
-
-            // 当在第一个真实元素时，先切换到复制的最后一个元素
-            if (this.currentIndex === 1) {
-                this.transitionDuration = '0.5s'
-                this.currentIndex--
-
-                // 动画完成后，瞬间切换到真实的最后一个元素
-                setTimeout(() => {
-                    this.transitionDuration = '0s'
-                    this.currentIndex = this.cardList.length
-                }, 500)
-            } else {
-                this.transitionDuration = '0.5s'
-                this.currentIndex--
-            }
-        },
-
-        // 查看更多
-        onHandleViewMore() {
-            this.$router.push({
-                name: 'ProductCaseList',
-                query: {
-                    id: this.productId,
-                },
-            })
-        },
+      });
     },
 
-    watch: {
-        cardList: {
-            handler(newValue) {
-                if (newValue <= 1) {
-                    this.extendedCardList = newValue
-                } else {
-                    this.extendedCardList = [
-                        this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
-                        ...this.cardList, // 原始列表
-                        this.cardList[0], // 第一个元素的副本放在末尾
-                    ]
-                }
-
-                this.$nextTick(() => {
-                    this.extendedCardList.forEach((item, index) => {
-                        item.isTextOverflow =
-                            this.$refs[`caseInfoContent-${index}`][0]
-                                .clientHeight <
-                            this.$refs[`caseInfoContent-${index}`][0]
-                                .scrollHeight
-                    })
-                })
-            },
-            deep: true,
-            immediate: true,
-        },
+    showAllCases() {
+      this.displayedCardList = this.cardList;
+      this.showAll = true;
+      this.showLoadMoreButton = false; // 隐藏按钮
     },
+
+    onHandleViewMore() {
+      this.$router.push({
+        name: 'ProductCaseList',
+        query: {
+          id: this.productId,
+        },
+      })
+    },
+
+    //  查看详情
+    handleCaseDetail(service) {
+      this.$router.push({
+        name: 'ProductCaseDetail',
+        params: {id: service.id},
+      })
+    },
+
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .case-container {
-    width: 100%;
-    padding: 0 14px 20px;
-    font-family: 'PingFang SC', sans-serif;
-    letter-spacing: 1px;
-    text-align: left;
-    text-transform: none;
+  width: 100%;
+  padding: 0 14px 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;
+  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: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: 14px;
-        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;
-    }
-}
-
-// 轮播容器样式 - 确保不会显示溢出内容
-.carousel-wrapper {
-    width: 100%;
-    overflow: hidden;
-    position: relative;
-    // padding: 0 10px;
-    // 添加额外的裁剪区域，确保不会显示相邻项的边缘
-    clip-path: inset(0 0 0 0);
-}
-
-// 轮播轨道样式
-.carousel-track {
-    display: flex;
-    width: 100%;
-    will-change: transform; // 优化动画性能
-}
-
-// 单个案例项样式 - 确保占满整个宽度，不会露出相邻项
-.case-item {
-    width: 100%; // 确保每个项目占满容器宽度
-    flex-shrink: 0; // 防止项目被压缩
-    display: flex;
-    position: relative;
-}
-
-.arrow-left,
-.arrow-right {
-    position: absolute;
-    top: 50%;
-    width: 24px;
-    height: 24px;
-    transform: translateY(-50%);
+  & span:last-child {
+    font-size: 14px;
+    background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     cursor: pointer;
-    z-index: 10; // 确保按钮在内容上方
-    background-color: rgba(255, 255, 255, 0.7);
-    border-radius: 50%;
-    padding: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
+    letter-spacing: 1px;
+    font-family: 'PingFang SC', sans-serif;
+  }
 }
 
-.arrow-left {
-    left: 10px;
+.case-grid-wrapper {
+  width: 100%;
+  overflow: hidden;
 }
 
-.arrow-right {
-    right: 10px;
+.case-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap:60px ;
+  row-gap: 35px
 }
 
-.arrow-left:hover,
-.arrow-right:hover {
-    background-color: white;
-    transform: translateY(-50%) scale(1.1);
+.case-item-grid {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease;
+  border-bottom: 30px;
+}
+
+.case-item-grid:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .case-left-img {
-    width: 320px;
-    height: 160px;
-    box-sizing: border-box;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  padding: 8px;
 }
 
 .case-right-content {
-    flex: 1;
-    height: 160px;
-    padding-left: 36px;
-    background-color: #f0f0f0;
+  flex: 1;
+  text-align: center;
+  background-color: #f9f9f9;
+  padding: 20px;
 
-    h3 {
-        padding: 0;
-        margin: 0;
-    }
+  font-size: 14px;
+  color: #000;
+  font-weight: 400;
+  font-family: 'PingFang SC', sans-serif;
+  letter-spacing: 1px;
+  text-transform: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
-    h3 {
-        padding-top: 36px;
-        height: 70px;
-        font-size: 18px;
-        font-weight: 600;
-        color: #333333;
-    }
-    div {
-        // width: 100%;
-        // height: 90px;
-        font-size: 14px;
-        color: #333333;
-        line-height: 1.8;
-        display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
-        -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
-        -webkit-line-clamp: 2; /* 限制显示的行数为4行 */
-        overflow: hidden; /* 超出部分隐藏 */
-    }
+
+
+  .product-info-content {
+    margin-top: 8px;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
 }
 
-::v-deep .el-carousel__arrow {
-    display: none;
-}
-
-::v-deep .el-carousel__button {
-    background-color: #827e7e;
-    height: 4px;
-    width: 18px;
-    border-radius: 2px;
+.load-more-btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
 }
 
 .product-info-tooltip {
-    max-width: 80vw !important;
-    padding: 6px 8px;
-    border-radius: 12px;
-    font-size: 14px;
-    line-height: 1.5;
-    font-family: 'PingFang SC', sans-serif;
-    letter-spacing: 0.5px;
+  max-width: 80vw !important;
+  padding: 6px 8px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: 'PingFang SC', sans-serif;
+  letter-spacing: 0.5px;
 }
 </style>
diff --git a/src/views/publicService/productCenter/product-case-detail.vue b/src/views/publicService/productCenter/product-case-detail.vue
new file mode 100644
index 0000000..de1c076
--- /dev/null
+++ b/src/views/publicService/productCenter/product-case-detail.vue
@@ -0,0 +1,1018 @@
+<template>
+  <div class="product-detail">
+    <div class="product-header">
+      <div class="left">
+        <span @click="goToProductCenter" style="cursor: pointer;"> 产品中心 </span>
+        <span> &gt; </span>
+        <span> 产品详情 </span>
+        <span> &gt; </span>
+        <span @click="onHandleGoBack"> 产品案例详情</span>
+        <span> &gt; </span>
+        <span> {{ productDetail.caseCompany }}</span>
+      </div>
+      <div class="right" @click="onHandleGoBack">
+        <img src="@/assets/images/publicService/go-back.png" alt=""/>
+        <span>返回</span>
+      </div>
+    </div>
+
+    <div class="product-content">
+      <div class="product-image">
+        <div class="case-header">
+          <span> {{ productDetail.caseCompany }} </span>
+          <span >  </span>
+        </div>
+        <div class="case-right-content" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
+          <div class="carousel-wrapper" @mouseenter="pause" @mouseleave="play">
+            <div class="carousel" :style="carouselStyle">
+              <div
+                class="slide"
+                v-for="(item, idx) in productDetail.imageList"
+                :key="item.id"
+                :class="slideClass(idx)"
+                :style="slideStyle(idx)"
+                @click="onSlideClick(idx, item)"
+              >
+                <div class="slide-inner">
+                  <img :src="item.url" :alt="item.originalName">
+                  <div class="caption">{{ item.originalName }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+<!--          <div class="nav">
+            <button class="btn" @click="prev">上一张</button>
+            <button class="btn" @click="next">下一张</button>
+          </div>
+          <div class="dots">
+            <div
+              class="dot"
+              v-for="(item, i) in productDetail.imageList"
+              :key="'d'+item.id"
+              :class="{ active: i===currentIndex }"
+              @click="go(i)"
+            ></div>
+          </div>-->
+
+        </div>
+
+      </div>
+
+      <div class="product-text">
+        <div class="case-header">
+          <span> 案例介绍 </span>
+          <span >  </span>
+        </div>
+
+        <div class="case-right-content">
+          <div>{{ productDetail.caseIntroduction }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CardContainer from './components/card-container'
+import CaseContainer from './components/case-container'
+import DialogModel from '@/components/DialogModel/index'
+import TextTip from '@/components/TextTip/index'
+
+import {getProductCenterCaseDetailAPI} from '@/api/publicService/productCenter'
+
+export default {
+  name: 'ProductDetail',
+  components: {
+    CardContainer,
+    CaseContainer,
+    DialogModel,
+    TextTip,
+  },
+  data() {
+    return {
+      productDetail: {
+        imageList: []
+      },
+      productId: '',
+      currentIndex: 0,
+      radius: 590, // 稍微增大半径，让重叠降到约一半
+      autoTimer: null,
+      autoplayMs: 2000,
+      rotating: true,
+    }
+  },
+  created() {
+    this.productId = this.$route.params?.id
+    this.getProductCenterCaseDetailInScreenFun(this.productId)
+  },
+  computed: {
+    itemCount: function() {
+      return this.productDetail.imageList ? this.productDetail.imageList.length : 0;
+    },
+    anglePer: function() {
+      return this.itemCount > 0 ? 360 / this.itemCount : 0;
+    },
+    carouselStyle: function() {
+      var angle = -this.currentIndex * this.anglePer;
+      return {
+        transform: 'translateZ(0) rotateY(' + angle + 'deg)'
+      };
+    }
+  },
+  methods: {
+    async getProductCenterCaseDetailInScreenFun(id) {
+      const res = await getProductCenterCaseDetailAPI({id})
+      const {
+        caseCompany,
+        caseIntroduction,
+        imageList
+      } = res.data
+
+      this.productDetail = {
+        caseCompany,
+        caseIntroduction,
+        imageList
+      }
+
+      console.log(this.productDetail.imageList)
+    },
+
+    // 返回
+    onHandleGoBack() {
+      this.$router.go(-1)
+    },
+    // 跳转到产品中心
+    goToProductCenter() {
+      this.$router.push('/publicService/ProductCenter')
+    },
+
+    slideStyle: function(idx) {
+      var angle = idx * this.anglePer;
+      var isFront = idx === this.currentIndex;
+      // 3D 深度：中心卡片抬升更多，确保压住两边
+      var isThree = this.itemCount === 3;
+      var baseZ = this.radius - (isThree ? 20 : 0);
+      var z = baseZ + (isFront ? (isThree ? 170 : 160) : 0); // 3张时略加强正面抬升
+      // 让左右相邻两张图更“斜”一些
+      var diff = (idx - this.currentIndex + this.itemCount) % this.itemCount;
+      var extraTilt = 0; // 正数更向右倾斜，负数向左
+      if (diff === 1) extraTilt = 18; // 右侧
+      else if (diff === this.itemCount - 1) extraTilt = -18; // 左侧
+      var finalAngle = angle + extraTilt;
+      var scale = isFront ? (isThree ? 1.08 : 1.06) : 1.0; // 3张时稍大一点覆盖
+      var zIndex = isFront ? 5 : ((diff === 1 || diff === this.itemCount - 1) ? 2 : 1);
+      var style = {
+        transform: 'translate(-50%, -50%) rotateY(' + finalAngle + 'deg) translateZ(' + z + 'px) scale(' + scale + ')',
+        zIndex: zIndex
+      };
+      // 仅在3张时稍微加宽，让中心覆盖左右约50%
+      if (isThree) {
+        style.width = '52%';
+        style.maxWidth = '560px';
+      }
+      return style;
+    },
+
+    slideClass: function(idx) {
+      var diff = (idx - this.currentIndex + this.itemCount) % this.itemCount;
+      if (diff === 0) return 'is-front';
+      if (diff === 1 || diff === this.itemCount - 1) return 'is-side';
+      return 'is-back';
+    },
+    next: function() {
+      this.currentIndex = (this.currentIndex + 1) % this.itemCount;
+    },
+    prev: function() {
+      this.currentIndex = (this.currentIndex - 1 + this.itemCount) % this.itemCount;
+    },
+    go: function(i) {
+      this.currentIndex = i;
+    },
+    onSlideClick: function(idx, item) {
+      if (idx !== this.currentIndex) {
+        this.go(idx);
+        return;
+      }
+      console.log( item)
+      window.open(item.url)
+
+    },
+    play: function() {
+      var self = this;
+      if (this.autoTimer) return;
+      this.autoTimer = setInterval(function() {
+        if (!self.rotating) return;
+        self.next();
+      }, this.autoplayMs);
+    },
+    pause: function() {
+      this.rotating = false;
+    },
+
+    // 添加清理方法
+    cleanup: function() {
+      if (this.autoTimer) {
+        clearInterval(this.autoTimer);
+        this.autoTimer = null;
+      }
+    }
+
+  },
+
+  mounted: function() {
+    var self = this;
+    this.play();
+    // 鼠标移出时恢复旋转
+    this.$el.addEventListener('mouseleave', function() {
+      self.rotating = true;
+    });
+    // 清理
+    window.addEventListener('beforeunload', this.cleanup);
+  },
+
+  beforeDestroy: function() {
+    this.cleanup();
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.product-detail {
+  height: 100%;
+  width: 100%;
+  padding: 32px;
+}
+
+/* 顶部导航栏 */
+.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);
+  }
+}
+
+.product-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  margin-bottom: 20px;
+  font-size: 14px;
+
+  .left {
+    span {
+      color: #787878;
+    }
+
+    & span:last-child {
+      color: #000000;
+    }
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    span {
+      background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+
+      letter-spacing: 1px;
+      font-family: 'PingFang SC', sans-serif;
+    }
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
+    }
+  }
+}
+
+.product-content {
+  width: 100%;
+  display: flex;
+  padding: 0 14px;
+  //gap: 24px;
+  column-gap: 24px;
+  height: 96%;
+  flex-direction: column;
+}
+
+.product-image{
+  width: 100%;
+  height: 66%;
+  background-color: #f9f9f9;
+}
+
+.product-text{
+  width: 100%;
+  height: 30%;
+  background-color: #f9f9f9;
+}
+
+.case-header {
+  display: flex;
+  justify-content: left;
+  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: 14px;
+    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-right-content {
+  flex: 1;
+  text-align: left;
+  padding: 20px;
+  font-size: 14px;
+  color: #000;
+  font-weight: 400;
+  font-family: 'PingFang SC', sans-serif;
+  letter-spacing: 1px;
+  text-transform: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 94%;
+  width: 100%;
+
+  .product-info-content {
+    margin-top: 8px;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+
+.carousel-wrapper {
+  width: 100%;
+  max-width: 1200px;
+  perspective: 1310px;
+}
+
+.carousel {
+  position: relative;
+  width: 100%;
+  height: 520px;
+  transform-style: preserve-3d;
+  transition: transform 800ms cubic-bezier(.2,.7,.2,1);
+  user-select: none;
+}
+
+.slide {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  max-width: 260px;
+  height: 180px;
+  transform-style: preserve-3d;
+  transform: translate(-50%, -50%);
+  transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter 800ms, opacity 800ms;
+  cursor: pointer;
+}
+
+.slide-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 24px 80px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
+  transform: translateZ(0);
+  background: #151821;
+}
+
+.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+.slide .caption {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  padding: 14px 18px;
+  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%);
+  color: #f7f7f7;
+  font-size: 16px;
+  letter-spacing: .2px;
+}
+
+/* depth/blur for non-front slides */
+.slide.is-side { filter: blur(0px) saturate(.95) brightness(1); opacity: 1; z-index: 2; }
+.slide.is-back { filter: blur(0.2px) saturate(.95) brightness(.98); opacity: .95; z-index: 1; }
+
+/* front on top - 中间图片压住两边 */
+.slide.is-front { transform: translate(-50%, -50%) scale(1.06) translateZ(180px); z-index: 5; }
+
+/* nav buttons */
+.nav {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 14px;
+}
+.btn {
+  padding: 8px 14px;
+  border-radius: 10px;
+  background: #222733;
+  color: #e6e6e6;
+  border: 1px solid #2f3442;
+  cursor: pointer;
+  transition: background 200ms, transform 120ms;
+}
+.btn:hover { background: #2a3040; }
+.btn:active { transform: translateY(1px); }
+
+.dots {
+  margin-top: 8px;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+.dot { width: 8px; height: 8px; border-radius: 999px; background: #3d4457; cursor: pointer; transition: transform 200ms, background 200ms; }
+.dot.active { background: #6aa8ff; transform: scale(1.4); }
+
+.hint { text-align: center; color: #96a0b5; margin-top: 10px; font-size: 13px; }
+
+</style>
diff --git a/src/views/publicService/productCenter/product-detail.vue b/src/views/publicService/productCenter/product-detail.vue
index c8e6d19..d83728a 100644
--- a/src/views/publicService/productCenter/product-detail.vue
+++ b/src/views/publicService/productCenter/product-detail.vue
@@ -53,14 +53,17 @@
         </div>
 
         <div class="product-container" v-else>
-          <el-tooltip effect="dark" placement="top">
+<!--          <el-tooltip effect="dark" placement="top">
             <div slot="content" class="product-info-tooltip">
               {{ productDetail.introduction }}
             </div>
             <div class="product-info-content">
               {{ productDetail.introduction }}
             </div>
-          </el-tooltip>
+          </el-tooltip>-->
+          <div class="product-info-content">
+            {{ productDetail.introduction }}
+          </div>
         </div>
       </div>
     </div>