<template>
  <div class="app-container">
    <LoginForm />
  </div>
</template>

<script>
import LoginForm from './components/LoginForm'

export default {
  name: 'Login',
  components: {
    LoginForm
  },
  data() {
    return {
      showContent: true
    }
  },
  created() {
  },
  methods: {
    changePassword() {
      console.log('changePassword')
      this.showContent = false
    },
    cancel() {
      this.showContent = true
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  /*background-color: #14141B;*/
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: url("../../assets/login-bg.jpg") no-repeat center;
  background-size: cover;

  .top {
    width: 100%;
    height: 25vh;
    background-color: #316490;
    display: flex;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .bottom {
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .poly-div {
      display: flex;
    }

    .line {
      width: 1px;
      background: linear-gradient(to top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 10%,
        rgba(35, 198, 200, 0.3) 20%,
        rgba(35, 198, 200, 0.4) 30%,
        rgba(35, 198, 200, 0.5) 40%,
        rgba(35, 198, 200, 0.8) 50%,
        rgba(35, 198, 200, 0.5) 60%,
        rgba(35, 198, 200, 0.4) 70%,
        rgba(35, 198, 200, 0.3) 80%,
        rgba(0, 0, 0, 0) 90%,
        rgba(0, 0, 0, 0) 100%);
    }

    .form-div {
      margin-left: 5%;
    }
  }
}

@media screen and (max-width: 768px) {
  .poly-div {
    display: none !important;
  }
}
</style>
