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

        .radio-group {
          font-size: 28px;
          color: #ba3138;
          color: #db9a9d;

          radio .wx-radio-input {
            /* 自定义样式.... */
            height: 32px;
            width: 32px;
          }

        }
      }

      // 拼图
      .puzzle {
        margin-top: 32px;
        $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);
        }
      }

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

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

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

          .block {
            position: absolute;
            width: 83px;
            height: 83px;
            top: 41px;
            z-index: 11;
          }

          .shadow {
            left: 348px;
          }

          .thumb {

            left: 44px;
          }
        }



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

          &-bar {
            position: relative;
            width: 410px;
            padding: 0 45px;
            height: 48px;
            border-radius: 24px;
            background-color: #fff0ed;
            margin: 12px auto 0;

            .tips {
              width: 410px;
              height: 48px;
              line-height: 48px;
              font-size: 24px;
              color: #b83138;

            }
            .tips-wait {
              text-align: right;
              padding-left: 16px;
              // @extend .bb;
            }

            .tips-authorized {
              text-align: center;
            }

            &-thumb {
              width: 109px;
              height: 80px;
              position: absolute;
              top: -12px;
            }
          }
        }
      }


      // 隐私条款
      .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);
      }

      .accout-tips {
        margin-top: 24px;
        text-align: center;
        font-size: 24px;

        .t1 {
          color: #b83138;
        }
      }
    }
  }
}

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