From c1e56cc07fe18c361ccfb29e616f4267fa6475d8 Mon Sep 17 00:00:00 2001
From: ivan <ivan@qq.com>
Date: Fri, 13 Feb 2026 20:30:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E6=A0=8F=E6=BB=91=E5=8A=A8=E6=95=88=E6=9E=9C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Home.vue | 54 +++++++++++++++++++++++++---------------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index d53e88b..443e3cb 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,21 +1,23 @@
 <template>
   <div class="home-page">
-    <!-- 分类置顶、全宽无左右留白 -->
-    <div v-if="categoryLayers.length > 0" class="home-category-wrap">
-        <!-- 第一层：纯文字 tabs -->
-        <div class="home-category-layer home-category-layer--text">
-          <v-tabs
-            :model-value="layerActiveValues[0]"
-            class="home-tab-bar"
-            @update:model-value="onCategorySelect(0, $event)"
-          >
-            <v-tab v-for="item in categoryLayers[0]" :key="item.id" :value="item.id">
-              {{ item.label }}
-            </v-tab>
-          </v-tabs>
-        </div>
-        <!-- 第二层：带图标的横向选项（icon 在上，文字在下） -->
-        <div v-if="categoryLayers.length >= 2" class="home-category-layer home-category-layer--icon">
+    <!-- 第一层：置顶、全宽，始终可见 -->
+    <div v-if="categoryLayers.length > 0" class="home-category-layer1-wrap">
+      <div class="home-category-layer home-category-layer--text">
+        <v-tabs
+          :model-value="layerActiveValues[0]"
+          class="home-tab-bar"
+          @update:model-value="onCategorySelect(0, $event)"
+        >
+          <v-tab v-for="item in categoryLayers[0]" :key="item.id" :value="item.id">
+            {{ item.label }}
+          </v-tab>
+        </v-tabs>
+      </div>
+    </div>
+    <v-container fluid class="home-container">
+      <!-- 第二三层：随内容滚动，回顶部时与列表第一行一起出现 -->
+      <div v-if="categoryLayers.length >= 2" class="home-category-layers-23-scroll">
+        <div class="home-category-layer home-category-layer--icon">
           <div class="home-category-icon-row">
             <button
               v-for="item in categoryLayers[1]"
@@ -31,7 +33,6 @@
             </button>
           </div>
         </div>
-        <!-- 第三层：标题 + 搜索/筛选 + 文字 tabs -->
         <div v-if="categoryLayers.length >= 3" class="home-category-layer home-category-layer--third">
           <div class="home-category-third-header">
             <h3 class="home-category-third-title">{{ selectedLayer0SectionTitle }}</h3>
@@ -55,7 +56,6 @@
           </v-tabs>
         </div>
       </div>
-    <v-container fluid class="home-container">
       <!-- 可滚动容器作为 v-pull-to-refresh 的父元素，组件据此判断 scrollTop 仅在顶部时才响应下拉 -->
       <div ref="scrollRef" class="home-list-scroll">
         <v-pull-to-refresh class="pull-to-refresh" @load="onRefresh">
@@ -500,7 +500,6 @@ onUnmounted(() => {
   max-width: 2560px;
   margin-left: auto;
   margin-right: auto;
-  padding-top: 20px;
 }
 
 .home-header {
@@ -612,15 +611,11 @@ onUnmounted(() => {
   margin-top: 40px;
 }
 
-/* 分类置顶、全宽（突破父级 padding，左右无留白） */
-.home-category-wrap {
+/* 第一层：置顶、全宽 */
+.home-category-layer1-wrap {
   width: 100vw;
   max-width: 100vw;
   margin-left: calc(50% - 50vw);
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
   position: sticky;
   top: 64px;
   z-index: 10;
@@ -628,6 +623,15 @@ onUnmounted(() => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+/* 第二三层：随内容滚动，全宽 */
+.home-category-layers-23-scroll {
+  width: 100vw;
+  max-width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-bottom: 0;
+  background-color: white;
+}
+
 .home-category-layer {
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 }