style(课表小组件): 表头垂直居中、左右留白 8px、行高 44px、科目 2 行省略号兜底
build / build (push) Successful in 46s

- th 补 vertical-align: middle —— base/_reset.scss(meyerweb) 给 th/td 统一设了 baseline,
  scoped 只给 td 写了 middle 导致表头文字按基线对齐、偏上,视觉上像"贴住卡片 header"
- .table-wrap padding 2px 15px 12px → 8px 8px 10px(小组件窄,收敛左右留白)
- td height 52 → 44px
- 科目包 <span class="sub" :title>,-webkit-line-clamp:2:超长科目最多 2 行、省略号收尾、悬停看全文
This commit is contained in:
chenxing
2026-10-14 08:44:27 +08:00
parent 479f7b22a7
commit 3a7502f106
+17 -3
View File
@@ -44,7 +44,9 @@
<tbody>
<tr v-for="slot in slots" :key="slot.slotNo">
<td class="sec">{{ cnNum(slot.slotNo) }}</td>
<td v-for="day in dayCols" :key="day.index">{{ subjectOf(slot, day.index) }}</td>
<td v-for="day in dayCols" :key="day.index">
<span class="sub" :title="subjectOf(slot, day.index)">{{ subjectOf(slot, day.index) }}</span>
</td>
</tr>
</tbody>
</table>
@@ -236,7 +238,7 @@ function reportHeight() {
/* ⚠️ 表格类名必须用私有名(tt):用 my-table 会命中全局 componets/_my_table.scss,
带进 #c7c7c7 竖线与 th 灰底 ⇒「竖线明显 / 表头与卡头糊成一片 / 横线被压得看不见」 */
.table-wrap {
padding: 2px 15px 12px;
padding: 8px 8px 10px;
}
.tt {
width: 100%;
@@ -249,6 +251,9 @@ function reportHeight() {
font-weight: 700;
color: #344449;
text-align: center;
// reset(meyerweb) 给 th/td 统一设了 vertical-align: baseline ⇒ 必须显式复位,
// 否则表头文字按基线对齐、偏上,视觉上像"贴住卡片 header"
vertical-align: middle;
border: 0;
border-bottom: 1px solid #e9edf1;
}
@@ -257,7 +262,7 @@ function reportHeight() {
width: 46px;
}
td {
height: 52px;
height: 44px;
border-bottom: 1px solid #eef1f4;
padding: 4px 2px;
text-align: center;
@@ -272,6 +277,15 @@ function reportHeight() {
font-weight: 700;
}
}
/* 科目文本:最多 2 行,超出以省略号收尾,title 悬停可看全文 */
.sub {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.35;
word-break: break-word;
}
/* ---------- 空态(模板内联 SVG,不依赖外部图片 / CSS 背景) ---------- */
.wg-empty {