招聘信息和新闻中心自适应调整

 <!--
  * @Date: 2024-10-18 12:05:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-18 17:37:53
+ * @LastEditTime: 2024-10-22 15:02:54
  * @FilePath: /hager/src/views/news/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-news-page">
-    <hager-box class="top-img" :style="{ height: '25rem', backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
+    <hager-box :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
       <div v-if="!is_xs" class="banner-text-wrapper top-center">
         <div class="text">
           <p class="title" style="margin-bottom: 0;">新闻中心</p>
@@ -20,17 +20,28 @@
       </div>
     </hager-box>
     <hager-box style="margin: 1rem 0;">
-      <div class="hager-news-list">
+      <div v-if="!is_xs" class="hager-news-list">
         <div class="card" v-for="(item, index) in news_list" :key="index">
           <img :src="item.src" alt="学校图片" class="card-image">
           <div class="news-item">
-            <div class="news-item-title">{{ item.title }}</div>
+            <div :class="news-item-title">{{ item.title }}</div>
             <p class="news-item-sub"  v-clamp="2">{{ item.sub }}</p>
             <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
             <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
           </div>
         </div>
       </div>
+      <div v-else class="hager-news-list xs">
+        <div class="card" v-for="(item, index) in news_list" :key="index">
+          <img :src="item.src" alt="学校图片" class="card-image">
+          <div class="news-item">
+            <div class="news-item-title xs">{{ item.title }}</div>
+            <p class="news-item-sub">{{ item.sub }}</p>
+            <p class="news-item-content">{{ item.content }}</p>
+            <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
+          </div>
+        </div>
+      </div>
     </hager-box>
     <hager-box>
       <hager-load-more></hager-load-more>
@@ -92,6 +103,10 @@ export default {
       background-size: cover;
       background-position: center;
       position: relative;
+      height: 25rem;
+      &.xs {
+        height: 12rem;
+      }
       .top-center {
         position: absolute;
         transform: translateY(50%); /* 垂直与水平居中 */
@@ -103,6 +118,10 @@ export default {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
+      &.xs {
+        display: block;
+        margin-top: 0;
+      }
       .card {
         flex: 0 0 48.5%; /* 宽度为 1/3 */
         margin-bottom: 2.5rem; /* 在元素之间添加间距 */
@@ -134,6 +153,9 @@ export default {
             white-space: nowrap;        /* 不换行 */
             overflow: hidden;           /* 隐藏超出部分 */
             text-overflow: ellipsis;    /* 用省略号表示被截断的部分 */
+            &.xs {
+              white-space: wrap;
+            }
           }
           .news-item-sub {
             color: @primary-color;