筛选使用弹窗

src/App.vue

@@ -353,7 +353,9 @@ function insuranceLabel(value: string) {
         </div>
       </section>
 
-      <section v-if="filterOpen" class="filter-panel">
+      <Teleport to="body">
+        <div v-if="filterOpen" class="filter-overlay" @click.self="filterOpen = false">
+          <section class="filter-panel">
             <div class="filter-head">
               <strong>筛选条件</strong>
               <button type="button" @click="resetFilters">重置</button>
@@ -458,6 +460,8 @@ function insuranceLabel(value: string) {
               <button type="button" @click="confirmFilters">确定筛选</button>
             </div>
           </section>
+        </div>
+      </Teleport>
 
       <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-top: 1px solid #f0f1f4;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 8px 18px rgba(24, 26, 32, 0.05);
+  border-radius: 14px 14px 10px 10px;
+  box-shadow: 0 -12px 32px rgba(24, 26, 32, 0.18);
+  overflow: hidden;
+  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 {