Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit db1c09e

Browse files
author
高晨辉
committed
登录页改版
1 parent 6830dad commit db1c09e

File tree

4 files changed

+100
-48
lines changed

4 files changed

+100
-48
lines changed

‎src/assets/pageBg/loginBg.jpg

468 KB
Loading[フレーム]

‎src/router/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const currencyRoutes = [
2323
path: '/login',
2424
name: 'Login',
2525
component: () => import('@/views/login'),
26+
meta: { title: '登录页' },
2627
hidden: true
2728
},
2829
{

‎src/style/index.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,14 +95,16 @@ body {
9595
visibility: hidden;
9696
}
9797
.loginCon .el-input__inner {
98-
background: rgba(0, 0, 0, 0.1);
98+
// background: rgba(0, 0, 0, 0.1);
99+
background: #fff;
99100
height: 50px;
100101
outline: none;
101-
color: $white;
102+
color: $text-color;
102103
border: none;
103104
}
104105
.loginCon .el-form-item {
105-
border: 1px solid hsla(0, 0%, 100%, 0.1);
106+
// border: 1px solid hsla(0, 0%, 100%, 0.1);
107+
border: 1px solid #ddd;
106108
border-radius: 5px;
107109
}
108110
.marginLeft {

‎src/views/login/index.vue

Lines changed: 94 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,51 @@
11
<template>
22
<div class="login">
3-
<div class="slideSty" v-show="showSlide">
4-
<slide-verify
5-
@success="onSuccess"
6-
@fail="onFail"
7-
:sliderText="text"
8-
:w="350"
9-
:h="175"
10-
ref="slideDiv"
11-
></slide-verify>
12-
<div class="iconBtn">
13-
<i class="el-icon-circle-close" @click="showSlide = false"></i
14-
><i class="el-icon-refresh" @click="refresh"></i>
15-
</div>
3+
<div class="slideShadow" v-show="showSlide">
4+
<transition>
5+
<div class="slideSty animated bounce">
6+
<slide-verify
7+
@success="onSuccess"
8+
@fail="onFail"
9+
:sliderText="text"
10+
:w="350"
11+
:h="175"
12+
ref="slideDiv"
13+
></slide-verify>
14+
<div class="iconBtn">
15+
<i class="el-icon-circle-close" @click="showSlide = false"></i
16+
><i class="el-icon-refresh" @click="refresh"></i>
17+
</div>
18+
</div>
19+
</transition>
1620
</div>
17-
<el-form ref="loginForm" class="loginCon" :rules="rules" :model="ruleForm">
21+
<h2 class="loginH2"><strong>Vue</strong> 后台管理系统</h2>
22+
<div class="loginCon">
1823
<div class="titleDiv">
19-
<h2>系统登录</h2>
24+
<h3>Sign up now</h3>
25+
<p>Enter your username and password to log on:</p>
26+
<i class="el-icon-key"></i>
2027
</div>
21-
<el-form-item prop="user">
22-
<el-input
23-
placeholder="请输入账号"
24-
prefix-icon="el-icon-user"
25-
v-model="ruleForm.user"
26-
></el-input>
27-
</el-form-item>
28-
<el-form-item prop="password">
29-
<el-input
30-
placeholder="请输入密码"
31-
prefix-icon="el-icon-lock"
32-
v-model="ruleForm.password"
33-
show-password
34-
></el-input>
35-
</el-form-item>
36-
<el-button type="primary" class="loginBtn" @click="loginYz('loginForm')"
37-
>登录</el-button
38-
>
39-
</el-form>
28+
<el-form ref="loginForm" :rules="rules" :model="ruleForm">
29+
<el-form-item prop="user">
30+
<el-input
31+
placeholder="请输入账号"
32+
prefix-icon="el-icon-user"
33+
v-model="ruleForm.user"
34+
></el-input>
35+
</el-form-item>
36+
<el-form-item prop="password">
37+
<el-input
38+
placeholder="请输入密码"
39+
prefix-icon="el-icon-lock"
40+
v-model="ruleForm.password"
41+
show-password
42+
></el-input>
43+
</el-form-item>
44+
<el-button type="primary" class="loginBtn" @click="loginYz('loginForm')"
45+
>登录</el-button
46+
>
47+
</el-form>
48+
</div>
4049
</div>
4150
</template>
4251

@@ -105,23 +114,63 @@ export default {
105114
.login {
106115
height: 100%;
107116
width: 100%;
108-
background-color: #2d3a4b;
117+
// background-color: #2d3a4b;
118+
background: url(../../assets/pageBg/loginBg.jpg) no-repeat center center;
119+
background-size: 100% 100%;
109120
}
110-
.titleDiv {
111-
margin-bottom: 30px;
112-
h2 {
113-
font-size: 26px;
114-
color: #eee;
115-
text-align: center;
116-
}
121+
.loginH2 {
122+
font-size: 38px;
123+
color: #fff;
124+
text-align: center;
125+
padding-top: 160px;
117126
}
118127
.loginCon {
119-
width: 450px;
128+
width: 550px;
120129
margin: 0 auto;
121-
padding-top: 160px;
130+
margin-top: 30px;
131+
background: #eee;
132+
border-radius: 4px;
133+
.titleDiv {
134+
padding: 0 28px;
135+
background: #fff;
136+
position: relative;
137+
height: 120px;
138+
border-radius: 4px 4px 0 0;
139+
h3 {
140+
font-size: 22px;
141+
color: #555;
142+
font-weight: initial;
143+
padding-top: 23px;
144+
}
145+
p {
146+
font-size: 16px;
147+
color: #888;
148+
padding-top: 12px;
149+
}
150+
i {
151+
font-size: 65px;
152+
color: #ddd;
153+
position: absolute;
154+
right: 27px;
155+
top: 29px;
156+
}
157+
}
158+
.el-form {
159+
padding: 25px 25px 30px 25px;
160+
background: #eee;
161+
border-radius: 0 0 4px 4px;
162+
}
122163
}
123164
.loginBtn {
124165
width: 100%;
166+
background: #19b9e7;
167+
}
168+
.slideShadow {
169+
position: fixed;
170+
z-index: 999;
171+
width: 100%;
172+
height: 100%;
173+
background: rgba(0, 0, 0, 0.6);
125174
}
126175
.slideSty {
127176
position: absolute;
@@ -131,7 +180,7 @@ export default {
131180
border: 1px solid #dcdcdc;
132181
left: 50%;
133182
margin-left: -188px;
134-
margin-top: 164px;
183+
margin-top: 247px;
135184
z-index: 99;
136185
border-radius: 5px;
137186
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /