diff --git a/frontend/src/features/listings/components/HomeFilters.vue b/frontend/src/features/listings/components/HomeFilters.vue index cd56d98..5ea9f4a 100644 --- a/frontend/src/features/listings/components/HomeFilters.vue +++ b/frontend/src/features/listings/components/HomeFilters.vue @@ -163,32 +163,48 @@ const redSkinGroup = computed(() => -
- +
+
+
+
+ +
+ +
+
- +
@@ -212,53 +228,21 @@ const redSkinGroup = computed(() =>
- +
-
- -
- -
-
- -
- -
- -
-
-
@@ -275,18 +259,34 @@ const redSkinGroup = computed(() =>
-
- +
+
+
+
+ +
+ +
+
diff --git a/frontend/src/styles/home-filters.css b/frontend/src/styles/home-filters.css index 445ada5..d7b3175 100644 --- a/frontend/src/styles/home-filters.css +++ b/frontend/src/styles/home-filters.css @@ -94,10 +94,13 @@ box-shadow: 0 3px 8px rgba(255, 106, 0, 0.3) !important; } -/* PC 点击式快速筛选:左列占左半边,右列左对齐到卡片中线偏右(居中的「展开高级筛选」右边一点) */ +/* PC 点击式快速筛选:上下两块(快速筛选 / 高级筛选)共用同一套两列网格。 + 两列必须用固定比例 1fr 1fr,不能用 54% + max-content:后者的右列会在「该列最宽项」 + 处冻结,而快速筛选(含 11 个刀皮胶囊)与高级筛选(含 IP地区/枪皮等整行跨列项,会把 + 右列成长上限撑大)冻结点不同,导致两块右列起点错开、下端看起来没和上面对齐。 */ .quick-filter-grid { display: grid; - grid-template-columns: minmax(0, 54%) minmax(0, max-content); + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; } @@ -112,7 +115,7 @@ grid-column: 1 / -1; } -/* 登录方式固定到右侧第二列(与「体力」同行的右列),避免左侧列过挤 */ +/* 登录方式固定到右侧第二列(与「负重」同行的右列),避免左侧列过挤 */ .login-method-field { grid-column: 2; } @@ -228,10 +231,11 @@ transform: rotate(180deg); } +/* 高级筛选与上方快速筛选的分隔虚线:品牌橙降低不透明度,做出柔和(不刺眼)的橙色虚线 */ .advanced-filter-panel { margin-top: 12px; padding-top: 14px; - border-top: 1px dashed #e5eaf1; + border-top: 1px dashed rgba(255, 106, 0, 0.4); } @media (max-width: 960px) {