layui card组件可通过自定义css+html实现标题栏左侧状态指示条：在layui-card-header内插入带class的span色条，配合absolute定位、top50%+transform居中及padding-left预留空间。
在 Layui 的 card 组件中，原生不支持标题栏左侧的状态指示条，但可以通过自定义 CSS + HTML 结构轻松实现。核心思路是：**在 card-header 内部左侧插入一个窄条状元素（如 <span></span>），并设置背景色和高度，同时调整标题文字的内边距或位置，避免重叠。**
1. 修改 card HTML 结构，添加状态色条
在 layui-card-header 内开头插入一个带 class 的 <span></span>，用于承载彩色指示条：
<div class="layui-card">
<div class="layui-card-header">
<span class="card-status-indicator" style="background-color: #5FB878;"></span>
我的卡片标题
</div>
<div class="layui-card-body">
卡片内容...
</div>
</div>
2. 添加自定义 CSS 控制样式
用以下 CSS 精确控制指示条的尺寸、对齐和标题间距：
.layui-card-header {
position: relative;
padding-left: 12px; /* 为色条留出空间 */
}
.card-status-indicator {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 24px;
border-radius: 0 2px 2px 0;
}
- position: absolute 让色条脱离文档流，精准贴左居中
- top: 50% + transform 实现垂直居中（适配不同字号）
- width/height 可按需调整，推荐 4px 宽 × 24px 高
- border-radius 让右侧圆角更柔和（可选）
3. 支持多状态的实用写法
可预设多个 class 方便复用，例如：
<span class="card-status-indicator status-success"></span> <span class="card-status-indicator status-warning"></span> <span class="card-status-indicator status-danger"></span>
对应 CSS：
.status-success { background-color: #5FB878; }
.status-warning { background-color: #F7B824; }
.status-danger { background-color: #FF5722; }
4. 注意事项
- 确保
.layui-card-header没有被其他样式覆盖position（建议加!important或提高选择器权重） - 若使用了
layui-card-header > .layui-icon（如折叠图标），需检查是否影响布局，必要时给图标加margin-left: 8px - 响应式场景下，小屏幕标题换行时，色条仍保持固定位置，无需额外处理
