卡片 · card-timeaxis 时间轴
卡片家族
索引
base
cpanel
crumb
full
page
border
radius
api
artic
namecode
imgs
tips
total
default
box
checkbox
form
form-item
form-inpselect
table
pager
multipled
menubar
mode
menus
tabmenu
code
json
template
tab
slide
paginate
tree
toggle
marquee
timeaxis
waterfall
popup
nav
chatbox
drag
choose
progress
roll
时间轴卡
card-timeaxis：纵向时间线——timeaxis-box > timeaxis-head（分段标题，粗体）+ timeaxis-body > timeaxis-item（flex）由 itemhead（时间列，右边框 + 左侧留白）+ itembody（事件内容）组成；timeaxis-style2 变体保持同等结构复写配色。
本页内容
纵向时间线
纵向时间线
项目阶段
08:00
需求评审完成
10:30
进入开发排期
16:00
首轮联调，待验收
<div class="card card-timeaxis vertical" data-url="timeaxis-demo.json">
<div class="card-body">
<div class="timeaxis-box">
<div class="timeaxis-head">项目阶段</div>
<div class="timeaxis-body">
<div class="timeaxis-item">
<div class="timeaxis-itemhead">08:00</div>
<div class="timeaxis-itembody">需求评审完成</div>
</div>
</div>
</div>
</div>
</div>
| timeaxis-itemhead | 时间列：flex:none + 右边框，左侧 2rem 留白作编辑区 |
| timeaxis-itembody | 事件内容：0.5rem 左留白 + word-break |
| timeaxis-style2 | 变体：结构与 vertical 一致，重写配色占位 |
| data-url | 时间线数据接口（引擎初始化即 POST；静态展示可指向空数据 JSON） |
| .vertical | 基类必须追加：100% 宽高 + overflow-y 滚动 |
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页