Просмотр исходного кода

fix(移动端首页): 合并行业分类容器并调整网格布局

重构行业展示区域,将 `.mb-industry-content` 和 `.mb-industry-other` 两个容器合并为一个 `.mb-industry-other` 容器。调整网格布局为 4 行 5 列,以修复布局错乱问题并提升视觉一致性。
reaper 1 месяц назад
Родитель
Сommit
d4a3f0de02
1 измененных файлов с 5 добавлено и 21 удалено
  1. 5 21
      app/pages/mobile/index.vue

+ 5 - 21
app/pages/mobile/index.vue

@@ -28,7 +28,7 @@
     </section>
 
     <section class="mb-industry">
-      <div class="mb-industry-content">
+      <div class="mb-industry-other">
         <div class="mb-industry-item">
           <img src="~/assets/svg/home/icon1.svg" alt="icon">
           <div class="mb-industry-text">金融</div>
@@ -49,9 +49,6 @@
           <img src="~/assets/svg/home/icon5.svg" alt="icon">
           <div class="mb-industry-text">教育</div>
         </div>
-      </div>
-
-      <div class="mb-industry-other">
         <div class="mb-other-item">
           <NuxtImg height="26" src="/images/home/icon6.png" alt="卓越教育" />
         </div>
@@ -260,8 +257,10 @@ import StatsSection from '~/components/mobile/home/StatsSection.vue';
     width: 100%;
     overflow: hidden;
 
-    .mb-industry-content {
-      display: flex;
+    .mb-industry-other {
+      display: grid;
+      grid-template-rows: repeat(4, auto);
+      grid-template-columns: repeat(5, 105px);
       gap: 10px;
       width: 100%;
       overflow-x: auto;
@@ -297,21 +296,6 @@ import StatsSection from '~/components/mobile/home/StatsSection.vue';
           font-weight: 400;
         }
       }
-    }
-
-    .mb-industry-other {
-      display: grid;
-      grid-template-rows: repeat(3, auto);
-      grid-template-columns: repeat(5, 105px);
-      gap: 10px;
-      width: 100%;
-      overflow-x: auto;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
 
       .mb-other-item {
         box-sizing: border-box;