筛选使用弹窗

src/App.vue

@@ -353,111 +353,115 @@ function insuranceLabel(value: string) {
         </div>
       </section>
 
-      <section v-if="filterOpen" class="filter-panel">
+      <Teleport to="body">
-        <div class="filter-head">
+        <div v-if="filterOpen" class="filter-overlay" @click.self="filterOpen = false">
-          <strong>筛选条件</strong>
+          <section class="filter-panel">
-          <button type="button" @click="resetFilters">重置</button>
+            <div class="filter-head">
+              <strong>筛选条件</strong>
+              <button type="button" @click="resetFilters">重置</button>
+            </div>
+
+            <div class="filter-body">
+              <label class="filter-field filter-field-wide">
+                <span>账号编号</span>
+                <input v-model="filters.keyword" placeholder="输入编号搜索" @keyup.enter="confirmFilters" />
+              </label>
+
+              <div class="filter-group">
+                <strong>体力等级</strong>
+                <div class="filter-chips">
+                  <button
+                    v-for="option in levelOptions"
+                    :key="`stamina-${option}`"
+                    :class="{ active: isSelected(filters.stamina, option) }"
+                    type="button"
+                    @click="toggleListValue(filters.stamina, option)"
+                  >
+                    {{ option }}
+                  </button>
+                </div>
+              </div>
+
+              <div class="filter-group">
+                <strong>负重等级</strong>
+                <div class="filter-chips">
+                  <button
+                    v-for="option in levelOptions"
+                    :key="`load-${option}`"
+                    :class="{ active: isSelected(filters.load, option) }"
+                    type="button"
+                    @click="toggleListValue(filters.load, option)"
+                  >
+                    {{ option }}
+                  </button>
+                </div>
+              </div>
+
+              <div class="filter-group">
+                <strong>保险格数</strong>
+                <div class="filter-chips">
+                  <button
+                    v-for="option in insuranceOptions"
+                    :key="`insurance-${option}`"
+                    :class="{ active: isSelected(filters.insurance, option) }"
+                    type="button"
+                    @click="toggleListValue(filters.insurance, option)"
+                  >
+                    {{ insuranceLabel(option) }}
+                  </button>
+                </div>
+              </div>
+
+              <div v-for="section in skinSections" :key="section.key" class="filter-group filter-group-wide">
+                <strong>{{ section.title }}</strong>
+                <div class="filter-chips">
+                  <button
+                    v-for="option in section.options"
+                    :key="`${section.key}-${option}`"
+                    :class="{ active: isSelected(filters.skinNames, option) }"
+                    type="button"
+                    @click="toggleListValue(filters.skinNames, option)"
+                  >
+                    {{ option }}
+                  </button>
+                </div>
+              </div>
+
+              <div class="filter-range filter-group-wide">
+                <strong>哈夫币范围(M)</strong>
+                <div>
+                  <input v-model="filters.minCoin" inputmode="numeric" placeholder="最小" @keyup.enter="confirmFilters" />
+                  <span>-</span>
+                  <input v-model="filters.maxCoin" inputmode="numeric" placeholder="最大" @keyup.enter="confirmFilters" />
+                </div>
+              </div>
+
+              <div class="filter-range filter-group-wide">
+                <strong>价格范围</strong>
+                <div>
+                  <input v-model="filters.minPrice" inputmode="numeric" placeholder="最低¥" @keyup.enter="confirmFilters" />
+                  <span>-</span>
+                  <input v-model="filters.maxPrice" inputmode="numeric" placeholder="最高¥" @keyup.enter="confirmFilters" />
+                </div>
+              </div>
+
+              <div class="filter-range filter-group-wide">
+                <strong>KD 范围</strong>
+                <div>
+                  <input v-model="filters.minKd" inputmode="decimal" placeholder="最小" @keyup.enter="confirmFilters" />
+                  <span>-</span>
+                  <input v-model="filters.maxKd" inputmode="decimal" placeholder="最大" @keyup.enter="confirmFilters" />
+                </div>
+              </div>
+            </div>
+
+            <div class="filter-actions">
+              <button type="button" @click="filterOpen = false">取消</button>
+              <button type="button" @click="confirmFilters">确定筛选</button>
+            </div>
+          </section>
         </div>
-
+      </Teleport>
-        <div class="filter-body">
-          <label class="filter-field filter-field-wide">
-            <span>账号编号</span>
-            <input v-model="filters.keyword" placeholder="输入编号搜索" @keyup.enter="confirmFilters" />
-          </label>
-
-          <div class="filter-group">
-            <strong>体力等级</strong>
-            <div class="filter-chips">
-              <button
-                v-for="option in levelOptions"
-                :key="`stamina-${option}`"
-                :class="{ active: isSelected(filters.stamina, option) }"
-                type="button"
-                @click="toggleListValue(filters.stamina, option)"
-              >
-                {{ option }}
-              </button>
-            </div>
-          </div>
-
-          <div class="filter-group">
-            <strong>负重等级</strong>
-            <div class="filter-chips">
-              <button
-                v-for="option in levelOptions"
-                :key="`load-${option}`"
-                :class="{ active: isSelected(filters.load, option) }"
-                type="button"
-                @click="toggleListValue(filters.load, option)"
-              >
-                {{ option }}
-              </button>
-            </div>
-          </div>
-
-          <div class="filter-group">
-            <strong>保险格数</strong>
-            <div class="filter-chips">
-              <button
-                v-for="option in insuranceOptions"
-                :key="`insurance-${option}`"
-                :class="{ active: isSelected(filters.insurance, option) }"
-                type="button"
-                @click="toggleListValue(filters.insurance, option)"
-              >
-                {{ insuranceLabel(option) }}
-              </button>
-            </div>
-          </div>
-
-          <div v-for="section in skinSections" :key="section.key" class="filter-group filter-group-wide">
-            <strong>{{ section.title }}</strong>
-            <div class="filter-chips">
-              <button
-                v-for="option in section.options"
-                :key="`${section.key}-${option}`"
-                :class="{ active: isSelected(filters.skinNames, option) }"
-                type="button"
-                @click="toggleListValue(filters.skinNames, option)"
-              >
-                {{ option }}
-              </button>
-            </div>
-          </div>
-
-          <div class="filter-range filter-group-wide">
-            <strong>哈夫币范围(M)</strong>
-            <div>
-              <input v-model="filters.minCoin" inputmode="numeric" placeholder="最小" @keyup.enter="confirmFilters" />
-              <span>-</span>
-              <input v-model="filters.maxCoin" inputmode="numeric" placeholder="最大" @keyup.enter="confirmFilters" />
-            </div>
-          </div>
-
-          <div class="filter-range filter-group-wide">
-            <strong>价格范围</strong>
-            <div>
-              <input v-model="filters.minPrice" inputmode="numeric" placeholder="最低¥" @keyup.enter="confirmFilters" />
-              <span>-</span>
-              <input v-model="filters.maxPrice" inputmode="numeric" placeholder="最高¥" @keyup.enter="confirmFilters" />
-            </div>
-          </div>
-
-          <div class="filter-range filter-group-wide">
-            <strong>KD 范围</strong>
-            <div>
-              <input v-model="filters.minKd" inputmode="decimal" placeholder="最小" @keyup.enter="confirmFilters" />
-              <span>-</span>
-              <input v-model="filters.maxKd" inputmode="decimal" placeholder="最大" @keyup.enter="confirmFilters" />
-            </div>
-          </div>
-        </div>
-
-        <div class="filter-actions">
-          <button type="button" @click="filterOpen = false">取消</button>
-          <button type="button" @click="confirmFilters">确定筛选</button>
-        </div>
-      </section>
 
       <div v-if="loading && !listings.length" class="state">
         <LoaderCircle class="spin" :size="22" />

src/styles.css

@@ -245,14 +245,30 @@ button {
 }
 
 .filter-panel {
+  width: min(1120px, calc(100vw - 24px));
+  max-height: min(760px, 82vh);
+  display: flex;
+  flex-direction: column;
   background: #fff;
-  margin: -8px 0 20px;
+  border-radius: 14px 14px 10px 10px;
-  border-top: 1px solid #f0f1f4;
+  box-shadow: 0 -12px 32px rgba(24, 26, 32, 0.18);
-  border-radius: 0 0 8px 8px;
+  overflow: hidden;
-  box-shadow: 0 8px 18px rgba(24, 26, 32, 0.05);
+  animation: sheetUp 0.18s ease-out;
+}
+
+.filter-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 18px 12px;
+  background: rgba(24, 26, 32, 0.28);
 }
 
 .filter-head {
+  flex: none;
   min-height: 48px;
   display: flex;
   align-items: center;
@@ -269,10 +285,12 @@ button {
 }
 
 .filter-body {
+  flex: 1;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px 28px;
   padding: 16px 10px 20px;
+  overflow: auto;
 }
 
 .filter-field,
@@ -340,6 +358,7 @@ button {
 }
 
 .filter-actions {
+  flex: none;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
@@ -363,6 +382,17 @@ button {
   color: #fff;
 }
 
+@keyframes sheetUp {
+  from {
+    transform: translateY(18px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -600,8 +630,14 @@ button {
     font-size: 14px;
   }
 
+  .filter-overlay {
+    padding: 10px 0 0;
+  }
+
   .filter-panel {
-    margin-top: -10px;
+    width: 100vw;
+    max-height: 86vh;
+    border-radius: 14px 14px 0 0;
   }
 
   .filter-body {