<template>
  <div class="login-container">
    <div class="login-form-container">
      <img v-if="logo" class="login-decoration-logo" :src="logo">
      <!-- <div class="login-decoration-slogan">做国际一流的汽车数字化运营服务提供商，共建设美好车生活</div> -->
      <div class="login-form-wrap">
        <!-- 登录 -->
        <LoginTab
          v-if="status === 'login'"
          @forgetPassword="forgetPassword"/>
      </div>
      <div class="login-version">Copyright 2017-2019 联通智网科技股份有限公司 版权所有 京ICP备16005440号-1</div>
    </div>
  </div>
</template>

<script>
import LoginTab from './components/LoginTab'
export default {
  name: 'Login',
  components: { LoginTab },
  data() {
    return {
      logo: this.$store.getters.logo,
      companyName: this.$store.getters.companyName,
      status: 'login',
      isTablet: window.OS.isTablet
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    forgetPassword() {
      this.$router.push({ name: 'ResetPassword' })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  background-image: url(../../assets/img/login-bg.jpeg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 100%;
  width: 100%;
  overflow: hidden;

  .login-form-container {
    background-image: url(../../assets/img/login-decoration.svg);
    background-repeat: no-repeat;
    background-size: 520px auto;
    background-position: right 770px center;
    padding: 70px;
    width: 100%;
    height: 100vh;
    position: relative;
    margin: 0 auto;
    max-width: 1400px;
    .login-decoration-logo {
      width: auto;
      height: 42px;
    }

    .login-decoration-slogan {
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      font-weight: 400;
      margin-top: 12px;
    }

    .login-version {
      bottom: 40px;
      color: #758092;
      opacity: 0.5;
      font-size: 14px;
      text-align: center;
      font-weight: 400;
      position: absolute;
      left: 0px;
      right: 0px;
    }
  }

  .login-form-wrap {
    background: #FFFFFF;
    box-shadow: 0 6px 27px 0 rgba(37,48,68,0.08);
    border-radius: 8px;
    width: 426px;
    min-height: 432px;
    padding: 36px 70px 0;
    position: absolute;
    top: 50%;
    right: 190px;
    transform: translateY(-50%);
    .el-form-item {
      align-items: flex-end;
      display: flex;
      margin-bottom: 0px;
      height: 66px;
      .el-form-item__content {
        width: 100%;
      }

      .el-input__inner {
        box-shadow: none !important;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-width: 0;
        border-left-width: 0;
        border-right-width: 0;
        border-bottom-width: 1px;
        color: #393939;
        padding-left: 2px;
      }
    }
  }

}
</style>
