Skip to content

Commit 3de30b4

Browse files
author
奇淼（piexlmax
authored
新版本的login 和 init页面
船新版本的login 和 init页面
2 parents 34808ca + ca9579f commit 3de30b4

File tree

9 files changed

+10640
-2
lines changed

9 files changed

+10640
-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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ const baseRouters = [
1818
{
1919
path: '/init',
2020
name: 'Init',
21-
component: () => import('@/view/init/init')
21+
component: () => import('@/view/init/index')
2222
},
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/init.sass‎

Whitespace-only changes.

‎web/src/style/newLogin.scss‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
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+
36+
display: flex;
37+
align-items: center;
38+
margin: 30px 0;
39+
40+
.login_panle_form_title_logo{
41+
width: 90px;
42+
height: 72px;
43+
}
44+
.login_panle_form_title_p{
45+
font-size: 40px;
46+
47+
padding-left: 20px ;
48+
}
49+
}
50+
.vPic {
51+
width: 33%;
52+
height: 38px;
53+
float: right !important;
54+
background: #ccc;
55+
img {
56+
cursor: pointer;
57+
vertical-align: middle;
58+
}
59+
}
60+
}
61+
.login_panle_foot{
62+
position: absolute;
63+
bottom: 20px;
64+
.links{
65+
display: flex;
66+
align-items: center;
67+
justify-content: space-between;
68+
.link-icon{
69+
width: 30px;
70+
height: 30px;
71+
}
72+
}
73+
.copyright{
74+
color: #777777;
75+
margin-top: 5px;
76+
}
77+
}
78+
}
79+
}
80+
//小屏幕不显示右侧，将登陆框居中
81+
@media (max-width: 750px) {
82+
.login_panle_right{
83+
display: none;
84+
}
85+
.login_panle{
86+
width: 100vw;
87+
height: 100vh;
88+
top: 0;
89+
left: 0;
90+
}
91+
.login_panle_form{
92+
width: 100%;
93+
}
94+
}
95+
96+
/*
97+
powerBy : [email protected]
98+
*/

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

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<template>
2+
<div class="init_page">
3+
<div class="init_page_panle">
4+
<div v-if="hello < 2" id="hello" :class="[hello < 1 ? 'slide-in-fwd-top' : 'slide-out-right']" class="hello " @click="showNext">
5+
<div>
6+
<div class="hello_title">GIN-VUE-ADMIN</div>
7+
<p class="in-two a-fadeinT">您需要初始化您的数据库并且填充初始数据</p>
8+
<p class="init_p">点击进入初始化</p>
9+
</div>
10+
</div>
11+
<div v-if="hello > 0 " :class="[(hello > 0 && !out)? 'slide-in-left' : '' , out ? 'slide-out-right' : '']" class=" form">
12+
<el-form ref="form" :model="form" label-width="100px">
13+
<el-form-item label="数据库类型">
14+
<el-select v-model="form.sqlType" disabled placeholder="请选择">
15+
<el-option key="mysql" label="mysql(目前只支持mysql)" value="mysql" />
16+
</el-select>
17+
</el-form-item>
18+
<el-form-item label="host">
19+
<el-input v-model="form.host" placeholder="请输入数据库链接" />
20+
</el-form-item>
21+
<el-form-item label="port">
22+
<el-input v-model="form.port" placeholder="请输入数据库端口" />
23+
</el-form-item>
24+
<el-form-item label="userName">
25+
<el-input v-model="form.userName" placeholder="请输入数据库用户名" />
26+
</el-form-item>
27+
<el-form-item label="password">
28+
<el-input
29+
v-model="form.password"
30+
placeholder="请输入数据库密码（没有则为空）"
31+
/>
32+
</el-form-item>
33+
<el-form-item label="dbName">
34+
<el-input v-model="form.dbName" placeholder="请输入数据库名称" />
35+
</el-form-item>
36+
<el-form-item>
37+
<div style="text-align: right">
38+
<el-button type="primary" @click="onSubmit">立即初始化</el-button>
39+
</div>
40+
</el-form-item>
41+
</el-form>
42+
</div>
43+
</div>
44+
</div>
45+
</template>
46+
<script>
47+
import { initDB } from '@/api/initdb'
48+
export default {
49+
name: 'Init',
50+
data() {
51+
return {
52+
hello: 0,
53+
out: false,
54+
form: {
55+
sqlType: 'mysql',
56+
host: '127.0.0.1',
57+
port: '3306',
58+
userName: 'root',
59+
password: '',
60+
dbName: 'gva'
61+
}
62+
}
63+
},
64+
created() {
65+
// setInterval(() => {
66+
// if (this.hello < 3) {
67+
// this.hello = this.hello + 1
68+
// }
69+
// }, 2000)
70+
},
71+
methods: {
72+
showNext() {
73+
this.hello = this.hello + 1
74+
console.log(this.hello)
75+
},
76+
async onSubmit() {
77+
this.out = true
78+
const loading = this.$loading({
79+
lock: true,
80+
text: '正在初始化数据库，请稍候',
81+
spinner: 'el-icon-loading',
82+
background: 'rgba(0, 0, 0, 0.7)'
83+
})
84+
try {
85+
const res = await initDB(this.form)
86+
if (res.code === 0) {
87+
this.$message({
88+
type: 'success',
89+
message: res.msg
90+
})
91+
this.$router.push({ name: 'Login' })
92+
}
93+
loading.close()
94+
} catch (err) {
95+
loading.close()
96+
}
97+
}
98+
}
99+
}
100+
</script>
101+
102+
<style lang="scss" scoped>
103+
.init_page{
104+
margin: 0;
105+
padding: 0;
106+
background-image: url("~@/assets/login_background.svg");
107+
background-size: cover;
108+
width: 100%;
109+
height: 100%;
110+
position: relative;
111+
.init_page_panle{
112+
position: absolute;
113+
top: 3vh;
114+
left: 2vw;
115+
width: 96vw;
116+
height: 94vh;
117+
background-color: rgba(255,255,255,.8);
118+
backdrop-filter: blur(5px);
119+
border-radius: 10px;
120+
display: flex;
121+
align-items: center;
122+
justify-content: space-evenly;
123+
.hello{
124+
position: absolute;
125+
z-index: 2;
126+
text-align: center;
127+
width: 100%;
128+
height: 100%;
129+
display: flex;
130+
align-items: center;
131+
justify-content: center;
132+
cursor: pointer;
133+
.hello_title{
134+
font-size: 32px;
135+
line-height: 98px;
136+
}
137+
.in-two{
138+
font-size: 22px;
139+
}
140+
.init_p{
141+
margin-top: 20px;
142+
color: #777777;
143+
}
144+
}
145+
.form{
146+
position: absolute;
147+
z-index: 3;
148+
margin-top: 60px;
149+
width: 600px;
150+
height: auto;
151+
padding: 20px;
152+
border-radius: 6px;
153+
}
154+
}
155+
}
156+
157+
.slide-in-fwd-top {
158+
-webkit-animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
159+
animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
160+
}
161+
.slide-out-right {
162+
-webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
163+
animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
164+
}
165+
.slide-in-left {
166+
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
167+
animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
168+
}
169+
@-webkit-keyframes slide-in-fwd-top {
170+
0% {
171+
-webkit-transform: translateZ(-1400px) translateY(-800px);
172+
transform: translateZ(-1400px) translateY(-800px);
173+
opacity: 0;
174+
}
175+
100% {
176+
-webkit-transform: translateZ(0) translateY(0);
177+
transform: translateZ(0) translateY(0);
178+
opacity: 1;
179+
}
180+
}
181+
@keyframes slide-in-fwd-top {
182+
0% {
183+
-webkit-transform: translateZ(-1400px) translateY(-800px);
184+
transform: translateZ(-1400px) translateY(-800px);
185+
opacity: 0;
186+
}
187+
100% {
188+
-webkit-transform: translateZ(0) translateY(0);
189+
transform: translateZ(0) translateY(0);
190+
opacity: 1;
191+
}
192+
}
193+
@-webkit-keyframes slide-out-right {
194+
0% {
195+
-webkit-transform: translateX(0);
196+
transform: translateX(0);
197+
opacity: 1;
198+
}
199+
100% {
200+
-webkit-transform: translateX(1000px);
201+
transform: translateX(1000px);
202+
opacity: 0;
203+
}
204+
}
205+
@keyframes slide-out-right {
206+
0% {
207+
-webkit-transform: translateX(0);
208+
transform: translateX(0);
209+
opacity: 1;
210+
}
211+
100% {
212+
-webkit-transform: translateX(1000px);
213+
transform: translateX(1000px);
214+
opacity: 0;
215+
}
216+
}
217+
@-webkit-keyframes slide-in-left {
218+
0% {
219+
-webkit-transform: translateX(-1000px);
220+
transform: translateX(-1000px);
221+
opacity: 0;
222+
}
223+
100% {
224+
-webkit-transform: translateX(0);
225+
transform: translateX(0);
226+
opacity: 1;
227+
}
228+
}
229+
@keyframes slide-in-left {
230+
0% {
231+
-webkit-transform: translateX(-1000px);
232+
transform: translateX(-1000px);
233+
opacity: 0;
234+
}
235+
100% {
236+
-webkit-transform: translateX(0);
237+
transform: translateX(0);
238+
opacity: 1;
239+
}
240+
}
241+
@media (max-width: 750px) {
242+
.form{
243+
width: 94vw !important;
244+
padding: 0;
245+
}
246+
}
247+
248+
</style>

0 commit comments

Comments
 (0)