CRM

样式文件分隔

公共样式主要分为3个 less 文件，分职责管理不同的UI层

common.less // 公共组件样式
index.less  // 基础样式重写 及 bootstap框架样式覆盖
tool.less   // 工具样式类

激活与禁用

所有组件统一使用 .active 与 .disable class样式类组合组件类来定义组件的激活与禁用

字体大小及颜色

• Header 菜单使用 16号、主体内容使用 14号 字，标注说明使用 12号
• 标题使用 #333，内容使用 #666， 提示备注使用灰色 #999
• thead 中使用 #333， tbody 中使用 #666
• 边框色 #e6e6e8

按钮 BUTTON

• btn-default 32 用于主页面操作按钮
• btn-sm 28 用于弹出层及三级页面或左右栏内容
• btn-xs 24 用于表格或行内

间距

5 的倍数: 无论是横向间距还是纵向间距都是5的倍数

表格

• 没有竖线，统一左对齐
• 如果第一列是checkbox， 则第一列居中对齐

列表操作按钮

• 主要操作使用实心的 btn-primary
• 次要操作使用空心的 btn-default
• 组合条件查询选择使用空心的 btn-group

层级管理

@zindex-navbar:            1000; //菜单导航
@zindex-dropdown:          1000; //下拉选择
@zindex-popover:           1060; //弹出框
@zindex-tooltip:           1070; //工具提示
@zindex-navbar-fixed:      1030; //fixed的主导航
@zindex-modal-background:  1040; //对话框背景
@zindex-modal:             1050; //对话框内容

布局组件结构规范

风格布局的嵌套

container / container-fluid > row > col-x-x

float布局

.ovh > .l + .r

页面结构模板

主体内容 .crm-container-main 统一样式为

padding: 20px;
background-color: #fff;
border-top: 1px solid #e6e6e8;
min-height: 500px;
min-height: 70vh;

<!-- 头部主导航 -->
<header-nav></header-nav>
<!-- 二级导航 -->
<crm-subnav
  data="settleCtrl.subnavData"
  active="settleCtrl.currNav"
  namespace="settleCtrl.namespace">
</crm-subnav>
<!-- 主体内容 -->
<div class="crm-container-main">
  <div ui-view="main" class="animate-slide-top"></div>
</div>
<!-- 底部说明 -->
<footer-nav></footer-nav>

表单组件结构规范

水平排列

form.form-inline > .form-group > lable + input.form-control

垂直排列

form.form-horizontal > .form-group> lable.col-md-3 + (.col-md-10 > input.form-control)

• 一级页面或全屏页面中统一使用 32 高度大小的表单组件
• 二级页面和弹出层中统一使用 28 高度大小的表单组件v

更多请参考Bootstrap官网