- 列表区 .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:
@@ -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 背景) ---------- */
|
||||
|
||||
Reference in New Issue
Block a user