优化筛选

src/styles.css

@@ -196,10 +196,8 @@ button {
 }
 
 .notice span,
-.segmented,
-.sorts,
-.rangebar,
-.summary,
+.quick-filter,
+.filter-panel,
 .grid {
   min-width: 0;
 }
@@ -209,114 +207,160 @@ button {
   flex: none;
 }
 
-.filters {
-  display: grid;
-  gap: 10px;
-  padding: 10px;
+.quick-filter {
   background: #fff;
+  margin-bottom: 20px;
   min-width: 0;
   overflow: hidden;
 }
 
-.segmented,
-.sorts {
-  display: flex;
-  justify-content: center;
-  gap: 6px;
-  flex-wrap: wrap;
+.sort-line {
+  min-height: 66px;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  align-items: center;
 }
 
-.segmented button,
-.sorts button {
-  min-height: 34px;
+.sort-line button {
+  min-height: 66px;
   border: 0;
   background: transparent;
-  color: #777b85;
+  color: #686d77;
   display: inline-flex;
+  justify-content: center;
   align-items: center;
-  gap: 4px;
-  border-radius: 6px;
-  padding: 0 18px;
+  gap: 5px;
+  padding: 0 8px;
+  font-weight: 700;
+  font-size: 15px;
+}
+
+.sort-line button.active {
+  color: #ff506d;
+}
+
+.sort-mark {
+  color: #c4c6cc;
+  font-size: 12px;
+}
+
+.filter-panel {
+  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);
+}
+
+.filter-head {
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  border-bottom: 1px solid #f0f1f4;
+}
+
+.filter-head button {
+  border: 0;
+  background: transparent;
+  color: #ff506d;
   font-weight: 700;
 }
 
-.segmented button.active,
-.sorts button.active {
-  color: #ff506d;
-  background: #fff0f3;
-}
-
-.segmented span {
-  color: #b4b7bd;
-  font-size: 12px;
-}
-
-.rangebar {
+.filter-body {
   display: grid;
-  grid-template-columns: 1fr 1fr 36px 36px;
-  gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px 28px;
+  padding: 16px 10px 20px;
 }
 
-.rangebar label {
+.filter-field,
+.filter-group,
+.filter-range {
   display: grid;
-  grid-template-columns: max-content 1fr 1fr;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.rangebar label span {
-  color: #757985;
-  font-size: 13px;
-}
-
-.rangebar input {
-  width: 100%;
-  min-width: 0;
-  height: 34px;
-  border: 1px solid #eceef2;
-  border-radius: 6px;
-  padding: 0 8px;
-  outline: 0;
-}
-
-.icon-action {
-  width: 36px;
-  height: 34px;
-  border: 1px solid #eceef2;
-  border-radius: 6px;
-  background: #fff;
-  color: #606571;
-  display: grid;
-  place-items: center;
-}
-
-.summary {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
-  margin: 12px 0;
-}
-
-.summary div {
   min-width: 0;
-  min-height: 58px;
-  border-radius: 8px;
-  background: #fff;
-  display: grid;
-  place-items: center;
-  align-content: center;
-  box-shadow: 0 1px 8px rgba(24, 26, 32, 0.04);
 }
 
-.summary strong {
-  font-size: 22px;
+.filter-field-wide,
+.filter-group-wide {
+  grid-column: 1 / -1;
+}
+
+.filter-field span,
+.filter-group strong,
+.filter-range strong {
+  color: #33363d;
+  font-size: 14px;
+}
+
+.filter-field input,
+.filter-range input {
+  width: 100%;
+  height: 38px;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  outline: 0;
+  padding: 0 12px;
   color: #33363d;
 }
 
-.summary span {
-  font-size: 12px;
-  color: #8e929c;
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.filter-chips button {
+  min-width: 58px;
+  min-height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  background: #fff;
+  color: #555b66;
+  padding: 0 14px;
+}
+
+.filter-chips button.active {
+  border-color: #ff6f86;
+  color: #ff506d;
+  background: #fff2f5;
+}
+
+.filter-range > div {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+}
+
+.filter-range span {
+  color: #9aa0aa;
+}
+
+.filter-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 0 10px 18px;
+}
+
+.filter-actions button {
+  height: 44px;
+  border: 0;
+  border-radius: 999px;
+  font-weight: 700;
+}
+
+.filter-actions button:first-child {
+  background: #f2f2f3;
+  color: #70757f;
+}
+
+.filter-actions button:last-child {
+  background: #ff6f86;
+  color: #fff;
 }
 
 .grid {
@@ -516,8 +560,8 @@ button {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .rangebar {
-    grid-template-columns: 1fr 1fr;
+  .filter-body {
+    grid-template-columns: 1fr;
   }
 }
 
@@ -539,49 +583,42 @@ button {
     display: none;
   }
 
-  .summary {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .segmented,
-  .sorts {
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    overflow-x: hidden;
-    max-width: 100%;
-    scrollbar-width: none;
-  }
-
-  .segmented::-webkit-scrollbar,
-  .sorts::-webkit-scrollbar {
-    display: none;
-  }
-
-  .segmented button,
-  .sorts button {
-    flex: 0 0 auto;
-    padding: 0 16px;
-  }
-
   .hero-copy h1 {
     font-size: 22px;
     line-height: 1.15;
   }
 
+  .sort-line {
+    grid-template-columns: repeat(5, max-content);
+    overflow-x: auto;
+    justify-content: space-between;
+  }
+
+  .sort-line button {
+    min-width: 68px;
+    padding: 0 10px;
+    font-size: 14px;
+  }
+
+  .filter-panel {
+    margin-top: -10px;
+  }
+
+  .filter-body {
+    gap: 16px;
+  }
+
+  .filter-chips button {
+    min-width: 58px;
+    padding: 0 12px;
+  }
+
+  .filter-actions {
+    grid-template-columns: 1fr;
+  }
+
   .grid {
     grid-template-columns: 1fr;
     gap: 12px;
   }
-
-  .rangebar {
-    grid-template-columns: 1fr;
-  }
-
-  .rangebar label {
-    grid-template-columns: 52px 1fr 1fr;
-  }
-
-  .icon-action {
-    width: 100%;
-  }
 }