/** * 公共类样式 */ .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-auto { height: auto; } .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; } /** * 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; }