Skip to content

Commit 2c9b228

Browse files
bypanghubypanghu
committed
全新init页面，提升用户体验
1 parent a2b6bb3 commit 2c9b228

File tree

5 files changed

+258
-5
lines changed

5 files changed

+258
-5
lines changed

‎web/src/router/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ 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',

‎web/src/style/init.sass‎

Whitespace-only changes.

‎web/src/style/newLogin.scss‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,20 @@
3232
border-radius: 10px;
3333
box-shadow: 2px 3px 7px rgba(0,0,0,.2);
3434
.login_panle_form_title{
35+
36+
display: flex;
37+
align-items: center;
3538
margin: 30px 0;
36-
padding-left: 20px ;
37-
font-size: 40px;
38-
border-left: 4px solid #409EFF ;
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+
}
3949
}
4050
.vPic {
4151
width: 33%;

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

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
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+
</style>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<div id="userLayout">
33
<div class="login_panle">
44
<div class="login_panle_form">
5-
<div class="login_panle_form_title">GIN-VUE-ADMIN</div>
5+
<div class="login_panle_form_title">
6+
<img class="login_panle_form_title_logo" src="@/assets/logo_login.png" alt=""><p class="login_panle_form_title_p">GIN-VUE-ADMIN</p>
7+
</div>
68
<el-form
79
ref="loginForm"
810
:model="loginForm"

0 commit comments

Comments
 (0)