<!--GY歌謠控制登錄頁面的功能--> <template><div class="main"><div><h1> <img src="./geyao.png" style="width: 29px;height: 29px;margin-right: 10px;line-height: 29px" alt="">星傳經(jīng)管系統(tǒng)</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><!--登錄按鈕 登錄的時(shí)候調(diào)用方法--><el-buttontype="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"; /*狀態(tài)管理*/ import store from "@/store"; /*引入調(diào)用的方法*/ 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 {/*登錄界面存儲(chǔ)賬號和密碼*/form: {/*存儲(chǔ)賬號*/account: "",/*存儲(chǔ)密碼*/password: ""},url: {login: "/user/login"}};},created() {},methods: {/*登錄的方法*/login() {/*第一個(gè)參數(shù)傳入要跳轉(zhuǎn)的鏈接地址 第一個(gè)傳入數(shù)據(jù)參數(shù)*/postAction(this.url.login, this.form).then(res => {if (res.code === 0) {/* /!*設(shè)置token令牌*!/*/Vue.ls.set(ACCESS_TOKEN, res.data.access_token);/*Vue.ls.set(ACCESS_MODE, res.data.mode);*//* /!*獲取user的數(shù)據(jù)*!/*/const user = res.data.user;const dept = user.department;const properties = dept.property.split(",");/* 所有的狀態(tài)開始存儲(chǔ)到vuex*/store.commit(SET_USER, {name: user.name,role: user.role});store.commit(SET_DEPARTMENT, {id: dept.id,name: dept.name,property: properties});// select modeif (!properties || properties.length === 0) {this.$message.error("請?jiān)O(shè)定部門屬性！");} else if (properties.length === 1) {this.modeSelected(properties[0]);} else if (properties.length === 2) {this.$refs["mode"].show();} else {this.$message.error("部門屬性錯(cuò)誤！");console.error(res);}} else {this.$message.warning("用戶名或密碼錯(cuò)誤！");}}).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);}*//*只使用一個(gè)路由*/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>

初始樣式

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的工作151:初始登录样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。