荣誉展示的文本高度调整

 <!--
 <!--
  * @Date: 2024-10-17 11:13:44
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 14:19:29
+ * @LastEditTime: 2024-10-24 15:24:20
  * @FilePath: /hager/src/views/about/honors.vue
  * @FilePath: /hager/src/views/about/honors.vue
  * @Description: 关于海格-荣誉展示
  * @Description: 关于海格-荣誉展示
 -->
 -->
@@ -40,9 +40,9 @@
           <div class="card-image-box">
           <div class="card-image-box">
             <div class="card-image" :style="{ backgroundImage: `url(${x.cover})` }"></div>
             <div class="card-image" :style="{ backgroundImage: `url(${x.cover})` }"></div>
           </div>
           </div>
-          <div ref="contentDiv" class="card-content">
+          <div class="card-content">
             <h3>{{ x.post_title }}</h3>
             <h3>{{ x.post_title }}</h3>
-            <p v-html="x.post_content"></p>
+            <p ref="contentDiv" v-if="x.post_content">{{ x.post_content }}</p>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
@@ -62,7 +62,7 @@
               </div>
               </div>
               <div class="card-content xs">
               <div class="card-content xs">
                 <h3>{{ x.post_title }}</h3>
                 <h3>{{ x.post_title }}</h3>
-                <p v-html="x.post_content"></p>
+                <p v-if="x.post_content" class="content">{{ x.post_content }}</p>
               </div>
               </div>
             </div>
             </div>
           </div>
           </div>
@@ -270,24 +270,27 @@ export default {
       .card-image {
       .card-image {
         width: 100%;
         width: 100%;
         height: 17rem;
         height: 17rem;
-        background-size: contain;
+        background-size: cover;
         background-position: center;
         background-position: center;
         background-repeat: no-repeat;
         background-repeat: no-repeat;
       }
       }
       .card-content {
       .card-content {
         background-color: #F7F7F7;
         background-color: #F7F7F7;
         padding: 2rem 1.5rem;
         padding: 2rem 1.5rem;
-        height: 12rem;
-        overflow: scroll;
+        padding-bottom: 0.5rem;
         h3 {
         h3 {
           color: @secondary-color;
           color: @secondary-color;
           font-size: 1rem;
           font-size: 1rem;
           margin: 0;
           margin: 0;
-          margin-bottom: 0.5rem;
+          height: 3rem;
+          line-height: 1.5;
         }
         }
         p {
         p {
           font-size: 0.95rem;
           font-size: 0.95rem;
           line-height: 1.8;
           line-height: 1.8;
+          height: 8rem;
+          margin-bottom: 0.5rem;
+          overflow: scroll;
         }
         }
       }
       }
     }
     }
@@ -347,20 +350,22 @@ export default {
       .card-content {
       .card-content {
         background-color: #F7F7F7;
         background-color: #F7F7F7;
         padding: 2rem 1.5rem;
         padding: 2rem 1.5rem;
-        height: 12rem;
-        overflow: scroll;
         &.xs {
         &.xs {
-          height: 7rem;
+          // height: 2rem;
+          padding-bottom: 0.5rem;
         }
         }
         h3 {
         h3 {
           color: @secondary-color;
           color: @secondary-color;
           font-size: 1rem;
           font-size: 1rem;
           margin: 0;
           margin: 0;
           margin-bottom: 0.5rem;
           margin-bottom: 0.5rem;
+          height: 3rem;
         }
         }
         p {
         p {
           font-size: 0.95rem;
           font-size: 0.95rem;
           line-height: 1.8;
           line-height: 1.8;
+          height: 8rem;
+          overflow: scroll;
         }
         }
       }
       }
     }
     }