<template>
  <div id="login">
    <div class="login-content">
      <div class="logo-img">
        <img src="../assets/image/ambari-logo.png">
        <label class="left-title">推荐系统-演示</label>
      </div>
      <div class="login-center">
        <div class="left-content">
          <img src="../assets/image/login-img.png" class="login-img">
        </div>
        <div class="right-content">
          <div class="login-title">登录</div>
          <div class="second-title">账号密码登录</div>
          <el-form ref="form" :model="form" label-width="0px">
            <el-form-item label="" style="margin-bottom: 30px">
              <el-input placeholder="账号" prefix-icon="el-icon-user" class="login-input" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label=""  style="margin-bottom: 30px">
              <el-input type="password" placeholder="密码" prefix-icon="el-icon-lock"  class="login-input" v-model="form.password"></el-input>
            </el-form-item>
            <div style="color: #333;letter-spacing:1px;font-size: 15px;margin-bottom: 30px">如果忘记密码，请联系管理员！</div>
            <el-form-item>
              <el-button type="primary" plain class="login-button" style="width: 45%;float: left" @click="register()">注册</el-button>
              <el-button type="primary" class="login-button" style="width: 45%;float: right" @click="login()">登录</el-button>
            </el-form-item>
          </el-form>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        username: '',
        password: '',
        type: 'admin'
      },
    }
  },
  mounted() {
  },
  methods: {
    login() {
      this.$store.dispatch('user/login', this.form).then((res) => {
        this.$router.push('/myFriends');
      }).catch((res) => {
      })
    },
    register() {
      this.$router.push('/register');
    }
  }
}
</script>

<style scoped lang="scss">
#login{
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: url('../assets/image/manage-bg.jpg') no-repeat;
  background-size: 100% 100%;

  .login-content{
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    //background: rgba(75, 100, 216, 0.74);
    background: linear-gradient(192deg, rgba(85, 111, 231, 0.3) 0%, rgba(68, 93, 208, 0.3) 100%);
    //background: linear-gradient(to right, rgba(75, 100, 216, 0.4), rgba(75, 100, 216, 0.74));
    position: absolute;
    z-index: 1;

    .logo-img{
      position: absolute;
      top: 40px;
      left: 50px;

      img{
        width: 50px;
      }

      .left-title{
        color: #ffffff;
        line-height: 50px;
        font-weight: bolder;
        letter-spacing:3px;
        height: 50px;
        font-size: 26px;
        vertical-align: bottom;
        padding-left: 30px;
      }
    }

    .login-center{
      width: 1400px;
      margin: 180px auto 0 auto;
      height:600px;
      border-radius: 20px;
      display: flex;


      .left-content{
        flex: 1;
        //background: rgba(63,81,181,0.5);
        //border-top-left-radius: 10px;
        //border-bottom-left-radius: 10px;
        position: relative;

        .left-title{
          position: absolute;
          left: 0px;
          top: -30px;
          font-size: 35px;
          color: #ffffff;
          line-height: 60px;
          font-weight: bolder;
          letter-spacing:3px;
        }

        .login-title{
          position: absolute;
          left: 0px;
          top: 0px;
        }

        .login-img{
          position: absolute;
          bottom: -40px;
          left: 45%;
          width: 120%;
          margin-left: -60%;
        }
      }

      .right-content{
        width: 500px;
        padding: 70px 60px 0 60px;
        //background: rgba(100,121,222,0.25);
        background: #fff;
        border-radius: 10px;
        box-sizing: border-box;

        .login-title{
          font-size: 30px;
          font-weight: 600;
          color: #333;
          letter-spacing:5px;
          height: 50px;
          line-height: 50px;
        }

        .second-title{
          letter-spacing:2px;
          height: 30px;
          line-height: 30px;
          font-size: 20px;
          color: #666;
          margin-top: 30px;
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>

