hookehuyr

新增用户模块相关页面

1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-17 15:55:29 4 + * @LastEditTime: 2024-10-18 18:58:31
5 * @FilePath: /hager/src/App.vue 5 * @FilePath: /hager/src/App.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div style=" display: flex; flex-direction: column; min-height: 100vh;"> 9 + <div style="display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;">
10 <hager-header></hager-header> 10 <hager-header></hager-header>
11 - <router-view :class="['wrapper', is_xs ? 'xs' : '']"></router-view> 11 + <router-view :class="[!isLoginPage ? 'wrapper' : '', is_xs ? 'xs' : '']"></router-view>
12 - <hager-footer></hager-footer> 12 + <hager-footer v-if="!isLoginPage"></hager-footer>
13 </div> 13 </div>
14 </template> 14 </template>
15 15
...@@ -26,6 +26,13 @@ export default { ...@@ -26,6 +26,13 @@ export default {
26 26
27 } 27 }
28 }, 28 },
29 + computed: {
30 + // 通过计算属性检查是否是登录页
31 + isLoginPage() {
32 + // 检查当前路由是否为登录页的路径
33 + return this.$route.path.indexOf('/user') !== -1;
34 + },
35 + },
29 mounted () { 36 mounted () {
30 37
31 }, 38 },
......
1 /* 1 /*
2 * @Date: 2024-08-26 10:42:15 2 * @Date: 2024-08-26 10:42:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 14:59:39 4 + * @LastEditTime: 2024-10-18 18:16:17
5 * @FilePath: /hager/src/route.js 5 * @FilePath: /hager/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -149,4 +149,41 @@ export default [{ ...@@ -149,4 +149,41 @@ export default [{
149 tag: 'recruit' 149 tag: 'recruit'
150 }, 150 },
151 children: [] 151 children: []
152 +}, {
153 + path: '/user',
154 + name: '用户管理',
155 + component: () => import('@/views/user/index'),
156 + meta: {
157 + title: '海格电器',
158 + tag: 'user'
159 + },
160 + children: [
161 + {
162 + path: 'login',
163 + name: '用户登录',
164 + component: () => import('@/views/user/login'),
165 + meta: {
166 + title: '海格电器',
167 + tag: 'login'
168 + },
169 + },
170 + {
171 + path: 'register',
172 + name: '用户注册',
173 + component: () => import('@/views/user/register'),
174 + meta: {
175 + title: '海格电器',
176 + tag: 'register'
177 + },
178 + },
179 + {
180 + path: 'info',
181 + name: '用户信息',
182 + component: () => import('@/views/user/info'),
183 + meta: {
184 + title: '海格电器',
185 + tag: 'info'
186 + },
187 + },
188 + ]
152 }] 189 }]
......
1 +<!--
2 + * @Date: 2024-10-18 17:57:33
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-18 19:01:34
5 + * @FilePath: /hager/src/views/user/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-user-page">
10 + <div class="centered-div">
11 + <el-row>
12 + <el-col :span="14">
13 + <div class="user-box" style="background-color: #EFF7FB;">
14 + <div class="user-logo"></div>
15 + <div class="user-bg"></div>
16 + </div>
17 + </el-col>
18 + <el-col :span="10">
19 + <router-view></router-view>
20 + </el-col>
21 + </el-row>
22 + </div>
23 + </div>
24 +</template>
25 +
26 +<script>
27 +import mixin from 'common/mixin';
28 +
29 +export default {
30 + mixins: [mixin.init],
31 + data () {
32 + return {
33 +
34 + }
35 + },
36 + mounted () {
37 +
38 + },
39 + methods: {
40 +
41 + }
42 +}
43 +</script>
44 +
45 +<style lang="less" scoped>
46 + .hager-user-page {
47 + background-image: url(https://cdn.ipadbiz.cn/hager/img/user/dd-bg.png);
48 + background-size: cover;
49 + background-position: center;
50 + width: 100vw;
51 + height: 100vh;
52 + overflow: hidden;
53 + .centered-div {
54 + // position: absolute;
55 + // top: 55%;
56 + // left: 50%;
57 + // transform: translate(-50%, -55%); /* 将元素移动到居中位置 */
58 + // width: 300px; /* 可选,设置宽度 */
59 + // height: 200px; /* 可选,设置高度 */
60 + margin: 15rem 20vw 0;
61 + background-color: #fff; /* 设置背景颜色,方便看到元素 */
62 + box-shadow: 0rem 0.25rem 0.5rem 0.08rem rgba(0,0,0,0.16);
63 + border-radius: 5px;
64 + .user-box {
65 + overflow: hidden;
66 + display: flex;
67 + flex-direction: column;
68 + justify-content: center;
69 + align-items: center;
70 + border-radius: 5px;
71 + }
72 + .user-logo {
73 + background-image: url(https://cdn.ipadbiz.cn/hager/img/user/logo02.png);
74 + height: 15vh;
75 + width: 15vw;
76 + background-size: contain;
77 + background-position: center;
78 + background-repeat: no-repeat;
79 + margin-top: 2rem;
80 + }
81 + .user-bg {
82 + background-image: url(https://cdn.ipadbiz.cn/hager/img/user/l-bg.png);
83 + height: 35vh;
84 + width: 45vw;
85 + background-size: contain;
86 + background-position: center;
87 + background-repeat: no-repeat;
88 + }
89 + }
90 + }
91 +</style>
1 +<!--
2 + * @Date: 2024-10-18 17:57:33
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-18 17:59:36
5 + * @FilePath: /hager/src/views/login/info.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-info-page"></div>
10 +</template>
11 +
12 +<script>
13 +import mixin from 'common/mixin';
14 +
15 +export default {
16 + mixins: [mixin.init],
17 + data () {
18 + return {
19 +
20 + }
21 + },
22 + mounted () {
23 +
24 + },
25 + methods: {
26 +
27 + }
28 +}
29 +</script>
30 +
31 +<style lang="less" scoped>
32 + .hager-info-page {
33 +
34 + }
35 +</style>
1 +<template>
2 + <div class="hager-login-page">
3 + <div>用户注册</div>
4 + <div>
5 +
6 + </div>
7 + </div>
8 +</template>
9 +
10 +<script>
11 +import mixin from 'common/mixin';
12 +
13 +export default {
14 + mixins: [mixin.init],
15 + data () {
16 + return {
17 +
18 + }
19 + },
20 + mounted () {
21 +
22 + },
23 + methods: {
24 +
25 + }
26 +}
27 +</script>
28 +
29 +<style lang="less" scoped>
30 + .hager-login-page {
31 +
32 + }
33 +</style>
1 +<!--
2 + * @Date: 2024-10-18 17:57:33
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-18 17:59:14
5 + * @FilePath: /hager/src/views/login/register.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-register-page"></div>
10 +</template>
11 +
12 +<script>
13 +import mixin from 'common/mixin';
14 +
15 +export default {
16 + mixins: [mixin.init],
17 + data () {
18 + return {
19 +
20 + }
21 + },
22 + mounted () {
23 +
24 + },
25 + methods: {
26 +
27 + }
28 +}
29 +</script>
30 +
31 +<style lang="less" scoped>
32 + .hager-register-page {
33 +
34 + }
35 +</style>