From c590aaeca3e0a066016d2ff2c7c4cf96a7ca446f Mon Sep 17 00:00:00 2001
From: wl <173@qq.com>
Date: 星期三, 16 十一月 2022 09:35:29 +0800
Subject: [PATCH] first commit
---
src/components/Login.vue | 155 +++++++++++++++++++++++----------------------------
1 files changed, 69 insertions(+), 86 deletions(-)
diff --git a/src/components/Login.vue b/src/components/Login.vue
index cd43fda..803a96b 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,26 +1,22 @@
<template>
- <div class="login_container">
- <div class="login_box">
- <!-- 澶村儚鍖哄煙 -->
- <div class="avatar_box">
- <img src="../assets/logo.png" alt="" />
- </div>
- <!-- 鐧诲綍琛ㄥ崟鍖哄煙 -->
- <el-form ref="loginFormRef" :model="loginForm" label-width="0px" class="login_form">
- <!-- 鐢ㄦ埛鍚� -->
- <el-form-item prop="username">
- <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" placeholder="璇疯緭鍏ヨ处鍙�" clearable></el-input>
- </el-form-item>
- <!-- 瀵嗙爜 -->
- <el-form-item prop="password">
- <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="璇疯緭鍏ュ瘑鐮�"></el-input>
- </el-form-item>
- <!-- 鎸夐挳鍖哄煙 -->
- <el-form-item class="btns">
- <el-button type="primary" @click="Login">鐧诲綍</el-button>
- <el-button type="info" @click="resetLoginForm">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
+ <div class="login">
+ <el-form class="login-form" :model="loginForm">
+ <h3 class="title">鍙屾祦鏈哄満鍏畨椤甸潰鍚庡彴绠＄悊</h3>
+ <el-form-item>
+ <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" type="text" placeholder="璐﹀彿"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-input v-model="loginForm.password" show-password prefix-icon="el-icon-lock" type="password" placeholder="瀵嗙爜"></el-input>
+ </el-form-item>
+ <el-checkbox style="margin: 0px 0px 25px 0px">璁颁綇瀵嗙爜</el-checkbox>
+ <el-form-item>
+ <el-button @click="Login" size="medium" type="primary">
+ <span>鐧诲綍</span>
+ </el-button>
+ </el-form-item>
+ </el-form>
+ <div class="el-login-fotter">
+ <span>Copyright 漏 mingms.</span>
</div>
</div>
</template>
@@ -34,7 +30,7 @@
loginForm: {
username: 'rendong',
password: '123456'
- },
+ }
}
},
methods: {
@@ -48,86 +44,73 @@
password: this.loginForm.password
}
login(data).then(res => {
- console.log(res);
- if(res.code !== 200){
+ console.log(res)
+ if (res.code !== 200) {
this.$message.error('鐧诲綍澶辫触锛�')
- }else if(res.data.role == '瓒呯骇绠＄悊鍛�'){
+ } else if (res.data.role == '瓒呯骇绠＄悊鍛�') {
this.$message.success('瓒呯鐧诲綍鎴愬姛锛�')
- window.sessionStorage.setItem('token',res.cookie)
+ window.sessionStorage.setItem('token', res.cookie)
this.$router.push('/administrator/admain')
- }else{
+ } else {
this.$message.success('鐧诲綍鎴愬姛锛�')
- window.sessionStorage.setItem('token',res.cookie)
+ window.sessionStorage.setItem('token', res.cookie)
this.$router.push('/administrator/main')
}
})
-
- // this.$refs.loginFormRef.validate(async (valid) => {
- // if (!valid) return
- // const { data: res } = await this.$http.post('/login', this.loginForm)
- // console.log('12312123123123123')
- // console.log(res)
- // if (res.meta.status !== 200) return this.$message.error('鐧诲綍澶辫触锛�')
- // this.$message.success('鐧诲綍鎴愬姛')
- // // console.log(res)
- // // 1. 灏嗙櫥褰曟垚鍔熶箣鍚庣殑 token锛屼繚瀛樺埌瀹㈡埛绔殑 sessionStorage 涓�
- // // 1.1 椤圭洰涓嚭浜嗙櫥褰曚箣澶栫殑鍏朵粬API鎺ュ彛锛屽繀椤诲湪鐧诲綍涔嬪悗鎵嶈兘璁块棶
- // // 1.2 token 鍙簲鍦ㄥ綋鍓嶇綉绔欐墦寮�鏈熼棿鐢熸晥锛屾墍浠ュ皢 token 淇濆瓨鍦� sessionStorage 涓�
- // window.sessionStorage.setItem('token', res.data.token)
- // // 2. 閫氳繃缂栫▼寮忓鑸烦杞埌鍚庡彴涓婚〉锛岃矾鐢卞湴鍧�鏄� /home
- // this.$router.push('/administrator/main')
- // })
}
}
}
</script>
<style lang="less" scoped>
-.login_container {
- background-color: #2b4b6b;
+.login {
+ background-image: url('../assets/bg2.png');
+ background-size: 100% 100%;
+ // background-size: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
height: 100%;
-}
-
-.login_box {
- width: 450px;
- height: 300px;
- background-color: #fff;
- border-radius: 3px;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
-
- .avatar_box {
- height: 130px;
- width: 130px;
- border: 1px solid #eee;
- border-radius: 50%;
- padding: 10px;
- box-shadow: 0 0 10px #ddd;
+ position: relative;
+ .login-form {
+ background-image: url('../assets/inputBg.png');
+ border-radius: 6px;
position: absolute;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff;
- img {
+ width: 490px;
+ height: 444px;
+ right: 250px;
+ padding: 45px 50px 0 50px;
+ .title {
+ height: 40px;
+ line-height: 40px;
+ font-size: 28px;
width: 100%;
- height: 100%;
- border-radius: 50%;
- background-color: #eee;
+ font-family: PingFang SC;
+ color: #3360c2;
+ text-align: center;
+ margin-bottom: 35px;
+ }
+ .el-input {
+ margin-bottom: 20px;
+ }
+ .el-button {
+ width: 100%;
+ margin: 35px 0;
+ background-color: #3360c2;
+ }
+ .el-button:hover {
+ background-color: #3360c2d5;
}
}
-}
-
-.login_form {
- position: absolute;
- bottom: 0;
- width: 100%;
- padding: 0 20px;
- box-sizing: border-box;
-}
-
-.btns {
- display: flex;
- justify-content: flex-end;
+ .el-login-fotter {
+ position: fixed;
+ bottom: 0;
+ height: 40px;
+ line-height: 40px;
+ color: #fff;
+ font-size: 12px;
+ font-family: Arial;
+ letter-spacing: 1px;
+ }
}
</style>
--
Gitblit v1.8.0