From ab9d852bde82f6e80f63d75f6ca4a2c27e5aebc3 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 16 Oct 2026 17:10:08 +0800
Subject: [PATCH] =?UTF-8?q?style(home):=20=E5=BF=AB=E9=80=9F=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E9=A1=BA=E5=BA=8F=E6=8C=89=E5=AE=BD=E5=BA=A6=E9=87=8D?=
 =?UTF-8?q?=E6=8E=92=E5=B9=B6=E7=BB=9F=E4=B8=80=E4=B8=A4=E5=88=97=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=EF=BC=8C=E4=B8=8A=E4=B8=8B=E4=B8=A4=E5=9D=97=E5=8F=B3?=
 =?UTF-8?q?=E5=88=97=E5=AF=B9=E9=BD=90=E3=80=81=E9=AB=98=E7=BA=A7=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E8=99=9A=E7=BA=BF=E6=94=B9=E6=9F=94=E5=92=8C=E6=A9=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../listings/components/HomeFilters.vue       | 112 +++++++++---------
 frontend/src/styles/home-filters.css          |  12 +-
 2 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/frontend/src/features/listings/components/HomeFilters.vue b/frontend/src/features/listings/components/HomeFilters.vue
index cd56d98..5ea9f4a 100644
--- a/frontend/src/features/listings/components/HomeFilters.vue
+++ b/frontend/src/features/listings/components/HomeFilters.vue
@@ -163,32 +163,48 @@ const redSkinGroup = computed(() =>
         </div>
       </div>
 
-      <div class="filter-field">
-        <label>比例</label>
+      <div v-if="meleeSkinGroup" class="filter-field">
+        <label>{{ meleeSkinGroup.title }}</label>
         <div class="pill-row">
           <button
-            v-for="item in ratioRangeOptions.filter(o => o.label !== '全部')"
-            :key="item.label"
+            v-for="skin in meleeSkinGroup.options"
+            :key="`melee-${skin}`"
             type="button"
             class="pill-chip"
-            :class="{ active: isRangeActive('minRatio', 'maxRatio', item) }"
-            @click="toggleRange('minRatio', 'maxRatio', item)"
+            :class="{ active: filters.skinNames.includes(skin) }"
+            @click="toggleSkin(skin)"
           >
-            {{ item.label }}
+            {{ skin }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="redSkinGroup" class="filter-field">
+        <label>{{ redSkinGroup.title }}</label>
+        <div class="pill-row">
+          <button
+            v-for="skin in redSkinGroup.options"
+            :key="`red-${skin}`"
+            type="button"
+            class="pill-chip"
+            :class="{ active: filters.skinNames.includes(skin) }"
+            @click="toggleSkin(skin)"
+          >
+            {{ skin }}
           </button>
         </div>
       </div>
 
       <div class="filter-field">
-        <label>AWM子弹</label>
+        <label>租金</label>
         <div class="pill-row">
           <button
-            v-for="item in awmRangeOptions.filter(o => o.label !== '全部')"
-            :key="item.label"
+            v-for="item in moneyRangeOptions.filter(o => o.label !== '全部')"
+            :key="`price-${item.label}`"
             type="button"
             class="pill-chip"
-            :class="{ active: isRangeActive('minAwmAmmo', 'maxAwmAmmo', item) }"
-            @click="toggleRange('minAwmAmmo', 'maxAwmAmmo', item)"
+            :class="{ active: isRangeActive('minPrice', 'maxPrice', item) }"
+            @click="toggleRange('minPrice', 'maxPrice', item)"
           >
             {{ item.label }}
           </button>
@@ -212,53 +228,21 @@ const redSkinGroup = computed(() =>
       </div>
 
       <div class="filter-field">
-        <label>租金</label>
+        <label>比例</label>
         <div class="pill-row">
           <button
-            v-for="item in moneyRangeOptions.filter(o => o.label !== '全部')"
-            :key="`price-${item.label}`"
+            v-for="item in ratioRangeOptions.filter(o => o.label !== '全部')"
+            :key="item.label"
             type="button"
             class="pill-chip"
-            :class="{ active: isRangeActive('minPrice', 'maxPrice', item) }"
-            @click="toggleRange('minPrice', 'maxPrice', item)"
+            :class="{ active: isRangeActive('minRatio', 'maxRatio', item) }"
+            @click="toggleRange('minRatio', 'maxRatio', item)"
           >
             {{ item.label }}
           </button>
         </div>
       </div>
 
-      <div class="filter-field">
-        <label>负重</label>
-        <div class="pill-row">
-          <button
-            v-for="item in publishOptions.level_options"
-            :key="`load-${item}`"
-            type="button"
-            class="pill-chip"
-            :class="{ active: filters.load.includes(item) }"
-            @click="toggleChip('load', item)"
-          >
-            {{ item }}
-          </button>
-        </div>
-      </div>
-
-      <div v-if="meleeSkinGroup" class="filter-field">
-        <label>{{ meleeSkinGroup.title }}</label>
-        <div class="pill-row">
-          <button
-            v-for="skin in meleeSkinGroup.options"
-            :key="`melee-${skin}`"
-            type="button"
-            class="pill-chip"
-            :class="{ active: filters.skinNames.includes(skin) }"
-            @click="toggleSkin(skin)"
-          >
-            {{ skin }}
-          </button>
-        </div>
-      </div>
-
       <div class="filter-field">
         <label>体力</label>
         <div class="pill-row">
@@ -275,18 +259,34 @@ const redSkinGroup = computed(() =>
         </div>
       </div>
 
-      <div v-if="redSkinGroup" class="filter-field">
-        <label>{{ redSkinGroup.title }}</label>
+      <div class="filter-field">
+        <label>AWM子弹</label>
         <div class="pill-row">
           <button
-            v-for="skin in redSkinGroup.options"
-            :key="`red-${skin}`"
+            v-for="item in awmRangeOptions.filter(o => o.label !== '全部')"
+            :key="item.label"
             type="button"
             class="pill-chip"
-            :class="{ active: filters.skinNames.includes(skin) }"
-            @click="toggleSkin(skin)"
+            :class="{ active: isRangeActive('minAwmAmmo', 'maxAwmAmmo', item) }"
+            @click="toggleRange('minAwmAmmo', 'maxAwmAmmo', item)"
           >
-            {{ skin }}
+            {{ item.label }}
+          </button>
+        </div>
+      </div>
+
+      <div class="filter-field">
+        <label>负重</label>
+        <div class="pill-row">
+          <button
+            v-for="item in publishOptions.level_options"
+            :key="`load-${item}`"
+            type="button"
+            class="pill-chip"
+            :class="{ active: filters.load.includes(item) }"
+            @click="toggleChip('load', item)"
+          >
+            {{ item }}
           </button>
         </div>
       </div>
diff --git a/frontend/src/styles/home-filters.css b/frontend/src/styles/home-filters.css
index 445ada5..d7b3175 100644
--- a/frontend/src/styles/home-filters.css
+++ b/frontend/src/styles/home-filters.css
@@ -94,10 +94,13 @@
   box-shadow: 0 3px 8px rgba(255, 106, 0, 0.3) !important;
 }
 
-/* PC 点击式快速筛选：左列占左半边，右列左对齐到卡片中线偏右（居中的「展开高级筛选」右边一点） */
+/* PC 点击式快速筛选：上下两块（快速筛选 / 高级筛选）共用同一套两列网格。
+   两列必须用固定比例 1fr 1fr，不能用 54% + max-content：后者的右列会在「该列最宽项」
+   处冻结，而快速筛选（含 11 个刀皮胶囊）与高级筛选（含 IP地区/枪皮等整行跨列项，会把
+   右列成长上限撑大）冻结点不同，导致两块右列起点错开、下端看起来没和上面对齐。 */
 .quick-filter-grid {
   display: grid;
-  grid-template-columns: minmax(0, 54%) minmax(0, max-content);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 12px 40px;
 }
 
@@ -112,7 +115,7 @@
   grid-column: 1 / -1;
 }
 
-/* 登录方式固定到右侧第二列（与「体力」同行的右列），避免左侧列过挤 */
+/* 登录方式固定到右侧第二列（与「负重」同行的右列），避免左侧列过挤 */
 .login-method-field {
   grid-column: 2;
 }
@@ -228,10 +231,11 @@
   transform: rotate(180deg);
 }
 
+/* 高级筛选与上方快速筛选的分隔虚线：品牌橙降低不透明度，做出柔和（不刺眼）的橙色虚线 */
 .advanced-filter-panel {
   margin-top: 12px;
   padding-top: 14px;
-  border-top: 1px dashed #e5eaf1;
+  border-top: 1px dashed rgba(255, 106, 0, 0.4);
 }
 
 @media (max-width: 960px) {