组件约定

组件「基类 + 变体」机制

裸写变体类（如 class="label-tips"、class="card-line"）样式完全不生效——不是降级，而是没有任何规则命中。需要基类的组件类：

组件	正确写法	裸写后果
提示文字	<span class="label label-tips">	无颜色
字段标签	<span class="label label-text">	无颜色
状态/色标签	<span class="label label-green">	无颜色
按钮	<button class="btn btn-index"> / btn btn-index-hollow	无按钮样式
卡片	<div class="card card-full">	无卡片样式
分隔线	<div class="card card-line">	分隔线不显示
页面容器	<div class="page page-content">	无页面样式

可单独使用的独立类

以下工具类为独立选择器，无需基类即可单独使用：

• fill 系列：.fill-white 等（fill 是卡片级背景，label 是内容行级字体，勿单元素叠加）
• 工具类：form-input、mgrem*/pdrem*/mg-*/pd-*、col-*/row-*、text-*、wdp-*、hide 等

子元素是上下文选择器

子元素自身不需基类，由父级触发：

• card-head / card-body / card-foot：由 .card 上下文生效，父级有 card 基类即可
• page-head / page-body / page-foot：由 .page.page-* 上下文生效，仅在 page 架构内有效；脱离 page 架构裸用无效

常见坑速查

• class="label-tips" / label-text 裸用 → 颜色不生效
• class="card-line" 裸用 → 分隔线不显示
• 非 page 架构下 class="page-head" → 无样式，改普通 <div class="row-flex">
• wx-card-* 等自定义类无 CSS 定义，不要使用
• card-image 默认 display:inline-block，单独使用宽度为 0，必须加 wdp-100
• 同排次要按钮用 btn-index-hollow，浅色背景禁 btn-white-hollow（隐身）
• 表头/数据列 th、td 不加 label 类（破坏表格布局）

代码规范要点

场景	✅ 正确	❌ 错误
间距方式	mgrem*/pdrem* 或 mg-*/pd-*	内联 style="margin:10px"
卡片间隔	卡片间用 mgremt-10	每张卡包 div 加 margin
内容页容器	<div class="page page-content">	裸 body 无容器
主要按钮	btn-index	自定义背景色
次要按钮（浅底）	btn-index-hollow	btn-white-hollow
状态胶囊	<span class="label label-pill label-pill-success">	自定义背景
输入框/下拉	form-input	裸 input / select
长文本截断	.td-ellipsis	固定宽度撑破行
组件类写法	基类+变体成对	裸写变体类