📦 新闻页响应式布局

src/assets/scss/main.scss

@@ -259,6 +259,14 @@ $small-banner-height: 445px;
   .main-section {
     padding: 80px 60px;
   }
+  .main-header-tab {
+    .list {
+      > div {
+        min-width: initial;
+        flex: 1;
+      }
+    }
+  }
 }
 @media (max-width: 768px) {
   .main-section {
@@ -269,4 +277,14 @@ $small-banner-height: 445px;
   .main-section {
     padding: 80px 20px;
   }
+}
+@media (max-width: 500px) {
+  .main-header-box {
+    &.small {
+      min-height: $large-banner-height;
+    }
+  }
+  .main-section.fit-small-header {
+    height: $large-banner-height;
+  }
 }

src/views/NewsView.vue

@@ -14,12 +14,12 @@
     <!-- 头部搜索 -->
     <section class="main-section absolute light fit-small-header">
       <div class="content row">
-        <div class="col-sm-12 col-md-6">
+        <div class="col-md-12 col-lg-8 col-xl-6">
           <div class="main-header-title d-flex flex-column">
             <h1 class="mt-3">闽南文化保护区资讯动态</h1>
             <p>祝您在三星堆获得足够丰富的精神体验</p>
-            <div class="d-flex flex-row">
-              <Dropdown class="dark me-3" :options="options" />
+            <div class="d-flex flex-column flex-sm-row flex-md-row flex-lg-row">
+              <Dropdown class="dark me-3 mb-3 mb-md-0 mb-lg-0" :options="options" />
               <SimpleInput class="dark" placeholder="在此输入资讯动态关键词进行搜索">
                 <template #prefix>
                   <img src="@/assets/images/news/IconSearch.png" alt="搜索" />
@@ -28,7 +28,7 @@
             </div>
           </div>
         </div>
-        <div class="col-sm-12 col-md-6">
+        <div class="col-md-12 col-lg-4 col-xl-6">
         </div>
       </div>
       <!-- 头部TAB -->
@@ -218,5 +218,39 @@ const options = [
     }
   }
 }
+
+
+@media (max-width: 768px) {
+  .news-list {
+    .item {
+      display: flex;
+      flex-direction: row;
+      padding: 25px;
+      border-radius: 6px;
+      background-color: $box-color;
+
+      img {
+        width: 200px;
+        height: 140px;
+        margin-right: 25px;
+      }
+    }
+  }
+}
+@media (max-width: 540px) {
+  .news-list {
+    .item {
+      flex-direction: column;
+
+      img {
+        width: 100%;
+        height: 180px;
+        
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
 </style>