Skip to content

Commit 6943ccb

Browse files
bypanghubypanghu
committed
新增新的login页面，适配手机端，老的login页面依旧存在
1 parent b9e0a9e commit 6943ccb

File tree

8 files changed

+10381
-2
lines changed

8 files changed

+10381
-2
lines changed

‎web/package-lock.json‎

Lines changed: 68 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/src/assets/login_background.svg‎

Lines changed: 33 additions & 0 deletions
Loading

‎web/src/assets/login_left.svg‎

Lines changed: 123 additions & 0 deletions
Loading

‎web/src/router/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const baseRouters = [
2323
{
2424
path: '/login',
2525
name: 'Login',
26-
component: () => import('@/view/login/login')
26+
component: () => import('@/view/login/index')
2727
}
2828
]
2929

‎web/src/style/newLogin.scss‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
#userLayout{
2+
margin: 0;
3+
padding: 0;
4+
background-image: url("~@/assets/login_background.svg");
5+
background-size: cover;
6+
width: 100%;
7+
height: 100%;
8+
position: relative;
9+
.login_panle{
10+
position: absolute;
11+
top: 3vh;
12+
left: 2vw;
13+
width: 96vw;
14+
height: 94vh;
15+
background-color: rgba(255,255,255,.8);
16+
backdrop-filter: blur(5px);
17+
border-radius: 10px;
18+
display: flex;
19+
align-items: center;
20+
justify-content: space-evenly;
21+
.login_panle_right{
22+
background-image: url("~@/assets/login_left.svg");
23+
background-size: cover;
24+
width: 40%;
25+
height: 60%;
26+
float: right !important;
27+
}
28+
.login_panle_form{
29+
width: 420px;
30+
background-color: #fff;
31+
padding: 40px 40px 40px 40px;
32+
border-radius: 10px;
33+
box-shadow: 2px 3px 7px rgba(0,0,0,.2);
34+
.login_panle_form_title{
35+
margin: 30px 0;
36+
padding-left: 20px ;
37+
font-size: 40px;
38+
border-left: 4px solid #409EFF ;
39+
}
40+
.vPic {
41+
width: 33%;
42+
height: 38px;
43+
float: right !important;
44+
background: #ccc;
45+
img {
46+
cursor: pointer;
47+
vertical-align: middle;
48+
}
49+
}
50+
}
51+
.login_panle_foot{
52+
position: absolute;
53+
bottom: 20px;
54+
.links{
55+
display: flex;
56+
align-items: center;
57+
justify-content: space-between;
58+
.link-icon{
59+
width: 30px;
60+
height: 30px;
61+
}
62+
}
63+
.copyright{
64+
color: #777777;
65+
margin-top: 5px;
66+
}
67+
}
68+
}
69+
}
70+
//小屏幕不显示右侧，将登陆框居中
71+
@media (max-width: 750px) {
72+
.login_panle_right{
73+
display: none;
74+
}
75+
.login_panle{
76+
width: 100vw;
77+
height: 100vh;
78+
top: 0;
79+
left: 0;
80+
}
81+
.login_panle_form{
82+
width: 100%;
83+
}
84+
}
85+
86+
/*
87+
powerBy : [email protected]
88+
*/

