carwin_report/src/views/LoginView.vue

<template>
  <div class="login">
    <div class="top">
      <img src="../assets/bargound/denglutitle.png" alt="" />
    </div>
    <div class="kaung">
      <p class="text"><span>欢迎登录使用</span></p>
      <div class="inkuang">
        <el-input
          class="userPsd"
          placeholder="请输入用户名"
          v-model="inputUserName"
         
        >
          <i slot="prefix" class="el-input__icon el-icon-user"></i
        ></el-input>
        <el-input
          class="userPsd"
          placeholder="请输入密码"
          v-model="inputPasd"
          show-password
          
        >
          <i slot="prefix" class="el-input__icon el-icon-lock"></i
        ></el-input>
        <span class="login" @click="landing">立即登录</span>
      </div>
      <div></div>
    </div>
    
    <div style="color: #3C91AF;margin-top: 30px;font-size: 12px;">Copyright©2016-2022 ************ 版权所有 技术支持：*********</div>
  </div>
  
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      inputUserName: "",
      inputPasd: "",
      

      // loginRules: {
      //   inputUserName: [
      //     { required: true, trigger: "blur", message: "请输入用户名！" },
      //   ],
      //   inputPasd: [
      //     { required: true, trigger: "blur", message: "请输入密码！" },
      //   ],
      // },
    };
  },

  methods: {
    //点击登录
    landing() {
      if(this.inputUserName==='root'&&this.inputPasd==='root'){
        this.$router.push("/");

      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-icon-search {
  color: red;
}
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(../assets/bargound/denglubeijingtu.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .top {
    img {
      width: 100%;
    }
  }

  .logininfor {
    width: 33%;
    height: 33vh;
    margin: 0 auto;
  }
}
.kaung {
  background: url("../views/login/组\ 20\ 拷贝@2x.png") no-repeat;
  width: 462px;
  height: 372px;
  background-size: 100% 100%;
  overflow: hidden;
  margin-top: 50px;
  .text {
    width: 360px;
    height: 10px;
    background: url("../views/login/组\ 19\ 拷贝@2x.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 80px;
    margin-left: 50px;
    position: relative;

    span {
      display: block;
      color: #ffffff;
      font-size: 20px;
      position: absolute;
      left: 34%;
      top: -8px;
    }
  }

  .inkuang {
    display: flex;
    flex-direction: column;
    width: 240px;
    margin: 0 auto;
    margin-top: 40px;

    .login {
      background: url("../views/login/组\ 17\ 拷贝.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 60px;
      margin-top: 20px;
      text-align: center;
      padding: 20px 0 0 0;
      font-size: 12px;
      color: black;
      cursor: pointer;
    }

    .userPsd {
      margin-top: 10px;
    }

  }
}
</style>