style(home): 快速筛选顺序按宽度重排并统一两列网格，上下两块右列对齐、高级筛选虚线改柔和橙

frontend/src/features/listings/components/HomeFilters.vue

@@ -163,32 +163,48 @@ const redSkinGroup = computed(() =>
         </div>
       </div>
 
-      <div class="filter-field">
+      <div v-if="meleeSkinGroup" class="filter-field">
-        <label>比例</label>
+        <label>{{ meleeSkinGroup.title }}</label>
         <div class="pill-row">
           <button
-            v-for="item in ratioRangeOptions.filter(o => o.label !== '全部')"
+            v-for="skin in meleeSkinGroup.options"
-            :key="item.label"
+            :key="`melee-${skin}`"
             type="button"
             class="pill-chip"
-            :class="{ active: isRangeActive('minRatio', 'maxRatio', item) }"
+            :class="{ active: filters.skinNames.includes(skin) }"
-            @click="toggleRange('minRatio', 'maxRatio', item)"
+            @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 !== '全部')"
+            v-for="item in moneyRangeOptions.filter(o => o.label !== '全部')"
-            :key="item.label"
+            :key="`price-${item.label}`"
             type="button"
             class="pill-chip"
-            :class="{ active: isRangeActive('minAwmAmmo', 'maxAwmAmmo', item) }"
+            :class="{ active: isRangeActive('minPrice', 'maxPrice', item) }"
-            @click="toggleRange('minAwmAmmo', 'maxAwmAmmo', 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 !== '全部')"
+            v-for="item in ratioRangeOptions.filter(o => o.label !== '全部')"
-            :key="`price-${item.label}`"
+            :key="item.label"
             type="button"
             class="pill-chip"
-            :class="{ active: isRangeActive('minPrice', 'maxPrice', item) }"
+            :class="{ active: isRangeActive('minRatio', 'maxRatio', item) }"
-            @click="toggleRange('minPrice', 'maxPrice', 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">
+      <div class="filter-field">
-        <label>{{ redSkinGroup.title }}</label>
+        <label>AWM子弹</label>
         <div class="pill-row">
           <button
-            v-for="skin in redSkinGroup.options"
+            v-for="item in awmRangeOptions.filter(o => o.label !== '全部')"
-            :key="`red-${skin}`"
+            :key="item.label"
             type="button"
             class="pill-chip"
-            :class="{ active: filters.skinNames.includes(skin) }"
+            :class="{ active: isRangeActive('minAwmAmmo', 'maxAwmAmmo', item) }"
-            @click="toggleSkin(skin)"
+            @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>

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) {