From 27ce68a76e4180728a298ced67552de21e4f3c58 Mon Sep 17 00:00:00 2001 From: chenxing Date: Wed, 14 Oct 2026 09:08:06 +0800 Subject: [PATCH] =?UTF-8?q?style(=E8=AF=BE=E8=A1=A8=E5=B0=8F=E7=BB=84?= =?UTF-8?q?=E4=BB=B6):=20=E4=B8=8B=E6=8B=89=E9=80=89=E4=B8=AD=E6=80=81?= =?UTF-8?q?=E6=94=B9=E5=93=81=E7=89=8C=E8=89=B2(#5979ea/#eef2ff)=EF=BC=9B?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E9=99=90=E9=AB=98=20352px=20=E5=8F=AA?= =?UTF-8?q?=E9=9C=B2=207=20=E8=8A=82=E3=80=81=E8=B6=85=E5=87=BA=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E3=80=81=E8=A1=A8=E5=A4=B4=20sticky=20=E5=B8=B8?= =?UTF-8?q?=E9=A9=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .cls-item.on 由 #2d8cf0/#f0f7ff 改为 var(--color-primary, #5979ea) / var(--color-primary-weak, #eef2ff), 与 WsToastLayer.vue 既有约定一致(CSS 变量 + 回退值);hover 改 #f4f7ff - 表格外套 .tt-scroll:max-height 352px(表头 44 + 7×44)+ overflow-y auto + 6px 细滚动条 - th 加 position sticky / top 0 / background #fff;因 sticky + border-collapse 会丢 cell border, 分隔线由 border-bottom 改为 box-shadow inset 0 -1px 0 #e9edf1 --- src/components/widgets/SyllabusWidget.vue | 66 ++++++++++++++++------- 1 file changed, 46 insertions(+), 20 deletions(-) diff --git a/src/components/widgets/SyllabusWidget.vue b/src/components/widgets/SyllabusWidget.vue index 48027cb..7b7fbb1 100644 --- a/src/components/widgets/SyllabusWidget.vue +++ b/src/components/widgets/SyllabusWidget.vue @@ -34,22 +34,25 @@
- - - - - - - - - - - - - -
节{{ day.name }}
{{ cnNum(slot.slotNo) }} - {{ subjectOf(slot, day.index) }} -
+ +
+ + + + + + + + + + + + + +
节{{ day.name }}
{{ cnNum(slot.slotNo) }} + {{ subjectOf(slot, day.index) }} +
+
@@ -225,11 +228,11 @@ function reportHeight() { white-space: nowrap; &:hover { - background: #f5f8fb; + background: #f4f7ff; } &.on { - color: #2d8cf0; - background: #f0f7ff; + color: var(--color-primary, #5979ea); + background: var(--color-primary-weak, #eef2ff); font-weight: 600; } } @@ -240,6 +243,24 @@ function reportHeight() { .table-wrap { padding: 8px 8px 10px; } +/* 最多露出 7 节课(表头 44 + 7×44 = 352),再多则纵向滚动,表头 sticky 常驻 */ +.tt-scroll { + max-height: 352px; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #d5dbe3 transparent; + + &::-webkit-scrollbar { + width: 6px; + } + &::-webkit-scrollbar-thumb { + background: #d5dbe3; + border-radius: 3px; + } + &::-webkit-scrollbar-track { + background: transparent; + } +} .tt { width: 100%; border-collapse: collapse; @@ -255,7 +276,12 @@ function reportHeight() { // 否则表头文字按基线对齐、偏上,视觉上像"贴住卡片 header" vertical-align: middle; border: 0; - border-bottom: 1px solid #e9edf1; + // sticky + border-collapse 时 cell 的 border 会随滚动丢失 ⇒ 用 inset box-shadow 画分隔线 + box-shadow: inset 0 -1px 0 #e9edf1; + position: sticky; + top: 0; + z-index: 1; + background: #fff; } th:first-child, td:first-child {