fix 解决方案优化移动端显示

 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-05 16:07:14
+ * @LastEditTime: 2024-12-09 13:46:50
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
@@ -78,15 +78,16 @@
               <div class="card">
                 <img :src="item.cover" alt="图片" class="card-image">
                 <div class="card-content">
-                  <h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.post_title }}</h3>
-                  <p class="clamp-text" v-html="item.post_description "></p>
+                  <!-- <h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.post_title }}</h3> -->
+                  <h3 class="clamp-title">{{ item.post_title }}</h3>
+                  <!-- <p class="clamp-text" v-html="item.post_description "></p> -->
                   <i class="el-icon-right"></i>
                 </div>
               </div>
             </div>
           </swiper-slide>
         </swiper>
-        <div v-if="success_data_list.length > SuccessSlidesPerView || is_xs" class="hager-product-center-more xs">
+        <div v-if="success_data_list.length > SuccessSlidesPerView || (is_xs && success_data_list.length > 2)" class="hager-product-center-more xs">
           <!-- <hager-more></hager-more> -->
           <div class="xs-control">
             <div>
@@ -110,7 +111,7 @@
           </div>
         </swiper-slide>
       </swiper>
-      <div v-if="product_list.length > productSlidesPerView || is_xs" class="hager-product-center-more">
+      <div v-if="product_list.length > productSlidesPerView || (is_xs && product_list.length > 2)" class="hager-product-center-more">
         <!-- <hager-more></hager-more> -->
         <div class="xs-control">
           <div>
@@ -412,11 +413,17 @@ export default {
       }
       .card-content {
         padding: 1rem 1.5rem;
-        h3 {
+        .clamp-title {
           color: @secondary-color;
           font-size: 1.25rem;
           margin: 0;
           margin-bottom: 0.5rem;
+          min-height: calc(2 * 1.5em); /* 假设行高为 1.5em */
+          line-height: 1.5em;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2; /* 显示两行 */
+          overflow: hidden;
         }
         p {
           font-size: 0.95rem;
@@ -499,8 +506,8 @@ export default {
     margin-top: 2rem;
     .nav {
       flex: 1;
-      text-align: center;
-      padding: 1.5rem 0;
+      // text-align: center;
+      padding: 1.5rem 10vw;
       position: relative;
       &:not(:last-child) {
         &::after {
@@ -513,19 +520,25 @@ export default {
           font-size: 1rem;
         }
       }
+      &:first-child {
+        text-align: right;
+      }
+      &:last-child {
+        text-align: left;
+      }
     }
     .detail-nav {
       display: inline;
       color: @text-color;
       font-size: 1.2rem;
-      padding: 1.4rem 0;
+      padding: 1.4rem;
       &:hover {
         cursor: pointer;
       }
     }
     .current-nav {
       color: @secondary-color;
-      border-bottom: 2px solid #ED6C00;
+      border-bottom: 3px solid #ED6C00;
       font-weight: bold;
     }
   }

@@ -47,7 +47,7 @@
               <div class="card-content">
                 <div class="card-title">
                   <span>{{ item.category_name }}</span>
-                  <i class="el-icon-right"></i>
+                  <!-- <i class="el-icon-right"></i> -->
                 </div>
                 <p class="card-sub">{{ item.sub }}</p>
               </div>
@@ -244,18 +244,22 @@ export default {
 
     .card-content {
       padding: 15px;
+      padding-bottom: 0;
       .card-title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+        // display: flex;
+        // align-items: center;
+        // justify-content: space-between;
         font-size: 1rem;
         color: @secondary-color;
-        margin-bottom: 10px;
+        // margin-bottom: 10px;
         font-weight: bold;
         span {
-          white-space: nowrap;        /* 不换行 */
-          overflow: hidden;           /* 隐藏超出部分 */
-          text-overflow: ellipsis;    /* 用省略号表示被截断的部分 */
+          min-height: calc(2 * 1.5em); /* 假设行高为 1.5em */
+          line-height: 1.5em;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2; /* 显示两行 */
+          overflow: hidden;
         }
       }
       .card-sub {