hookehuyr

新增用户注册页面

1 +<!--
2 + * @Date: 2024-10-18 18:00:47
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-20 11:19:46
5 + * @FilePath: /hager/src/views/user/login.vue
6 + * @Description: 文件描述
7 +-->
1 <template> 8 <template>
2 <div class="hager-login-page"> 9 <div class="hager-login-page">
3 - <div>用户注册</div> 10 + <div class="input-title">用户注册</div>
4 - <div> 11 + <div style="padding: 1rem;">
5 - 12 + <hagerInput type="email" required disable 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="login-footer">
20 + <div class="submit-btn" @click="onSubmit">提交</div>
21 + <div class="login-subsidiary">
22 + <div class="privacy"><span>隐私政策</span></div>
23 + <div class="login">已有账号,<span>立即登录</span></div>
24 + </div>
6 </div> 25 </div>
7 </div> 26 </div>
8 </template> 27 </template>
9 28
10 <script> 29 <script>
11 import mixin from 'common/mixin'; 30 import mixin from 'common/mixin';
31 +import hagerInput from '@/components/common/hagerInput.vue';
12 32
13 export default { 33 export default {
14 mixins: [mixin.init], 34 mixins: [mixin.init],
15 data () { 35 data () {
16 return { 36 return {
17 - 37 + email: '1111111',
38 + pwd: '',
39 + username: '',
40 + tel: '',
41 + corp: '',
42 + department: '',
18 } 43 }
19 }, 44 },
20 mounted () { 45 mounted () {
21 46
22 }, 47 },
23 methods: { 48 methods: {
24 - 49 + onSubmit () {
50 + console.warn();
51 + }
25 } 52 }
26 } 53 }
27 </script> 54 </script>
28 55
29 <style lang="less" scoped> 56 <style lang="less" scoped>
30 .hager-login-page { 57 .hager-login-page {
58 + padding: 2rem 0.5rem;
59 + .input-title {
60 + color: @secondary-color;
61 + font-weight: bold;
62 + font-size: 1.25rem;
63 + text-align: center;
64 + }
65 + .submit-btn {
66 + background-color: @secondary-color;
67 + color: #FFF;
68 + padding: 0.5rem 1rem;
69 + text-align: center;
70 + border-radius: 5px;
71 + &:hover {
72 + cursor: pointer;
73 + }
74 + }
75 + .login-footer {
76 + padding: 0 1rem 1rem 2rem;
77 + .login-subsidiary {
78 + display: flex;
79 + justify-content: space-between;
80 + font-size: 0.85rem;
81 + margin-top: 1rem;
82 + span {
83 + color: @primary-color;
84 + text-decoration: underline;
85 + font-weight: bold;
86 + &:hover {
87 + cursor: pointer;
88 + }
89 + }
90 + .privacy {
31 91
92 + }
93 + .login {
94 +
95 + }
96 + }
97 + }
32 } 98 }
33 </style> 99 </style>
......