@import url(./base.less); /* 引入全局样式 */

body {
  background: url('../images/bg.png') no-repeat top / 10rem;
}

.layout {
  .box {
    width: 8.5rem;
    height: 10.5rem;
    background-color: #fff;
    margin: 5rem auto 0;
    border: 1px solid #f7f7f7;
    border-radius: .4rem;
    .user {
      margin: 1.1rem .5rem .75rem;
      input {
        width: 7.5rem;
        height: 1.25rem;
        border-radius: .2rem;
        font-size: .3rem;
        text-indent: 1.22rem;
        &:first-child {
          margin-bottom: .4rem;
        }
      }
      .usn {
        background: #f8f8f8 url("../images/user.png") no-repeat 0.48rem ~"/"0.4rem;
      }
      .psw {
        background: #f8f8f8 url("../images/lock.png") no-repeat 0.48rem ~"/"0.4rem;
      }
    }
    .login {
      margin: 0 .5rem .6rem;
      width: 7.5rem;
      height: 1.25rem;
      border-radius: .65rem;
      background-image: linear-gradient(to right, #a14ff2, #6e80ec);
    }
    .other {
      display: flex;
      justify-content: space-around;
      font-size: .3rem;
      margin-bottom: 1rem;
      .register {
        margin-left: -1.2rem;
      }
      .forget {
        margin-right: -1.2rem;
      }
    }

    .devision {
      position: relative;
      width: 6.8rem;
      height: 1px;
      background-color: #ccc;
      margin: 0 auto;
      &::after {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #ccc;
        font-size: .32rem;
        background-color: #fff;
        padding: 0 .15rem;
        content: '第三方账号登录';
      }
    }
    .outreach {
      display: flex;
      justify-content: space-around;
      margin-top: .8rem;
      width: 100%;
      > img {
        width: 1.2rem;
      }
    }
  }
}