body {
  min-height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  color: #000;
}

// 边框

.border-none {
  border: none;
}
.border-theme {
  border: 1px solid $theme;
}
.border-aaa {
  border: 1px solid #aaa;
}
.border-bbb {
  border: 1px solid #bbb;
}
.border-ccc {
  border: 1px solid #ccc;
}
.border-ddd {
  border: 1px solid #ddd;
}
.border-eee {
  border: 1px solid #eee;
}
.border-fff {
  border: 1px solid #fff;
}
.border-000 {
  border: 1px solid #000;
}
.border-333 {
  border: 1px solid #333;
}
.border-666 {
  border: 1px solid #666;
}
.border-888 {
  border: 1px solid #888;
}
.border-999 {
  border: 1px solid #999;
}
//
.border-top-theme {
  border-top: 1px solid $theme;
}
.border-top-aaa {
  border-top: 1px solid #aaa;
}
.border-top-bbb {
  border-top: 1px solid #bbb;
}
.border-top-ccc {
  border-top: 1px solid #ccc;
}
.border-top-ddd {
  border-top: 1px solid #ddd;
}
.border-top-eee {
  border-top: 1px solid #eee;
}
.border-top-fff {
  border-top: 1px solid #fff;
}
.border-top-000 {
  border-top: 1px solid #000;
}
.border-top-333 {
  border-top: 1px solid #333;
}
.border-top-666 {
  border-top: 1px solid #666;
}
.border-top-888 {
  border-top: 1px solid #888;
}
.border-top-999 {
  border-top: 1px solid #999;
}
//
.border-bottom-theme {
  border-bottom: 1px solid $theme;
}
.border-bottom-aaa {
  border-bottom: 1px solid #aaa;
}
.border-bottom-bbb {
  border-bottom: 1px solid #bbb;
}
.border-bottom-ccc {
  border-bottom: 1px solid #ccc;
}
.border-bottom-ddd {
  border-bottom: 1px solid #ddd;
}
.border-bottom-eee {
  border-bottom: 1px solid #eee;
}
.border-bottom-fff {
  border-bottom: 1px solid #fff;
}
.border-bottom-000 {
  border-bottom: 1px solid #000;
}
.border-bottom-333 {
  border-bottom: 1px solid #333;
}
.border-bottom-666 {
  border-bottom: 1px solid #666;
}
.border-bottom-888 {
  border-bottom: 1px solid #888;
}
.border-bottom-999 {
  border-bottom: 1px solid #999;
}

// 圆角

.radius-xs {
  border-radius: 10rpx;
}
.radius-sm {
  border-radius: 20rpx;
}
.radius {
  border-radius: 30rpx;
}
.radius-lg {
  border-radius: 40rpx;
}
.radius-xl {
  border-radius: 50rpx;
}
.radius50 {
  border-radius: 50%;
}

// 背景

.bg-theme {
  background-color: $theme;
}
.bg-aaa {
  background-color: #aaa;
}
.bg-bbb {
  background-color: #bbb;
}
.bg-ccc {
  background-color: #ccc;
}
.bg-ddd {
  background-color: #ddd;
}
.bg-eee {
  background-color: #eee;
}
.bg-fff {
  background-color: #fff;
}
.bg-000 {
  background-color: #000;
}
.bg-333 {
  background-color: #333;
}
.bg-666 {
  background-color: #666;
}
.bg-888 {
  background-color: #888;
}
.bg-999 {
  background-color: #999;
}
.bg-f5 {
  background-color: #f5f5f5;
}
.bg-f2 {
  background-color: #f2f2f2;
}

// 背影
.box-shadow {
  box-shadow: 5px 3px 10px 1px rgba(0, 0, 0, 0.1);
}

// 文本颜色

.text-theme {
  color: $theme;
}
.text-000 {
  color: #000;
}
.text-333 {
  color: #333;
}
.text-666 {
  color: #666;
}
.text-888 {
  color: #888;
}
.text-999 {
  color: #999;
}
.text-aaa {
  color: #aaa;
}
.text-bbb {
  color: #bbb;
}
.text-ccc {
  color: #ccc;
}
.text-ddd {
  color: #ddd;
}
.text-eee {
  color: #eee;
}
.text-fff {
  color: #fff;
}
.text-white {
  color: white;
}
.text-skyblue {
  color: skyblue;
}
.text-dodgerblue {
  color: dodgerblue;
}
.text-blue {
  color: blue;
}
.text-darkblue {
  color: darkblue;
}
.text-orange {
  color: orange;
}

