fix 解决方案-成功案例显示优化

 <!--
 <!--
  * @Date: 2024-09-29 15:49:27
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-03 17:46:50
+ * @LastEditTime: 2024-12-04 12:09:38
  * @FilePath: /hager/src/views/solution/detail.vue
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -60,12 +60,12 @@
       <div v-if="!is_xs">
       <div v-if="!is_xs">
         <div class="hager-success-cases">
         <div class="hager-success-cases">
           <div @click="goToCase(item)" class="card" v-for="(item, index) in success_data_list" :key="index">
           <div @click="goToCase(item)" class="card" v-for="(item, index) in success_data_list" :key="index">
-            <img :src="item.cover" alt="图片" class="card-image">
-            <div class="card-content">
+            <img :src="item.cover" alt="图片" class="card-image-pc">
+            <div class="card-content-pc">
               <h3>{{ item.post_title }}</h3>
               <h3>{{ item.post_title }}</h3>
               <p v-html="item.post_description"></p>
               <p v-html="item.post_description"></p>
-              <i class="el-icon-right"></i>
             </div>
             </div>
+            <i class="el-icon-right pc"></i>
           </div>
           </div>
         </div>
         </div>
         <!-- <div style="display: flex; justify-content: center; margin-top: 2rem;">
         <!-- <div style="display: flex; justify-content: center; margin-top: 2rem;">
@@ -356,19 +356,40 @@ export default {
       overflow: hidden;
       overflow: hidden;
       background-color: #fff;
       background-color: #fff;
       transition: transform 0.3s ease-in-out;
       transition: transform 0.3s ease-in-out;
+      position: relative;
       &:hover {
       &:hover {
         transform: scale(1.05);
         transform: scale(1.05);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         cursor: pointer;
         cursor: pointer;
       }
       }
+      .card-image-pc {
+        width: 100%;
+        height: 15rem;
+        object-fit: cover;
+      }
       .card-image {
       .card-image {
         width: 100%;
         width: 100%;
         height: auto;
         height: auto;
         object-fit: cover;
         object-fit: cover;
       }
       }
 
 
+      .card-content-pc {
+        padding: 1rem 1.5rem;
+        margin-bottom: 2rem;
+        h3 {
+          color: @secondary-color;
+          font-size: 1.25rem;
+          margin: 0;
+          margin-bottom: 0.5rem;
+        }
+        p {
+          font-size: 0.95rem;
+          line-height: 1.8;
+        }
+      }
       .card-content {
       .card-content {
         padding: 1rem 1.5rem;
         padding: 1rem 1.5rem;
+        margin-bottom: 2rem;
         h3 {
         h3 {
           color: @secondary-color;
           color: @secondary-color;
           font-size: 1.25rem;
           font-size: 1.25rem;
@@ -380,10 +401,20 @@ export default {
           line-height: 1.8;
           line-height: 1.8;
         }
         }
         i {
         i {
-          margin-top: 1rem;
-          color: @primary-color;
-          font-size: 1.5rem;
-        }
+        margin-top: 0.5rem;
+        color: @primary-color;
+        font-size: 1.5rem;
+      }
+      }
+      i.pc {
+        position: absolute;
+        bottom: 0;
+        display: inline-flex;
+        margin-top: 0.5rem;
+        margin-left: 1.5rem;
+        margin-bottom: 1rem;
+        color: @primary-color;
+        font-size: 1.5rem;
       }
       }
 
 
       .card p {
       .card p {