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

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>