style(一周安排小组件): 节假日去红同周末灰、备注「收起」贴末行右端、汉字时间降一档、今日方块数字改 flex 居中
build / build (push) Successful in 43s

- ① 节假日日期不再标红:#e64545 撤除,与周末统一 #98a2b0(.d.rest b, .d.holiday b)
- ② 备注「收起」不再另起一行:.rk-more 由「仅折叠态」改恒绝对定位(right:10px / bottom:8px),
  .rk-txt 恒 padding-right:34px 给按钮让位;移除已无用的 collapsed 类
  实测:按钮落在最后一行区间内、超出正文底边 0px、右端 gap 0px、正文仍 4 行未多占一行
- ③ times 含汉字时降一档:新增 isCjk(/[\u4e00-\u9fa5]/) + .time.is-cjk{font-size:13px}
  依据:同字号下汉字字面高 18px vs 数字 14px(截图像素实测),「全天」与「14:00-15:00」观感拉平
- ④ 今日方块数字居中:.d.is-on b 改 display:flex + align/justify:center + height:22px + line-height:1
  原 1.5 行盒含 descender 空白 ⇒ 数字视觉偏上 1.2px;修后偏 +0.5px(渲染量化噪声底),
  且与其余 6 天墨迹行完全一致(64..85,差 0.00px);水平方向经「圆点反推格中心」校验方块为精确居中,
  残余偏差来自字体字怀(「1」开头的数字墨迹心普遍右偏 0.2~1.0px),故不加固定位移
This commit is contained in:
chenxing
2026-10-16 10:19:44 +08:00
parent 5d7b8526f4
commit 84bbf2faf4
+28 -19
View File
@@ -51,7 +51,7 @@
<li v-for="(item, index) in currentList" :key="index">
<div class="line">
<span class="content" :title="item.contents">{{ item.contents }}</span>
<span class="time">{{ item.times }}</span>
<span class="time" :class="{ 'is-cjk': isCjk(item.times) }">{{ item.times }}</span>
</div>
<!-- 信息行恒渲染:地点 / 负责人 / 出席对象全空时落「-」,不留白(条目保持等高) -->
<div class="meta">{{ metaOf(item) || "-" }}</div>
@@ -62,7 +62,7 @@
<!-- 备注:无备注整块不渲染(不占位,卡片高度随内容);
默认 2 行截断,溢出才给「展开」(折叠态按钮贴第二行末尾) -->
<div v-if="remarkText" class="wk-remark" :class="{ collapsed: !remarkExpanded }">
<div v-if="remarkText" class="wk-remark">
<div ref="refRemark" class="rk-txt" :class="{ expanded: remarkExpanded }">{{ remarkText }}</div>
<span v-if="remarkOverflow" class="rk-more" @click="toggleRemark">{{ remarkExpanded ? "收起" : "展开" }}</span>
</div>
@@ -260,6 +260,11 @@ function metaOf(item: any) {
return parts.join(" · ");
}
/** 右侧时间文案是否含汉字(如「全天」):同字号下汉字字面高 ≈1.29 × 数字,降一档字号(.is-cjk) */
function isCjk(value: any) {
return /[\u4e00-\u9fa5]/.test(String(value || ""));
}
function toggleRemark() {
remarkExpanded.value = !remarkExpanded.value;
if (!remarkExpanded.value) nextTick(measureRemark);
@@ -355,21 +360,25 @@ $wk-primary-dark: #4864d8;
&.has b::after {
visibility: visible;
}
// 休息日(周六 / 周日)弱化日期数字
&.rest b {
// 休息日(周六 / 周日)与法定节假日:日期数字同档弱化灰(节假日不再标红)
&.rest b,
&.holiday b {
color: #98a2b0;
}
// 法定节假日醒目标记
&.holiday b {
color: #e64545;
}
// 今日:蓝底白字方块(置最后,压过 rest / holiday 的日期字色)
// 数字居中:flex 双向居中 + 定高 22px;line-height:1 去掉行盒 descender 余量
//(原 15px/1.5 行盒:数字视觉偏上 ≈1.2px,且行盒底部 descender 空白把方块"顶高")
// margin-top 1px:让方块里的数字与其余 6 天同基线(实测差 ≤0.5px)
&.is-on {
color: $wk-primary;
b {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
margin: 2px auto 0;
padding: 1px 0;
height: 22px;
margin: 1px auto 0;
line-height: 1;
background: $wk-primary;
color: #fff;
border-radius: 4px;
@@ -452,6 +461,11 @@ $wk-primary-dark: #4864d8;
flex: 0 0 auto;
color: #6e7c87;
margin-left: 10px;
// 汉字型时间(全天/放假)降一档:同字号下汉字字面高 ≈1.29 × 数字(15px 实测 18px vs 14px),
// 15px 时观感比「14:00-15:00」明显偏大
&.is-cjk {
font-size: 13px;
}
}
.meta {
margin-top: 2px;
@@ -480,25 +494,20 @@ $wk-primary-dark: #4864d8;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
// 右侧恒留 34px 给按钮:折叠态第二行以省略号收尾,展开态最后一行绕开按钮
padding-right: 34px;
&.expanded {
display: block;
overflow: visible;
}
}
// 折叠态:正文右侧给「展开」留位(第二行以省略号收尾),按钮贴第二行末尾(右端)
&.collapsed .rk-txt {
padding-right: 34px;
}
&.collapsed .rk-more {
// 「展开 / 收起」恒贴正文最后一行的右端(折叠=第二行、展开=最后一行),不另起一行
.rk-more {
position: absolute;
right: 10px;
bottom: 8px;
// 与备注块同底色,压住可能蹭到的正文尾部
background: #f7f8fa;
}
.rk-more {
display: inline-block;
margin-top: 2px;
font-size: 13px;
color: $wk-primary;
cursor: pointer;