//引入全局配置
@import "c/conf";
@import "c/mx";
@import "c/f";
@import "a/c";

page {
  background-color: #ffffff;
  height: 100%;
}

.u-btn {
  margin: 120rpx auto;
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: rgba(230, 0, 0, 1);
  border-radius: 40rpx;
  font-size: $fz8;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

.u-ft_hint {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  width: 70%;
  margin: 0 auto;
  text-align: center;
  line-height: 50rpx;
  border-radius: 50rpx;
  background-color: rgba($bgc1, 0.9);
  font-size: $fz4;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  .z-stress {
    color: $c1;
  }
}

.m-hint_login {
  position: relative;
  height: 100%;
  background-color: $bgc1;

  .bg {
    display: block;
    width: 100%;
  }

  .hint {
    margin: 0 auto;
    padding-top: 160rpx;
    width: 475rpx;
    font-size: 34rpx;
    font-family: Source Han Serif SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 50rpx;
    image {
      display: block;
      width: 200rpx;
      height: 200rpx;
      margin: 0 auto;
    }
    view {
      margin-top: 60rpx;
    }
  }

  .info {
    margin: -50rpx auto 50rpx;
    box-sizing: border-box;
    width: 660rpx;
    padding: 25rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 3rpx 24rpx 0rpx rgba(211, 211, 211, 0.26);
    border-radius: 10rpx;
    font-size: 34rpx;
    font-family: Source Han Serif SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 60rpx;
    .item {
      position: relative;
      padding-left: 150rpx;
      .z-stress {
        position: absolute;
        display: block;
        top: 0;
        left: 120rpx;
        color: $c1;
      }
    }
  }

  .list {
    .item {
      box-sizing: border-box;
      margin: 20rpx auto;
      width: 690rpx;
      padding: 30rpx 20rpx;
      border-radius: 10rpx;
      background-color: #ffffff;
      line-height: 50rpx;
      overflow: hidden;
      .name {
        width: 70%;
        font-size: 34rpx;
        font-family: Source Han Serif SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      .btn {
        width: 120rpx;
        height: 50rpx;
        border-radius: 50rpx;
        background-color: $c1;
        color: #ffffff;
        text-align: center;
        font-size: $fz6;
        font-family: Source Han Serif SC;
        font-weight: 500;
      }
    }
  }

  .u-btn {
    margin-top: 80rpx;
  }
}

.m-fm {
  position: relative;
  width: 100%;
  height: 100%;

  .fm {
    .title {
      padding-top: 100rpx;
      margin-bottom: 80rpx;
      width: 100%;
      overflow: hidden;

      .logo {
        box-sizing: border-box;
        display: block;
        width: 200rpx;
        height: 200rpx;
        margin: 0 auto;
        border: 10rpx solid #28c8ff;
        border-radius: 100%;
      }

      .logo-title {
        display: block;
        line-height: 60rpx;
        font-size: $fz9;
        font-family: Source Han Serif SC;
        font-weight: 800;
        color: rgba(230, 0, 0, 1);
        text-align: center;
      }

      .logo-subtitle {
        display: block;
        line-height: 60rpx;
        font-size: $fz7;
        font-family: Source Han Serif SC;
        font-weight: 800;
        color: rgba(230, 0, 0, 1);
        text-align: center;
      }
    }

    .login-type {
      margin: 20rpx auto;
      justify-content: space-between; /* 水平居中 */
      width: 500rpx;
      overflow: hidden;
      display: flex;
      flex-direction: row;

      > view {
        position: relative;
        width: 40%;
        line-height: 80rpx;
        height: 80rpx;
        text-align: center;
        font-size: 32rpx;
        color: $fc3;

        &.z-on {
          color: $fc1;

          &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 7rpx;
            width: 100rpx;
            border-radius: 7rpx;
            background-color: $c1;
          }
        }
      }
    }

    .fm-item {
      position: relative;
      box-sizing: border-box;
      margin: 40rpx auto;
      width: 500rpx;
      height: 80rpx;
      background-color: #fff;
      border-bottom: 1rpx solid rgba(231, 238, 238, 1);

      .fm-item-ico {
        position: absolute;
        top: 0;
        left: 0;
        width: 40rpx;
        height: 80rpx;

        image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 40rpx;
          height: 40rpx;
        }

        &.fm-item-ico-btn {
          left: auto;
          right: 0;

          image {
            left: 0;
            right: 15rpx;
          }
        }
      }

      .fm-item-showpassword {
        position: absolute;
        top: 0;
        right: 40rpx;
        width: 40rpx;
        height: 80rpx;

        image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 40rpx;
          height: 40rpx;
        }

        // &.fm-item-ico-btn {
        // 	left: auto;
        // 	right: 0;

        // 	image {
        // 		left: 0;
        // 		right: 15rpx;
        // 	}
        // }
      }

      input {
        box-sizing: border-box;
        margin-left: 50rpx;
        width: 400rpx;
        height: 80rpx;
        line-height: 80rpx;
        border: none;
        color: $fc4;
        font-size: 14px;

        .input-placeholder {
          color: #aaa;
        }
      }

      &.fm-item-2 {
        input {
          width: 280rpx;
        }
      }

      .fm-item-btn {
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 138rpx;
        height: 40rpx;
        line-height: 40rpx;
        background: linear-gradient(90deg, rgba(255, 36, 0, 1) 2%, rgba(204, 1, 1, 1) 99%);
        border-radius: 10rpx;
        text-align: center;
        font-size: $fz2;
        font-family: Source Han Serif SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }

    .fm-operate {
      @include cs;
      position: fixed;
      bottom: 100rpx;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 650rpx;
      height: 80rpx;

      .btn {
        @include bs2;
        display: block;
        float: left;
        width: 300rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 80rpx;
        border: none;
        outline: none;
        background-color: $c2;
        color: rgba(#fff, 0.95);
        text-align: center;
        font-size: 14px;
        transition: background-color 0.13s;

        &.btn-2 {
          float: right;
          background-color: $c1;
        }
      }
    }

    .switch {
      position: absolute;
      bottom: 80rpx;
      left: 0;
      right: 0;
      text-align: center;
      color: #0c4a9e;
      font-size: 28rpx;
    }
  }

  .fm-shift {
    display: block;
    margin: 40rpx auto;
    width: 560rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 14px;
    color: rgba(#fff, 0.95);
  }
}