/*
  ColorUi
*/
@import './vars';
/* ==================
          头像
 ==================== */

.cu-avatar {
  font-variant: small-caps;
  margin: 0;
  padding: 0;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
  color: $white;
  white-space: nowrap;
  position: relative;
  width: 64px;
  height: 64px;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  font-size: 1.5em;
  &.sm {
    width: 48px;
    height: 48px;
    font-size: 1em;
  }
  &.lg {
    width: 96px;
    height: 96px;
    font-size: 2em;
  }
  &.xl {
    width: 128px;
    height: 128px;
    font-size: 2.5em;
  }
  .avatar-text {
    font-size: 0.4em;
  }
}

.cu-avatar-group {
  direction: rtl;
  unicode-bidi: bidi-override;
  padding: 0 10px 0 40px;
  display: inline-block;
  .cu-avatar {
    margin-left: -30px;
    border: 4px solid #f1f1f1;
    vertical-align: middle;
  }
  .cu-avatar {
    &.sm {
      margin-left: -20px;
      border: 1px solid #f1f1f1;
    }
  }
}

/* ==================
          边框
 ==================== */

/* -- 实线 -- */

.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left,
.solids,
.solids-top,
.solids-right,
.solids-bottom,
.solids-left,
.dashed,
.dashed-top,
.dashed-right,
.dashed-bottom,
.dashed-left {
  position: relative;
  &::after {
    content: ' ';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
  }
}

