Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e0e1d609 1 parent e4544d30

新增用户登录页面，优化登陆框的图片显示样式

Inline Side-by-side
Showing 4 changed files with 133 additions and 36 deletions
...@@ -7,6 +7,7 @@ export {} ...@@ -7,6 +7,7 @@ export {}
7 /* prettier-ignore */ 7 /* prettier-ignore */
8 declare module 'vue' { 8 declare module 'vue' {
9 export interface GlobalComponents { 9 export interface GlobalComponents {
10 + ElCheckbox: typeof import('element-ui/lib/checkbox')['default']
10 ElCol: typeof import('element-ui/lib/col')['default'] 11 ElCol: typeof import('element-ui/lib/col')['default']
11 ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default'] 12 ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
12 ElImage: typeof import('element-ui/lib/image')['default'] 13 ElImage: typeof import('element-ui/lib/image')['default']
......
1 <!-- 1 <!--
2 * @Date: 2024-10-18 17:57:33 2 * @Date: 2024-10-18 17:57:33
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 19:01:34 4 + * @LastEditTime: 2024-10-20 12:10:21
5 * @FilePath: /hager/src/views/user/index.vue 5 * @FilePath: /hager/src/views/user/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 </div> 16 </div>
17 </el-col> 17 </el-col>
18 <el-col :span="10"> 18 <el-col :span="10">
19 - <router-view></router-view> 19 + <router-view id="router-view"></router-view>
20 </el-col> 20 </el-col>
21 </el-row> 21 </el-row>
22 </div> 22 </div>
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
25 25
26 <script> 26 <script>
27 import mixin from 'common/mixin'; 27 import mixin from 'common/mixin';
28 +import $ from 'jquery';
28 29
29 export default { 30 export default {
30 mixins: [mixin.init], 31 mixins: [mixin.init],
...@@ -34,10 +35,19 @@ export default { ...@@ -34,10 +35,19 @@ export default {
34 } 35 }
35 }, 36 },
36 mounted () { 37 mounted () {
37 - 38 + // 设置用户盒子高度
39 + this.handleResize();
40 + // 监听窗口的 resize 事件
41 + window.addEventListener('resize', this.handleResize);
38 }, 42 },
39 methods: { 43 methods: {
40 - 44 + handleResize () {
45 + $('.user-box').height($('#router-view').outerHeight())
46 + }
47 + },
48 + beforeDestroy() {
49 + // 在组件销毁前移除监听器，防止内存泄漏
50 + window.removeEventListener('resize', this.handleResize);
41 } 51 }
42 } 52 }
43 </script> 53 </script>
...@@ -51,12 +61,6 @@ export default { ...@@ -51,12 +61,6 @@ export default {
51 height: 100vh; 61 height: 100vh;
52 overflow: hidden; 62 overflow: hidden;
53 .centered-div { 63 .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; 64 margin: 15rem 20vw 0;
61 background-color: #fff; /* 设置背景颜色，方便看到元素 */ 65 background-color: #fff; /* 设置背景颜色，方便看到元素 */
62 box-shadow: 0rem 0.25rem 0.5rem 0.08rem rgba(0,0,0,0.16); 66 box-shadow: 0rem 0.25rem 0.5rem 0.08rem rgba(0,0,0,0.16);
...@@ -67,7 +71,8 @@ export default { ...@@ -67,7 +71,8 @@ export default {
67 flex-direction: column; 71 flex-direction: column;
68 justify-content: center; 72 justify-content: center;
69 align-items: center; 73 align-items: center;
70 - border-radius: 5px; 74 + border-top-left-radius: 5px;
75 + border-bottom-left-radius: 5px;
71 } 76 }
72 .user-logo { 77 .user-logo {
73 background-image: url(https://cdn.ipadbiz.cn/hager/img/user/logo02.png); 78 background-image: url(https://cdn.ipadbiz.cn/hager/img/user/logo02.png);
...@@ -80,7 +85,7 @@ export default { ...@@ -80,7 +85,7 @@ export default {
80 } 85 }
81 .user-bg { 86 .user-bg {
82 background-image: url(https://cdn.ipadbiz.cn/hager/img/user/l-bg.png); 87 background-image: url(https://cdn.ipadbiz.cn/hager/img/user/l-bg.png);
83 - height: 35vh; 88 + height: 36vh;
84 width: 45vw; 89 width: 45vw;
85 background-size: contain; 90 background-size: contain;
86 background-position: center; 91 background-position: center;
......
1 <!-- 1 <!--
2 * @Date: 2024-10-18 18:00:47 2 * @Date: 2024-10-18 18:00:47
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-20 11:19:46 4 + * @LastEditTime: 2024-10-20 12:10:35
5 * @FilePath: /hager/src/views/user/login.vue 5 * @FilePath: /hager/src/views/user/login.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-login-page"> 9 <div class="hager-login-page">
10 - <div class="input-title">用户注册</div> 10 + <div class="input-title">用户登录</div>
11 <div style="padding: 1rem;"> 11 <div style="padding: 1rem;">
12 - <hagerInput type="email" required disable v-model="email" placeholder="请输入注册邮箱地址" /> 12 + <hagerInput type="email" required v-model="email" placeholder="请输入注册邮箱地址" />
13 <hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" /> 13 <hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
14 - <hagerInput type="username" v-model="username" placeholder="请输入姓名" /> 14 + <!-- TODO: 记住密码和忘记密码业务显示的问题？ -->
15 - <hagerInput type="tel" v-model="tel" placeholder="请输入联系电话" /> 15 + <div class="pwd-box">
16 - <hagerInput type="corp" v-model="corp" placeholder="请输入公司名称" /> 16 + <div><el-checkbox v-model="checked">记住密码</el-checkbox></div>
17 - <hagerInput type="department" v-model="department" placeholder="请输入所属部门和职位" /> 17 + <div><span>忘记密码？</span></div>
18 + </div>
18 </div> 19 </div>
19 <div class="login-footer"> 20 <div class="login-footer">
20 - <div class="submit-btn" @click="onSubmit">提交</div> 21 + <div class="submit-btn" @click="onSubmit">立即登录</div>
21 <div class="login-subsidiary"> 22 <div class="login-subsidiary">
22 - <div class="privacy"><span>隐私政策</span></div> 23 + <div class="login">没有账号，<span @click="goToRegister">注册新账号</span></div>
23 - <div class="login">已有账号，<span>立即登录</span></div>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
...@@ -34,12 +34,9 @@ export default { ...@@ -34,12 +34,9 @@ export default {
34 mixins: [mixin.init], 34 mixins: [mixin.init],
35 data () { 35 data () {
36 return { 36 return {
37 - email: '1111111', 37 + email: '',
38 pwd: '', 38 pwd: '',
39 - username: '', 39 + checked: false
40 - tel: '',
41 - corp: '',
42 - department: '',
43 } 40 }
44 }, 41 },
45 mounted () { 42 mounted () {
...@@ -48,6 +45,9 @@ export default { ...@@ -48,6 +45,9 @@ export default {
48 methods: { 45 methods: {
49 onSubmit () { 46 onSubmit () {
50 console.warn(); 47 console.warn();
48 + },
49 + goToRegister () {
50 + this.$router.push('/user/register');
51 } 51 }
52 } 52 }
53 } 53 }
...@@ -55,13 +55,28 @@ export default { ...@@ -55,13 +55,28 @@ export default {
55 55
56 <style lang="less" scoped> 56 <style lang="less" scoped>
57 .hager-login-page { 57 .hager-login-page {
58 - padding: 2rem 0.5rem; 58 + padding: 2rem 0.5rem 0;
59 .input-title { 59 .input-title {
60 color: @secondary-color; 60 color: @secondary-color;
61 font-weight: bold; 61 font-weight: bold;
62 font-size: 1.25rem; 62 font-size: 1.25rem;
63 text-align: center; 63 text-align: center;
64 } 64 }
65 + .pwd-box {
66 + display: flex;
67 + justify-content: space-between;
68 + align-items: center;
69 + margin-top: 1rem;
70 + font-size: 0.85rem;
71 + padding-left: 1rem;
72 + span {
73 + color: @primary-color;
74 + font-weight: bold;
75 + &:hover {
76 + cursor: pointer;
77 + }
78 + }
79 + }
65 .submit-btn { 80 .submit-btn {
66 background-color: @secondary-color; 81 background-color: @secondary-color;
67 color: #FFF; 82 color: #FFF;
...@@ -75,8 +90,7 @@ export default { ...@@ -75,8 +90,7 @@ export default {
75 .login-footer { 90 .login-footer {
76 padding: 0 1rem 1rem 2rem; 91 padding: 0 1rem 1rem 2rem;
77 .login-subsidiary { 92 .login-subsidiary {
78 - display: flex; 93 + text-align: center;
79 - justify-content: space-between;
80 font-size: 0.85rem; 94 font-size: 0.85rem;
81 margin-top: 1rem; 95 margin-top: 1rem;
82 span { 96 span {
...@@ -96,4 +110,13 @@ export default { ...@@ -96,4 +110,13 @@ export default {
96 } 110 }
97 } 111 }
98 } 112 }
113 +
114 + :deep(.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
115 + background-color: #009FE5;
116 + border-color: #009FE5;
117 + }
118 +
119 + :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
120 + color: #009FE5;
121 + }
99 </style> 122 </style>
......
1 <!-- 1 <!--
2 - * @Date: 2024-10-18 17:57:33 2 + * @Date: 2024-10-18 18:00:47
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 17:59:14 4 + * @LastEditTime: 2024-10-20 12:06:47
5 - * @FilePath: /hager/src/views/login/register.vue 5 + * @FilePath: /hager/src/views/user/register.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="hager-register-page"></div> 9 + <div class="hager-register-page">
10 + <div class="input-title">用户注册</div>
11 + <div style="padding: 1rem;">
12 + <hagerInput type="email" required v-model="email" placeholder="请输入注册邮箱地址" />
13 + <hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
14 + <hagerInput type="username" v-model="username" placeholder="请输入姓名" />
15 + <hagerInput type="tel" v-model="tel" placeholder="请输入联系电话" />
16 + <hagerInput type="corp" v-model="corp" placeholder="请输入公司名称" />
17 + <hagerInput type="department" v-model="department" placeholder="请输入所属部门和职位" />
18 + </div>
19 + <div class="register-footer">
20 + <div class="submit-btn" @click="onSubmit">提交</div>
21 + <div class="register-subsidiary">
22 + <div class="privacy"><span>隐私政策</span></div>
23 + <div class="login">已有账号，<span @click="goToLogin">立即登录</span></div>
24 + </div>
25 + </div>
26 + </div>
10 </template> 27 </template>
11 28
12 <script> 29 <script>
13 import mixin from 'common/mixin'; 30 import mixin from 'common/mixin';
31 +import hagerInput from '@/components/common/hagerInput.vue';
14 32
15 export default { 33 export default {
16 mixins: [mixin.init], 34 mixins: [mixin.init],
17 data () { 35 data () {
18 return { 36 return {
19 - 37 + email: '',
38 + pwd: '',
39 + username: '',
40 + tel: '',
41 + corp: '',
42 + department: '',
20 } 43 }
21 }, 44 },
22 mounted () { 45 mounted () {
23 46
24 }, 47 },
25 methods: { 48 methods: {
26 - 49 + onSubmit () {
50 + console.warn();
51 + },
52 + goToLogin () {
53 + this.$router.push('/user/login');
54 + }
27 } 55 }
28 } 56 }
29 </script> 57 </script>
30 58
31 <style lang="less" scoped> 59 <style lang="less" scoped>
32 .hager-register-page { 60 .hager-register-page {
61 + padding: 2rem 0.5rem 0;
62 + box-sizing: border-box;
63 + .input-title {
64 + color: @secondary-color;
65 + font-weight: bold;
66 + font-size: 1.25rem;
67 + text-align: center;
68 + }
69 + .submit-btn {
70 + background-color: @secondary-color;
71 + color: #FFF;
72 + padding: 0.5rem 1rem;
73 + text-align: center;
74 + border-radius: 5px;
75 + &:hover {
76 + cursor: pointer;
77 + }
78 + }
79 + .register-footer {
80 + padding: 0 1rem 1rem 2rem;
81 + .register-subsidiary {
82 + display: flex;
83 + justify-content: space-between;
84 + font-size: 0.85rem;
85 + margin-top: 1rem;
86 + span {
87 + color: @primary-color;
88 + text-decoration: underline;
89 + font-weight: bold;
90 + &:hover {
91 + cursor: pointer;
92 + }
93 + }
94 + .privacy {
95 +
96 + }
97 + .login {
33 98
34 } 99 }
100 + }
101 + }
102 + }
35 </style> 103 </style>
......