style(一周安排小组件): 列表区固定5条高度+滚动/空态等高、字号对齐旧版、备注与数据区分
build / build (push) Successful in 48s

- 列表区 .wk-list-area 固定 268px(旧版实测行距≈54px×5):超出滚动、空态同高,切「休/节假日」卡片高度不再跳(实测三态卡片高 554px 完全一致)
- 日期条圆点改绝对定位+常驻占位(visibility):修「整周无安排时日期条矮 6px」;今日蓝底方块不再把圆点盖成同色
- 字号对齐旧版:标题 14→15、星期 12→14、日期 13→15、日常详情 14→16、查看概览 12→13、列表内容/时间 12.5→15、meta 11.5→12.5、备注 12→13、空态 13→14
- 备注与安排数据区分:上分割线 + #f7f8fa 浅底块 + 6px 圆角
This commit is contained in:
chenxing
2026-10-15 21:25:31 +08:00
parent 8af636641f
commit 651e7e16f3
+63 -28
View File
@@ -45,16 +45,19 @@
rel="noopener"
>查看概览 ›</a>
</div>
<ul v-if="currentList.length > 0" class="wk-list">
<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>
</div>
<div v-if="metaOf(item)" class="meta">{{ metaOf(item) }}</div>
</li>
</ul>
<div v-else class="no-data">{{ currentDayLabel }}</div>
<!-- 列表区固定高度(≈5 条单行):超出滚动;空态(休/节假日/无安排)同高,卡片高度不跳 -->
<div class="wk-list-area">
<ul v-if="currentList.length > 0" class="wk-list">
<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>
</div>
<div v-if="metaOf(item)" class="meta">{{ metaOf(item) }}</div>
</li>
</ul>
<div v-else class="no-data">{{ currentDayLabel }}</div>
</div>
<!-- 备注:默认 2 行截断,超出才给「展开/收起」;空备注整块不渲染 -->
<div v-if="remarkText" class="wk-remark">
@@ -282,7 +285,7 @@ function reportHeight() {
gap: 8px;
margin: 0 15px;
padding: 6px 0 10px;
font-size: 14px;
font-size: 15px;
font-weight: 700;
color: #344449;
> span {
@@ -308,28 +311,37 @@ function reportHeight() {
margin: 0 15px 6px;
gap: 4px;
.d {
position: relative;
flex: 1 1 0;
text-align: center;
font-size: 12px;
font-size: 14px;
color: #6e7c87;
border-radius: 4px;
padding: 4px 0;
// 底部留出圆点位置:整周无安排时也占位,日期条高度恒定
padding: 4px 0 11px;
cursor: pointer;
b {
display: block;
font-size: 13px;
font-size: 15px;
color: #344449;
margin-top: 2px;
font-weight: 600;
}
&.has b::after {
// 圆点绝对定位在单元格底部(今日的蓝底方块不会把它盖住)
b::after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 3px;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: #2d8cf0;
margin: 2px auto 0;
visibility: hidden;
}
&.has b::after {
visibility: visible;
}
// 休息日(周六 / 周日)弱化日期数字
&.rest b {
@@ -343,7 +355,7 @@ function reportHeight() {
&.is-on {
color: #1d4ed8;
b {
width: 26px;
width: 28px;
margin: 2px auto 0;
padding: 1px 0;
background: #2d8cf0;
@@ -361,13 +373,13 @@ function reportHeight() {
margin: 8px 15px 0;
}
.wk-tips {
font-size: 14px;
font-size: 16px;
font-weight: 700;
color: #1f2329;
}
.wk-overview {
flex: 0 0 auto;
font-size: 12px;
font-size: 13px;
color: #2d8cf0;
text-decoration: none;
cursor: pointer;
@@ -375,15 +387,33 @@ function reportHeight() {
color: #1d6fd0;
}
}
/* 列表区:固定高度 = 5 条(旧版实测行距 ≈54px × 5 ≈ 268px,与「内容+地点」两行条目 5 条相当);
多条滚动、空态占位同高,避免切到「休/节假日」时卡片高度跳变 */
.wk-list-area {
height: 268px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #d3d8de;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
.wk-list {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0 15px;
padding: 5px 0;
padding: 6px 0;
border-bottom: 1px solid #f2f4f7;
font-size: 12.5px;
font-size: 15px;
color: #344449;
&:last-child {
border-bottom: 0;
@@ -406,17 +436,22 @@ function reportHeight() {
}
.meta {
margin-top: 2px;
font-size: 11.5px;
font-size: 12.5px;
color: #98a2b0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* 备注:与「安排数据」区分——上方一条分割线 + 浅底块,跟白色列表拉开层次 */
.wk-remark {
margin: 8px 15px 0;
font-size: 12px;
color: #6e7c87;
padding: 8px 10px;
background: #f7f8fa;
border-top: 1px solid #eef1f5;
border-radius: 6px;
font-size: 13px;
color: #5b6672;
.rk-txt {
line-height: 1.6;
// 备注可能是含换行的多行文本:pre-line 保留换行;折叠态截断 2 行
@@ -433,7 +468,7 @@ function reportHeight() {
.rk-more {
display: inline-block;
margin-top: 2px;
font-size: 12px;
font-size: 13px;
color: #2d8cf0;
cursor: pointer;
user-select: none;
@@ -443,12 +478,12 @@ function reportHeight() {
}
}
.no-data {
min-height: 90px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #b9c2cc;
font-size: 13px;
font-size: 14px;
}
/* ---------- 空态(模板内联 SVG,不依赖外部图片 / CSS 背景) ---------- */