‎web/src/view/login/index.vue‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<template>
2+
<div id="userLayout">
3+
<div class="login_panle">
4+
<div class="login_panle_form">
5+
<div class="login_panle_form_title">GIN-VUE-ADMIN</div>
6+
<el-form
7+
ref="loginForm"
8+
:model="loginForm"
9+
:rules="rules"
10+
@keyup.enter.native="submitForm"
11+
>
12+
<el-form-item prop="username">
13+
<el-input v-model="loginForm.username" placeholder="请输入用户名">
14+
<i slot="suffix" class="el-input__icon el-icon-user" />
15+
</el-input>
16+
</el-form-item>
17+
<el-form-item prop="password">
18+
<el-input
19+
v-model="loginForm.password"
20+
:type="lock === 'lock' ? 'password' : 'text'"
21+
placeholder="请输入密码"
22+
>
23+
<i
24+
slot="suffix"
25+
:class="'el-input__icon el-icon-' + lock"
26+
@click="changeLock"
27+
/>
28+
</el-input>
29+
</el-form-item>
30+
<el-form-item style="position: relative">
31+
<el-input
32+
v-model="loginForm.captcha"
33+
name="logVerify"
34+
placeholder="请输入验证码"
35+
style="width: 60%"
36+
/>
37+
<div class="vPic">
38+
<img
39+
v-if="picPath"
40+
:src="picPath"
41+
width="100%"
42+
height="100%"
43+
alt="请输入验证码"
44+
@click="loginVerify()"
45+
>
46+
</div>
47+
</el-form-item>
48+
<el-form-item>
49+
<el-button
50+
type="primary"
51+
style="width: 100%"
52+
@click="submitForm"
53+
>登 录</el-button>
54+
</el-form-item>
55+
</el-form>
56+
</div>
57+
<div class="login_panle_right" />
58+
<div class="login_panle_foot">
59+
<div class="links">
60+
<a href="http://doc.henrongyi.top/"><img src="@/assets/docs.png" class="link-icon"></a>
61+
<a href="https://www.yuque.com/flipped-aurora/"><img src="@/assets/yuque.png" class="link-icon"></a>
62+
<a href="https://github.com/flipped-aurora/gin-vue-admin"><img src="@/assets/github.png" class="link-icon"></a>
63+
<a href="https://space.bilibili.com/322210472"><img src="@/assets/video.png" class="link-icon"></a>
64+
</div>
65+
<div class="copyright">Copyright &copy; {{ curYear }} 💖 flipped-aurora</div>
66+
</div>
67+
</div>
68+
</div>
69+
</template>
70+
71+
<script>
72+
import { mapActions } from 'vuex'
73+
import { captcha } from '@/api/user'
74+
export default {
75+
name: 'Login',
76+
data() {
77+
const checkUsername = (rule, value, callback) => {
78+
if (value.length < 5) {
79+
return callback(new Error('请输入正确的用户名'))
80+
} else {
81+
callback()
82+
}
83+
}
84+
const checkPassword = (rule, value, callback) => {
85+
if (value.length < 6) {
86+
return callback(new Error('请输入正确的密码'))
87+
} else {
88+
callback()
89+
}
90+
}
91+
return {
92+
curYear: 0,
93+
lock: 'lock',
94+
loginForm: {
95+
username: 'admin',
96+
password: '123456',
97+
captcha: '',
98+
captchaId: ''
99+
},
100+
rules: {
101+
username: [{ validator: checkUsername, trigger: 'blur' }],
102+
password: [{ validator: checkPassword, trigger: 'blur' }]
103+
},
104+
logVerify: '',
105+
picPath: ''
106+
}
107+
},
108+
created() {
109+
this.loginVerify()
110+
this.curYear = new Date().getFullYear()
111+
},
112+
methods: {
113+
...mapActions('user', ['LoginIn']),
114+
async login() {
115+
return await this.LoginIn(this.loginForm)
116+
},
117+
async submitForm() {
118+
this.$refs.loginForm.validate(async(v) => {
119+
if (v) {
120+
const flag = await this.login()
121+
if (!flag) {
122+
this.loginVerify()
123+
}
124+
} else {
125+
this.$message({
126+
type: 'error',
127+
message: '请正确填写登录信息',
128+
showClose: true
129+
})
130+
this.loginVerify()
131+
return false
132+
}
133+
})
134+
},
135+
changeLock() {
136+
this.lock = this.lock === 'lock' ? 'unlock' : 'lock'
137+
},
138+
loginVerify() {
139+
captcha({}).then((ele) => {
140+
this.picPath = ele.data.picPath
141+
this.loginForm.captchaId = ele.data.captchaId
142+
})
143+
}
144+
}
145+
}
146+
</script>
147+
148+
<style lang="scss" scoped>
149+
@import "@/style/newLogin.scss";
150+
</style>

‎web/vue.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ module.exports = {
2525
// 把key的路径代理到target位置
2626
// detail: https://cli.vuejs.org/config/#devserver-proxy
2727
[process.env.VUE_APP_BASE_API]: { // 需要代理的路径 例如 '/api'
28-
target: `${process.env.VUE_APP_BASE_PATH}:${process.env.VUE_APP_SERVER_PORT}/`, // 代理到 目标路径
28+
// target: `${process.env.VUE_APP_BASE_PATH}:${process.env.VUE_APP_SERVER_PORT}/`, // 代理到 目标路径
29+
target: `http://demo.gin-vue-admin.com/api`, // 代理到 目标路径
2930
changeOrigin: true,
3031
pathRewrite: { // 修改路径数据
3132
['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除

0 commit comments

Comments
 (0)