✨ feat(首页最新资讯): 自适应适配显示

hookehuyr
Commit 835b93a5caef1f293dde31366a347c1a7281bede 835b93a5 1 parent 00de2cf2
Showing 1 changed file with 37 additions and 6 deletions
src/views/index.vue
--- a/src/views/index.vue
View file @835b93a
+++ b/src/views/index.vue
View file @835b93a
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-10 13:52:00
+ * @LastEditTime: 2024-10-10 14:19:59
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -70,12 +70,12 @@
         </div>
       </div>
     </hager-box>
-    <hager-box class="box-2n">
+    <hager-box v-if="!is_xs" class="box-2n">
       <hager-h1 title="最新资讯" sub="News"></hager-h1>
       <div class="news-container">
         <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
           <el-col :span="12" style="height: 25rem;">
-            <img v-if="index % 2 === 0" :src="item.src" alt="News Image 1">
+            <img class="news-item-img" v-if="index % 2 === 0" :src="item.src" alt="News Image 1">
             <div v-else @click="goToNew(item)" class="news-item">
               <div class="news-item-title">{{ item.title }}</div>
               <p class="news-item-sub">{{ item.sub }}</p>
@@ -90,7 +90,7 @@
               <p class="news-item-content">{{ item.content }}</p>
               <i class="el-icon-right"></i>
             </div>
-            <img v-else :src="item.src" alt="News Image 1">
+            <img class="news-item-img" v-else :src="item.src" alt="News Image 1">
           </el-col>
         </el-row>
       </div>
@@ -98,6 +98,25 @@
         <hager-more></hager-more>
       </div>
     </hager-box>
+    <div v-else style="background-color: #f9f9f9; padding-bottom: 1rem;">
+      <hager-h1 title="最新资讯" sub="News" style="padding: 2rem;"></hager-h1>
+      <div class="news-container xs">
+        <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
+          <el-col :span="24">
+            <img class="news-item-img xs" :src="item.src" alt="News Image 1">
+            <div @click="goToNew(item)" class="news-item xs">
+              <div class="news-item-title">{{ item.title }}</div>
+              <p class="news-item-sub">{{ item.sub }}</p>
+              <p class="news-item-content">{{ item.content }}</p>
+              <i class="el-icon-right"></i>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div style="display: flex; justify-content: center; margin-top: 2rem;">
+        <hager-more></hager-more>
+      </div>
+    </div>
     <hager-box class="box-n">
       <hager-h1 title="招聘信息" sub="Recruit"></hager-h1>
       <p style="margin: 2rem 0;">心国近心，支注万你。海恰人囫指员光工，然于則行！我们哦这音齐稱央那八我们附行列，共同书与成功的扁草。用你的才罕，刨道九限可能！</p>
@@ -326,11 +345,23 @@ export default {
   }
   .news-container {
     margin-top: 2rem;
-    img {
+    &.xs {
-      width: 100%; height: 100%; border-radius: 5px;object-fit: cover;
+      margin: 0;
+    }
+    .news-item-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 5px;
+      object-fit: cover;
+      &.xs {
+        border-radius: 0;
+      }
     }
     .news-item {
       padding: 3rem;
+      &.xs {
+        padding: 2rem;
+      }
       &:hover {
         cursor: pointer;
       }