diff --git a/frontend/src/views/factor/FactorPicker.vue b/frontend/src/views/factor/FactorPicker.vue index 0a245ad..c07b0bf 100644 --- a/frontend/src/views/factor/FactorPicker.vue +++ b/frontend/src/views/factor/FactorPicker.vue @@ -31,6 +31,11 @@ const grouped = computed(() => { return Array.from(map, ([cat, items]) => ({ cat, items })) }) +// 双竖排(用户 08-30 拍板):左列 = alpha101 + builtin(小类拼一列), +// 右列 = alpha158(大类独占);未知类别归左列尾部,两列大体平齐。 +const leftGroups = computed(() => grouped.value.filter((g) => g.cat !== 'alpha158')) +const rightGroups = computed(() => grouped.value.filter((g) => g.cat === 'alpha158')) + function visible(item: FactorItem): boolean { const v = q.value.trim().toLowerCase() if (!v) return true @@ -83,17 +88,34 @@ defineExpose({ hydrate })
-
-
- {{ g.cat }} - {{ g.items.length }} 个 +
+
+
+ {{ g.cat }} + {{ g.items.length }} 个 +
+
+ {{ f.name }} +
-
- {{ f.name }} +
+
+
+
+ {{ g.cat }} + {{ g.items.length }} 个 +
+
+ {{ f.name }} +
@@ -121,7 +143,8 @@ defineExpose({ hydrate }) .searchrow input::placeholder { color: var(--text-3); } .searchrow input:focus { outline: 1px solid rgba(0,229,255,.5); } .count { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; } -.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } +.groups { display: flex; gap: 12px; align-items: flex-start; } +.groups .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } /* 默认收起:两行分组预览(头部+两行 chips ≈ 128px);渐隐底边提示可展开 */ .groups.collapsed { max-height: 128px; overflow: hidden; position: relative; } .groups.collapsed::after { @@ -135,7 +158,7 @@ defineExpose({ hydrate }) color: var(--text-2); cursor: pointer; transition: all .12s ease; } .foldbtn:hover { color: var(--brand); border-color: rgba(0, 229, 255, .4); } -@media (max-width: 980px) { .groups { grid-template-columns: 1fr; } } +@media (max-width: 980px) { .groups { flex-direction: column; } } .grp .gh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .grp .gc { font-family: var(--mono); font-size: 10px; color: var(--text-3); } .cat-chip { display: inline-block; padding: 1px 8px; border-radius: var(--r-sm); font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 17px; border: 1px solid transparent; } diff --git a/frontend/src/views/factor/Leaderboard.vue b/frontend/src/views/factor/Leaderboard.vue index 7313f05..a3ca7e5 100644 --- a/frontend/src/views/factor/Leaderboard.vue +++ b/frontend/src/views/factor/Leaderboard.vue @@ -289,14 +289,19 @@ onMounted(async () => { } .btn.primary { - color: var(--text); - background: var(--brand); - border-color: var(--brand); - box-shadow: var(--glow-cyan); + /* 对齐 el-button--primary 观感(新建模拟盘同款):青软底+荧光青字, + * 深底亮字对比清楚;青实底配冷白字对比不足(用户 08-30 反馈) */ + color: var(--brand); + background: var(--cyan-soft); + border-color: rgba(0, 229, 255, 0.5); + font-weight: 600; + letter-spacing: 0.3px; } .btn.primary:hover { - background: var(--cyan-dim); + color: var(--brand); + background: rgba(0, 229, 255, 0.22); + border-color: rgba(0, 229, 255, 0.65); } .stats {