1. /*
    2. * 颜色变量
    3. *
    4. */
    5. @cpink:#c72c8b;//粉红色
    6. @red:#ff0000;//红色
    7. @yellow:#e9ea05;//黄色
    8. @Cyan:#99eff4;//青色
    9. @teal:#1c7997;//藏青色
    11. //文字颜色
    12. .color(@color:@teal){
    13.     color:@color;
    14. }
    15. //背景颜色
    16. .bgColor(@bgColor:@teal){
    17.     background-color:@bgColor;
    18. }
    19. // 元素尺寸
    20. .size(@w:100px,@h:100px){
    21.   width:@w;
    22.   height:@h;
    23. }
    24. // 鼠标手势
    25. .pointer(@type:pointer) {
    26.   cursor: @type;
    27. }
    28. // 行内块元素
    29. .inline() {
    30.   display: inline-block;
    31. }
    32. // flex布局
    33. .flex(@justify:center,@align:center) {
    34.   display: flex;
    35.   justify-content: @justify;
    36.   align-items: @align;
    37. }
    38. //超出换行
    39. .ellipsis() {
    40.   white-space: nowrap;
    41.   overflow: hidden;
    42.   text-overflow: ellipsis;
    43. }
    44. // 文字不换行
    45. .word-noWrap {
    46.   word-break: break-all;
    47.   word-wrap: break-word;
    48.   white-space: normal;
    49. }
    50. // 标题一行，多余用省略号
    51. .text-overflow {
    52.   max-width: 100%;
    53.   overflow: hidden;
    54.   text-overflow: ellipsis;
    55.   white-space: nowrap;
    56. }
    58. // 边框
    59. .border(@color:red) {
    60.   box-sizing: border-box;
    61.   border: 1px solid @color;
    62. }
    63. // 内边距
    64. .paddin(@ori,@val)when(@ori=L) {
    65.   padding-left: @val;
    66. }
    67. .paddin(@ori,@val)when(@ori=R) {
    68.   padding-right: @val;
    69. }
    70. .paddin(@ori,@val)when(@ori=T) {
    71.   padding-top: @val;
    72. }
    73. .paddin(@ori,@val)when(@ori=B) {
    74.   padding-bottom: @val;
    75. }
    76. .padding(@val) {
    77.   padding: @val;
    78. }
    79.  // 背景图片
    80. .bgImg(@width:823.3px,@height:433.3px,@count:'1-1') {
    81.   background: url('~@/assets/images/@{count}.png') no-repeat;
    82.   background-size: @width @height;
    83.   background-position: 0 0;
    84. }
    85.   // 绝对定位
    86. .absolute(@left:100px,@top:100px) {
    87.   position: absolute;
    88.   left: @left;
    89.   top: @top;
    90. }
    91.   // 文字样式
    92. .text(@size:46px,@color:rgba(253, 253, 253, 1)) {
    93.   font-size: @size;
    94.   font-family: SimHei;
    95.   font-weight: 400;
    96.   color: @color;
    97. }