<template>
  <div class="login-container">
    <div class="login-wraper">
      <div class="login-logo-wraper">
        <div class="login-logo"></div>
        <div class="login-logo-txts">
          <p class="login-logo-txt1">诺力智能搬运车系统</p>
          <p class="login-logo-txt2">NoBleLift intelligent truck system</p>
        </div>
      </div>
      <div class="login-content">
        <div class="login-content_wraper">
          <div class="dl">登录</div>
          <div class="login-items-wraper">
            <div class="login-item">
              <input type="text" class="login-input">
            </div>
            <div class="login-item">
              <input type="password" class="login-input">
            </div>
          </div>
          <div class="login-buttons-wraper">
            <button class="button button--primary button-login">登录</button>
          </div>
          <div class="login-forget-wraper">
            <router-link to="/home">忘记密码</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
@import '~@style/mixin'
.login-container
  _wh(100%, 100%)
  background-color #64b4dc
  background-image linear-gradient(to right bottom,#4489e0, #55a1df, #64b4dc)
  _fj(center)
.login-wraper
  _fj()
  _wh(80vw, 65vh)
  padding 20px
  background-color #fff
  border-radius 20px
.login-logo-wraper
  width 50%
  padding 20px
  _fj(center,,column)
.login-logo
  width 100px
  height 112px
  background center / 100% 100% url(../../../images/aio/car1.png) no-repeat
.login-logo-txts
  // margin-top 20px
  text-align center
.login-logo-txt1
  _font(24px, 34px, $red2,bold,center)
.login-logo-txt2
  _font(20px, 34px, #464646,,center)
.login-content
  width 50%
  padding 20px
.login-content_wraper
  width 100%
  max-width 200px
  margin 0 auto
  _fj(center,,column)
.dl
  width 100%
  _font(16px, 28px, #333, bold, center)
  margin-bottom 10px
.login-items-wraper
  width 100%
.login-item
  width 100%
  +.login-item
    margin-top 20px
.login-input
  width 100%
  height 40px
  border 1px solid $gray2
  padding 5px 12px
  _font(14px, 16px, #323232,,)
  border-radius 6px
.login-forget-wraper
  width 100%
  margin-top 15px
  text-align right
  a
    _font(14px, 20px, $red1,,)
.login-buttons-wraper
  width 100%
  margin-top 20px
.button-login
  width 100%
  border-radius 12px
</style>
