-
{{ item.contents }}
-
{{ item.times }}
+
+
{{ item.contents }}
+
+
+ {{ metaOf(item) || "-" }}
+ {{ item.times }}
-
-
{{ metaOf(item) || "-" }}
{{ currentDayLabel }}
@@ -372,6 +374,15 @@ $wk-primary-dark: #4864d8;
// 底部留出圆点位置:整周无安排时也占位,日期条高度恒定
padding: 4px 0 11px;
cursor: pointer;
+ // 星期数:块级行盒 + 下留 3px —— 把今日方块与圆点整体让下去,数字本身位置不动
+ // (方块 28px 上下居中于数字,不加留白时上沿贴「星期数」4.1px、下沿贴圆点 1.5px)
+ // ⚠️ 必须用 padding-bottom 而非 margin-bottom:后者会与 b 的 margin-top 折叠
+ //(max(正) + min(负)),今日格的 −1px 与其余格的 2px 会走出不同结果 ⇒ 今日数字偏低 1.75px
+ > span {
+ display: block;
+ line-height: 21px;
+ padding-bottom: 3px;
+ }
b {
display: block;
font-size: 15px;
@@ -381,12 +392,12 @@ $wk-primary-dark: #4864d8;
// 圆点改锚数字块(不再锚格子):格子被今日格 28px 方块拉高时圆点不再跟着沉
position: relative;
}
- // 圆点绝对定位在数字块下方 6px(bottom:-8px ⇒ 点中心 = b 底边 + 6,与线上旧位一致)
+ // 圆点绝对定位在数字块下方 6px(bottom:-11px ⇒ 点中心 = b 底边 + 9,与留白一起把圆点让到方块下方)
b::after {
content: "";
position: absolute;
left: 50%;
- bottom: -8px;
+ bottom: -11px;
transform: translateX(-50%);
width: 4px;
height: 4px;
@@ -417,9 +428,9 @@ $wk-primary-dark: #4864d8;
color: #fff;
border-radius: 4px;
}
- // 方块比数字行盒高 5.5px,圆点随之低 2.5px ⇒ 上收 2.5px,七格圆点同线(格顶 + 55.5)
+ // 方块比数字行盒高 5.5px,圆点随之低 2.5px ⇒ 上收 2.5px,七格圆点同线
b::after {
- bottom: -5.5px;
+ bottom: -8.5px;
}
}
}
@@ -473,17 +484,31 @@ $wk-primary-dark: #4864d8;
overflow: hidden;
padding: 6px 0;
border-bottom: 1px solid #f2f4f7;
- font-size: 15px;
color: #344449;
&:last-child {
border-bottom: 0;
}
- .line {
- display: flex;
- align-items: center;
- }
}
+ // 标题独占一行(时间已移到信息行):14px,右侧不再被时间占宽
.content {
+ display: block;
+ font-size: 14px;
+ color: #344449;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ // 信息行:地点 / 负责人 / 参与人 在左,时间贴最右端;无时间时信息文本照常占满
+ .meta {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ margin-top: 2px;
+ font-size: 12.5px;
+ color: #98a2b0;
+ }
+ .meta-txt {
flex: 1 1 auto;
// ⚠️ 必须显式 min-width:0:flex 项默认 min-width:auto,遇 nowrap 长文本
// 会以 max-content 为下限而不收缩 ⇒ text-overflow 永不触发
@@ -495,21 +520,11 @@ $wk-primary-dark: #4864d8;
.time {
flex: 0 0 auto;
color: #6e7c87;
- margin-left: 10px;
- // 汉字型时间(全天/放假)降一档:同字号下汉字字面高 ≈1.29 × 数字(15px 实测 18px vs 14px),
- // 15px 时观感比「14:00-15:00」明显偏大
+ // 汉字型时间(全天/放假)降一档:同字号下汉字字面高 ≈1.29 × 数字(15px 实测 18px vs 14px)
&.is-cjk {
font-size: 13px;
}
}
- .meta {
- margin-top: 2px;
- font-size: 12.5px;
- color: #98a2b0;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
}
/* ---------- 加载态:结构化骨架(与内容逐段同构同高,换周不塌不跳) ----------
标题 40 + 七日条 63 + 列表 171 + 备注区 66.59 + 根部 padding 16 ≈ 364.6px,
@@ -549,13 +564,22 @@ $wk-primary-dark: #4864d8;
text-align: center;
font-size: 14px;
padding: 4px 0 11px;
- // 星期条:inline-block 10px 高,行盒由 14px 字体的 21px strut 决定(与真实星期同行高)
+ // 星期条:外框 24px 与真实星期数同高(21px 行盒 + 3px 下留白),条本身 10px 居上
+ // ⚠️ 内层条的定位必须用父级 padding-top,不能用子元素 margin-top:
+ // 父级无 padding/border 时子元素上边距会「塌」到父级外面,凭空多出 5.5px 高度
.w {
- display: inline-block;
+ display: block;
width: 14px;
- height: 10px;
- border-radius: 3px;
- background: var(--wk-skel);
+ height: 24px;
+ margin: 0 auto;
+ padding-top: 5.5px;
+ &::before {
+ content: "";
+ display: block;
+ height: 10px;
+ border-radius: 3px;
+ background: var(--wk-skel);
+ }
}
b {
display: block;
@@ -595,7 +619,7 @@ $wk-primary-dark: #4864d8;
border-bottom: 0;
}
.l {
- height: 22.5px;
+ height: 21px;
display: flex;
align-items: center;
gap: 10px;