前端UI规范

备注：局部规范遵循系统整体设计规范。特殊调整，注明调整原因，规范使用过程中如果出现需要调整需告知规范约定者。 create：Alex　

颜色主题

蓝-主色 #1F8AE9
黑-主色 #23262F
藏青-主色 #393D49
灰-主色 #EEEEEE


默认 #1881DF
警告 #EFB01C
成功 #70A433
危险 #DF2626


灰色 #F2F2F2
警告 #E5A714
成功 #66972D
危险 #D41E1E

栅格布局

al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1
al-col__1


al-col__2
al-col__2
al-col__2
al-col__2
al-col__2
al-col__2
al-col__2
al-col__2
al-col__2
al-col__2
al-col__2
al-col__2


al-col__3
al-col__3
al-col__3
al-col__3
al-col__3
al-col__3
al-col__3
al-col__3


al-col__4
al-col__4
al-col__4
al-col__4
al-col__4
al-col__4


al-col__6
al-col__6
al-col__6
al-col__6


al-col__8
al-col__8
al-col__8


al-col__12
al-col__12


al-col__24

网页排版

  • 一级菜单-1

    • 二级菜单-1-1

      • 三级菜单-1-1-1

      • 三级菜单-1-1-2

    • 二级菜单-1-2

      • 三级菜单-1-2-1

      • 三级菜单-1-2-2

  • 一级菜单-2

    • 二级菜单2-1

    • 二级菜单2-2

  • 一级菜单-3

按钮主题

按钮尺寸



圆角按钮



胶囊按钮



表单规范

请正确输入
请正确输入

  1. 请选择
  2. A
  3. B
  4. C

  1. 请选择
  2. A
  3. B
  4. C

  1. 请选择
  2. A
  3. B
  4. C

弹出层

标题

提示框

Tab切换

默认风格

第一 第二 第三

卡片风格

第一 第二 第三

表格

姓名 性别 年龄 联系方法 E-mail 操作
雨化田 男 24 18112232002 fineRain@gmail.com
雨化田 男 24 18112232002 fineRain@gmail.com
雨化田 男 24 18112232002 fineRain@gmail.com
雨化田 男 24 18112232002 fineRain@gmail.com
雨化田 男 24 18112232002 fineRain@gmail.com

图标按钮

导航

  • 一级菜单-1

    • 二级菜单-1-1

      • 三级菜单-1-1-1

      • 三级菜单-1-1-2

    • 二级菜单-1-2

      • 三级菜单-1-2-1

      • 三级菜单-1-2-2

  • 一级菜单-2

    • 二级菜单2-1

    • 二级菜单2-2

  • 一级菜单-3

字体图标

  • 日历、便签
    .al-icon__activity
  • 编辑、记录
    .al-icon__brush
  • 修改、编辑
    .al-icon__editor
  • 标记
    .al-icon__label
  • 锁定
    .al-icon__lock
  • 刷新
    .al-icon__refresh
  • 设置
    .al-icon__setup
  • 警告
    .al-icon__prompt
  • 警告、提示
    .al-icon__warning
  • 成功
    .al-icon__success
  • 时间、等待
    .al-icon__time
  • 删除、移除
    .al-icon__trash
  • 删除、失败
    .al-icon__delete
  • 搜索、查看
    .al-icon__search
  • 添加、新增
    .al-icon__add
  • 关闭
    .al-icon__close
  • 上一个
    .al-icon__return
  • 下一个
    .al-icon__enter
  • 向上
    .al-icon__packup
  • 向下
    .al-icon__unfold