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" rel="noopener"
>查看概览 ›</a> >查看概览 ›</a>
</div> </div>
<ul v-if="currentList.length > 0" class="wk-list"> <!-- 列表区固定高度(≈5 条单行):超出滚动;空态(休/节假日/无安排)同高,卡片高度不跳 -->
<li v-for="(item, index) in currentList" :key="index"> <div class="wk-list-area">
<div class="line"> <ul v-if="currentList.length > 0" class="wk-list">
<span class="content" :title="item.contents">{{ item.contents }}</span> <li v-for="(item, index) in currentList" :key="index">
<span class="time">{{ item.times }}</span> <div class="line">
</div> <span class="content" :title="item.contents">{{ item.contents }}</span>
<div v-if="metaOf(item)" class="meta">{{ metaOf(item) }}</div> <span class="time">{{ item.times }}</span>
</li> </div>
</ul> <div v-if="metaOf(item)" class="meta">{{ metaOf(item) }}</div>
<div v-else class="no-data">{{ currentDayLabel }}</div> </li>
</ul>
<div v-else class="no-data">{{ currentDayLabel }}</div>
</div>
<!-- 备注:默认 2 行截断,超出才给「展开/收起」;空备注整块不渲染 --> <!-- 备注:默认 2 行截断,超出才给「展开/收起」;空备注整块不渲染 -->
<div v-if="remarkText" class="wk-remark"> <div v-if="remarkText" class="wk-remark">
@@ -282,7 +285,7 @@ function reportHeight() {
gap: 8px; gap: 8px;
margin: 0 15px; margin: 0 15px;
padding: 6px 0 10px; padding: 6px 0 10px;
font-size: 14px; font-size: 15px;
font-weight: 700; font-weight: 700;
color: #344449; color: #344449;
> span { > span {
@@ -308,28 +311,37 @@ function reportHeight() {
margin: 0 15px 6px; margin: 0 15px 6px;
gap: 4px; gap: 4px;
.d { .d {
position: relative;
flex: 1 1 0; flex: 1 1 0;
text-align: center; text-align: center;
font-size: 12px; font-size: 14px;
color: #6e7c87; color: #6e7c87;
border-radius: 4px; border-radius: 4px;
padding: 4px 0; // 底部留出圆点位置:整周无安排时也占位,日期条高度恒定
padding: 4px 0 11px;
cursor: pointer; cursor: pointer;
b { b {
display: block; display: block;
font-size: 13px; font-size: 15px;
color: #344449; color: #344449;
margin-top: 2px; margin-top: 2px;
font-weight: 600; font-weight: 600;
} }
&.has b::after { // 圆点绝对定位在单元格底部(今日的蓝底方块不会把它盖住)
b::after {
content: ""; content: "";
display: block; position: absolute;
left: 50%;
bottom: 3px;
transform: translateX(-50%);
width: 4px; width: 4px;
height: 4px; height: 4px;
border-radius: 50%; border-radius: 50%;
background: #2d8cf0; background: #2d8cf0;
margin: 2px auto 0; visibility: hidden;
}
&.has b::after {
visibility: visible;
} }
// 休息日(周六 / 周日)弱化日期数字 // 休息日(周六 / 周日)弱化日期数字
&.rest b { &.rest b {
@@ -343,7 +355,7 @@ function reportHeight() {
&.is-on { &.is-on {
color: #1d4ed8; color: #1d4ed8;
b { b {
width: 26px; width: 28px;
margin: 2px auto 0; margin: 2px auto 0;
padding: 1px 0; padding: 1px 0;
background: #2d8cf0; background: #2d8cf0;
@@ -361,13 +373,13 @@ function reportHeight() {
margin: 8px 15px 0; margin: 8px 15px 0;
} }
.wk-tips { .wk-tips {
font-size: 14px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #1f2329; color: #1f2329;
} }
.wk-overview { .wk-overview {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 12px; font-size: 13px;
color: #2d8cf0; color: #2d8cf0;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@@ -375,15 +387,33 @@ function reportHeight() {
color: #1d6fd0; 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 { .wk-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
li { li {
margin: 0 15px; margin: 0 15px;
padding: 5px 0; padding: 6px 0;
border-bottom: 1px solid #f2f4f7; border-bottom: 1px solid #f2f4f7;
font-size: 12.5px; font-size: 15px;
color: #344449; color: #344449;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@@ -406,17 +436,22 @@ function reportHeight() {
} }
.meta { .meta {
margin-top: 2px; margin-top: 2px;
font-size: 11.5px; font-size: 12.5px;
color: #98a2b0; color: #98a2b0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} }
/* 备注:与「安排数据」区分——上方一条分割线 + 浅底块,跟白色列表拉开层次 */
.wk-remark { .wk-remark {
margin: 8px 15px 0; margin: 8px 15px 0;
font-size: 12px; padding: 8px 10px;
color: #6e7c87; background: #f7f8fa;
border-top: 1px solid #eef1f5;
border-radius: 6px;
font-size: 13px;
color: #5b6672;
.rk-txt { .rk-txt {
line-height: 1.6; line-height: 1.6;
// 备注可能是含换行的多行文本:pre-line 保留换行;折叠态截断 2 行 // 备注可能是含换行的多行文本:pre-line 保留换行;折叠态截断 2 行
@@ -433,7 +468,7 @@ function reportHeight() {
.rk-more { .rk-more {
display: inline-block; display: inline-block;
margin-top: 2px; margin-top: 2px;
font-size: 12px; font-size: 13px;
color: #2d8cf0; color: #2d8cf0;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@@ -443,12 +478,12 @@ function reportHeight() {
} }
} }
.no-data { .no-data {
min-height: 90px; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #b9c2cc; color: #b9c2cc;
font-size: 13px; font-size: 14px;
} }
/* ---------- 空态(模板内联 SVG,不依赖外部图片 / CSS 背景) ---------- */ /* ---------- 空态(模板内联 SVG,不依赖外部图片 / CSS 背景) ---------- */