gypsy-crm-frontend-vu/pages/customer/style.scss

@import "@/uni.scss";

.custom-withdraw {
  background: var(--color-zinc-50);
  min-height: 100vh;

  .box {
    margin-bottom: px2rpx(20);

    .b-card {
      background: #fff;
      border-radius: px2rpx(12);
      padding: px2rpx(20);
      box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.03);

      .card-top {
        .tit {
          font-size: px2rpx(16);
          font-weight: 600;
          margin-bottom: px2rpx(16);
          display: flex;
          align-items: center;
          color: var(--color-navy-900);

          .iconfont {
            margin-right: px2rpx(8);
            color: var(--color-primary);
            font-size: px2rpx(18);
          }
        }
      }

      .channelType {
        font-size: px2rpx(15);
        font-weight: 600;
        margin: px2rpx(24) 0 px2rpx(12);
        color: var(--color-navy-700);
        padding-left: px2rpx(8);
        border-left: px2rpx(4) solid var(--color-primary);
      }
    }
  }

  .reselect-btn {
    margin-top: px2rpx(20);
    display: flex;
    justify-content: flex-end;
  }

  .s-btn {
    &.reselect {
      background-color: var(--color-zinc-100);
      color: var(--color-navy-700);
      border: none;
      font-size: px2rpx(14);
      padding: px2rpx(8) px2rpx(20);
      border-radius: px2rpx(8);

      &:active {
        background-color: var(--color-zinc-200);
      }
    }

    &[type="primary"] {
      width: 100%;
      height: px2rpx(48);
      background: var(--color-navy-900);
      color: #fff;
      border-radius: px2rpx(12);
      font-size: px2rpx(16);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      margin-top: px2rpx(30);
      transition: all 0.2s;

      &:active {
        transform: scale(0.98);
        background: var(--color-navy-800);
      }
    }
  }

  .add-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: px2rpx(12);
    padding: px2rpx(12) px2rpx(16);
    background: var(--color-zinc-100);
    border-radius: px2rpx(8);

    text {
      font-size: px2rpx(14);
      color: var(--color-navy-700);
      font-weight: 500;
    }

    .add-btn {
      color: var(--color-primary);
      font-weight: 600;
      text-decoration: underline;

      &:active {
        opacity: 0.7;
      }
    }
  }

  .proof {
    margin-top: px2rpx(8);
    border: px2rpx(1) dashed var(--color-zinc-300);
    border-radius: px2rpx(8);
    padding: px2rpx(8);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-zinc-50);

    .state {
      padding: px2rpx(4) px2rpx(12);
      border-radius: px2rpx(4);
      font-size: px2rpx(12);
      font-weight: bold;
    }
  }

  .agree {
    margin: px2rpx(24) 0;
    display: flex;
    align-items: flex-start;

    .checkbox {
      display: flex;
      align-items: flex-start;
      gap: px2rpx(8);

      :deep(uni-checkbox .uni-checkbox-input) {
        border-radius: px2rpx(4);
        width: px2rpx(18);
        height: px2rpx(18);
      }

      text {
        font-size: px2rpx(13);
        color: var(--color-zinc-500);
        line-height: 1.5;
      }
    }
  }

  .step3-attention {
    background: var(--color-error-50, #fff1f0);
    border-radius: px2rpx(12);
    padding: px2rpx(16);
    margin-bottom: px2rpx(20);

    .attention {
      font-size: px2rpx(14);
      color: var(--color-error-600, #cf1322);
      line-height: 1.6;
    }

    .btn-bottom {
      margin-top: px2rpx(20);
      display: flex;
      justify-content: center;

      .btn {
        background: var(--color-error-600, #cf1322);
        color: #fff;
        padding: px2rpx(10) px2rpx(48);
        border-radius: px2rpx(24);
        font-size: px2rpx(15);
        font-weight: 700;
        box-shadow: 0 px2rpx(4) px2rpx(10) rgba(207, 19, 34, 0.2);
        transition: all 0.2s;

        &:active {
          transform: scale(0.96);
          opacity: 0.8;
        }
      }
    }
  }

  :deep(.base-info-form) {
    .uni-row1 {
      .uni-col {
        padding: 0 px2rpx(10) !important;
      }

      .uni-forms-item {
        min-height: px2rpx(79);
        margin-bottom: px2rpx(10);
      }

      .uni-select,
      .uni-combox,
      .uni-easyinput__content,
      .uni-date-editor--x {
        border: none !important;
        background-color: var(--color-zinc-100) !important;
        border-radius: px2rpx(8) !important;
      }

      .uni-date-x {
        border: none !important;
        background-color: rgba(195, 195, 195, 0) !important;
      }

      .uni-easyinput__content-input {
        height: px2rpx(44) !important;
      }
    }
  }

  /* 弹窗样式美化 */
  :deep(.uni-popup__wrapper) {
    .popup-content {
      background-color: #fff;
      border-radius: px2rpx(20);
      padding: px2rpx(24);
      width: px2rpx(320);

      .popup-title {
        font-size: px2rpx(18);
        font-weight: 700;
        text-align: center;
        margin-bottom: px2rpx(20);
        color: var(--color-navy-900);
        display: block;
      }

      .popup-text {
        font-size: px2rpx(14);
        line-height: 1.6;
        color: var(--color-zinc-600);
        margin-bottom: px2rpx(20);
        display: block;
      }

      .popup-form {
        background: var(--color-zinc-50);
        border-radius: px2rpx(12);
        padding: px2rpx(16);
        margin-bottom: px2rpx(24);

        .popup-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: px2rpx(12);
          font-size: px2rpx(14);

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: var(--color-zinc-500);
          }

          text:not(.label) {
            color: var(--color-navy-900);
            font-weight: 500;
          }
        }
      }

      .popup-buttons {
        display: flex;
        gap: px2rpx(12);

        button {
          flex: 1;
          height: px2rpx(44);
          border-radius: px2rpx(10);
          font-size: px2rpx(15);
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;

          &[type="primary"] {
            background: var(--color-navy-900);
            color: #fff;
          }

          &:not([type="primary"]) {
            background: var(--color-zinc-100);
            color: var(--color-zinc-600);
          }
        }
      }

      .result-icon {
        display: flex;
        justify-content: center;
        margin-bottom: px2rpx(16);

        .iconfont {
          font-size: px2rpx(48);

          &.iconchenggong {
            color: #52c41a;
          }

          &.iconjingshi {
            color: #faad14;
          }

          &.icondengdai {
            color: var(--color-primary);
            animation: rotate 2s linear infinite;
          }
        }
      }

      .code-input {
        background: var(--color-zinc-100);
        border: none;
        border-radius: px2rpx(8);
        padding: px2rpx(12);
        margin-bottom: px2rpx(12);
        font-size: px2rpx(15);
      }

      .code-timer {
        color: var(--color-primary);
        font-size: px2rpx(13);
        text-align: right;
        margin-bottom: px2rpx(20);
        font-weight: 500;
      }
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}