style(一周安排小组件): 节假日去红同周末灰、备注「收起」贴末行右端、汉字时间降一档、今日方块数字改 flex 居中
build / build (push) Successful in 43s
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user