登录页面 VUE+Elementui

<template>
  <div class="aa" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="loginBG">
        <div class="left-font">
          <p>欢迎登录</p>
          <p></p>
          <p style="font-family: 汉仪瑞虎宋;">XXX系统</p>
          <p>XXX终端</p>
        </div>
        <div class="dengLu">
          <!-- model：form，其中的form 是自己定义的名字 -->
          <p style="font-family: '思源黑体';font-size: 30px; color: #3e83e9;margin: 0%;padding-top: 10%;">
            用户登录
          </p>
          <p style=" width: 19%;background-color: #3e83e957;"></p>
          <el-form :model="Form" :rules="rules" ref="Form" class="DLform">
            <el-form-item prop="LoginAccount">
              <el-input v-model="Form.LoginAccount" class="ainput" placeholder="请输入登录账号"
                        prefix-icon="el-icon-s-home"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input :type="passwordShow  ? 'text' : 'password'"
                        v-model="Form.Password" placeholder="请输入登录密码" prefix-icon="el-icon-s-opportunity">
                <template #suffix
                ><i
                  class="password-eyes"
                  @click="passwordShow = !passwordShow"
                >
                  <img
                    style="height: 100%;width: 100%"
                    :src="
                        passwordShow
                          ? require('../../assets/imgList/open-eye.png')
                          : require('../../assets/imgList/close-eye.jpeg')
                      ">
                </i>
                </template>
              </el-input>

            </el-form-item>

            <el-form-item class="sub" style="padding-top: 5%">
              <el-button  @click="submitForm('Form',$event)"
                         class="denglu" >登&nbsp;&nbsp;&nbsp;录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
        <div :style="{ position: 'fixed', bottom: '12px', right: '12px', width: '100%', 'text-align': 'right' }">
          <el-button @click="goExit" type="primary">退出系统</el-button>
        </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { Notify } from "vant";
import { APIB } from "@/API/blazor.js";

import { Message, Notification } from "element-ui";

export default {
  data() {
    return {
      loading: true, //加载
      Form: {
        //初始值
        LoginAccount: "",
        Password: "",
      },
      rules: {
        //验证
        LoginAccount: [
          {
            required: true,
            message: "请输入登录账号",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "账号长度在2到5字符之间",
            trigger: "blur",
          },
        ],
        Password: [
          {
            required: true,
            message: "请输入登录密码",
            trigger: "blur",
          },
          {
            required: true,
            min: 1,
            max: 12,
            message: "密码长度在1到12字符之间,数字、字母、符号等组合",
            trigger: "blur",
          },
        ],
      },
       passwordShow:false, //密码展示
    };
  },
  created() { },
  mounted() {
    let _this = this;
    // this.$nextTick(() => {
    // });
    setTimeout(() => {
      // 方法区
      this.loading = false;
      _this.Init();
    }, 1500);
  },
  methods: {
    
    // 退出系统
    goExit() {
      Dialog.confirm({
        title: "提示",
        message: "请确定是否退出系统",
      })
        .then(() => {
          this.Exit();
        })
        .catch(() => { });
    },
    // 调用退出系统的接口
    async Exit() {
      await APIB.DisposeSystem();
    },
    // 登录相关 登录按钮
    // 如果 submitForm 方法 没有传参  上面就不用写 $event 但是有了 Form 参数就得加上 $event ,然后才能 在这儿获取到 event
    async submitForm(Form,event) {
      this.$refs[Form].validate((valid) => {
        if (!valid) {
          Notification.error({
            showClose: true,
            title: "提示",
            message: "请输入正确的账户或密码!",
            offset: 50,
          });
          return;
        }
      });
      // 接口
      var resultdatas = await APIB.Login(this.Form);
      console.log(resultdatas);
      if (resultdatas.code === 200) {
        Notification.success({
          title: "提示",
          message:
            resultdatas.msg + "欢迎你，" + resultdatas.data.userName + "操作员",
          offset: 50,
        });
        // 将登录名使用vuex传递到Home页面
        this.$store.commit("handleUserInfo", resultdatas.data);
        this.$router.push("/mainIndex");
      } else {
        Notification.error({
          showClose: true,
          title: "提示",
          message: resultdatas.msg,
          offset: 50,
        });
      }
    },

      // 初始化服务
    async Init() {
      console.log("初始化");
      let res = await APIB.InitService();
      if (res.code == 200) {
        Notify({ type: "success", message: res.msg });
      } else {
        Notify({ type: "warning", message: res.msg });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
p{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.aa {
  background: url("../../assets/imgList/loginBG.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  position: fixed;
  font-family: "微软雅黑";
.loginBG{
  width: 75%;
  height: 61%;
  position: relative;
  left: 14%;
  top: 26%;
  display: flex;
  justify-content: space-evenly;
  .left-font{
    height: 100%;
    color: #fff;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
   p{
     margin-bottom: 10px;
   }
    p:nth-child(1){
      font-size: 31px;
      font-weight: 100;
    }
    p:nth-child(2){
      width: 34px;
      height: 3px;
      background: #fff;
    }
    p:nth-child(3){
      font-size: 40px;
    }
    p:nth-child(4){
      font-size: 30px;
      font-weight: 300;
    }
  }
  .dengLu {
    width: 38%;
    height: 98%;
    background-color: #fff;
    border-radius: 10px;

    /* 输入框圆形
::v-deep .el-input__inner {
  border-radius: 50px;
  background-color: #f7f7f7;
  border: 1px solid #f7f7f7;
  height: 89px;
  font-size: 28px;
} */
    /* 表单 */
    .DLform {
      padding: 13% 8% 10% 8%;

      /**修改输入框与图标的间距 */
      ::v-deep .el-input__inner {
        padding-left: 14%;
        border-radius: 20px;
      }

      ::v-deep .el-input__inner:hover {
        border: 0.0625rem solid #bee2fd;
        box-shadow: 0rem 0rem 1.01rem #0e94f96b;
      }
    }
  }
}
}
::v-deep .el-input__suffix{
  height: 20px;
  width: 20px;
  margin-top:0.5rem;
 ::v-deep .el-input__suffix-inner{
    height: 100%;
    width: 100%;
   ::v-deep .password-eyes{
      height: 100%;
      width: 100%;
      background: #2f9fff;
    }
  }
}
.denglu{
  width: 93%;
  font-size: 18px;
  border-radius: 20px;
  background-color: #3e83e9;
  border-color: #3e83e9;
  color: white;
}
</style>