.solid {
  &::after {
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  &-top {
    &::after {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  &-right {
    &::after {
      border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  &-bottom {
    &::after {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  &-left {
    &::after {
      border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  &s {
    &::after {
      border: 8px solid #eee;
    }
    &-top {
      &::after {
        border-top: 8px solid #eee;
      }
    }
    &-right {
      &::after {
        border-right: 8px solid #eee;
      }
    }
    &-bottom {
      &::after {
        border-bottom: 8px solid #eee;
      }
    }
    &-left {
      &::after {
        border-left: 8px solid #eee;
      }
    }
  }
}

/* -- 虚线 -- */

.dashed {
  &::after {
    border: 1px dashed #ddd;
  }
  &-top {
    &::after {
      border-top: 1px dashed #ddd;
    }
  }
  &-right {
    &::after {
      border-right: 1px dashed #ddd;
    }
  }
  &-bottom {
    &::after {
      border-bottom: 1px dashed #ddd;
    }
  }
  &-left {
    &::after {
      border-left: 1px dashed #ddd;
    }
  }
}

/* -- 阴影 -- */

.shadow {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  &-lg {
    box-shadow: 0px 40px 100px 0px rgba(0, 0, 0, 0.07);
  }
  &-warp {
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    &:before,
    &:after {
      position: absolute;
      content: '';
      top: 20px;
      bottom: 30px;
      left: 20px;
      width: 50%;
      box-shadow: 0 30px 20px rgba(0, 0, 0, 0.2);
      transform: rotate(-3deg);
      z-index: -1;
    }
    &:after {
      right: 20px;
      left: auto;
      transform: rotate(3deg);
    }
  }
  &-blur {
    position: relative;
    &::before {
      content: '';
      display: block;
      background: inherit;
      filter: blur(10px);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 10px;
      left: 10px;
      z-index: -1;
      opacity: 0.4;
      transform-origin: 0 0;
      border-radius: inherit;
      transform: scale(1, 1);
    }
  }
}

/* ==================
          按钮
 ==================== */

button.icon.lg {
  width: 80px;
  height: 80px;
}

.cu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 30px;
  font-size: 28px;
  height: 64px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  overflow: visible;
  margin-left: initial;
  transform: translate(0px, 0px);
  margin-right: initial;
  &::after {
    display: none;
  }
  &:not([class*='bg-']) {
    background-color: #f0f0f0;
  }
  &[class*='line'] {
    background-color: transparent;
    &::after {
      content: ' ';
      display: block;
      width: 200%;
      height: 200%;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid currentColor;
      transform: scale(0.5);
      transform-origin: 0 0;
      box-sizing: border-box;
      border-radius: 12px;
      z-index: 1;
      pointer-events: none;
    }
  }
  &.round {
    &[class*='line'] {
      &::after {
        border-radius: 1000px;
      }
    }
  }
  &[class*='lines'] {
    &::after {
      border: 6px solid currentColor;
    }
  }
  &[class*='bg-'] {
    &::after {
      display: none;
    }
  }
  &.sm {
    padding: 0 20px;
    font-size: 20px;
    height: 48px;
  }
  &.lg {
    padding: 0 40px;
    font-size: 32px;
    height: 80px;
  }
  &.icon {
    width: 64px;
    height: 64px;
    border-radius: 500px;
    padding: 0;
    &.sm {
      width: 48px;
      height: 48px;
    }
  }
  &.shadow-blur {
    &::before {
      top: 4px;
      left: 4px;
      filter: blur(6px);
      opacity: 0.6;
    }
  }
  &.button-hover {
    transform: translate(1px, 1px);
  }
  &.block {
    display: flex;
  }
  &[disabled] {
    opacity: 0.6;
    color: $white;
  }
}

/* ==================
          徽章
 ==================== */

.cu-tag {
  font-size: 24px;
  vertical-align: middle;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0px 16px;
  height: 48px;
  font-family: Helvetica Neue, Helvetica, sans-serif;
  white-space: nowrap;
  &:not([class*='bg']):not([class*='line']) {
    background-color: #f1f1f1;
  }
  &[class*='line-'] {
    &::after {
      content: ' ';
      width: 200%;
      height: 200%;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid currentColor;
      transform: scale(0.5);
      transform-origin: 0 0;
      box-sizing: border-box;
      border-radius: inherit;
      z-index: 1;
      pointer-events: none;
    }
  }
  &.radius {
    &[class*='line'] {
      &::after {
        border-radius: 12px;
      }
    }
  }
  &.round {
    &[class*='line'] {
      &::after {
        border-radius: 1000px;
      }
    }
  }
  + .cu-tag {
    margin-left: 10px;
  }
  &.sm {
    font-size: 20px;
    padding: 0px 12px;
    height: 32px;
  }
  &.badge {
    border-radius: 200px;
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 20px;
    padding: 0px 10px;
    height: 28px;
    color: $white;
    &:not([class*='bg-']) {
      background-color: #dd514c;
    }
  }
  &:empty {
    &:not([class*='cuIcon-']) {
      padding: 0px;
      width: 16px;
      height: 16px;
      top: -4px;
      right: -4px;
    }
  }
  &[class*='cuIcon-'] {
    width: 32px;
    height: 32px;
    top: -4px;
    right: -4px;
  }
}

// .cu-tag[class*='line-']::after {
//   border-radius: 0;
// }

.cu-capsule {
  display: inline-flex;
  vertical-align: middle;
  + .cu-capsule {
    margin-left: 10px;
  }
  .cu-tag {
    margin: 0;
    &[class*='line-'] {
      &:last-child {
        &::after {
          border-left: 0px solid transparent;
        }
      }
      &:first-child {
        &::after {
          border-right: 0px solid transparent;
        }
      }
    }
  }
  &.radius {
    .cu-tag {
      &:first-child {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
      }
      &:last-child::after,
      &[class*='line-'] {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }
    }
  }
  &.round {
    .cu-tag {
      &:first-child {
        border-top-left-radius: 200px;
        border-bottom-left-radius: 200px;
        text-indent: 4px;
      }
      &:last-child::after,
      &:last-child {
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px;
        text-indent: -4px;
      }
    }
  }
}

/* ==================
         进度条
 ==================== */

.cu-progress {
  overflow: hidden;
  height: 28px;
  background-color: #ebeef5;
  display: inline-flex;
  align-items: center;
  width: 100%;
  + view,
  + text {
    line-height: 1;
  }
  &.xs {
    height: 10px;
  }
  &.sm {
    height: 20px;
  }
  view {
    width: 0;
    height: 100%;
    align-items: center;
    display: flex;
    justify-items: flex-end;
    justify-content: space-around;
    font-size: 20px;
    color: $white;
    transition: width 0.6s ease;
  }
  text {
    align-items: center;
    display: flex;
    font-size: 20px;
    color: #666;
    text-indent: 10px;
  }
  &.text-progress {
    padding-right: 60px;
  }
  &.striped {
    view {
      background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );
      background-size: 72px 72px;
    }
  }
  &.active {
    view {
      animation: progress-stripes 2s linear infinite;
    }
  }
}

@keyframes progress-stripes {
  from {
    background-position: 72px 0;
  }

  to {
    background-position: 0 0;
  }
}

/* ==================
          加载
 ==================== */

.cu-load {
  display: block;
  line-height: 3em;
  text-align: center;
  &::before {
    font-family: 'cuIcon';
    display: inline-block;
    margin-right: 6px;
  }
  &.loading {
    &::before {
      content: '\e67a';
      animation: cuIcon-spin 2s infinite linear;
    }
    &::after {
      content: '加载中...';
    }
  }
  &.over {
    &::before {
      content: '\e64a';
    }
    &::after {
      content: '没有更多了';
    }
  }
  &.erro {
    &::before {
      content: '\e658';
    }
    &::after {
      content: '加载失败';
    }
  }
  &.load-icon {
    &::before {
      font-size: 32px;
    }
    &::after {
      display: none;
    }
    &.over {
      display: none;
    }
  }
  &.load-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 140px;
    left: 0;
    margin: auto;
    width: 260px;
    height: 260px;
    background-color: $white;
    border-radius: 10px;
    box-shadow: 0 0 0px 2000px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 28px;
    z-index: 9999;
    line-height: 2.4em;
    [class*='cuIcon-'] {
      font-size: 60px;
    }
    image {
      width: 70px;
      height: 70px;
    }
    &::after {
      content: '';
      position: absolute;
      background-color: $white;
      border-radius: 50%;
      width: 200px;
      height: 200px;
      font-size: 10px;
      border-top: 6px solid rgba(0, 0, 0, 0.05);
      border-right: 6px solid rgba(0, 0, 0, 0.05);
      border-bottom: 6px solid rgba(0, 0, 0, 0.05);
      border-left: 6px solid $orange;
      animation: cuIcon-spin 1s infinite linear;
      z-index: -1;
    }
  }
  &.load-image {
    display: flex;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    image {
      width: 30%;
    }
  }
}

.load-progress {
  pointer-events: none;
  top: 0;
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 2000;
  &.hide {
    display: none;
  }
  .load-progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    overflow: hidden;
    transition: all 200ms ease 0s;
  }
  .load-progress-spinner {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2000;
    display: block;
    &::after {
      content: '';
      display: block;
      width: 24px;
      height: 24px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: solid 4px transparent;
      border-top-color: inherit;
      border-left-color: inherit;
      border-radius: 50%;
      -webkit-animation: load-progress-spinner 0.4s linear infinite;
      animation: load-progress-spinner 0.4s linear infinite;
    }
  }
}

@-webkit-keyframes load-progress-spinner {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load-progress-spinner {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ==================
          列表
 ==================== */

.grayscale {
  filter: grayscale(1);
}

.cu-list {
  + .cu-list {
    margin-top: 30px;
  }
  > {
    .cu-item {
      transition: all 0.6s ease-in-out 0s;
      transform: translateX(0px);
      .move {
        position: absolute;
        right: 0;
        display: flex;
        width: 260px;
        height: 100%;
        transform: translateX(100%);
        view {
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
        }
      }
      &.move-cur {
        transform: translateX(-260px);
      }
    }
  }
  &.menu {
    display: block;
    overflow: hidden;
    > {
      .cu-item {
        position: relative;
        display: flex;
        padding: 0 30px;
        min-height: 100px;
        background-color: $white;
        justify-content: space-between;
        align-items: center;
        &:last-child:after {
          border: none;
        }
        &:after {
          position: absolute;
          top: 0;
          left: 0;
          box-sizing: border-box;
          width: 200%;
          height: 200%;
          border-bottom: 1px solid #ddd;
          border-radius: inherit;
          content: ' ';
          transform: scale(0.5);
          transform-origin: 0 0;
          pointer-events: none;
        }
        &.grayscale {
          background-color: #f5f5f5;
        }
        &.cur {
          background-color: #fcf7e9;
        }
        &.arrow {
          padding-right: 90px;
          &:before {
            content: '\e6a3';
            position: absolute;
            top: 0;
            right: 30px;
            bottom: 0;
            display: block;
            margin: auto;
            width: 30px;
            height: 30px;
            color: $grey;
            text-align: center;
            font-size: 34px;
            font-family: cuIcon;
            line-height: 30px;
          }
        }
        button {
          &.content {
            padding: 0;
            background-color: transparent;
            justify-content: flex-start;
            &:after {
              display: none;
            }
          }
        }
        .cu-avatar-group {
          .cu-avatar {
            border-color: $white;
          }
        }
        .content {
          font-size: 30px;
          line-height: 1.6em;
          flex: 1;
          > {
            view {
              &:first-child {
                display: flex;
                align-items: center;
              }
            }
            text {
              &[class*='cuIcon-'] {
                display: inline-block;
                margin-right: 10px;
                width: 1.6em;
                text-align: center;
              }
            }
            image {
              display: inline-block;
              margin-right: 10px;
              width: 1.6em;
              height: 1.6em;
              vertical-align: middle;
            }
          }
          .cu-tag {
            &.sm {
              display: inline-block;
              margin-left: 10px;
              height: 28px;
              font-size: 16px;
              line-height: 32px;
            }
            &:empty {
              right: 10px;
            }
          }
        }
        &.sm-border {
          > {
            .cu-item {
              &:after {
                left: 30px;
                width: calc(200% - 120px);
              }
            }
          }
        }
      }
    }
    &-avatar {
      overflow: hidden;
      > .cu-item {
        position: relative;
        display: flex;
        padding-right: 30px;
        height: 140px;
        background-color: $white;
        justify-content: flex-end;
        align-items: center;
        > .cu-avatar {
          position: absolute;
          left: 30px;
        }
        .flex {
          .text-cut {
            max-width: 510px;
          }
        }
        .content {
          position: absolute;
          left: 146px;
          width: calc(100% - 96px - 60px - 120px - 20px);
          line-height: 1.6em;
          &.flex-sub {
            width: calc(100% - 96px - 60px - 20px);
          }
          > view:first-child {
            font-size: 30px;
            display: flex;
            align-items: center;
          }
          .cu-tag {
            &.sm {
              display: inline-block;
              margin-left: 10px;
              height: 28px;
              font-size: 16px;
              line-height: 32px;
            }
          }
        }
        .action {
          width: 100px;
          text-align: center;
          view + view {
            margin-top: 10px;
          }
        }
      }
      &.comment {
        > .cu-item {
          padding: 30px 30px 30px 120px;
          height: auto;
          .content {
            position: relative;
            left: 0;
            width: auto;
            flex: 1;
          }
        }
        .cu-avatar {
          align-self: flex-start;
        }
      }
    }
  }
  &.grid {
    background-color: $white;
    text-align: center;
    > {
      .cu-item {
        position: relative;
        display: flex;
        padding: 20px 0 30px;
        transition-duration: 0s;
        flex-direction: column;
        &:after {
          position: absolute;
          top: 0;
          left: 0;
          box-sizing: border-box;
          width: 200%;
          height: 200%;
          border-right: 1px solid rgba(0, 0, 0, 0.1);
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: inherit;
          content: ' ';
          transform: scale(0.5);
          transform-origin: 0 0;
          pointer-events: none;
        }
        text {
          display: block;
          margin-top: 10px;
          color: #888;
          font-size: 26px;
          line-height: 40px;
        }
        [class*='cuIcon-'] {
          position: relative;
          display: block;
          margin-top: 20px;
          width: 100%;
          font-size: 48px;
        }
        .cu-tag {
          right: auto;
          left: 50%;
          margin-left: 20px;
        }
        &.no-border {
          padding: 20px 10px;
          > {
            .cu-item {
              padding-top: 10px;
              padding-bottom: 20px;
              &:after {
                border: none;
              }
            }
          }
        }
      }
    }
    &.col-3 > .cu-item:nth-child(3n):after,
    &.col-4 > .cu-item:nth-child(4n):after,
    &.col-5 > .cu-item:nth-child(5n):after {
      border-right-width: 0;
    }
  }
  &.card-menu {
    overflow: hidden;
    margin-right: 30px;
    margin-left: 30px;
    border-radius: 20px;
  }
}

/* ==================
          操作条
 ==================== */

.cu-bar {
  display: flex;
  position: relative;
  align-items: center;
  min-height: 100px;
  justify-content: space-between;
  .action {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    max-width: 100%;
    &.border-title {
      position: relative;
      top: -10px;
      text {
        &[class*='bg-'] {
          &:last-child {
            position: absolute;
            bottom: -0.5rem;
            min-width: 2rem;
            height: 6px;
            left: 0;
          }
        }
      }
    }
    &.sub-title {
      position: relative;
      top: -0.2rem;
      text {
        position: relative;
        z-index: 1;
        &[class*='bg-'] {
          &:last-child {
            position: absolute;
            display: inline-block;
            bottom: -0.2rem;
            border-radius: 6px;
            width: 100%;
            height: 0.6rem;
            left: 0.6rem;
            opacity: 0.3;
            z-index: 0;
          }
        }
        &[class*='text-'] {
          &:last-child {
            position: absolute;
            display: inline-block;
            bottom: -0.7rem;
            left: 0.5rem;
            opacity: 0.2;
            z-index: 0;
            text-align: right;
            font-weight: 900;
            font-size: 36px;
          }
        }
      }
    }
    &:first-child {
      margin-left: 30px;
      font-size: 30px;
      > {
        text {
          &[class*='cuIcon-'] {
            margin-left: -0.3em;
            margin-right: 0.3em;
          }
        }
      }
    }
    &:last-child {
      margin-right: 30px;
    }
    text {
      &.text-cut {
        text-align: left;
        width: 100%;
      }
    }
    > {
      text[class*='cuIcon-'],
      view[class*='cuIcon-'] {
        font-size: 36px;
      }
      text[class*='cuIcon-'] + text[class*='cuIcon-'] {
        margin-left: 0.5em;
      }
    }
  }
  .justify-center {
    .action.border-title text:last-child,
    .action.sub-title text:last-child {
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
    }
  }
  .cu-avatar {
    &:first-child {
      margin-left: 20px;
    }
  }
  .content {
    position: absolute;
    text-align: center;
    width: calc(100% - 340px);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 60px;
    font-size: 32px;
    line-height: 60px;
    cursor: none;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  &.ios {
    .content {
      bottom: 7px;
      height: 30px;
      font-size: 32px;
      line-height: 30px;
    }
  }
  &.btn-group {
    justify-content: space-around;
    button {
      padding: 20px 32px;
      flex: 1;
      margin: 0 20px;
      max-width: 50%;
    }
  }
  .search-form {
    background-color: #f5f5f5;
    line-height: 64px;
    height: 64px;
    font-size: 24px;
    color: #666;
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 20px;
    + .action {
      margin-right: 20px;
    }
    input {
      flex: 1;
      padding-right: 20px;
      height: 64px;
      line-height: 64px;
      font-size: 26px;
    }
    [class*='cuIcon-'] {
      margin: 0 0.5em 0 0.8em;
      &::before {
        top: 0px;
      }
    }
  }
  &.foot {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 1024;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
  }
  &.tabbar {
    padding: 0;
    height: calc(100px + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    &.shadow {
      box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
    }
    .action {
      font-size: 22px;
      position: relative;
      flex: 1;
      text-align: center;
      padding: 0;
      display: block;
      height: auto;
      line-height: 1;
      margin: 0;
      background-color: inherit;
      overflow: initial;
      &.add-action {
        position: relative;
        z-index: 2;
        padding-top: 50px;
        [class*='cuIcon-'] {
          position: absolute;
          width: 70px;
          z-index: 2;
          height: 70px;
          border-radius: 50%;
          line-height: 70px;
          font-size: 50px;
          top: -35px;
          left: 0;
          right: 0;
          margin: auto;
          padding: 0;
        }
        &::after {
          content: '';
          position: absolute;
          width: 100px;
          height: 100px;
          top: -50px;
          left: 0;
          right: 0;
          margin: auto;
          box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.08);
          border-radius: 50px;
          background-color: inherit;
          z-index: 0;
        }
        &::before {
          content: '';
          position: absolute;
          width: 100px;
          height: 30px;
          bottom: 30px;
          left: 0;
          right: 0;
          margin: auto;
          background-color: inherit;
          z-index: 1;
        }
      }
      .cuIcon-cu-image {
        margin: 0 auto;
        image {
          width: 50px;
          height: 50px;
          display: inline-block;
        }
      }
      [class*='cuIcon-'] {
        width: 100px;
        position: relative;
        display: block;
        height: auto;
        margin: 0 auto 10px;
        text-align: center;
        font-size: 40px;
      }
    }
    &.shop {
      .action {
        width: 140px;
        flex: initial;
      }
    }
    .btn-group {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 10px;
    }
    button {
      &.action {
        &::after {
          border: 0;
        }
      }
    }
    .submit {
      align-items: center;
      display: flex;
      justify-content: center;
      text-align: center;
      position: relative;
      flex: 2;
      align-self: stretch;
      &:last-child {
        flex: 2.6;
      }
      + .submit {
        flex: 2;
      }
    }
    &.border {
      .action {
        &::before {
          content: ' ';
          width: 200%;
          height: 200%;
          position: absolute;
          top: 0;
          left: 0;
          transform: scale(0.5);
          transform-origin: 0 0;
          border-right: 1px solid rgba(0, 0, 0, 0.1);
          z-index: 3;
        }
        &:last-child {
          &:before {
            display: none;
          }
        }
      }
    }
  }
  &.input {
    padding-right: 20px;
    background-color: $white;
    input {
      overflow: initial;
      line-height: 64px;
      height: 64px;
      min-height: 64px;
      flex: 1;
      font-size: 30px;
      margin: 0 20px;
      + .action {
        margin-right: 20px;
        margin-left: 0px;
      }
    }
    .action {
      margin-left: 20px;
      [class*='cuIcon-'] {
        font-size: 48px;
      }
      &:first-child {
        [class*='cuIcon-'] {
          margin-left: 0px;
        }
      }
    }
  }
}

.cu-bar.fixed,
.nav.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1024;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.cu-tabbar-height {
  min-height: 100px;
  height: calc(100px + env(safe-area-inset-bottom) / 2);
}

.cu-custom {
  display: block;
  position: relative;
  .cu-bar {
    min-height: 0px;
    padding-right: 200px;
    box-shadow: 0px 0px 0px;
    z-index: 9999;
    .content {
      width: calc(100% - 440px);
      image {
        height: 60px;
        width: 240px;
      }
    }
    .border-custom {
      position: relative;
      background: rgba(0, 0, 0, 0.15);
      border-radius: 1000px;
      height: 30px;
      &::after {
        content: ' ';
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: inherit;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border: 1px solid $white;
        opacity: 0.5;
      }
      &::before {
        content: ' ';
        width: 1px;
        height: 110%;
        position: absolute;
        top: 22.5%;
        left: 0;
        right: 0;
        margin: auto;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        opacity: 0.6;
        background-color: $white;
      }
      text {
        display: block;
        flex: 1;
        margin: auto !important;
        text-align: center;
        font-size: 34px;
      }
    }
  }
}

/* ==================
         导航栏
 ==================== */

.nav {
  white-space: nowrap;
  .cu-item {
    height: 90px;
    display: inline-block;
    line-height: 90px;
    margin: 0 10px;
    padding: 0 20px;
    &.cur {
      border-bottom: 4px solid;
    }
  }
}

::-webkit-scrollbar {
  display: none;
}
/* ==================
         时间轴
 ==================== */

.cu-timeline {
  display: block;
  background-color: $white;
  .cu-time {
    width: 120px;
    text-align: center;
    padding: 20px 0;
    font-size: 26px;
    color: #888;
    display: block;
  }
  > {
    .cu-item {
      padding: 30px 30px 30px 120px;
      position: relative;
      display: block;
      z-index: 0;
      &:not([class*='text-']) {
        color: #ccc;
      }
      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        background-color: #ddd;
        left: 60px;
        height: 100%;
        top: 0;
        z-index: 8;
      }
      &::before {
        font-family: 'cuIcon';
        display: block;
        position: absolute;
        top: 36px;
        z-index: 9;
        background-color: $white;
        width: 50px;
        height: 50px;
        text-align: center;
        border: none;
        line-height: 50px;
        left: 36px;
      }
      &:not([class*='cuIcon-']) {
        &::before {
          content: '\e763';
        }
      }
      &[class*='cuIcon-'] {
        &::before {
          background-color: $white;
          width: 50px;
          height: 50px;
          text-align: center;
          border: none;
          line-height: 50px;
          left: 36px;
        }
      }
      > {
        .content {
          padding: 30px;
          border-radius: 6px;
          display: block;
          line-height: 1.6;
          &:not([class*='bg-']) {
            background-color: #f1f1f1;
            color: #666;
          }
          + {
            .content {
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
}

/* ==================
         聊天
 ==================== */

.cu-chat {
  display: flex;
  flex-direction: column;
  .cu-item {
    display: flex;
    padding: 30px 30px 70px;
    position: relative;
    > {
      .cu-avatar {
        width: 80px;
        height: 80px;
      }
      .main {
        max-width: calc(100% - 260px);
        margin: 0 40px;
        display: flex;
        align-items: center;
        .content {
          padding: 20px;
          border-radius: 6px;
          display: inline-flex;
          max-width: 100%;
          align-items: center;
          font-size: 30px;
          position: relative;
          min-height: 80px;
          line-height: 40px;
          text-align: left;
          &:not([class*='bg-']) {
            background-color: $white;
            color: #666;
            &::before {
              background-color: $black;
              opacity: 0.1;
            }
          }
          &::after {
            content: '';
            top: 27px;
            transform: rotate(45deg);
            position: absolute;
            z-index: 100;
            display: inline-block;
            overflow: hidden;
            width: 24px;
            height: 24px;
            left: -12px;
            right: initial;
            background-color: inherit;
          }
          &::before {
            content: '';
            top: 30px;
            transform: rotate(45deg);
            position: absolute;
            z-index: -1;
            display: inline-block;
            overflow: hidden;
            width: 24px;
            height: 24px;
            left: -12px;
            right: initial;
            background-color: inherit;
            filter: blur(5px);
            opacity: 0.3;
          }
        }
      }
      image {
        height: 320px;
      }
    }
    .date {
      position: absolute;
      font-size: 24px;
      color: $grey;
      width: calc(100% - 320px);
      bottom: 20px;
      left: 160px;
    }
    .action {
      padding: 0 30px;
      display: flex;
      align-items: center;
    }
    &.self {
      justify-content: flex-end;
      text-align: right;
      > {
        .main {
          .content {
            &::after {
              left: auto;
              right: -12px;
            }
            &::before {
              left: auto;
              right: -12px;
            }
          }
        }
      }
    }
  }
  .cu-info {
    display: inline-block;
    margin: 20px auto;
    font-size: 24px;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    color: $white;
    max-width: 400px;
    line-height: 1.4;
  }
}

/* ==================
         卡片
 ==================== */

.cu-card {
  display: block;
  overflow: hidden;
  > {
    .cu-item {
      display: block;
      overflow: hidden;
      border-radius: 10px;
      margin: 30px;
      &.shadow-blur {
        overflow: initial;
      }
    }
  }
  &.no-card {
    > .cu-item {
      margin: 0px;
      border-radius: 0px;
    }
  }
  .grid {
    &.grid-square {
      margin-bottom: -20px;
    }
  }
  &.case {
    .image {
      position: relative;
      image {
        width: 100%;
      }
      .cu-tag {
        position: absolute;
        right: 0;
        top: 0;
      }
      .cu-bar {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: transparent;
        padding: 0px 30px;
      }
    }
    &.no-card {
      .image {
        margin: 30px 30px 0;
        overflow: hidden;
        border-radius: 10px;
      }
    }
  }
  &.dynamic {
    display: block;
    > {
      .cu-item {
        display: block;
        background-color: $white;
        overflow: hidden;
        > {
          .text-content {
            padding: 0 30px 0;
            max-height: 6.4em;
            overflow: hidden;
            font-size: 30px;
            margin-bottom: 20px;
          }
        }
        .square-img {
          width: 100%;
          height: 200px;
          border-radius: 6px;
        }
        .only-img {
          width: 100%;
          height: 320px;
          border-radius: 6px;
        }
        .comment {
          padding: 20px;
          background-color: #f1f1f1;
          margin: 0 30px 30px;
          border-radius: 6px;
        }
      }
    }
  }
  &.article {
    display: block;
    > {
      .cu-item {
        padding-bottom: 30px;
        .title {
          font-size: 30px;
          font-weight: 900;
          color: $black;
          line-height: 100px;
          padding: 0 30px;
        }
        .content {
          display: flex;
          padding: 0 30px;
          > {
            image {
              width: 240px;
              height: 6.4em;
              margin-right: 20px;
              border-radius: 6px;
            }
          }
          .desc {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          .text-content {
            font-size: 28px;
            color: #888;
            height: 4.8em;
            overflow: hidden;
          }
        }
      }
    }
  }
}

/* ==================
         表单
 ==================== */

.cu-form-group {
  background-color: $white;
  padding: 1px 30px;
  display: flex;
  align-items: center;
  min-height: 100px;
  justify-content: space-between;
  + {
    .cu-form-group {
      border-top: 1px solid #eee;
    }
  }
  .title {
    text-align: justify;
    padding-right: 30px;
    font-size: 30px;
    position: relative;
    height: 60px;
    line-height: 60px;
  }
  input {
    flex: 1;
    font-size: 30px;
    color: #555;
    padding-right: 20px;
  }
  > {
    text {
      &[class*='cuIcon-'] {
        font-size: 36px;
        padding: 0;
        box-sizing: border-box;
      }
    }
  }
  &.top {
    .title {
      height: 1em;
      line-height: 1;
      align-self: flex-start;
      margin-top: 16px;
    }
  }
  textarea {
    margin: 32px 0 30px;
    height: 4.6em;
    width: 100%;
    line-height: 1.2em;
    flex: 1;
    font-size: 28px;
    padding: 0;
    box-sizing: content-box;
    display: inline-block;
    vertical-align: top;
    .placeholder {
      color: transparent;
    }
    &::after {
      content: attr(data-placeholder);
      color: gray;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      transition: 0.2s;
      opacity: 1;
    }
    &.value {
      &::after {
        opacity: 0;
      }
    }
    &[disabled],
    &[disabled] .placeholder {
      color: transparent;
    }
  }
  picker {
    flex: 1;
    padding-right: 40px;
    overflow: hidden;
    position: relative;
    .picker {
      line-height: 100px;
      font-size: 28px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
      text-align: right;
    }
    &::after {
      font-family: cuIcon;
      display: block;
      content: '\e6a3';
      position: absolute;
      font-size: 34px;
      color: $grey;
      line-height: 100px;
      width: 60px;
      text-align: center;
      top: 0;
      bottom: 0;
      right: -20px;
      margin: auto;
    }
  }
}

/* ==================
         模态窗口
 ==================== */

.cu-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  backface-visibility: hidden;
  perspective: 2000px;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
  &::before {
    content: '\200B';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  &.show {
    opacity: 1;
    transition-duration: 0.3s;
    -ms-transform: scale(1);
    transform: scale(1);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
  }
  &.bottom-modal {
    margin-bottom: -1000px;
    &::before {
      vertical-align: bottom;
    }
    .cu-dialog {
      width: 100%;
      border-radius: 0;
    }
    &.show {
      margin-bottom: 0;
    }
  }
  &.drawer-modal {
    transform: scale(1);
    display: flex;
    .cu-dialog {
      height: 100%;
      min-width: 200px;
      border-radius: 0;
      margin: initial;
      transition-duration: 0.3s;
    }
    &.justify-start {
      .cu-dialog {
        transform: translateX(-100%);
      }
    }
    &.justify-end {
      .cu-dialog {
        transform: translateX(100%);
      }
    }
    &.show {
      .cu-dialog {
        transform: translateX(0%);
      }
    }
  }
}

.cu-dialog {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 680px;
  max-width: 100%;
  background-color: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
}

/* ==================
         轮播
 ==================== */

swiper {
  &.square-dot {
    .wx-swiper-dot {
      background-color: $white;
      opacity: 0.4;
      width: 10px;
      height: 10px;
      border-radius: 20px;
      transition: all 0.3s ease-in-out 0s;
      &.wx-swiper-dot-active {
        opacity: 1;
        width: 30px;
      }
    }
  }
  &.round-dot {
    .wx-swiper-dot {
      width: 10px;
      height: 10px;
      top: -4px;
      transition: all 0.3s ease-in-out 0s;
      position: relative;
      &.wx-swiper-dot-active {
        width: 18px;
        height: 18px;
        top: 0px;
        &::after {
          content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          top: 0px;
          left: 0px;
          right: 0;
          bottom: 0;
          margin: auto;
          background-color: $white;
          border-radius: 20px;
        }
      }
    }
  }
}

.screen-swiper {
  min-height: 375px;
}

.screen-swiper image,
.screen-swiper video,
.swiper-item image,
.swiper-item video {
  width: 100%;
  display: block;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.card-swiper {
  height: 420px;
  swiper-item {
    width: 610px !important;
    left: 70px;
    box-sizing: border-box;
    padding: 40px 0px 70px;
    overflow: initial;
    .swiper-item {
      width: 100%;
      display: block;
      height: 100%;
      border-radius: 10px;
      transform: scale(0.9);
      transition: all 0.2s ease-in 0s;
      overflow: hidden;
    }
    &.cur {
      .swiper-item {
        transform: none;
        transition: all 0.2s ease-in 0s;
      }
    }
  }
}

.tower-swiper {
  height: 420px;
  position: relative;
  max-width: 750px;
  overflow: hidden;
  .tower-item {
    position: absolute;
    width: 300px;
    height: 380px;
    top: 0;
    bottom: 0;
    left: 50%;
    margin: auto;
    transition: all 0.2s ease-in 0s;
    opacity: 1;
    &.none {
      opacity: 0;
    }
    .swiper-item {
      width: 100%;
      height: 100%;
      border-radius: 6px;
      overflow: hidden;
    }
  }
}

/* ==================
          步骤条
 ==================== */

.cu-steps {
  display: flex;
  .cu-item::before,
  .cu-item::after,
  &.steps-arrow .cu-item::before,
  &.steps-arrow .cu-item::after {
    content: '';
    display: block;
    position: absolute;
    height: 0rem;
    width: calc(100% - 80px);
    border-bottom: 1px solid #ccc;
    left: calc(0rem - (100% - 80px) / 2);
    top: 40px;
    z-index: 0;
  }
  &.steps-arrow .cu-item::before,
  &.steps-arrow .cu-item::after {
    content: '\e6a3';
    font-family: 'cuIcon';
    height: 30px;
    border-bottom-width: 0px;
    line-height: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #ccc;
  }
  &.steps-bottom {
    .cu-item {
      &::before,
      &::after {
        bottom: 40px;
        top: initial;
      }
    }
  }
  .cu-item {
    flex: 1;
    text-align: center;
    position: relative;
    min-width: 100px;
    &:not([class*='text-']) {
      color: $grey;
    }
    [class*='cuIcon-'] {
      display: block;
      font-size: 40px;
      line-height: 80px;
    }
    .num {
      display: block;
      font-size: 40px;
      line-height: 80px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      line-height: 40px;
      margin: 20px auto;
      font-size: 24px;
      border: 1px solid currentColor;
      position: relative;
      overflow: hidden;
      &::before,
      &::after {
        content: attr(data-index);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        transition: all 0.3s ease-in-out 0s;
        transform: translateY(0px);
      }
      &::after {
        transform: translateY(40px);
        color: $white;
        transition: all 0.3s ease-in-out 0s;
      }
    }
    &::after {
      border-bottom: 1px solid currentColor;
      width: 0px;
      transition: all 0.3s ease-in-out 0s;
    }
    &[class*='text-'] {
      &::after {
        width: calc(100% - 80px);
        color: currentColor;
      }
      .num {
        background-color: currentColor;
        &::before {
          transform: translateY(-40px);
          color: $white;
        }
        &::after {
          content: '\e645';
          font-family: 'cuIcon';
          color: $white;
          transform: translateY(0px);
        }
        &.err {
          &::after {
            content: '\e646';
          }
        }
      }
    }
    &:first-child::before,
    &:first-child::after {
        display: none !important;
    }
  }
}

scroll-view {
  &.cu-steps {
    display: block;
    white-space: nowrap;
    .cu-item {
      display: inline-block;
      position: relative;
    }
  }
}

/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.flex {
  display: flex;
  &-sub {
    flex: 1;
  }
  &-twice {
    flex: 2;
  }
  &-treble {
    flex: 3;
  }
  &-direction {
    flex-direction: column;
  }
  &-wrap {
    flex-wrap: wrap;
  }
}

.basis {
  &-xs {
    flex-basis: 20%;
  }
  &-sm {
    flex-basis: 40%;
  }
  &-df {
    flex-basis: 50%;
  }
  &-lg {
    flex-basis: 60%;
  }
  &-xl {
    flex-basis: 80%;
  }
}

.align {
  &-start {
    align-items: flex-start;
  }
  &-end {
    align-items: flex-end;
  }
  &-center {
    align-items: center;
  }
  &-stretch {
    align-items: stretch;
  }
}

.self {
  &-start {
    align-self: flex-start;
  }
  &-center {
    align-self: flex-center;
  }
  &-end {
    align-self: flex-end;
  }
  &-stretch {
    align-self: stretch;
  }
}

.justify {
  &-start {
    justify-content: flex-start;
  }
  &-end {
    justify-content: flex-end;
  }
  &-center {
    justify-content: center;
  }
  &-between {
    justify-content: space-between;
  }
  &-around {
    justify-content: space-around;
  }
}

/* grid布局 */

.grid {
  display: flex;
  flex-wrap: wrap;
  &.grid-square {
    overflow: hidden;
    .cu-tag {
      position: absolute;
      right: 0;
      top: 0;
      border-bottom-left-radius: 6px;
      padding: 6px 12px;
      height: auto;
      background-color: rgba(0, 0, 0, 0.5);
    }
    > {
      view {
        margin-right: 20px;
        margin-bottom: 20px;
        border-radius: 6px;
        position: relative;
        overflow: hidden;
        > {
          text {
            &[class*='cuIcon-'] {
              font-size: 52px;
              position: absolute;
              color: $grey;
              margin: auto;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
            }
          }
        }
      }
    }
  }
  &.col {
    &-1 {
      > {
        view {
          width: 100%;
        }
      }
      &.grid-square {
        > {
          view {
            padding-bottom: 100%;
            height: 0;
            margin-right: 0;
          }
        }
      }
    }
    &-2 {
      > {
        view {
          width: 50%;
        }
      }
      &.grid-square {
        > {
          view {
            padding-bottom: calc((100% - 20px) / 2);
            height: 0;
            width: calc((100% - 20px) / 2);
            &:nth-child(2n) {
              margin-right: 0;
            }
          }
        }
      }
    }
    &-3 {
      > {
        view {
          width: 33.33%;
        }
      }
      &.grid-square {
        > {
          view {
            padding-bottom: calc((100% - 40px) / 3);
            height: 0;
            width: calc((100% - 40px) / 3);
            &:nth-child(3n) {
              margin-right: 0;
            }
          }
        }
      }
    }
    &-4 {
      > {
        view {
          width: 25%;
        }
      }
      &.grid-square {
        > {
          view {
            padding-bottom: calc((100% - 60px) / 4);
            height: 0;
            width: calc((100% - 60px) / 4);
            &:nth-child(4n) {
              margin-right: 0;
            }
          }
        }
      }
    }
    &-5 {
      > {
        view {
          width: 20%;
        }
      }
      &.grid-square {
        > {
          view {
            padding-bottom: calc((100% - 80px) / 5);
            height: 0;
            width: calc((100% - 80px) / 5);
          }
        }
      }
    }
  }
}

/*  -- 内外边距 -- */

.margin {
  margin: 30px;
  &-0 {
    margin: 0;
  }
  &-xs {
    margin: 10px;
  }
  &-sm {
    margin: 20px;
  }
  &-lg {
    margin: 40px;
  }
  &-xl {
    margin: 50px;
  }
  &-top {
    margin-top: 30px;
    &-xs {
      margin-top: 10px;
    }
    &-sm {
      margin-top: 20px;
    }
    &-lg {
      margin-top: 40px;
    }
    &-xl {
      margin-top: 50px;
    }
  }
  &-right {
    margin-right: 30px;
    &-xs {
      margin-right: 10px;
    }
    &-sm {
      margin-right: 20px;
    }
    &-lg {
      margin-right: 40px;
    }
    &-xl {
      margin-right: 50px;
    }
  }
  &-bottom {
    margin-bottom: 30px;
    &-xs {
      margin-bottom: 10px;
    }
    &-sm {
      margin-bottom: 20px;
    }
    &-lg {
      margin-bottom: 40px;
    }
    &-xl {
      margin-bottom: 50px;
    }
  }
  &-left {
    margin-left: 30px;
    &-xs {
      margin-left: 10px;
    }
    &-sm {
      margin-left: 20px;
    }
    &-lg {
      margin-left: 40px;
    }
    &-xl {
      margin-left: 50px;
    }
  }
  &-lr {
    margin-left: 30px;
    margin-right: 30px;
    &-xs {
      margin-left: 10px;
      margin-right: 10px;
    }
    &-sm {
      margin-left: 20px;
      margin-right: 20px;
    }
    &-lg {
      margin-left: 40px;
      margin-right: 40px;
    }
    &-xl {
      margin-left: 50px;
      margin-right: 50px;
    }
  }
  &-tb {
    margin-top: 30px;
    margin-bottom: 30px;
    &-xs {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    &-sm {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    &-lg {
      margin-top: 40px;
      margin-bottom: 40px;
    }
    &-xl {
      margin-top: 50px;
      margin-bottom: 50px;
    }
  }
}

.padding {
  padding: 30px;
  &-0 {
    padding: 0;
  }
  &-xs {
    padding: 10px;
  }
  &-sm {
    padding: 20px;
  }
  &-lg {
    padding: 40px;
  }
  &-xl {
    padding: 50px;
  }
  &-top {
    padding-top: 30px;
    &-xs {
      padding-top: 10px;
    }
    &-sm {
      padding-top: 20px;
    }
    &-lg {
      padding-top: 40px;
    }
    &-xl {
      padding-top: 50px;
    }
  }
  &-right {
    padding-right: 30px;
    &-xs {
      padding-right: 10px;
    }
    &-sm {
      padding-right: 20px;
    }
    &-lg {
      padding-right: 40px;
    }
    &-xl {
      padding-right: 50px;
    }
  }
  &-bottom {
    padding-bottom: 30px;
    &-xs {
      padding-bottom: 10px;
    }
    &-sm {
      padding-bottom: 20px;
    }
    &-lg {
      padding-bottom: 40px;
    }
    &-xl {
      padding-bottom: 50px;
    }
  }
  &-left {
    padding-left: 30px;
    &-xs {
      padding-left: 10px;
    }
    &-sm {
      padding-left: 20px;
    }
    &-lg {
      padding-left: 40px;
    }
    &-xl {
      padding-left: 50px;
    }
  }
  &-lr {
    padding-left: 30px;
    padding-right: 30px;
    &-xs {
      padding-left: 10px;
      padding-right: 10px;
    }
    &-sm {
      padding-left: 20px;
      padding-right: 20px;
    }
    &-lg {
      padding-left: 40px;
      padding-right: 40px;
    }
    &-xl {
      padding-left: 50px;
      padding-right: 50px;
    }
  }
  &-tb {
    padding-top: 30px;
    padding-bottom: 30px;
    &-xs {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    &-sm {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    &-lg {
      padding-top: 40px;
      padding-bottom: 40px;
    }
    &-xl {
      padding-top: 50px;
      padding-bottom: 50px;
    }
  }
}

/* -- 浮动 --  */
.cf {
  &::after,
  &::before {
    content: ' ';
    display: table;
  }
  &::after {
    clear: both;
  }
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* ==================
          背景
 ==================== */

.line {
  &-red::after,
  &s-red::after {
    border-color: $red;
  }
  &-orange::after,
  &s-orange::after {
    border-color: $orange;
  }
  &-yellow::after,
  &s-yellow::after {
    border-color: $yellow;
  }
  &-olive::after,
  &s-olive::after {
    border-color: $olive;
  }
  &-green::after,
  &s-green::after {
    border-color: $green;
  }
  &-cyan::after,
  &s-cyan::after {
    border-color: $cyan;
  }
  &-blue::after,
  &s-blue::after {
    border-color: $blue;
  }
  &-purple::after,
  &s-purple::after {
    border-color: $purple;
  }
  &-mauve::after,
  &s-mauve::after {
    border-color: $mauve;
  }
  &-pink::after,
  &s-pink::after {
    border-color: $pink;
  }
  &-brown::after,
  &s-brown::after {
    border-color: $brown;
  }
  &-grey::after,
  &s-grey::after {
    border-color: $grey;
  }
  &-gray::after,
  &s-gray::after {
    border-color: $gray;
  }
  &-black::after,
  &s-black::after {
    border-color: $black;
  }
  &-white::after,
  &s-white::after {
    border-color: $white;
  }
}

.bg {
  &-red {
    background-color: $red;
    color: $white;
    &.light {
      color: $red;
      background-color: $redLight;
    }
  }
  &-orange {
    background-color: $orange;
    color: $white;
    &.light {
      color: $orange;
      background-color: $orangeLight;
    }
  }
  &-yellow {
    background-color: $yellow;
    color: $black;
    &.light {
      color: $yellow;
      background-color: $yellowLight;
    }
  }
  &-olive {
    background-color: $olive;
    color: $white;
    &.light {
      color: $olive;
      background-color: $oliveLight;
    }
  }
  &-green {
    background-color: $green;
    color: $white;
    &.light {
      color: $green;
      background-color: $greenLight;
    }
  }
  &-cyan {
    background-color: $cyan;
    color: $white;
    &.light {
      color: $cyan;
      background-color: $cyanLight;
    }
  }
  &-blue {
    background-color: $blue;
    color: $white;
    &.light {
      color: $blue;
      background-color: $blueLight;
    }
  }
  &-purple {
    background-color: $purple;
    color: $white;
    &.light {
      color: $purple;
      background-color: $purpleLight;
    }
  }
  &-mauve {
    background-color: $mauve;
    color: $white;
    &.light {
      color: $mauve;
      background-color: $mauveLight;
    }
  }
  &-pink {
    background-color: $pink;
    color: $white;
    .light {
      color: $pink;
      background-color: $pinkLight;
    }
  }
  &-brown {
    background-color: $brown;
    color: $white;
    &.light {
      color: $brown;
      background-color: $brownLight;
    }
  }
  &-grey {
    background-color: $grey;
    color: $white;
    &.light {
      color: $grey;
      background-color: $greyLight;
    }
  }
  &-gray {
    background-color: #f0f0f0;
    color: $black;
    &.light {
      color: #666;
      background-color: #fadbd9;
    }
    &.light {
      color: #888;
      background-color: #f1f1f1;
    }
  }
  &-black {
    background-color: $black;
    color: $white;
  }
  &-white {
    background-color: $white;
    color: $darkGray;
  }
  &-shadeTop {
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
    color: $white;
  }
  &-shadeBottom {
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
    color: $white;
  }
  &-gradual {
    &-red {
      background-image: $gradualRed;
      color: $white;
    }
    &-orange {
      background-image: $gradualOrange;
      color: $white;
    }
    &-green {
      background-image: $gradualGreen;
      color: $white;
    }
    &-purple {
      background-image: $gradualPurple;
      color: $white;
    }
    &-pink {
      background-image: $gradualPink;
      color: $white;
    }
    &-blue {
      background-image: $gradualBlue;
      color: $white;
    }
  }
  &-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  &-mask {
    background-color: $black;
    position: relative;
    &::after {
      content: '';
      border-radius: inherit;
      width: 100%;
      height: 100%;
      display: block;
      background-color: rgba(0, 0, 0, 0.4);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }
    view,
    cover-view {
      z-index: 5;
      position: relative;
    }
  }
  &-video {
    position: relative;
    video {
      display: block;
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      position: absolute;
      top: 0;
      z-index: 0;
      pointer-events: none;
    }
  }
}

.shadow {
  &[class*='-red'] {
    box-shadow: $ShadowSize $redShadow;
  }
  &[class*='-orange'] {
    box-shadow: $ShadowSize $orangeShadow;
  }
  &[class*='-yellow'] {
    box-shadow: $ShadowSize $yellowShadow;
  }
  &[class*='-olive'] {
    box-shadow: $ShadowSize $oliveShadow;
  }
  &[class*='-green'] {
    box-shadow: $ShadowSize $greenShadow;
  }
  &[class*='-cyan'] {
    box-shadow: $ShadowSize $cyanShadow;
  }
  &[class*='-blue'] {
    box-shadow: $ShadowSize $blueShadow;
  }
  &[class*='-purple'] {
    box-shadow: $ShadowSize $purpleShadow;
  }
  &[class*='-mauve'] {
    box-shadow: $ShadowSize $mauveShadow;
  }
  &[class*='-pink'] {
    box-shadow: $ShadowSize $pinkShadow;
  }
  &[class*='-white'] {
    box-shadow: $ShadowSize $blackShadow;
  }
}

.cu-btn {
  &.shadow {
    &[class*='-brown'] {
      box-shadow: $ShadowSize $brownShadow;
    }
    &[class*='-gray'] {
      box-shadow: $ShadowSize $grayShadow;
    }
    &[class*='-black'] {
      box-shadow: $ShadowSize $blackShadow;
    }
  }
}

.text {
  &-shadow {
    &[class*='-red'] {
      text-shadow: $ShadowSize $redShadow;
    }
    &[class*='-orange'] {
      text-shadow: $ShadowSize $orangeShadow;
    }
    &[class*='-yellow'] {
      text-shadow: $ShadowSize $yellowShadow;
    }
    &[class*='-olive'] {
      text-shadow: $ShadowSize $oliveShadow;
    }
    &[class*='-green'] {
      text-shadow: $ShadowSize $greenShadow;
    }
    &[class*='-cyan'] {
      text-shadow: $ShadowSize $cyanShadow;
    }
    &[class*='-blue'] {
      text-shadow: $ShadowSize $blueShadow;
    }
    &[class*='-purple'] {
      text-shadow: $ShadowSize $purpleShadow;
    }
    &[class*='-mauve'] {
      text-shadow: $ShadowSize $mauveShadow;
    }
    &[class*='-pink'] {
      text-shadow: $ShadowSize $pinkShadow;
    }
    &[class*='-brown'] {
      text-shadow: $ShadowSize $brownShadow;
    }
    &[class*='-grey'] {
      text-shadow: $ShadowSize $greyShadow;
    }
    &[class*='-gray'] {
      text-shadow: $ShadowSize $grayShadow;
    }
    &[class*='-black'] {
      text-shadow: $ShadowSize $blackShadow;
    }
  }
}

/* ==================
          文本
 ==================== */

.text {
  &-xs {
    font-size: 20px;
  }
  &-sm {
    font-size: 24px;
  }
  &-df {
    font-size: 28px;
  }
  &-lg {
    font-size: 32px;
  }
  &-xl {
    font-size: 36px;
  }
  &-xxl {
    font-size: 44px;
  }
  &-sl {
    font-size: 80px;
  }
  &-xsl {
    font-size: 120px;
  }
  &-Abc {
    text-transform: Capitalize;
  }
  &-ABC {
    text-transform: Uppercase;
  }
  &-abc {
    text-transform: Lowercase;
  }
  &-price {
    &::before {
      content: '¥';
      font-size: 80%;
      margin-right: 4px;
    }
  }
  &-cut {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  &-bold {
    font-weight: bold;
  }
  &-center {
    text-align: center;
  }
  &-content {
    line-height: 1.6;
  }
  &-left {
    text-align: left;
  }
  &-right {
    text-align: right;
  }
}

.text-red,
.line-red,
.lines-red {
  color: $red;
}

.text-orange,
.line-orange,
.lines-orange {
  color: $orange;
}

.text-yellow,
.line-yellow,
.lines-yellow {
  color: $yellow;
}

.text-olive,
.line-olive,
.lines-olive {
  color: $olive;
}

.text-green,
.line-green,
.lines-green {
  color: $green;
}

.text-cyan,
.line-cyan,
.lines-cyan {
  color: $cyan;
}

.text-blue,
.line-blue,
.lines-blue {
  color: $blue;
}

.text-purple,
.line-purple,
.lines-purple {
  color: $purple;
}

.text-mauve,
.line-mauve,
.lines-mauve {
  color: $mauve;
}

.text-pink,
.line-pink,
.lines-pink {
  color: $pink;
}

.text-brown,
.line-brown,
.lines-brown {
  color: $brown;
}

.text-grey,
.line-grey,
.lines-grey {
  color: $grey;
}

.text-gray,
.line-gray,
.lines-gray {
  color: $gray;
}

.text-black,
.line-black,
.lines-black {
  color: $black;
}

.text-white,
.line-white,
.lines-white {
  color: $white;
}

.text-shadow {
  text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
}