Files
2026-01-22 20:41:54 +08:00

177 lines
8.5 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Billing Validator — 周报 (2026-01-21)</title>
<style>
:root{
/* 调整为浅色但非纯白的配色 */
--bg: #eef3f8; /* 页面背景:柔和的浅蓝灰 */
--text: #0f1722; /* 深色文字 */
--accent: #1f6feb; /* 主色 */
--muted: #556678; /* 次要文字 */
--card-bg: #fbfdff; /* 卡片背景:非常浅但不是纯白 */
--panel-bg: #fcfdff; /* 面板背景:接近卡片但有轻微差别 */
--tag-bg: rgba(31,111,235,0.08);
}
/* 全局 box-sizing,避免 padding/margin 导致元素尺寸计算超出容器 */
*, *::before, *::after { box-sizing: border-box; }
/* 不显示浏览器滚动条,幻灯片与容器自己收缩/适配 */
html,body{height:100%;margin:0;background:var(--bg);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text);overflow:hidden}
/* 视口内边距:在大屏上留出更多背景边缘,避免幻灯片看起来过于靠边 */
.viewport{display:flex;align-items:center;justify-content:center;height:100%;padding:clamp(24px, 4vw, 120px);box-sizing:border-box;overflow:hidden}
/* 固定 16:9 的幻灯片尺寸 */
.slide{
/* 在 4K 等大屏上占更多空间,同时在小屏时使用视口百分比;受限于可见高度 */
/* 略减宽度上限并留出更多外围空白 */
width: min(3600px, 92vw);
aspect-ratio: 16 / 9;
height: auto;
max-height: 98vh;
background:linear-gradient(180deg,var(--card-bg),#fbfdff);
box-shadow:0 10px 30px rgba(15,23,34,0.12);
border-radius:12px;
/* 增大最小内边距,确保内容远离边缘;在大屏上仍可放大 */
padding: clamp(24px, 3.5vw, 80px);
box-sizing:border-box;
display:flex;
flex-direction:column;
gap:1.6em;
overflow:hidden; /* 确保 slide 内部内容不会溢出可视区域 */
position:relative; /* 作为裁剪和定位上下文 */
max-width:3600px; /* 在大屏幕上允许更大展示 */
}
/* 基于 slide 宽度与高度的字体缩放:在空间不足时文字会自动变小,优先同时兼顾宽高,尽量避免出现滚动条 */
.slide { --slide-font: clamp(10px, calc(0.8vw + 0.6vh), 20px); font-size: var(--slide-font); }
.header{display:flex;align-items:flex-start;justify-content:space-between}
/* 使用 em,使字号随 .slide 的 font-size 缩放 */
.title{font-size:1.6em;font-weight:700;color:var(--text)}
.subtitle{font-size:0.85em;color:var(--muted);margin-top:0.4em}
/* 内容区使用可收缩的弹性布局,防止子元素撑开父容器 */
.content{display:flex;gap:2em;flex:1;min-height:0;width:100%;box-sizing:border-box;padding:0.2em}
/* 列和面板需要在 flex 布局中可收缩:min-width:0/box-sizing:border-box */
.col{flex:1;background:transparent;padding:1.1em 1.4em;border-radius:8px;display:flex;flex-direction:column;min-height:0;min-width:0;box-sizing:border-box}
/* 不使用内部滚动条:让文字自动换行并通过字体缩放适配空间;若仍溢出,会被裁剪,避免滚动条 */
.panel{background:linear-gradient(180deg,var(--panel-bg),#fbfdff);padding: clamp(16px, 1.6vw, 48px);border-radius:10px;box-shadow:0 6px 16px rgba(15,23,34,0.04);flex:1;min-height:0;min-width:0;overflow:hidden;border:1px solid rgba(15,23,34,0.04);box-sizing:border-box;max-height:100%;max-width:100%}
/* 确保列表内不会意外增加宽度或高度 */
.panel ul, .panel ol {margin:0;box-sizing:border-box}
h3{font-size:1.1em}
ul{margin:0;padding-left:1.125em;color:var(--text);line-height:1.6}
ol{margin:0;padding-left:1.125em;color:var(--text);line-height:1.6}
li{margin-bottom:0.4em}
/* 每个子项内部的元信息(状态/负责人/备注) */
.item-meta{margin-top:0.5em;color:var(--muted);font-size:0.95em;display:block}
.tag{background:var(--tag-bg);color:var(--accent);padding:0.25em 0.6em;border-radius:999px;font-weight:600;font-size:0.85em;display:inline-block;margin-bottom:0.45em}
.meta-text{color:var(--muted);display:block;margin:0.25em 0 0 0;padding-left:0.4em}
.muted{color:var(--muted);font-size:0.95em}
.footer{display:flex;justify-content:space-between;align-items:center;margin-top:1.4em}
.pill{background:rgba(31,111,235,0.10);color:var(--accent);padding:0.5em 0.9em;border-radius:999px;font-weight:600;font-size:0.95em;border:1px solid rgba(31,111,235,0.06)}
/* 使幻灯片在小屏幕上缩放以适应视口 */
@media (max-width:1300px){
/* 小屏幕上适当减小字体和内边距 */
.slide{width:92vw}
.slide { --slide-font: clamp(11px, 1.6vw, 16px); }
.slide{padding:1.1em}
}
@media (max-width:900px){
.slide{width:96vw}
.slide { --slide-font: clamp(10px, 2.0vw, 14px); }
.slide{padding:0.6em}
}
</style>
</head>
<body>
<div class="viewport">
<div class="slide" role="document" aria-label="Billing Validator 周报 2026-01-21">
<div class="header">
<div>
<div class="title">Billing Validator — 周报</div>
<div class="subtitle">2026-01-21</div>
</div>
<div class="pill">单页汇报 · 16:9</div>
</div>
<div class="content">
<div class="col">
<div class="panel">
<h3>一、上周完成的工作</h3>
<ul>
<li>
<strong>部署与测试</strong>
<div class="item-meta">
<span class="tag">Action</span>
<div class="meta-text">Billing Validator 新架构已部署到 workstation</div>
<div class="meta-text">Status: 已启动 Sutherland LLA 测试</div>
</div>
</li>
<li>
<strong>与业务侧沟通(Paulina</strong>
<div class="item-meta">
<span class="tag">Deliverable</span>
<div class="meta-text">完成需适配场景清单(节前已适配 19 个 FTE 场景)</div>
<div class="meta-text">Vendor list: 已提供</div>
<div class="meta-text">SOP: 已提供新版撰写指导;4 个 meta-info table 可做成全局</div>
</div>
</li>
<li>
<strong>与 IT 对接</strong>
<div class="item-meta">
<span class="tag">Coordination</span>
<div class="meta-text">说明需求并传达上线初步计划</div>
<div class="meta-text">Sizing: 预计本周完成</div>
<div class="meta-text">上线初步目标: 2026-03-31</div>
</div>
</li>
<li>
<strong>数据对接(chenyao3</strong>
<div class="item-meta">
<span class="tag">Data</span>
<div class="meta-text">澄清若干数据需求;Productive time per day 与 workday 的需求暂时搁置</div>
<div class="meta-text">历史数据范围: 最近 6 个月</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="panel">
<h3>二、本周 Key Action</h3>
<ol>
<li>完成 4 个场景的适配
<ul>
<li>Sutherland-LAS-Premium</li>
<li>Sutherland-LAS-STD</li>
<li>IBM-NA-STD</li>
<li>IBM-LAS-STD</li>
</ul>
</li>
<li>针对业务反馈定位并修复 Sutherland LLA 场景中的测试问题</li>
<li>修改并验证文件上传到数据库的逻辑(当前代码已开发完成,状态:待测试/部署)</li>
<li>跟进 IT sizing 结果并确认资源/上线窗口</li>
<li>跟进 Paulina 提供剩余 FTE 场景的 SOP</li>
</ol>
<h3 style="margin-top:14px">三、Risks / Help needed</h3>
<ul>
<li>需要 Paulina 持续提供其他 FTE 场景的 SOPHelp Needed</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="muted">进度简明扼要 — 如需更详细数据请在会后补充</div>
<div class="muted">生成时间: 2026-01-21</div>
</div>
</div>
</div>
</body>
</html>