前端工作小结44-初始登录样式

<!--GY歌谣控制登录页面的功能-->
<template>
  <div class="main">
    <div>
   <h1> <img src="./geyao.png" style="width: 29px;height: 29px;margin-right: 10px;line-height: 29px" alt="">星传经管系统</h1>
    </div>
   <!-- <h1>欢迎登录</h1>-->
    <div class="login-head">
    <div class="login-form">
      <!--登录的用户名-->
      <el-form  :model="form" label-width="40px">
        <el-form-item  label="用户">
          <el-input v-model="form.account" />
        </el-form-item>
        <!--登录的密码-->
        <el-form-item  label="密码" >
          <el-input v-model="form.password" show-password/>
        </el-form-item>
        <el-form-item>
          <!--登录按钮 登录的时候调用方法-->
          <el-button
            type="primary"
            style="display: block; width: 100%"
            @click="login"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    </div>
    <mode-selection-dialog ref="mode" @select="modeSelected" />
  </div>
</template>
<script>
import Vue from "vue";
/*状态管理*/
import store from "@/store";
/*引入调用的方法*/
import { postAction } from "@/api";
import {ACCESS_MODE, ACCESS_TOKEN} from "@/store/KeyConstants";
import { HOME_PATH } from "@/router/staticRoutes";
import { SET_USER, SET_DEPARTMENT, SET_MODE } from "@/store/mutation-types";
/*引入封装的组件 登录框组件*/
import ModeSelectionDialog from "./ModeSelectionDialog";
export default {
  name: "Login",
  components: { ModeSelectionDialog },
  data() {
    return {
      /*登录界面存储账号和密码*/
      form: {
        /*存储账号*/
        account: "",
        /*存储密码*/
        password: ""
      },
      url: {
        login: "/user/login"
      }
    };
  },
  created() {
  },
  methods: {
    /*登录的方法*/
    login() {
      /*第一个参数传入要跳转的链接地址  第一个传入数据参数*/
      postAction(this.url.login, this.form).then(res => {
        if (res.code === 0) {
        /*  /!*设置token令牌*!/*/
          Vue.ls.set(ACCESS_TOKEN, res.data.access_token);
          /*Vue.ls.set(ACCESS_MODE, res.data.mode);*/
       /*   /!*获取user的数据*!/*/
          const user = res.data.user;
          const dept = user.department;
          const properties = dept.property.split(",");
        /*  所有的状态开始存储到vuex*/
          store.commit(SET_USER, {
            name: user.name,
            role: user.role
          });
          store.commit(SET_DEPARTMENT, {
            id: dept.id,
            name: dept.name,
            property: properties
          });
          // select mode
          if (!properties || properties.length === 0) {
            this.$message.error("请设定部门属性！");
          } else if (properties.length === 1) {
            this.modeSelected(properties[0]);
          } else if (properties.length === 2) {
            this.$refs["mode"].show();
          } else {
            this.$message.error("部门属性错误！");
            console.error(res);
          }
        } else {
          this.$message.warning("用户名或密码错误！");
        }
      }).catch(error => {
        console.log(error);
      }
      );
    },
    modeSelected(mode) {
   /*   if(mode==0){
        store.commit(SET_MODE, mode);
        this.$router.push(HOME_PATH);
        Vue.ls.set(ACCESS_MODE,mode);
      }else{
        store.commit(SET_MODE, mode);
        this.$router.push(HOME_PATH);
        Vue.ls.set(ACCESS_MODE,mode);
      }*/
      /*只使用一个路由*/
      store.commit(SET_MODE, mode);
      this.$router.push(HOME_PATH);
      Vue.ls.set(ACCESS_MODE,mode);
    },
  }
};
</script>
<style lang="scss" scoped>
.main {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form{
    background-color: #F5F5F5;
    padding: 50px;
    min-width: 300px;
  }
}
</style>