Skip to content

Commit 4418fea

Browse files
sendyasendya
committed
add: register
1 parent 728aa74 commit 4418fea

File tree

6 files changed

+473
-216
lines changed

6 files changed

+473
-216
lines changed

‎src/components/layout/LayoutMain.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,10 @@
103103
body {
104104
// 打开滚动条固定显示
105105
overflow-y: scroll;
106+
107+
&.userLayout {
108+
overflow-y: auto;
109+
}
106110
}
107111
108112
.layout {

‎src/components/layout/UserLayout.vue

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<template>
2+
<div id="userLayout" class="user-layout-wrapper">
3+
<div class="container">
4+
<div class="top">
5+
<div class="header">
6+
<a href="/">
7+
<img src="~@/assets/logo.svg" class="logo" alt="logo">
8+
<span class="title">Ant Design</span>
9+
</a>
10+
</div>
11+
<div class="desc">
12+
Ant Design 是西湖区最具影响力的 Web 设计规范
13+
</div>
14+
</div>
15+
<div class="main">
16+
<route-view></route-view>
17+
</div>
18+
<div class="footer">
19+
<div class="links">
20+
<a href="_self">帮助</a>
21+
<a href="_self">隐私</a>
22+
<a href="_self">条款</a>
23+
</div>
24+
<div class="copyright">
25+
Copyright &copy; 2018 白鹭学园技术组出品
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script>
33+
import RouteView from "@/components/layout/RouteView"
34+
35+
export default {
36+
name: "UserLayout",
37+
components: { RouteView },
38+
data () {
39+
return {}
40+
},
41+
mounted () {
42+
document.body.classList.add('userLayout')
43+
},
44+
beforeDestroy () {
45+
document.body.classList.remove('userLayout')
46+
},
47+
}
48+
</script>
49+
50+
<style lang="scss" scoped>
51+
#userLayout.user-layout-wrapper {
52+
height: 100%;
53+
54+
.container {
55+
width: 100%;
56+
min-height: 100%;
57+
background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
58+
background-size: 100%;
59+
padding: 110px 0 144px;
60+
position: relative;
61+
62+
a {
63+
text-decoration: none;
64+
}
65+
66+
.top {
67+
text-align: center;
68+
69+
.header {
70+
height: 44px;
71+
line-height: 44px;
72+
73+
.badge {
74+
position: absolute;
75+
display: inline-block;
76+
line-height: 1;
77+
vertical-align: middle;
78+
margin-left: -12px;
79+
margin-top: -10px;
80+
opacity: 0.8;
81+
}
82+
83+
.logo {
84+
height: 44px;
85+
vertical-align: top;
86+
margin-right: 16px;
87+
border-style: none;
88+
}
89+
90+
.title {
91+
font-size: 33px;
92+
color: rgba(0, 0, 0, .85);
93+
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
94+
font-weight: 600;
95+
position: relative;
96+
top: 2px;
97+
}
98+
}
99+
.desc {
100+
font-size: 14px;
101+
color: rgba(0, 0, 0, 0.45);
102+
margin-top: 12px;
103+
margin-bottom: 40px;
104+
}
105+
}
106+
107+
.main {
108+
width: 368px;
109+
margin: 0 auto;
110+
}
111+
112+
.footer {
113+
position: absolute;
114+
width: 100%;
115+
bottom: 0;
116+
padding: 0 16px;
117+
margin: 48px 0 24px;
118+
text-align: center;
119+
120+
.links {
121+
margin-bottom: 8px;
122+
font-size: 14px;
123+
a {
124+
color: rgba(0, 0, 0, 0.45);
125+
transition: all 0.3s;
126+
&:not(:last-child) {
127+
margin-right: 40px;
128+
}
129+
}
130+
}
131+
.copyright {
132+
color: rgba(0, 0, 0, 0.45);
133+
font-size: 14px;
134+
}
135+
}
136+
}
137+
}
138+
</style>

‎src/permission.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ import { ACCESS_TOKEN } from "@/store/mutation-types"
88

99
NProgress.configure({ showSpinner: false })// NProgress Configuration
1010

11-
const whiteList = ['/login']// no redirect whitelist
11+
const whiteList = ['/user/login', '/user/register']// no redirect whitelist
1212

