1454 lines
18 KiB
CSS
1454 lines
18 KiB
CSS
/**
|
|
* 公共类样式
|
|
*/
|
|
.margin-0 {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.margin-xsss {
|
|
margin: 2rpx;
|
|
}
|
|
|
|
.margin-xss {
|
|
margin: 4rpx;
|
|
}
|
|
|
|
.margin-xs {
|
|
margin: 6rpx;
|
|
}
|
|
|
|
.margin-sm {
|
|
margin: 12rpx;
|
|
}
|
|
|
|
.margin,
|
|
.margin-default {
|
|
margin: 24rpx;
|
|
}
|
|
|
|
.margin-lg {
|
|
margin: 32rpx;
|
|
}
|
|
|
|
.margin-xl {
|
|
margin: 36rpx;
|
|
}
|
|
|
|
.margin-xxl {
|
|
margin: 40rpx;
|
|
}
|
|
|
|
.margin-xxxl {
|
|
margin: 48rpx;
|
|
}
|
|
|
|
.margin-xxxxl {
|
|
margin: 56rpx;
|
|
}
|
|
|
|
.margin-top-xsss {
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
.margin-top-xss {
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.margin-top-xs {
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.margin-top-sm {
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.margin-top,
|
|
.margin-top-default {
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.margin-top-lg {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.margin-top-xl {
|
|
margin-top: 36rpx;
|
|
}
|
|
|
|
.margin-top-xxl {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.margin-top-xxxl {
|
|
margin-top: 48rpx;
|
|
}
|
|
|
|
.margin-top-xxxxl {
|
|
margin-top: 56rpx;
|
|
}
|
|
|
|
.margin-right-xsss {
|
|
margin-right: 2rpx;
|
|
}
|
|
|
|
.margin-right-xss {
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.margin-right-xs {
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
.margin-right-sm {
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.margin-right,
|
|
.margin-right-default {
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.margin-right-lg {
|
|
margin-right: 32rpx;
|
|
}
|
|
|
|
.margin-right-xl {
|
|
margin-right: 36rpx;
|
|
}
|
|
|
|
.margin-right-xxl {
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.margin-right-xxxl {
|
|
margin-right: 48rpx;
|
|
}
|
|
|
|
.margin-right-xxxxl {
|
|
margin-right: 56rpx;
|
|
}
|
|
|
|
.margin-left-xsss {
|
|
margin-left: 2rpx;
|
|
}
|
|
|
|
.margin-left-xss {
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
.margin-left-xs {
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.margin-left-sm {
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.margin-left,
|
|
.margin-left-default {
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.margin-left-lg {
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.margin-left-xl {
|
|
margin-left: 36rpx;
|
|
}
|
|
|
|
.margin-left-xxl {
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
.margin-left-xxxl {
|
|
margin-left: 48rpx;
|
|
}
|
|
|
|
.margin-left-xxxxl {
|
|
margin-left: 56rpx;
|
|
}
|
|
|
|
.margin-bottom-xsss {
|
|
margin-bottom: 2rpx;
|
|
}
|
|
|
|
.margin-bottom-xss {
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.margin-bottom-xs {
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.margin-bottom-sm {
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.margin-bottom,
|
|
.margin-bottom-default {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.margin-bottom-lg {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.margin-bottom-xl {
|
|
margin-bottom: 36rpx;
|
|
}
|
|
|
|
.margin-bottom-xxl {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.margin-bottom-xxxl {
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.margin-bottom-xxxxl {
|
|
margin-bottom: 56rpx;
|
|
}
|
|
|
|
.margin-vertical-0 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.margin-vertical-xsss {
|
|
margin-top: 2rpx;
|
|
margin-bottom: 2rpx;
|
|
}
|
|
|
|
.margin-vertical-xss {
|
|
margin-top: 4rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.margin-vertical-xs {
|
|
margin-top: 6rpx;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.margin-vertical-sm {
|
|
margin-top: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.margin-vertical,
|
|
.margin-vertical-default {
|
|
margin-top: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.margin-vertical-lg {
|
|
margin-top: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.margin-vertical-xl {
|
|
margin-top: 36rpx;
|
|
margin-bottom: 36rpx;
|
|
}
|
|
|
|
.margin-vertical-xxl {
|
|
margin-top: 40rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.margin-vertical-xxxl {
|
|
margin-top: 48rpx;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.margin-vertical-xxxxl {
|
|
margin-top: 56rpx;
|
|
margin-bottom: 56rpx;
|
|
}
|
|
|
|
.margin-horizontal-0 {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.margin-horizontal-xsss {
|
|
margin-left: 2rpx;
|
|
margin-right: 2rpx;
|
|
}
|
|
|
|
.margin-horizontal-xss {
|
|
margin-left: 4rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.margin-horizontal-xs {
|
|
margin-left: 6rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
.margin-horizontal-sm {
|
|
margin-left: 12rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.margin-horizontal,
|
|
.margin-horizontal-default {
|
|
margin-left: 24rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.margin-horizontal-lg {
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
}
|
|
|
|
.margin-horizontal-xl {
|
|
margin-left: 36rpx;
|
|
margin-right: 36rpx;
|
|
}
|
|
|
|
.margin-horizontal-xxl {
|
|
margin-left: 40rpx;
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.margin-horizontal-xxxl {
|
|
margin-left: 48rpx;
|
|
margin-right: 48rpx;
|
|
}
|
|
|
|
.margin-horizontal-xxxxl {
|
|
margin-left: 56rpx;
|
|
margin-right: 56rpx;
|
|
}
|
|
|
|
.padding-0 {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.padding-xsss {
|
|
padding: 2rpx;
|
|
}
|
|
|
|
.padding-xss {
|
|
padding: 4rpx;
|
|
}
|
|
|
|
.padding-xs {
|
|
padding: 6rpx;
|
|
}
|
|
|
|
.padding-sm {
|
|
padding: 12rpx;
|
|
}
|
|
|
|
.padding,
|
|
.padding-default {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.padding-lg {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.padding-xl {
|
|
padding: 36rpx;
|
|
}
|
|
|
|
.padding-xxl {
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.padding-xxxl {
|
|
padding: 48rpx;
|
|
}
|
|
|
|
.padding-xxxxl {
|
|
padding: 56rpx;
|
|
}
|
|
|
|
.padding-top-0 {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
.padding-top-xsss {
|
|
padding-top: 2rpx;
|
|
}
|
|
|
|
.padding-top-xss {
|
|
padding-top: 4rpx;
|
|
}
|
|
|
|
.padding-top-xs {
|
|
padding-top: 6rpx;
|
|
}
|
|
|
|
.padding-top-sm {
|
|
padding-top: 12rpx;
|
|
}
|
|
|
|
.padding-top,
|
|
.padding-top-default {
|
|
padding-top: 24rpx;
|
|
}
|
|
|
|
.padding-top-lg {
|
|
padding-top: 32rpx;
|
|
}
|
|
|
|
.padding-top-xl {
|
|
padding-top: 36rpx;
|
|
}
|
|
|
|
.padding-top-xxl {
|
|
padding-top: 40rpx;
|
|
}
|
|
|
|
.padding-top-xxxl {
|
|
padding-top: 48rpx;
|
|
}
|
|
|
|
.padding-top-xxxxl {
|
|
padding-top: 56rpx;
|
|
}
|
|
|
|
.padding-right-0 {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.padding-right-xsss {
|
|
padding-right: 2rpx;
|
|
}
|
|
|
|
.padding-right-xss {
|
|
padding-right: 4rpx;
|
|
}
|
|
|
|
.padding-right-xs {
|
|
padding-right: 6rpx;
|
|
}
|
|
|
|
.padding-right-sm {
|
|
padding-right: 12rpx;
|
|
}
|
|
|
|
.padding-right,
|
|
.padding-right-default {
|
|
padding-right: 24rpx;
|
|
}
|
|
|
|
.padding-right-lg {
|
|
padding-right: 32rpx;
|
|
}
|
|
|
|
.padding-right-xl {
|
|
padding-right: 36rpx;
|
|
}
|
|
|
|
.padding-right-xxl {
|
|
padding-right: 40rpx;
|
|
}
|
|
|
|
.padding-right-xxxl {
|
|
padding-right: 48rpx;
|
|
}
|
|
|
|
.padding-right-xxxxl {
|
|
padding-right: 56rpx;
|
|
}
|
|
|
|
.padding-left-0 {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.padding-left-xsss {
|
|
padding-left: 2rpx;
|
|
}
|
|
|
|
.padding-left-xss {
|
|
padding-left: 4rpx;
|
|
}
|
|
|
|
.padding-left-xs {
|
|
padding-left: 6rpx;
|
|
}
|
|
|
|
.padding-left-sm {
|
|
padding-left: 12rpx;
|
|
}
|
|
|
|
.padding-left,
|
|
.padding-left-default {
|
|
padding-left: 24rpx;
|
|
}
|
|
|
|
.padding-left-lg {
|
|
padding-left: 32rpx;
|
|
}
|
|
|
|
.padding-left-xl {
|
|
padding-left: 36rpx;
|
|
}
|
|
|
|
.padding-left-xxl {
|
|
padding-left: 40rpx;
|
|
}
|
|
|
|
.padding-left-xxxl {
|
|
padding-left: 48rpx;
|
|
}
|
|
|
|
.padding-left-xxxxl {
|
|
padding-left: 56rpx;
|
|
}
|
|
|
|
.padding-bottom-0 {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.padding-bottom-xsss {
|
|
padding-bottom: 2rpx;
|
|
}
|
|
|
|
.padding-bottom-xss {
|
|
padding-bottom: 4rpx;
|
|
}
|
|
|
|
.padding-bottom-xs {
|
|
padding-bottom: 6rpx;
|
|
}
|
|
|
|
.padding-bottom-sm {
|
|
padding-bottom: 12rpx;
|
|
}
|
|
|
|
.padding-bottom,
|
|
.padding-bottom-default {
|
|
padding-bottom: 24rpx;
|
|
}
|
|
|
|
.padding-bottom-lg {
|
|
padding-bottom: 32rpx;
|
|
}
|
|
|
|
.padding-bottom-xl {
|
|
padding-bottom: 36rpx;
|
|
}
|
|
|
|
.padding-bottom-xxl {
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.padding-bottom-xxxl {
|
|
padding-bottom: 48rpx;
|
|
}
|
|
|
|
.padding-bottom-xxxxl {
|
|
padding-bottom: 56rpx;
|
|
}
|
|
|
|
.padding-vertical-0 {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.padding-vertical-xsss {
|
|
padding-top: 2rpx;
|
|
padding-bottom: 2rpx;
|
|
}
|
|
|
|
.padding-vertical-xss {
|
|
padding-top: 4rpx;
|
|
padding-bottom: 4rpx;
|
|
}
|
|
|
|
.padding-vertical-xs {
|
|
padding-top: 6rpx;
|
|
padding-bottom: 6rpx;
|
|
}
|
|
|
|
.padding-vertical-sm {
|
|
padding-top: 12rpx;
|
|
padding-bottom: 12rpx;
|
|
}
|
|
|
|
.padding-vertical,
|
|
.padding-vertical-default {
|
|
padding-top: 24rpx;
|
|
padding-bottom: 24rpx;
|
|
}
|
|
|
|
.padding-vertical-lg {
|
|
padding-top: 32rpx;
|
|
padding-bottom: 32rpx;
|
|
}
|
|
|
|
.padding-vertical-xl {
|
|
padding-top: 36rpx;
|
|
padding-bottom: 36rpx;
|
|
}
|
|
|
|
.padding-vertical-xxl {
|
|
padding-top: 40rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.padding-vertical-xxxl {
|
|
padding-top: 48rpx;
|
|
padding-bottom: 48rpx;
|
|
}
|
|
|
|
.padding-vertical-xxxxl {
|
|
padding-top: 56rpx;
|
|
padding-bottom: 56rpx;
|
|
}
|
|
|
|
.padding-horizontal-0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.padding-horizontal-xsss {
|
|
padding-left: 2rpx;
|
|
padding-right: 2rpx;
|
|
}
|
|
|
|
.padding-horizontal-xss {
|
|
padding-left: 4rpx;
|
|
padding-right: 4rpx;
|
|
}
|
|
|
|
.padding-horizontal-xs {
|
|
padding-left: 6rpx;
|
|
padding-right: 6rpx;
|
|
}
|
|
|
|
.padding-horizontal-sm {
|
|
padding-left: 12rpx;
|
|
padding-right: 12rpx;
|
|
}
|
|
|
|
.padding-horizontal,
|
|
.padding-horizontal-default {
|
|
padding-left: 24rpx;
|
|
padding-right: 24rpx;
|
|
}
|
|
|
|
.padding-horizontal-lg {
|
|
padding-left: 32rpx;
|
|
padding-right: 32rpx;
|
|
}
|
|
|
|
.padding-horizontal-xl {
|
|
padding-left: 36rpx;
|
|
padding-right: 36rpx;
|
|
}
|
|
|
|
.padding-horizontal-xxl {
|
|
padding-left: 40rpx;
|
|
padding-right: 40rpx;
|
|
}
|
|
|
|
.padding-horizontal-xxxl {
|
|
padding-left: 48rpx;
|
|
padding-right: 48rpx;
|
|
}
|
|
|
|
.padding-horizontal-xxxxl {
|
|
padding-left: 56rpx;
|
|
padding-right: 56rpx;
|
|
}
|
|
|
|
/**
|
|
* 字体大小
|
|
*/
|
|
.text-size-xsss {
|
|
font-size: 18rpx !important;
|
|
}
|
|
|
|
.text-size-xss {
|
|
font-size: 20rpx !important;
|
|
}
|
|
|
|
.text-size-xs {
|
|
font-size: 24rpx !important;
|
|
}
|
|
|
|
.text-size-sm {
|
|
font-size: 26rpx !important;
|
|
}
|
|
|
|
.text-size-md {
|
|
font-size: 28rpx !important;
|
|
}
|
|
|
|
.text-size,
|
|
.text-size-default {
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
.text-size-lg {
|
|
font-size: 36rpx !important;
|
|
}
|
|
|
|
.text-size-xl {
|
|
font-size: 48rpx !important;
|
|
}
|
|
|
|
.text-size-xxl {
|
|
font-size: 64rpx !important;
|
|
}
|
|
|
|
.text-size-xxxl {
|
|
font-size: 84rpx !important;
|
|
}
|
|
|
|
.text-size-40 {
|
|
font-size: 80rpx !important;
|
|
}
|
|
|
|
/**
|
|
* 高度
|
|
*/
|
|
.ht-0 {
|
|
height: 0 !important;
|
|
}
|
|
|
|
.ht-xs {
|
|
height: 24rpx;
|
|
}
|
|
|
|
.ht-sm {
|
|
height: 26rpx;
|
|
}
|
|
|
|
.ht-md {
|
|
height: 28rpx;
|
|
}
|
|
|
|
.ht,
|
|
.ht-default {
|
|
height: 32rpx;
|
|
}
|
|
|
|
.ht-lg {
|
|
height: 36rpx;
|
|
}
|
|
|
|
.ht-xl {
|
|
height: 48rpx;
|
|
}
|
|
|
|
.ht-xxl {
|
|
height: 64rpx;
|
|
}
|
|
|
|
.ht-xxxl {
|
|
height: 84rpx;
|
|
}
|
|
|
|
/**
|
|
* 行间距
|
|
*/
|
|
.lh-il {
|
|
line-height: initial;
|
|
}
|
|
|
|
.lh-0 {
|
|
line-height: 0 !important;
|
|
}
|
|
|
|
.lh-xs {
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.lh-sm {
|
|
line-height: 26rpx;
|
|
}
|
|
|
|
.lh-md {
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.lh,
|
|
.lh-default {
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.lh-lg {
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.lh-xl {
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.lh-xxl {
|
|
line-height: 64rpx;
|
|
}
|
|
|
|
.lh-xxxl {
|
|
line-height: 84rpx;
|
|
}
|
|
|
|
/**
|
|
* 细微偏移量
|
|
*/
|
|
.top-0-xs {
|
|
top: -2rpx;
|
|
}
|
|
.top-0-sm {
|
|
top: -4rpx;
|
|
}
|
|
.top-0-md {
|
|
top: -6rpx;
|
|
}
|
|
.top-0-lg {
|
|
top: -8rpx;
|
|
}
|
|
|
|
.top-0-xl {
|
|
top: -10rpx;
|
|
}
|
|
|
|
.top-0-xxl {
|
|
top: -12rpx;
|
|
}
|
|
|
|
.top-0-xxxl {
|
|
top: -16rpx;
|
|
}
|
|
|
|
.top-0-xxxxl {
|
|
top: -20rpx;
|
|
}
|
|
|
|
.top-0-xxxxxl {
|
|
top: -24rpx;
|
|
}
|
|
.top-0 {
|
|
top: 0;
|
|
}
|
|
|
|
.top-xs {
|
|
top: 2rpx;
|
|
}
|
|
|
|
.top-sm {
|
|
top: 4rpx;
|
|
}
|
|
|
|
.top-md {
|
|
top: 6rpx;
|
|
}
|
|
|
|
.top-lg {
|
|
top: 8rpx;
|
|
}
|
|
|
|
.top-xl {
|
|
top: 10rpx;
|
|
}
|
|
|
|
.top-xxl {
|
|
top: 12rpx;
|
|
}
|
|
|
|
.top-xxxl {
|
|
top: 16rpx;
|
|
}
|
|
|
|
.top-xxxxl {
|
|
top: 20rpx;
|
|
}
|
|
|
|
.top-xxxxxl {
|
|
top: 24rpx;
|
|
}
|
|
|
|
.left-0-xs {
|
|
left: -2rpx;
|
|
}
|
|
|
|
.left-0-sm {
|
|
left: -4rpx;
|
|
}
|
|
|
|
.left-0-md {
|
|
left: -6rpx;
|
|
}
|
|
|
|
.left-0-lg {
|
|
left: -8rpx;
|
|
}
|
|
|
|
.left-0-xl {
|
|
left: -10rpx;
|
|
}
|
|
|
|
.left-0-xxl {
|
|
left: -12rpx;
|
|
}
|
|
|
|
.left-0-xxxl {
|
|
left: -16rpx;
|
|
}
|
|
|
|
.left-0-xxxxl {
|
|
left: -20rpx;
|
|
}
|
|
|
|
.left-0-xxxxxl {
|
|
left: 24rpx;
|
|
}
|
|
.left-0 {
|
|
left: 0;
|
|
}
|
|
|
|
.left-xs {
|
|
left: 2rpx;
|
|
}
|
|
|
|
.left-sm {
|
|
left: 4rpx;
|
|
}
|
|
|
|
.left-md {
|
|
left: 6rpx;
|
|
}
|
|
|
|
.left-lg {
|
|
left: 8rpx;
|
|
}
|
|
|
|
.left-xl {
|
|
left: 10rpx;
|
|
}
|
|
|
|
.left-xxl {
|
|
left: 12rpx;
|
|
}
|
|
|
|
.left-xxxl {
|
|
left: 16rpx;
|
|
}
|
|
|
|
.left-xxxxl {
|
|
left: 20rpx;
|
|
}
|
|
|
|
.left-xxxxxl {
|
|
left: 24rpx;
|
|
}
|
|
|
|
.bottom-0-xs {
|
|
bottom: -2rpx;
|
|
}
|
|
|
|
.bottom-0-sm {
|
|
bottom: -4rpx;
|
|
}
|
|
|
|
.bottom-0-md {
|
|
bottom: -6rpx;
|
|
}
|
|
|
|
.bottom-0-lg {
|
|
bottom: -8rpx;
|
|
}
|
|
|
|
.bottom-0-xl {
|
|
bottom: -10rpx;
|
|
}
|
|
|
|
.bottom-0-xxl {
|
|
bottom: -12rpx;
|
|
}
|
|
|
|
.bottom-0-xxxl {
|
|
bottom: -16rpx;
|
|
}
|
|
|
|
.bottom-0-xxxxl {
|
|
bottom: -20rpx;
|
|
}
|
|
|
|
.bottom-0-xxxxxl {
|
|
bottom: -24rpx;
|
|
}
|
|
|
|
.bottom-0 {
|
|
bottom: 0;
|
|
}
|
|
|
|
.bottom-xs {
|
|
bottom: 2rpx;
|
|
}
|
|
|
|
.bottom-sm {
|
|
bottom: 4rpx;
|
|
}
|
|
|
|
.bottom-md {
|
|
bottom: 6rpx;
|
|
}
|
|
|
|
.bottom-lg {
|
|
bottom: 8rpx;
|
|
}
|
|
|
|
.bottom-xl {
|
|
bottom: 10rpx;
|
|
}
|
|
|
|
.bottom-xxl {
|
|
bottom: 12rpx;
|
|
}
|
|
|
|
.bottom-xxxl {
|
|
bottom: 16rpx;
|
|
}
|
|
|
|
.bottom-xxxxl {
|
|
bottom: 20rpx;
|
|
}
|
|
|
|
.bottom-xxxxxl {
|
|
bottom: 24rpx;
|
|
}
|
|
|
|
.right-0-xs {
|
|
right: -2rpx;
|
|
}
|
|
|
|
.right-0-sm {
|
|
right: -4rpx;
|
|
}
|
|
|
|
.right-0-md {
|
|
right: -6rpx;
|
|
}
|
|
|
|
.right-0-lg {
|
|
right: -8rpx;
|
|
}
|
|
|
|
.right-0-xl {
|
|
right: -10rpx;
|
|
}
|
|
|
|
.right-0-xxl {
|
|
right: -12rpx;
|
|
}
|
|
|
|
.right-0-xxxl {
|
|
right: -16rpx;
|
|
}
|
|
|
|
.right-0-xxxxl {
|
|
right: -20rpx;
|
|
}
|
|
|
|
.right-0-xxxxxl {
|
|
right: -24rpx;
|
|
}
|
|
|
|
.right-0 {
|
|
right: 0;
|
|
}
|
|
|
|
.right-xs {
|
|
right: 2rpx;
|
|
}
|
|
|
|
.right-sm {
|
|
right: 4rpx;
|
|
}
|
|
|
|
.right-md {
|
|
right: 6rpx;
|
|
}
|
|
|
|
.right-lg {
|
|
right: 8rpx;
|
|
}
|
|
|
|
.right-xl {
|
|
right: 10rpx;
|
|
}
|
|
|
|
.right-xxl {
|
|
right: 12rpx;
|
|
}
|
|
|
|
.right-xxxl {
|
|
right: 16rpx;
|
|
}
|
|
|
|
.right-xxxxl {
|
|
right: 20rpx;
|
|
}
|
|
|
|
.right-xxxxxl {
|
|
right: 24rpx;
|
|
}
|
|
|
|
/**
|
|
* flex 布局
|
|
*/
|
|
.flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.flex-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.jc-sb {
|
|
justify-content: space-between;
|
|
}
|
|
.jc-c {
|
|
justify-content: center;
|
|
}
|
|
.jc-sa {
|
|
justify-content: space-around;
|
|
}
|
|
.jc-e {
|
|
justify-content: flex-end;
|
|
}
|
|
.align-c {
|
|
align-items: center;
|
|
}
|
|
.align-e {
|
|
align-items: flex-end;
|
|
}
|
|
.align-s {
|
|
align-items: flex-start;
|
|
}
|
|
.align-b {
|
|
align-items: baseline;
|
|
}
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
.flex-nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
.flex-2 {
|
|
flex: 2;
|
|
}
|
|
.flex-3 {
|
|
flex: 3;
|
|
}
|
|
.self-c {
|
|
align-self: center;
|
|
}
|
|
.self-b {
|
|
align-self: baseline;
|
|
}
|
|
.self-s {
|
|
align-self: flex-start;
|
|
}
|
|
.self-e {
|
|
align-self: flex-end;
|
|
}
|
|
.flex-shrink {
|
|
flex-shrink: 0;
|
|
}
|
|
.flex-shrink-1 {
|
|
flex-shrink: 0;
|
|
}
|
|
.flex-width {
|
|
width: 0;
|
|
}
|
|
.flex-width-half {
|
|
width: 50%;
|
|
}
|
|
.flex-width-half-half {
|
|
width: 25%;
|
|
}
|
|
|
|
/**
|
|
* gap
|
|
*/
|
|
.gap-2 {
|
|
gap: 4rpx;
|
|
}
|
|
.gap-3 {
|
|
gap: 6rpx;
|
|
}
|
|
.gap-4 {
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.gap-5 {
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.gap-8 {
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.gap-10 {
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.gap-12 {
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.gap-16 {
|
|
gap: 32rpx;
|
|
}
|
|
.gap-20 {
|
|
gap: 40rpx;
|
|
}
|
|
|
|
.pr-4 {
|
|
padding: 8rpx;
|
|
}
|
|
.pr-15 {
|
|
padding-right: 30rpx;
|
|
}
|
|
.plr-11 {
|
|
padding-left: 22rpx;
|
|
padding-right: 22rpx;
|
|
}
|
|
|
|
.ptb-5 {
|
|
padding-top: 10rpx;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
|
|
.ptb-15 {
|
|
padding-top: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.mlr-10 {
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
/**
|
|
* 主要类样式
|
|
*/
|
|
.margin-main {
|
|
margin: 24rpx;
|
|
}
|
|
.margin-top-main {
|
|
margin-top: 24rpx;
|
|
}
|
|
.margin-right-main {
|
|
margin-right: 24rpx;
|
|
}
|
|
.margin-bottom-main {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.margin-left-main {
|
|
margin-left: 24rpx;
|
|
}
|
|
.margin-horizontal-main {
|
|
margin-left: 24rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
.margin-vertical-main {
|
|
margin-top: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.padding-main {
|
|
padding: 24rpx;
|
|
}
|
|
.padding-top-main {
|
|
padding-top: 24rpx;
|
|
}
|
|
.padding-right-main {
|
|
padding-right: 24rpx;
|
|
}
|
|
.padding-bottom-main {
|
|
padding-bottom: 24rpx;
|
|
}
|
|
.padding-left-main {
|
|
padding-left: 24rpx;
|
|
}
|
|
.padding-horizontal-main {
|
|
padding-left: 24rpx;
|
|
padding-right: 24rpx;
|
|
}
|
|
.padding-vertical-main {
|
|
padding-top: 24rpx;
|
|
padding-bottom: 24rpx;
|
|
}
|
|
.border-radius-main {
|
|
border-radius: 16rpx;
|
|
}
|
|
.border-radius-left-main {
|
|
border-top-left-radius: 16rpx;
|
|
border-bottom-left-radius: 16rpx;
|
|
}
|
|
.border-radius-right-main {
|
|
border-top-right-radius: 16rpx;
|
|
border-bottom-right-radius: 16rpx;
|
|
}
|
|
.border-radius-top-main {
|
|
border-top-left-radius: 16rpx;
|
|
border-top-right-radius: 16rpx;
|
|
}
|
|
.border-radius-bottom-main {
|
|
border-bottom-left-radius: 16rpx;
|
|
border-bottom-right-radius: 16rpx;
|
|
}
|
|
.border-radius-xs {
|
|
border-radius: 4rpx;
|
|
}
|
|
.border-radius-left-xs {
|
|
border-top-left-radius: 4rpx;
|
|
border-bottom-left-radius: 4rpx;
|
|
}
|
|
.border-radius-right-xs {
|
|
border-top-right-radius: 4rpx;
|
|
border-bottom-right-radius: 4rpx;
|
|
}
|
|
.border-radius-top-xs {
|
|
border-top-left-radius: 4rpx;
|
|
border-top-right-radius: 4rpx;
|
|
}
|
|
.border-radius-bottom-xs {
|
|
border-bottom-left-radius: 4rpx;
|
|
border-bottom-right-radius: 4rpx;
|
|
}
|
|
.border-radius-sm {
|
|
border-radius: 8rpx;
|
|
}
|
|
.border-radius-left-sm {
|
|
border-top-left-radius: 8rpx;
|
|
border-bottom-left-radius: 8rpx;
|
|
}
|
|
.border-radius-right-sm {
|
|
border-top-right-radius: 8rpx;
|
|
border-bottom-right-radius: 8rpx;
|
|
}
|
|
.border-radius-top-sm {
|
|
border-top-left-radius: 8rpx;
|
|
border-top-right-radius: 8rpx;
|
|
}
|
|
.border-radius-bottom-sm {
|
|
border-bottom-left-radius: 8rpx;
|
|
border-bottom-right-radius: 8rpx;
|
|
}
|
|
|
|
/**
|
|
* 字体类样式
|
|
*/
|
|
.size-10 {
|
|
font-size: 20rpx;
|
|
}
|
|
.size-12 {
|
|
font-size: 24rpx;
|
|
}
|
|
.size-14 {
|
|
font-size: 28rpx;
|
|
}
|
|
.size-16 {
|
|
font-size: 32rpx;
|
|
}
|
|
.size-20 {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
/**
|
|
* 间距类样式
|
|
*/
|
|
.mr-10 {
|
|
margin-right: 20rpx;
|
|
}
|
|
.mr-5 {
|
|
margin-right: 10rpx;
|
|
}
|
|
.mr-0 {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.ml-10 {
|
|
margin-left: 20rpx;
|
|
}
|
|
.ml-5 {
|
|
margin-left: 10rpx;
|
|
}
|
|
.ml-0 {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mb-10 {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.mb-5 {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.mb-0 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mt-10 {
|
|
margin-top: 20rpx;
|
|
}
|
|
.mt-5 {
|
|
margin-top: 10rpx;
|
|
}
|
|
.mt-0 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pa-20 {
|
|
padding: 40rpx;
|
|
}
|
|
.pa-10 {
|
|
padding: 20rpx;
|
|
}
|
|
.pa-14 {
|
|
padding: 28rpx;
|
|
}
|
|
.pa-5 {
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.pt-3 {
|
|
padding-top: 6rpx;
|
|
}
|
|
|
|
/**
|
|
* 颜色类样式
|
|
*/
|
|
.cr-9 {
|
|
color: #999;
|
|
}
|
|
|
|
.cr-f {
|
|
color: #fff;
|
|
}
|
|
.cr-d {
|
|
color: #ddd;
|
|
}
|
|
|
|
.bg-0 {
|
|
background-color: #000;
|
|
}
|
|
.bg-f9 {
|
|
background-color: #f9f9f9;
|
|
}
|
|
/**
|
|
* 指针事件类样式， 穿透
|
|
*/
|
|
.pointer-events-none {
|
|
pointer-events: none;
|
|
}
|
|
/**
|
|
* 指针事件类样式， 不穿透
|
|
*/
|
|
.pointer-events-auto {
|
|
pointer-events: auto;
|
|
}
|