template-MP/common/styles/normal.scss

.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;
}