优化

src/components/TextTip/index.vue

@@ -243,7 +243,7 @@ export default {
     animation: tooltipFadeIn 0.3s ease-out;
     pointer-events: auto;
     max-width: 90vw; /* 最大宽度为视口宽度的90% */
-    min-width: 200px;
+    min-width: 70vw;
 }
 
 .tooltip-content {

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

@@ -41,10 +41,19 @@
                     <div class="case-right-content">
                         <h3>{{ item.caseCompany }}</h3>
                         <!-- <div>{{ item.caseIntroduction }} </div> -->
-                        <TextTip
+                        <div>
-                            :maxLines="2"
+                            <el-tooltip effect="dark" placement="top">
-                            :content="item.caseIntroduction"
+                                <div
-                        />
+                                    slot="content"
+                                    class="product-info-tooltip"
+                                >
+                                    {{ item.caseIntroduction }}
+                                </div>
+                                <div class="product-info-content">
+                                    {{ item.caseIntroduction }}
+                                </div>
+                            </el-tooltip>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -331,17 +340,17 @@ export default {
         font-weight: 600;
         color: #333333;
     }
-    // div {
+    div {
-    //     // width: 100%;
+        // width: 100%;
-    //     // height: 90px;
+        // height: 90px;
-    //     font-size: 14px;
+        font-size: 14px;
-    //     color: #333333;
+        color: #333333;
-    //     line-height: 1.8;
+        line-height: 1.8;
-    //     display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
+        display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
-    //     -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
+        -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
-    //     -webkit-line-clamp: 2; /* 限制显示的行数为4行 */
+        -webkit-line-clamp: 2; /* 限制显示的行数为4行 */
-    //     overflow: hidden; /* 超出部分隐藏 */
+        overflow: hidden; /* 超出部分隐藏 */
-    // }
+    }
 }
 
 ::v-deep .el-carousel__arrow {
@@ -354,4 +363,14 @@ export default {
     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/product-case-list.vue

@@ -32,7 +32,18 @@
                 <h3>{{ item.caseCompany }}</h3>
                 <!-- <div>{{ item.caseIntroduction }} </div> -->
 
-                <TextTip :maxLines="2" :content="item.caseIntroduction" />
+                <!-- <TextTip :maxLines="2" :content="item.caseIntroduction" /> -->
+
+                <div>
+                    <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>
         </div>
     </div>
@@ -212,4 +223,14 @@ export default {
     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/product-detail.vue

@@ -42,7 +42,16 @@
                     </span>
                 </div>
 
-                <TextTip :content="productDetail.introduction" :maxLines="4" />
+                <div class="product-container">
+                    <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>
+                </div>
             </div>
         </div>
 
@@ -904,4 +913,28 @@ export default {
     // width: 100%;
     height: 79vh;
 }
+
+.product-info-content {
+    font-size: 14px;
+    font-family: 'PingFang SC', sans-serif;
+    letter-spacing: 1px;
+    line-height: 1.8;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4 !important;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.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>