【顶部导航栏】使用说明:
1. 最外层必须用 top-header
2. 菜单使用 top-menu,下拉菜单使用 top-sub
3. 箭头使用 menu-arrow-*
4. 禁用项添加 class="disabled"
企业系统通用 UI - 终极完整版
【右侧快捷菜单】使用说明:
1. 父级容器需要 position: relative
2. 菜单使用 menu-right
3. 文字自动靠右,箭头在左侧
4. 展开项添加 has-sub,展开后加 open
【统计数据面板】使用说明:
1. 外层使用 stat-panel(横向排列)
2. 每个指标使用 stat-item
3. 文字说明:stat-label
4. 数值:stat-value
处理中 + 进度条 动态效果
【处理中 + 进度条】使用说明:
处理中:使用 class="loading-dots",文字后自动闪烁三点
进度条:外层 progress + 内层 progress-bar,宽度 style="width:xx%"
颜色:progress-success / warning / danger
处理中动画:
数据处理中
提交中
加载中
进度条动画(带流光):
图片展示样式
【图片样式】使用说明:
1. 响应式图片:img-responsive(自动适应宽度)
2. 卡片图片:img-card(带边框圆角)
3. 缩略图:img-thumbnail(固定100*100)
标准表格 + 紧凑表格
【表格】使用说明:
1. 标准表格:class="table"
2. 紧凑表格:class="table-compact"
3. 自带hover高亮效果
标准表格
紧凑表格
按钮(动态效果 + 禁用 + 图标按钮)
【按钮】使用说明:
1. 基础按钮:btn
2. 颜色:btn-primary / success / danger / default
3. 禁用:disabled 属性
4. 图标按钮:btn-icon
Tab 标签页(基础版 + 卡片版)
【Tab 标签页】使用说明:
1. 基础 Tab 容器:tabs + tab-item(active 为激活)
2. 卡片式 Tab:tabs-card(替换 tabs)
3. 禁用 Tab:添加 disabled 类
4. 内容区:tab-content(active 显示对应内容)
5. 点击切换:调用 switchTab(tabIndex) 方法
基础版 Tab
首页内容:展示企业系统概览数据
数据统计内容:工单、报工、合格率等统计信息
系统设置内容:权限、参数、个性化配置
卡片版 Tab(带背景/圆角)
生产管理:工单创建、报工记录、进度跟踪
车间管理:车间列表、设备配置、人员排班
用户管理:账号、角色、权限分配
左侧菜单(标准 + 紧凑)
【左侧菜单】使用说明:
1. 标准菜单:menu
2. 紧凑菜单:menu-compact
3. 当前选中:active
4. 可展开:has-sub
列表 + 标签(增强版:多色状态)
【列表 + 标签】使用说明:
列表:使用 class="list",自动带边框分隔线
标签:使用 class="tag",颜色:tag-blue / green / orange / red
默认
启用
正常
待审
异常
消息提示框
【消息提示框】使用说明:
1. 基础:msg-box
2. 状态:msg-success / error / warning / info
3. 自带边框、背景、文字色
操作成功
操作失败
警告提示
普通提示
弹出对话框
【弹出对话框】使用说明:
1. 遮罩:modal-overlay
2. 弹窗:modal
3. 打开:openModal() 关闭:closeModal()