1313
router.beforeEach((to, from, next) => {
1414
NProgress.start() // start progress bar
1515

1616
if (Vue.ls.get(ACCESS_TOKEN)) {
1717
/* has token */
18-
if (to.path === '/login') {
18+
if (to.path === '/user/login') {
1919
next({ path: '/dashboard/workplace' })
2020
NProgress.done()
2121
} else {
@@ -28,7 +28,7 @@ router.beforeEach((to, from, next) => {
2828
})
2929
}).catch(() => {
3030
store.dispatch('Logout').then(() => {
31-
next({ path: '/login' })
31+
next({ path: '/user/login' })
3232
})
3333
})
3434

@@ -40,7 +40,7 @@ router.beforeEach((to, from, next) => {
4040
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
4141
next()
4242
} else {
43-
next('/login')
43+
next('/user/login')
4444
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
4545
}
4646

‎src/router/index.js

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Vue from 'vue'
22
import Router from 'vue-router'
33
import Layout from '../components/layout/LayoutView'
44
import LayoutBase from '../components/layout/LayoutBaseView'
5+
import LayoutUser from '@/components/layout/UserLayout'
56

67
Vue.use(Router)
78
/**
@@ -14,17 +15,31 @@ Vue.use(Router)
1415

1516
export const constantRouterMap = [
1617
{
17-
path: '/login',
18-
component: () => import('../views/Login')
18+
path: '/user',
19+
component: LayoutUser,
20+
redirect: '/user/login',
21+
hidden: true,
22+
children: [
23+
{
24+
path: 'login',
25+
name: 'login',
26+
component: () => import(/* webpackChunkName: "user" */ '@/views/Login')
27+
},
28+
{
29+
path: 'register',
30+
name: 'register',
31+
component: () => import(/* webpackChunkName: "user" */ '@/views/Register')
32+
}
33+
]
1934
},
2035
{
2136
path: '/404',
22-
component: () => import(/* webpackChunkName: "fail" */ '../views/exception/404')
37+
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
2338
},
2439
{
2540
path: '/',
2641
component: Layout,
27-
redirect: '/login',
42+
redirect: { name: 'login' },
2843
name: 'home',
2944
hidden: true
3045
}
@@ -48,20 +63,20 @@ export const asyncRouterMap = [
4863
{
4964
path: '/dashboard/analysis',
5065
name: 'Analysis',
51-
component: () => import('../views/dashboard/Analysis'),
66+
component: () => import('@/views/dashboard/Analysis'),
5267
meta: { title: '分析页', hideHeader: true, permission: [ 'dashboard' ] }
5368
},
5469
{
5570
path: '/dashboard/monitor',
5671
name: 'Monitor',
5772
hidden: true,
58-
component: () => import('../views/dashboard/Monitor'),
73+
component: () => import('@/views/dashboard/Monitor'),
5974
meta: { title: '监控页', hideHeader: true, permission: [ 'dashboard' ] }
6075
},
6176
{
6277
path: '/dashboard/workplace',
6378
name: 'Workplace',
64-
component: () => import('../views/dashboard/Workplace'),
79+
component: () => import('@/views/dashboard/Workplace'),
6580
meta: { title: '工作台', permission: [ 'dashboard' ] }
6681
}
6782
]
@@ -76,19 +91,19 @@ export const asyncRouterMap = [
7691
{
7792
path: '/form/base-form',
7893
name: 'BaseForm',
79-
component: () => import('../views/form/BasicForm'),
94+
component: () => import('@/views/form/BasicForm'),
8095
meta: { title: '基础表单', permission: [ 'form' ] }
8196
},
8297
{
8398
path: '/form/step-form',
8499
name: 'StepForm',
85-
component: () => import('../views/form/stepForm/StepForm'),
100+
component: () => import('@/views/form/stepForm/StepForm'),
86101
meta: { title: '分步表单', permission: [ 'form' ] }
87102
},
88103
{
89104
path: '/form/advanced-form',
90105
name: 'AdvanceForm',
91-
component: () => import('../views/form/advancedForm/AdvancedForm'),
106+
component: () => import('@/views/form/advancedForm/AdvancedForm'),
92107
meta: { title: '高级表单', permission: [ 'form' ] }
93108
}
94109
]

0 commit comments

Comments
 (0)