|
|
@@ -0,0 +1,489 @@
|
|
|
+@import '@/common/scss/base.scss';
|
|
|
+// cell-card 升级版 -> bl-flex
|
|
|
+.bl-flex {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ // 基础参数
|
|
|
+ &[between] {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ &[around] {
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ &[flex-end] {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ &[items-flex-end] {
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+ &[column] {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ &[center] {
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ &[items-center] {
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ &[content-center] {
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ &[flex-wrap] {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ > [flex1] {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ &[card], [card] {
|
|
|
+ padding: $sp-md $sp-lg;
|
|
|
+ background-color: $color-f;
|
|
|
+ border-radius: $sp-sm;
|
|
|
+ margin-left: $sp-lg;
|
|
|
+ margin-right: $sp-lg;
|
|
|
+ margin-bottom: $sp-md;
|
|
|
+ overflow: hidden;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: $sp-md;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 方框大小，缩略之类的作用
|
|
|
+ &[box-xs], [box-xs]{
|
|
|
+ width: 4 * $size-xs;
|
|
|
+ height: 4 * $size-xs;
|
|
|
+ }
|
|
|
+ &[box-sm], [box-sm]{
|
|
|
+ width: 4 * $size-sm;
|
|
|
+ height: 4 * $size-sm;
|
|
|
+ }
|
|
|
+ &[box-md], [box-md]{
|
|
|
+ width: 4 * $size-md;
|
|
|
+ height: 4 * $size-md;
|
|
|
+ }
|
|
|
+ &[box-lg], [box-lg]{
|
|
|
+ width: 4 * $size-lg;
|
|
|
+ height: 4 * $size-lg;
|
|
|
+ }
|
|
|
+ &[box-xl], [box-xl]{
|
|
|
+ width: 4 * $size-xl;
|
|
|
+ height: 4 * $size-xl;
|
|
|
+ }
|
|
|
+ &[box-thumb], [box-thumb]{
|
|
|
+ width: 4 * $size-sm;
|
|
|
+ height: 4 * $size-sm;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 高宽
|
|
|
+ &[h100], [h100] {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ &[w100], [w100] {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击效果
|
|
|
+ &[active], [active] {
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ &:active {
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &[touch], [touch] {
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ &[noselect], [noselect] {
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 阴影
|
|
|
+ &[shadow], [shadow] {
|
|
|
+ box-shadow: 0 0 12px 0 $color-5;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[opacity-1], [opacity-1] {
|
|
|
+ opacity: 0.1;
|
|
|
+ }
|
|
|
+ &[opacity-2], [opacity-2] {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ &[opacity-3], [opacity-3] {
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ &[opacity-4], [opacity-4] {
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ &[opacity-5], [opacity-5] {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ &[opacity-6], [opacity-6] {
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+ &[opacity-7], [opacity-7] {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ &[opacity-8], [opacity-8] {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ &[opacity-9], [opacity-9] {
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 圆角
|
|
|
+ &[round], [round] {
|
|
|
+ border-radius: $sp-sm;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ &[round-xs], [round-xs] {
|
|
|
+ border-radius: $sp-xs;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ &[round-pie], [round-pie] {
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ &[round-top], [round-top] {
|
|
|
+ border-radius: $sp-md $sp-md 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ &[round-bottom], [round-top] {
|
|
|
+ border-radius: 0 0 $sp-md $sp-md;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ &[round-pie1], [round-pie1] {
|
|
|
+ border-radius: 9999px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 边框
|
|
|
+ &[border], [boder] {
|
|
|
+ border: 1px solid $color-6;
|
|
|
+ }
|
|
|
+ &[border-bottom],[border-bottom] {
|
|
|
+ border-bottom: 1px solid $color-6;
|
|
|
+ }
|
|
|
+ &[border-top],[border-top] {
|
|
|
+ border-top: 1px solid $color-6;
|
|
|
+ }
|
|
|
+ &[border0], [border0] {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 相对定位 & 绝对定位
|
|
|
+ &[relative], [relative] {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ &[absolute], [absolute] {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 对齐方式
|
|
|
+ &[text-right], [text-right] {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &[text-right], [text-right] {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ &[text-center], [text-center] {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 不换行
|
|
|
+ &[nowrap], [nowrap] {
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ // 强制换行
|
|
|
+ &[wrap], [wrap] {
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-wrap: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 字体大小
|
|
|
+ &[size-xl], [size-xl] {
|
|
|
+ font-size: $size-xl;
|
|
|
+ }
|
|
|
+ &[size-lg], [size-lg] {
|
|
|
+ font-size: $size-lg;
|
|
|
+ }
|
|
|
+ &[size-md], [size-md] {
|
|
|
+ font-size: $size-md;
|
|
|
+ }
|
|
|
+ &[size-sm], [size-sm] {
|
|
|
+ font-size: $size-sm;
|
|
|
+ }
|
|
|
+ &[size-xs], [size-xs] {
|
|
|
+ font-size: $size-xs;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[bold], [bold] {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 字体颜色
|
|
|
+ &[color-title], [color-title] {
|
|
|
+ color: $color-1;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ &[color-text], [color-text] {
|
|
|
+ color: $color-1;
|
|
|
+ }
|
|
|
+ &[color-des], [color-des] {
|
|
|
+ color: $color-3;
|
|
|
+ }
|
|
|
+ &[color-info], [color-info] {
|
|
|
+ color: $color-4;
|
|
|
+ }
|
|
|
+ &[color], [color] {
|
|
|
+ color: $color;
|
|
|
+ }
|
|
|
+ &[color-warning], [color-warning] {
|
|
|
+ color: $color-warning;
|
|
|
+ }
|
|
|
+ &[color-error], [color-error] {
|
|
|
+ color: $color-error;
|
|
|
+ }
|
|
|
+ &[color-success], [color-success] {
|
|
|
+ color: $color-success;
|
|
|
+ }
|
|
|
+ &[color-f], [color-f] {
|
|
|
+ color: $color-f;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 背景色
|
|
|
+ &[bg-color-0], [bg-color-0] {
|
|
|
+ background-color: $color-0;
|
|
|
+ }
|
|
|
+ &[bg-color-1], [bg-color-1] {
|
|
|
+ background-color: $color-1;
|
|
|
+ }
|
|
|
+ &[bg-color-2], [bg-color-2] {
|
|
|
+ background-color: $color-2;
|
|
|
+ }
|
|
|
+ &[bg-color-3], [bg-color-3] {
|
|
|
+ background-color: $color-3;
|
|
|
+ }
|
|
|
+ &[bg-color-4], [bg-color-4] {
|
|
|
+ background-color: $color-4;
|
|
|
+ }
|
|
|
+ &[bg-color-5], [bg-color-5] {
|
|
|
+ background-color: $color-5;
|
|
|
+ }
|
|
|
+ &[bg-color-6], [bg-color-6] {
|
|
|
+ background-color: $color-6;
|
|
|
+ }
|
|
|
+ &[bg-color-7], [bg-color-7] {
|
|
|
+ background-color: $color-7;
|
|
|
+ }
|
|
|
+ &[bg-color], [bg-color] {
|
|
|
+ background-color: $color;
|
|
|
+ }
|
|
|
+ &[bg-color-warning], [bg-color-warning] {
|
|
|
+ background-color: $color-warning;
|
|
|
+ }
|
|
|
+ &[bg-color-success], [bg-color-success] {
|
|
|
+ background-color: $color-success;
|
|
|
+ }
|
|
|
+ &[bg-color-error], [bg-color-error] {
|
|
|
+ background-color: $color-error;
|
|
|
+ }
|
|
|
+ &[bg-color-f], [bg-color-f] {
|
|
|
+ background-color: $color-f;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 外边距
|
|
|
+ &[margin-xs], [margin-xs] {
|
|
|
+ margin: $sp-xs;
|
|
|
+ }
|
|
|
+ &[margin-sm], [margin-sm] {
|
|
|
+ margin: $sp-sm;
|
|
|
+ }
|
|
|
+ &[margin-md], [margin-md] {
|
|
|
+ margin: $sp-md;
|
|
|
+ }
|
|
|
+ &[margin-lg], [margin-lg] {
|
|
|
+ margin: $sp-lg;
|
|
|
+ }
|
|
|
+ &[margin-xl], [margin-xl] {
|
|
|
+ margin: $sp-xl;
|
|
|
+ }
|
|
|
+ &[not-margin], [not-margin] {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ &[not-margin-left], [not-margin-left] {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ &[not-margin-right], [not-margin-right] {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ &[not-margin-top], [not-margin-top] {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ &[not-margin-bottom], [not-margin-bottom] {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ &[margin-left-xs], [margin-left-xs] {
|
|
|
+ margin-left: $sp-xs;
|
|
|
+ }
|
|
|
+ &[margin-left-sm], [margin-left-sm] {
|
|
|
+ margin-left: $sp-sm;
|
|
|
+ }
|
|
|
+ &[margin-left-md], [margin-left-md] {
|
|
|
+ margin-left: $sp-md;
|
|
|
+ }
|
|
|
+ &[margin-left-lg], [margin-left-lg] {
|
|
|
+ margin-left: $sp-lg;
|
|
|
+ }
|
|
|
+ &[margin-left-xl], [margin-left-xl] {
|
|
|
+ margin-left: $sp-xl;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[margin-right-xs], [margin-right-xs] {
|
|
|
+ margin-right: $sp-xs;
|
|
|
+ }
|
|
|
+ &[margin-right-sm], [margin-right-sm] {
|
|
|
+ margin-right: $sp-sm;
|
|
|
+ }
|
|
|
+ &[margin-right-md], [margin-right-md] {
|
|
|
+ margin-right: $sp-md;
|
|
|
+ }
|
|
|
+ &[margin-right-lg], [margin-right-lg] {
|
|
|
+ margin-right: $sp-lg;
|
|
|
+ }
|
|
|
+ &[margin-right-xl], [margin-right-xl] {
|
|
|
+ margin-right: $sp-xl;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[margin-top-xs], [margin-top-xs] {
|
|
|
+ margin-top: $sp-xs;
|
|
|
+ }
|
|
|
+ &[margin-top-sm], [margin-top-sm] {
|
|
|
+ margin-top: $sp-sm;
|
|
|
+ }
|
|
|
+ &[margin-top-md], [margin-top-md] {
|
|
|
+ margin-top: $sp-md;
|
|
|
+ }
|
|
|
+ &[margin-top-lg], [margin-top-lg] {
|
|
|
+ margin-top: $sp-lg;
|
|
|
+ }
|
|
|
+ &[margin-top-xl], [margin-top-xl] {
|
|
|
+ margin-top: $sp-xl;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[margin-bottom-xs], [margin-bottom-xs] {
|
|
|
+ margin-bottom: $sp-xs;
|
|
|
+ }
|
|
|
+ &[margin-bottom-sm], [margin-bottom-sm] {
|
|
|
+ margin-bottom: $sp-sm;
|
|
|
+ }
|
|
|
+ &[margin-bottom-md], [margin-bottom-md] {
|
|
|
+ margin-bottom: $sp-md;
|
|
|
+ }
|
|
|
+ &[margin-bottom-lg], [margin-bottom-lg] {
|
|
|
+ margin-bottom: $sp-lg;
|
|
|
+ }
|
|
|
+ &[margin-bottom-xl], [margin-bottom-xl] {
|
|
|
+ margin-bottom: $sp-xl;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 内填充
|
|
|
+ &[padding-xs], [padding-xs] {
|
|
|
+ padding: $sp-xs;
|
|
|
+ }
|
|
|
+ &[padding-sm], [padding-sm] {
|
|
|
+ padding: $sp-sm;
|
|
|
+ }
|
|
|
+ &[padding-md], [padding-md] {
|
|
|
+ padding: $sp-md;
|
|
|
+ }
|
|
|
+ &[padding-lg], [padding-lg] {
|
|
|
+ padding: $sp-lg;
|
|
|
+ }
|
|
|
+ &[padding-xl], [padding-xl] {
|
|
|
+ padding: $sp-xl;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[not-padding], [not-padding] {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ &[not-padding-top], [not-padding-top] {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ &[not-padding-bottom], [not-padding-bottom] {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ &[not-padding-right], [not-padding-right] {
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+ &[not-padding-left], [not-padding-left] {
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[padding-left-xs], [padding-left-xs] {
|
|
|
+ padding-left: $sp-xs;
|
|
|
+ }
|
|
|
+ &[padding-left-sm], [padding-left-sm] {
|
|
|
+ padding-left: $sp-sm;
|
|
|
+ }
|
|
|
+ &[padding-left-md], [padding-left-md] {
|
|
|
+ padding-left: $sp-md;
|
|
|
+ }
|
|
|
+ &[padding-left-lg], [padding-left-lg] {
|
|
|
+ padding-left: $sp-lg;
|
|
|
+ }
|
|
|
+ &[padding-left-xl], [padding-left-xl] {
|
|
|
+ padding-left: $sp-xl;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[padding-right-xs], [padding-right-xs] {
|
|
|
+ padding-right: $sp-xs;
|
|
|
+ }
|
|
|
+ &[padding-right-sm], [padding-right-sm] {
|
|
|
+ padding-right: $sp-sm;
|
|
|
+ }
|
|
|
+ &[padding-right-md], [padding-right-md] {
|
|
|
+ padding-right: $sp-md;
|
|
|
+ }
|
|
|
+ &[padding-right-lg], [padding-right-lg] {
|
|
|
+ padding-right: $sp-lg;
|
|
|
+ }
|
|
|
+ &[padding-right-xl], [padding-right-xl] {
|
|
|
+ padding-right: $sp-xl;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[padding-top-xs], [padding-top-xs] {
|
|
|
+ padding-top: $sp-xs;
|
|
|
+ }
|
|
|
+ &[padding-top-sm], [padding-top-sm] {
|
|
|
+ padding-top: $sp-sm;
|
|
|
+ }
|
|
|
+ &[padding-top-md], [padding-top-md] {
|
|
|
+ padding-top: $sp-md;
|
|
|
+ }
|
|
|
+ &[padding-top-lg], [padding-top-lg] {
|
|
|
+ padding-top: $sp-lg;
|
|
|
+ }
|
|
|
+ &[padding-top-xl], [padding-top-xl] {
|
|
|
+ padding-top: $sp-xl;
|
|
|
+ }
|
|
|
+
|
|
|
+ &[padding-bottom-xs], [padding-bottom-xs] {
|
|
|
+ padding-bottom: $sp-xs;
|
|
|
+ }
|
|
|
+ &[padding-bottom-sm], [padding-bottom-sm] {
|
|
|
+ padding-bottom: $sp-sm;
|
|
|
+ }
|
|
|
+ &[padding-bottom-md], [padding-bottom-md] {
|
|
|
+ padding-bottom: $sp-md;
|
|
|
+ }
|
|
|
+ &[padding-bottom-lg], [padding-bottom-lg] {
|
|
|
+ padding-bottom: $sp-lg;
|
|
|
+ }
|
|
|
+ &[padding-bottom-xl], [padding-bottom-xl] {
|
|
|
+ padding-bottom: $sp-xl;
|
|
|
+ }
|
|
|
+}
|
magic v
