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 {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
ElCheckbox: typeof import('element-ui/lib/checkbox')['default']
ElCol: typeof import('element-ui/lib/col')['default']
ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
ElImage: typeof import('element-ui/lib/image')['default']
......
<!--
* @Date: 2024-10-18 17:57:33
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 19:01:34
* @LastEditTime: 2024-10-20 12:10:21
* @FilePath: /hager/src/views/user/index.vue
* @Description: 文件描述
-->
......@@ -16,7 +16,7 @@
</div>
</el-col>
<el-col :span="10">
<router-view></router-view>
<router-view id="router-view"></router-view>
</el-col>
</el-row>
</div>
......@@ -25,6 +25,7 @@
<script>
import mixin from 'common/mixin';
import $ from 'jquery';
export default {
mixins: [mixin.init],
......@@ -34,10 +35,19 @@ export default {
}
},
mounted () {
// 设置用户盒子高度
this.handleResize();
// 监听窗口的 resize 事件
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize () {
$('.user-box').height($('#router-view').outerHeight())
}
},
beforeDestroy() {
// 在组件销毁前移除监听器，防止内存泄漏
window.removeEventListener('resize', this.handleResize);
}
}
</script>
......@@ -51,12 +61,6 @@ export default {
height: 100vh;
overflow: hidden;
.centered-div {
// position: absolute;
// top: 55%;
// left: 50%;
// transform: translate(-50%, -55%); /* 将元素移动到居中位置 */
// width: 300px; /* 可选，设置宽度 */
// height: 200px; /* 可选，设置高度 */
margin: 15rem 20vw 0;
background-color: #fff; /* 设置背景颜色，方便看到元素 */
box-shadow: 0rem 0.25rem 0.5rem 0.08rem rgba(0,0,0,0.16);
......@@ -67,7 +71,8 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.user-logo {
background-image: url(https://cdn.ipadbiz.cn/hager/img/user/logo02.png);
......@@ -80,7 +85,7 @@ export default {
}
.user-bg {
background-image: url(https://cdn.ipadbiz.cn/hager/img/user/l-bg.png);
height: 35vh;
height: 36vh;
width: 45vw;
background-size: contain;
background-position: center;
......
<!--
* @Date: 2024-10-18 18:00:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-20 11:19:46
* @LastEditTime: 2024-10-20 12:10:35
* @FilePath: /hager/src/views/user/login.vue
* @Description: 文件描述
-->
<template>
<div class="hager-login-page">
<div class="input-title">用户注册</div>
<div class="input-title">用户登录</div>
<div style="padding: 1rem;">
<hagerInput type="email" required disable v-model="email" placeholder="请输入注册邮箱地址" />
<hagerInput type="email" required v-model="email" placeholder="请输入注册邮箱地址" />
<hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
<hagerInput type="username" v-model="username" placeholder="请输入姓名" />
<hagerInput type="tel" v-model="tel" placeholder="请输入联系电话" />
<hagerInput type="corp" v-model="corp" placeholder="请输入公司名称" />
<hagerInput type="department" v-model="department" placeholder="请输入所属部门和职位" />
<!-- TODO: 记住密码和忘记密码业务显示的问题？ -->
<div class="pwd-box">
<div><el-checkbox v-model="checked">记住密码</el-checkbox></div>
<div><span>忘记密码？</span></div>
</div>
</div>
<div class="login-footer">
<div class="submit-btn" @click="onSubmit">提交</div>
<div class="submit-btn" @click="onSubmit">立即登录</div>
<div class="login-subsidiary">
<div class="privacy"><span>隐私政策</span></div>
<div class="login">已有账号，<span>立即登录</span></div>
<div class="login">没有账号，<span @click="goToRegister">注册新账号</span></div>
</div>
</div>
</div>
......@@ -34,12 +34,9 @@ export default {
mixins: [mixin.init],
data () {
return {
email: '1111111',
email: '',
pwd: '',
username: '',
tel: '',
corp: '',
department: '',
checked: false
}
},
mounted () {
......@@ -48,6 +45,9 @@ export default {
methods: {
onSubmit () {
console.warn();
},
goToRegister () {
this.$router.push('/user/register');
}
}
}
......@@ -55,13 +55,28 @@ export default {
<style lang="less" scoped>
.hager-login-page {
padding: 2rem 0.5rem;
padding: 2rem 0.5rem 0;
.input-title {
color: @secondary-color;
font-weight: bold;
font-size: 1.25rem;
text-align: center;
}
.pwd-box {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
font-size: 0.85rem;
padding-left: 1rem;
span {
color: @primary-color;
font-weight: bold;
&:hover {
cursor: pointer;
}
}
}
.submit-btn {
background-color: @secondary-color;
color: #FFF;
......@@ -75,8 +90,7 @@ export default {
.login-footer {
padding: 0 1rem 1rem 2rem;
.login-subsidiary {
display: flex;
justify-content: space-between;
text-align: center;
font-size: 0.85rem;
margin-top: 1rem;
span {
......@@ -96,4 +110,13 @@ export default {
}
}
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
background-color: #009FE5;
border-color: #009FE5;
}
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
color: #009FE5;
}
</style>
......
<!--
* @Date: 2024-10-18 17:57:33
* @Date: 2024-10-18 18:00:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 17:59:14
* @FilePath: /hager/src/views/login/register.vue
* @LastEditTime: 2024-10-20 12:06:47
* @FilePath: /hager/src/views/user/register.vue
* @Description: 文件描述
-->
<template>
<div class="hager-register-page"></div>
<div class="hager-register-page">
<div class="input-title">用户注册</div>
<div style="padding: 1rem;">
<hagerInput type="email" required v-model="email" placeholder="请输入注册邮箱地址" />
<hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
<hagerInput type="username" v-model="username" placeholder="请输入姓名" />
<hagerInput type="tel" v-model="tel" placeholder="请输入联系电话" />
<hagerInput type="corp" v-model="corp" placeholder="请输入公司名称" />
<hagerInput type="department" v-model="department" placeholder="请输入所属部门和职位" />
</div>
<div class="register-footer">
<div class="submit-btn" @click="onSubmit">提交</div>
<div class="register-subsidiary">
<div class="privacy"><span>隐私政策</span></div>
<div class="login">已有账号，<span @click="goToLogin">立即登录</span></div>
</div>
</div>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerInput from '@/components/common/hagerInput.vue';
export default {
mixins: [mixin.init],
data () {
return {
email: '',
pwd: '',
username: '',
tel: '',
corp: '',
department: '',
}
},
mounted () {
},
methods: {
onSubmit () {
console.warn();
},
goToLogin () {
this.$router.push('/user/login');
}
}
}
</script>
<style lang="less" scoped>
.hager-register-page {
padding: 2rem 0.5rem 0;
box-sizing: border-box;
.input-title {
color: @secondary-color;
font-weight: bold;
font-size: 1.25rem;
text-align: center;
}
.submit-btn {
background-color: @secondary-color;
color: #FFF;
padding: 0.5rem 1rem;
text-align: center;
border-radius: 5px;
&:hover {
cursor: pointer;
}
}
.register-footer {
padding: 0 1rem 1rem 2rem;
.register-subsidiary {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
margin-top: 1rem;
span {
color: @primary-color;
text-decoration: underline;
font-weight: bold;
&:hover {
cursor: pointer;
}
}
.privacy {
}
.login {
}
}
}
}
</style>
......