拆分 HomeView.vue 巨型文件

frontend/src/styles/home-filters.css

@@ -0,0 +1,230 @@
+/* 筛选器相关样式 */
+.horizontal-filter-card {
+  padding: 24px;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
+}
+
+.filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.filter-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filter-title strong {
+  font-size: 18px;
+  font-weight: 800;
+  color: #17233d;
+}
+
+.filter-title span {
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f1f5f9;
+  font-size: 13px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.filter-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.filter-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  background: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.filter-chip:hover {
+  border-color: #ff6a00;
+  background: #fff7ed;
+}
+
+.filter-chip.active {
+  border-color: #ff6a00;
+  background: #fff7ed;
+  color: #ff6a00;
+}
+
+.filter-chip.wide {
+  min-width: 140px;
+}
+
+/* 筛选器弹窗样式 */
+:global(.home-filter-popover) {
+  padding: 8px !important;
+  border-radius: 12px !important;
+}
+
+.filter-menu,
+.range-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.filter-menu button,
+.range-menu button {
+  padding: 10px 14px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.filter-menu button:hover,
+.range-menu button:hover {
+  background: #f1f5f9;
+}
+
+.filter-menu button.active,
+.range-menu button.active {
+  background: #fff7ed;
+  color: #ff6a00;
+  font-weight: 700;
+}
+
+.range-manual {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid #e2e8f0;
+  margin-top: 4px;
+}
+
+.range-manual :deep(.el-input-number) {
+  flex: 1;
+}
+
+.range-manual span {
+  color: #94a3b8;
+  font-weight: 700;
+}
+
+/* 皮肤筛选器 */
+.skin-filter-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.skin-reset {
+  padding: 10px 14px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.skin-reset:hover {
+  background: #f1f5f9;
+}
+
+.skin-reset.active {
+  background: #fff7ed;
+  color: #ff6a00;
+  font-weight: 700;
+}
+
+.skin-filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skin-filter-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 4px;
+}
+
+.skin-filter-title strong {
+  font-size: 13px;
+  font-weight: 700;
+  color: #17233d;
+}
+
+.skin-filter-title button {
+  padding: 4px 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.skin-filter-title button:hover {
+  background: #f1f5f9;
+}
+
+.skin-filter-title button.active {
+  background: #fff7ed;
+  color: #ff6a00;
+}
+
+.skin-filter-options {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px;
+}
+
+.skin-filter-options button {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.skin-filter-options button:hover {
+  background: #f1f5f9;
+}
+
+.skin-filter-options button.active {
+  background: #fff7ed;
+  color: #ff6a00;
+  font-weight: 700;
+}