@dper/style

datav - 样式工具

• class
  • 浮动
    • fl: 左浮动
    • fr: 右浮动
    • clear-float: 清除浮动(放在浮动元素的父级元素)
    • el-clear-float: 清除浮动(放在浮动元素同级的最下方)
  • 定位
    • position-abs: 绝对定位
    • position-fixed: 固定定位
    • position-rel: 相对定位
    • p-align-cm: 绝对定位水平垂直均居中
    • p-align-c: 绝对定位水平居中
    • p-align-m: 绝对定位垂直居中
  • 背景图片
    • background-contain: 背景图片完全显示在元素中
    • background-contain-tl: 定位于上左
    • background-contain-tc: 上中
    • background-contain-tr: 上右
    • background-contain-cl: 中左
    • background-contain-cc: 中中
    • background-contain-cr: 中右
    • background-contain-bl: 下左
    • background-contain-bc: 下中
    • background-contain-br: 下右
    • background-cover: 背景图片覆盖整个元素(填充不拉伸)
    • background-cover-tl: 定位于上左
    • background-cover-tc: 上中
    • background-cover-tr: 上右
    • background-cover-cl: 中左
    • background-cover-cc: 中中
    • background-cover-cr: 中右
    • background-cover-bl: 下左
    • background-cover-bc: 下中
    • background-cover-br: 下右
    • background-fill: 背景图片尺寸与元素相同(填充且拉伸)
  • 字体
    • font-*: 字体大小: * 表示 12-52(如果有更大的，在_font.scss中进行修改)
    • fw-***: 字体weight: *** 表示 100,200,300,400,500
    • fw-normal: 字体weight正常
    • fw-bold: bold
    • fw-bolder: bolder
    • fs-normal: 字体样式-正常
    • fs-it: 斜体
    • fs-ob: 斜体
    • align-left: 字体相对元素靠左
    • align-right: 靠右
    • align-center: 居中
    • text-oe: 文本超出隐藏并出现省略号
  • flex
    • flex: flex布局
    • flexr-c: 子元素水平居中
    • flexr-m: 子元素垂直居中
    • flexr-ml: 子元素垂直居中靠左
    • flexr-mr: 子元素垂直居中靠右
    • flexr-mbt: 子元素垂直居中靠在两边
    • flexr-cm: 子元素水平垂直均居中
    • flexc: flex布局-子元素按照列显示
    • flexc-c: 子元素水平居中
    • flexc-m: 子元素垂直居中
    • flexc-cm: 子元素水平垂直均居中
• scss-mixin(src/common/_mixins.scss)
  • text-linear-gradient($angle, $color, $colors): 线性渐变文字

        $angle: 渐变角度:0~360deg;
        $color: 默认字体颜色，用于不支持渐变文字的情况下;
        $colors: 颜色数组例如: (#ccc, #ccc, #ccc) 或者 (#ccc 10%, #ccc 50%, #ccc)
    

  • selection($bg, $color): 某个元素选中背景

        $bg  选中背景 默认: #1a74be
        $color  选中文字颜色 默认: #fff
    

• var(src/common/_var.scss)
  • $transition_all_linear: all .35s linear;
  • $transition_all_eio: all .35s ease-in-out;
  • $transition_all_linear_slow: all .5s linear;
  • $transition_all_eio_slow: all .5s ease-in-out;
  • $transition_all_linear_fast: all .12s linear;
  • $transition_all_eio_fast: all .12s ease-in-out;
• vue-transition:
  • fade: 渐显示