大屏产品中心-产品案例开发

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,
+  })
+}
+

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',

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,
+            validator: (rule, value, callback) => {
-            trigger: 'change',
+              console.log('【校验案例图片】当前图片列表:', value);
-            message: '请上传案例图片',
+
-          },
+              // 确保是数组
+              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 {
               }
             })
 
-            // 检查案例图片（如果需要必填的话）
+            // 检查图片数量（5~10 张）
-            if (isValid && tab.formInfo.caseImage.length === 0) {
+            if (isValid) {
-              isValid = false
+              const validImages = tab.formInfo.caseImage.filter(file => {
-              errorMessage = `案例${
+                return file.url || (file.response && file.response.url) || file.status === 'success'
-                tabIndex + 1
+              })
-              }请至少上传一张案例图片`
+
-              errorCaseIndex = tabIndex
+              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
+              }
             }
           })
         }

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>

src/views/publicService/productCenter/components/case-container.vue

@@ -1,417 +1,279 @@
 <template>
-    <!-- 产品案例 -->
+  <!-- 产品案例 -->
-    <div class="case-container">
+  <div class="case-container">
-        <div class="case-header">
+    <div class="case-header">
-            <span> {{ cardTitle }} </span>
+      <span> {{ cardTitle }} </span>
-            <span @click="onHandleViewMore"> 查看更多 </span>
+<!--      <span @click="onHandleViewMore"> 查看更多 </span>-->
-        </div>
+      <span ></span>
-
-        <!-- 轮播容器 -->
-        <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>
+
+    <!-- 案例网格容器 -->
+    <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',
+  name: 'CaseContainer',
-    components: {
+  props: {
-        TextTip,
+    cardTitle: {
+      type: String,
+      default: '',
     },
-    props: {
+    cardList: {
-        cardTitle: {
+      type: Array,
-            type: String,
+      default: () => [],
-            default: '',
-        },
-
-        cardList: {
-            type: Array,
-            default: () => [],
-        },
-
-        productId: {
-            type: [String, Number],
-            default: '',
-        },
     },
-    data() {
+    productId: {
-        return {
+      type: [String, Number],
-            currentIndex: 0, // 当前显示的索引，从1开始（因为我们在开头添加了最后一个元素的副本）
+      default: '',
-            transitionDuration: '0.5s', // 过渡动画时长
-            timer: null, // 自动轮播计时器
-            interval: 5000, // 轮播间隔时间(ms)
-            extendedCardList: [],
-        }
     },
-    computed: {
+  },
-        // 扩展列表：在开头添加最后一个元素的副本，在末尾添加第一个元素的副本，实现无缝滚动
+  data() {
-        // extendedCardList() {
+    return {
-        //     if (this.cardList.length <= 1) return this.cardList
+      displayedCardList: [],
-        //     return [
+      showAll: false,
-        //         this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
+      showLoadMoreButton: true, // 添加这个状态控制按钮显示
-        //         ...this.cardList, // 原始列表
+    }
-        //         this.cardList[0], // 第一个元素的副本放在末尾
+  },
-        //     ]
+  watch: {
-        // },
+    cardList: {
-    },
+      handler(newValue) {
-    mounted() {
+        if (newValue.length <= 8) {
-        // 只有在有多项数据时才启动自动轮播
+          this.displayedCardList = newValue;
-        if (this.cardList.length > 1) {
+          this.showAll = true;
-            this.startAutoPlay()
+        } else {
+          this.displayedCardList = newValue.slice(0, 8);
+          this.showAll = false;
         }
 
-        // 监听鼠标进入/离开，暂停/恢复自动轮播
+        this.$nextTick(() => {
-        const container = this.$el.querySelector('.carousel-wrapper')
+          this.updateTextOverflow();
-        container.addEventListener('mouseenter', this.stopAutoPlay)
+        });
-        container.addEventListener('mouseleave', this.startAutoPlay)
+      },
+      deep: true,
+      immediate: true,
     },
-    beforeDestroy() {
+  },
-        // 清理计时器
+  methods: {
-        this.stopAutoPlay()
+    updateTextOverflow() {
-
+      this.displayedCardList.forEach((item, index) => {
-        // 移除事件监听
+        const el = this.$refs[`caseInfoContent-${index}`];
-        const container = this.$el.querySelector('.carousel-wrapper')
+        if (el && el[0]) {
-        if (container) {
+          item.isTextOverflow =
-            container.removeEventListener('mouseenter', this.stopAutoPlay)
+            el[0].clientHeight < el[0].scrollHeight;
-            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: {
+    showAllCases() {
-        cardList: {
+      this.displayedCardList = this.cardList;
-            handler(newValue) {
+      this.showAll = true;
-                if (newValue <= 1) {
+      this.showLoadMoreButton = false; // 隐藏按钮
-                    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,
-        },
     },
+
+    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%;
+  width: 100%;
-    padding: 0 14px 20px;
+  padding: 0 14px 20px;
-    font-family: 'PingFang SC', sans-serif;
+  font-family: 'PingFang SC', sans-serif;
-    letter-spacing: 1px;
+  letter-spacing: 1px;
-    text-align: left;
+  text-align: left;
-    text-transform: none;
+  text-transform: none;
 }
 
 .case-header {
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-between;
-    align-items: center;
+  align-items: center;
-    padding: 10px 20px;
+  padding: 10px 20px;
 
-    & span:first-child {
+  & span:first-child {
-        font-weight: bold;
+    font-weight: bold;
-        font-size: 18px;
+    font-size: 18px;
-        color: #333333;
+    color: #333333;
-        text-align: left;
+    text-align: left;
-        font-style: normal;
+    font-style: normal;
-        text-transform: none;
+    text-transform: none;
-        font-family: 'PingFang SC', sans-serif;
+    font-family: 'PingFang SC', sans-serif;
-        letter-spacing: 1px;
+    letter-spacing: 1px;
-    }
+  }
 
-    & span:last-child {
+  & span:last-child {
-        font-size: 14px;
+    font-size: 14px;
-        background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
+    background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
-        -webkit-background-clip: text;
+    -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+    -webkit-text-fill-color: transparent;
-        background-clip: text;
+    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; // 确保按钮在内容上方
+    letter-spacing: 1px;
-    background-color: rgba(255, 255, 255, 0.7);
+    font-family: 'PingFang SC', sans-serif;
-    border-radius: 50%;
+  }
-    padding: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
 }
 
-.arrow-left {
+.case-grid-wrapper {
-    left: 10px;
+  width: 100%;
+  overflow: hidden;
 }
 
-.arrow-right {
+.case-grid {
-    right: 10px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap:60px ;
+  row-gap: 35px
 }
 
-.arrow-left:hover,
+.case-item-grid {
-.arrow-right:hover {
+  display: flex;
-    background-color: white;
+  flex-direction: column;
-    transform: translateY(-50%) scale(1.1);
+  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;
+  width: 100%;
-    height: 160px;
+  height: 200px;
-    box-sizing: border-box;
+  overflow: hidden;
+  padding: 8px;
 }
 
 .case-right-content {
-    flex: 1;
+  flex: 1;
-    height: 160px;
+  text-align: center;
-    padding-left: 36px;
+  background-color: #f9f9f9;
-    background-color: #f0f0f0;
+  padding: 20px;
 
-    h3 {
+  font-size: 14px;
-        padding: 0;
+  color: #000;
-        margin: 0;
+  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;
+  .product-info-content {
-        font-size: 18px;
+    margin-top: 8px;
-        font-weight: 600;
+    font-size: 14px;
-        color: #333333;
+    color: #666;
-    }
+    line-height: 1.5;
-    div {
+    display: -webkit-box;
-        // width: 100%;
+    -webkit-box-orient: vertical;
-        // height: 90px;
+    -webkit-line-clamp: 2;
-        font-size: 14px;
+    overflow: hidden;
-        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 {
+.load-more-btn {
-    display: none;
+  display: flex;
-}
+  justify-content: center;
-
+  margin-top: 16px;
-::v-deep .el-carousel__button {
-    background-color: #827e7e;
-    height: 4px;
-    width: 18px;
-    border-radius: 2px;
 }
 
 .product-info-tooltip {
-    max-width: 80vw !important;
+  max-width: 80vw !important;
-    padding: 6px 8px;
+  padding: 6px 8px;
-    border-radius: 12px;
+  border-radius: 12px;
-    font-size: 14px;
+  font-size: 14px;
-    line-height: 1.5;
+  line-height: 1.5;
-    font-family: 'PingFang SC', sans-serif;
+  font-family: 'PingFang SC', sans-serif;
-    letter-spacing: 0.5px;
+  letter-spacing: 0.5px;
 }
 </style>

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>