register.scss 2.86 KB
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';


$formWidth:560px;

.page {
  .bgc {
    background-color: #fff2ef;
  }

  .bg {}

  .main {
    .top-space {
      height: 74px;
    }

    .content {
      position: relative;

      // logo
      .logo {
        width: 235px;
        height: 122px;
        margin: 0 auto;

        .img {
          width: 235px;
          height: 122px;
        }
      }

      // 表单
      .form {
        width: $formWidth;
        margin: 36px auto 0;

        .table {
          .ipt {
            margin-bottom: 20px;
            color: #ba3138;
            width: $formWidth;
            height: 80px;
            border-radius: 40px;
            border: solid 1px #db9a9d;
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;

            &-icon {
              width: 74px;
              height: 80px;
              @extend .fcc;

              .icon {
                width: 30px;
              }
            }

            &-input {
              flex: 1;
              @extend .bb;
              height: 80px;
              font-size: 28px;
              padding-right: 24px;
            }

            &-verify {
              @extend .fcc;
              font-size: 30px;
              padding: 0 32px;
            }
          }
        }
      }

      // 拼图
      .puzzle {
        $borderRadius: 32px;
        width: $formWidth;
        border-radius: $borderRadius;
        border: solid 1px #db9a9d;

        .plz {
          @include border-top-radius($borderRadius);
          width: $formWidth;
          height: 183px;

          image {
            @include border-top-radius($borderRadius);
            width: $formWidth;
            height: 183px;
          }
        }

        .slider {
          width: 560px;
          height: 70px;
          border-top: solid 1px #db9a9d;
          background-color: #ffffff;
          @include border-bottom-radius($borderRadius);
        }
      }

      // 隐私条款
      .policy {
        margin-left: 40px;
        margin-top: 22px;
        color: #333333;
        font-size: 28px;
        display: flex;
        align-items: center;

        .check {
          width: 28px;
          height: 28px;
          margin-right: 12px;
          background-color: #b83138;
          border-radius: 14px;
          @extend .fcc;

          image {
            width: 18px;
            height: 13px;
          }
        }

        .t1 {}

        .t2 {
          color: #b83138;
        }
      }

      // 注册按钮
      .register-btn {
        margin: 68px auto 0;
        @include btc($formWidth, 100px);
        color: #ffffff;
        font-size: 36px;
        border-radius: 50px;
        background-image: linear-gradient(to right, #b83138, #f2234a 51%, #b83138);
      }
    }
  }
}

.placeholder {
  color: rgba(186, 49, 56, 0.5);
}