.underline-text { text-decoration: underline; text-underline-offset: 4rpx; /* 调整这个值可以改变下划线距离文字的间距 */ } /* flex 布局 */ .flex { /* #ifndef APP-PLUS-NVUE */ display: flex; /* #endif */ flex-direction: row; } [class*='-container'] [class*='flex-'] { display: flex; } [class*='-container'] [class*='-bet'] { justify-content: space-between; } [class*='-container'] [class*='-cen'] { justify-content: center; } [class*='-container'] [class*='-aro'] { justify-content: space-around; } [class*='-container'] [class*='-eve'] { justify-content: space-evenly; } [class*='-container'] [class*='-jfend'] { justify-content: flex-end; } [class*='-container'] [class*='-ali'] { align-items: center; } [class*='-container'] [class*='-bas'] { align-items: baseline; } [class*='-container'] [class*='-end'] { align-items: end; } [class*='-container'] [class*='-col'] { flex-direction: column; } [class*='-container'] [class*='-row'] { flex-direction: row; } [class*='-container'] [class*='-rowre'] { flex-direction: row-reverse; } [class*='-container'] [class*='-wra'] { flex-wrap: wrap; } [class*='-container'] [class*='-end'] { justify-content: flex-end; align-items: flex-end; } // 定义内外边距,历遍1-80 @for $i from 0 through 10 { .flex-#{$i} { flex: $i; } } /* #ifndef APP-PLUS-NVUE */ .flex-shrink { flex-shrink: 0; } /* #endif */ // 定义内外边距,历遍1-80 @for $i from 0 through 40 { // 只要双数和能被5除尽的数 @if $i % 2==0 or $i % 5==0 { // 得出:u-margin-30或者u-m-30 .w-#{$i} { width: calc($i * 1%) !important; } .p-x-#{$i} { padding-left: $i + rpx !important; padding-right: $i + rpx !important; } .p-y-#{$i} { padding-top: $i + rpx !important; padding-bottom: $i + rpx !important; } .m-x-#{$i} { margin-left: $i + rpx !important; margin-right: $i + rpx !important; } .m-y-#{$i} { margin-top: $i + rpx !important; margin-bottom: $i + rpx !important; } .m-#{$i} { margin-left: $i + rpx !important; margin-right: $i + rpx !important; margin-top: $i + rpx !important; margin-bottom: $i + rpx !important; } .p-#{$i} { padding-left: $i + rpx !important; padding-right: $i + rpx !important; padding-top: $i + rpx !important; padding-bottom: $i + rpx !important; } .m-l-#{$i} { margin-left: $i + rpx !important; } .m-t-#{$i} { margin-top: $i + rpx !important; } .m-r-#{$i} { margin-right: $i + rpx !important; } .m-b-#{$i} { margin-bottom: $i + rpx !important; } .p-l-#{$i} { padding-left: $i + rpx !important; } .p-t-#{$i} { padding-top: $i + rpx !important; } .p-r-#{$i} { padding-right: $i + rpx !important; } .p-b-#{$i} { padding-bottom: $i + rpx !important; } .l-p-#{$i} { letter-spacing: $i + rpx !important; } .z-i-#{$i} { z-index: $i; } .l-h-#{$i} { line-height: $i + rpx !important; } .r-#{$i} { right: $i + rpx !important; } .l-#{$i} { left: $i + rpx !important; } .t-#{$i} { top: $i + rpx !important; } .b-#{$i} { bottom: $i + rpx !important; } } } // 定义字体大小 // @for $i from 9 to 18 { // .font-#{$i} { // font-size: $i + px; // } // } // 定义字体(rpx)单位,大于或等于20的都为rpx单位字体 @for $i from 9 through 60 { .font-#{$i} { font-size: $i + rpx !important; } } // 圆角 @for $i from 4 through 60 { .rounded-#{$i} { border-radius: $i + rpx; } } // 定义中文字体(rpx)间距 @for $i from 2 through 10 { .l-p-#{$i} { letter-spacing: $i + rpx; } .over-line-#{$i} { width: 100%; height: calc($i * 1em + 0.5em); display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: $i; overflow: hidden; -webkit-box-orient: vertical; } } /* 内容溢出 */ .overflow-hidden { overflow: hidden; } /* 文字缩进 */ /* #ifndef APP-PLUS-NVUE */ .text-indent { text-indent: 2; } /* #endif */ /* 文字划线 */ .text-through { text-decoration: line-through; } /* 文字对齐 */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } /* 文字换行溢出处理 */ .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //多行在这里修改数字即可 overflow: hidden; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; } /* 文字粗细和斜体 */ .font-weight-light { font-weight: 300; } /*细*/ .font-weight-lighter { font-weight: 100; } /*更细*/ .font-weight-normal { font-weight: 400; } /*正常*/ .font-weight-middle { font-weight: 500; } /*正常*/ .font-weight-middles { font-weight: 600; } /*正常*/ .font-weight-bold { font-weight: 700; } /*粗*/ .font-weight-bolder { font-weight: bold; } /*更粗*/ .font-italic { font-style: italic; } /*斜体*/ /* 文字颜色 */ .text-body { color: #333333; } // 边框 .border { border-width: 2rpx; border-style: solid; border-color: #ececec; } .border-top { border-top-width: 2rpx; border-top-style: solid; border-top-color: #ececec; } .border-right { border-right-width: 2rpx; border-right-style: solid; border-right-color: #ececec; } .border-bottom { border-bottom-width: 2rpx; border-bottom-style: solid; border-bottom-color: #9f9f9f; } .border-left { border-left-width: 2rpx; border-left-style: solid; border-left-color: #ececec; } /* 定位 */ .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } /* 定位 - 固定顶部 */ .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } /* 定位 - 固定底部 */ .fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; } .top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .font-family-B { font-family: 'OPPOSans-B' !important; } :deep(.u-empty) { height: 500rpx; }