卡片 · card-cpanel 控制面板
卡片家族
索引
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
控制面板卡：1px 边框 + 轻投影，头部浅主色底 + 主色文字 + 底边线，hover 时头部轻微上浮。这是业务后台最常用的卡片容器。
基础写法
控制台
1px 边框、浅主色头部、白底主体。头部文字直接写，默认即主色。
<div class="card card-cpanel">
<div class="card-head">控制台</div>
<div class="card-body">内容</div>
</div>
变体：noheadcolor / simple
无背景头部
头部去掉浅主色底，保留底边线；此时文字建议用
label-index 保持主色。极简头部
cpanel-simple 去掉外边框与内边距、头部无背景，用于内容区二次分区。
<div class="card card-cpanel cpanel-noheadcolor">
<div class="card-head"><span class="label label-index label-weight">无背景头部</span></div>
<div class="card-body">头部去掉浅主色底，保留底边线</div>
</div>
<div class="card card-cpanel cpanel-simple">
<div class="card-head"><span class="label label-index label-weight">极简头部</span></div>
<div class="card-body"><code>cpanel-simple</code> 去掉边框与内边距，用于二次分区</div>
</div>
头部文字规范
cpanel 头部文字直接写普通文本即可（默认主色），不要套
label 状态类，也不要加 label-larger（撑高失衡）。复合情况下（如 card card-cpanel cpanel-simple）用 label-index 维持主色。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页