diff --git a/src/components/widgets/WeekplanWidget.vue b/src/components/widgets/WeekplanWidget.vue index f1555d2..4e3ad15 100644 --- a/src/components/widgets/WeekplanWidget.vue +++ b/src/components/widgets/WeekplanWidget.vue @@ -59,12 +59,14 @@
{{ 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;