// 文本位置

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-through {
  text-decoration: line-through;
}
.text-underline {
  text-decoration: underline;
}
.text-cut {
  /* 1 行省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.text-cut-2 {
  /* 2 行省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.text-cut-3 {
  /* 3 行省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.bold {
  font-weight: bold;
}
// 字体大小
@for $i from 1 through 50 {
  .u-font-#{$i} {
    font-size: $i * 2 + rpx;
  }
}

// 宽高

.w10 {
  width: 10%;
}
.w15 {
  width: 15%;
}
.w20 {
  width: 20%;
}
.w25 {
  width: 25%;
}
.w30 {
  width: 30%;
}
.w33 {
  width: 33.33%;
}
.w35 {
  width: 35%;
}
.w40 {
  width: 40%;
}
.w45 {
  width: 45%;
}
.w50 {
  width: 50%;
}
.w55 {
  width: 55%;
}
.w60 {
  width: 60%;
}
.w65 {
  width: 65%;
}
.w70 {
  width: 70%;
}
.w75 {
  width: 70%;
}
.w80 {
  width: 80%;
}
.w85 {
  width: 85%;
}
.w90 {
  width: 90%;
}
.w95 {
  width: 95%;
}
.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}
.vw100 {
  width: 100vw;
}
.vh100 {
  height: 100vh;
}
.min-height100 {
  min-height: 100%;
}

// 浮动

.fll {
  float: left;
}
.flr {
  float: right;
}

// 定位

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}
.top-0 {
  top: 0;
}
.right-0 {
  right: 0;
}
.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}

// 盒子

.inline {
  display: inline;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.overflow {
  overflow: hidden;
}
.overflow-y {
  overflow-y: auto;
}
.break-word {
  word-wrap: break-word;
}
.clearfix::before,
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

// flex布局

.flex {
  display: flex;
}
.flex-direction {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-center-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-around {
  display: flex;
  justify-content: space-around;
}
.flex-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
.flex-align-center {
  display: flex;
  align-items: center;
}
.flex-align-start {
  display: flex;
  align-items: flex-start;
}
.flex-align-end {
  display: flex;
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-stretch {
  align-items: stretch;
}
.self-center {
  align-self: flex-center;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-stretch {
  align-self: stretch;
}
.basis-20 {
  flex-basis: 20%;
}
.basis-40 {
  flex-basis: 40%;
}
.basis-50 {
  flex-basis: 50%;
}
.basis-60 {
  flex-basis: 60%;
}
.basis-80 {
  flex-basis: 80%;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-shrink {
  flex-shrink: 0;
}

// 内外边距

.margin-xs {
  margin: 10rpx;
}
.margin-sm {
  margin: 20rpx;
}
.margin {
  margin: 30rpx;
}
.margin-lg {
  margin: 40rpx;
}
.margin-xl {
  margin: 50rpx;
}
//
.margin-top-xs {
  margin-top: 10rpx;
}
.margin-top-sm {
  margin-top: 20rpx;
}
.margin-top {
  margin-top: 30rpx;
}
.margin-top-lg {
  margin-top: 40rpx;
}
.margin-top-xl {
  margin-top: 50rpx;
}
//
.margin-right-xs {
  margin-right: 10rpx;
}
.margin-right-sm {
  margin-right: 20rpx;
}
.margin-right {
  margin-right: 30rpx;
}
.margin-right-lg {
  margin-right: 40rpx;
}
.margin-right-xl {
  margin-right: 50rpx;
}
//
.margin-bottom-xs {
  margin-bottom: 10rpx;
}
.margin-bottom-sm {
  margin-bottom: 20rpx;
}
.margin-bottom {
  margin-bottom: 30rpx;
}
.margin-bottom-lg {
  margin-bottom: 40rpx;
}
.margin-bottom-xl {
  margin-bottom: 50rpx;
}
//
.margin-left-xs {
  margin-left: 10rpx;
}
.margin-left-sm {
  margin-left: 20rpx;
}
.margin-left {
  margin-left: 30rpx;
}
.margin-left-lg {
  margin-left: 40rpx;
}
.margin-left-xl {
  margin-left: 50rpx;
}
//
.margin-lr-xs {
  margin-left: 10rpx;
  margin-right: 10rpx;
}
.margin-lr-sm {
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.margin-lr {
  margin-left: 30rpx;
  margin-right: 30rpx;
}
.margin-lr-lg {
  margin-left: 40rpx;
  margin-right: 40rpx;
}
.margin-lr-xl {
  margin-left: 50rpx;
  margin-right: 50rpx;
}
//
.margin-tb-xs {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.margin-tb-sm {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.margin-tb {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.margin-tb-lg {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}
.margin-tb-xl {
  margin-top: 50rpx;
  margin-bottom: 50rpx;
}
//
.padding-xs {
  padding: 10rpx;
}
.padding-sm {
  padding: 20rpx;
}
.padding {
  padding: 30rpx;
}
.padding-lg {
  padding: 40rpx;
}
.padding-xl {
  padding: 50rpx;
}
//
.padding-top-xs {
  padding-top: 10rpx;
}
.padding-top-sm {
  padding-top: 20rpx;
}
.padding-top {
  padding-top: 30rpx;
}
.padding-top-lg {
  padding-top: 40rpx;
}
.padding-top-xl {
  padding-top: 50rpx;
}
//
.padding-right-xs {
  padding-right: 10rpx;
}
.padding-right-sm {
  padding-right: 20rpx;
}
.padding-right {
  padding-right: 30rpx;
}
.padding-right-lg {
  padding-right: 40rpx;
}
.padding-right-xl {
  padding-right: 50rpx;
}
//
.padding-bottom-xs {
  padding-bottom: 10rpx;
}
.padding-bottom-sm {
  padding-bottom: 20rpx;
}
.padding-bottom {
  padding-bottom: 30rpx;
}
.padding-bottom-lg {
  padding-bottom: 40rpx;
}
.padding-bottom-xl {
  padding-bottom: 50rpx;
}
//
.padding-left-xs {
  padding-left: 10rpx;
}
.padding-left-sm {
  padding-left: 20rpx;
}
.padding-left {
  padding-left: 30rpx;
}
.padding-left-lg {
  padding-left: 40rpx;
}
.padding-left-xl {
  padding-left: 50rpx;
}
//
.padding-lr-xs {
  padding-left: 10rpx;
  padding-right: 10rpx;
}
.padding-lr-sm {
  padding-left: 20rpx;
  padding-right: 20rpx;
}
.padding-lr {
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.padding-lr-lg {
  padding-left: 40rpx;
  padding-right: 40rpx;
}
.padding-lr-xl {
  padding-left: 50rpx;
  padding-right: 50rpx;
}
//
.padding-tb-xs {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
.padding-tb-sm {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
.padding-tb {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}
.padding-tb-lg {
  padding-top: 40rpx;
  padding-bottom: 40rpx;
}
.padding-tb-xl {
  padding-top: 50rpx;
  padding-bottom: 50rpx;
}