移动端登录页面-vue

1. <template>
2. <div class="login_container">
3. <div class="login_box">
4. <!-- 头像区域 -->
5. <div class="avatar_box">
6. <img src="../assets/头像.png" alt="">
7. </div>
8. 
9. <!-- 登录表单区域 -->
10. <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="auto" class="login_form" >
11. 
12. <!-- 用户名 （prop指定验证规则） -->
13. <el-form-item prop="username" >
14. <el-input v-model="loginForm.username"   placeholder="name"></el-input>
15. </el-form-item>
16. <br>
17. <!-- 密码  -->
18. <el-form-item prop="password" >
19. <el-input v-model="loginForm.password"  type="password" placeholder="password" show-password></el-input>
20. </el-form-item>
21. <br>
22. 
23. <!-- 按钮区域 -->
24. <el-form-item class="btns" password = "buttonClass">
25. <button type="primary" @click="login" >登录</button>
26. </el-form-item>
27. </el-form>
28. 
29. </div>
30. </div>
31. </template>
32. 
33. <script>
34. export default {
35.   data() {
36. return {
37. // 这是登录表单的数据绑定对象
38.       loginForm: {
39.         username: '',
40.         password: ''
41.       },
42. // 这是表单的验证规则对象
43.       loginFormRules: {
44. // 验证用户名是否合法
45.         username: [
46.           { required: true, message: '请输入登录名称', trigger: 'blur' }, //鼠标失去焦点的时候触发
47.           { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
48.         ],
49. // 验证密码是否合法
50.         password: [
51.           { required: true, message: '请输入登录密码', trigger: 'blur' },
52.           { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
53.         ]
54.       }
55.     }
56.   },
57.   methods: {
58.     login() {
59.       this.$refs.loginFormRef.validate(async valid => {
60. // console.log(valid);
61. if (!valid) return
62.         const { data: res } = await this.$http.post('login', this.loginForm)
63. if (res.meta.status !== 200) return this.$message.error('登录失败！')
64.         this.$message.success('登录成功')
65. // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
66. //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
67. //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
68.         window.sessionStorage.setItem('token', res.data.token)
69. // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
70.         this.$router.push('./home/index')
71.       })
72.     }
73. 
74.   }
75. }
76. </script>
77. 
78. <style lang="less" scoped>
79. .login_container {
80.   background-image:url(../assets/2.jpg);
81.   font-size: 16px;
82.   background-color: white;
83.   height: 100%;
84.   background-size:100% 100%;
85. }
86. 
87. /deep/ .el-input__inner {
88.   font-size: 40px !important;
89.   height: 100px;
90.   border-radius:20px;
91. }
92. 
93. 
94. .login_box {
95.   width: 80%;
96.   height: 1000px;
97.   border-radius: 3px;
98.   position: relative;
99. left: 50%;
100. top: 50%;
101.   transform: translate(-50%, -50%);
102. 
103.   .avatar_box {
104.     height: 200px;
105.     width: 200px;
106.     border: 1px solid #eee;
107.     border-radius: 50%;
108.     padding: 10px;
109.     box-shadow: 0 0 10px #ddd;
110.     position: absolute;
111. left: 50%;
112.     transform: translate(-50%, -50%);
113.     background-color: black;
114.     img {
115.       width: 100%;
116.       height: 100%;
117.       border-radius: 50%;
118.     }
119. 
120.   }
121. }
122. 
123. .login_form {
124.   position: absolute;
125. bottom: 300px;
126.   width: 100%;
127.   box-sizing: border-box;
128. }
129. 
130. .btns {
131.   width: 100%;
132.   height: 100px;
133.   button {
134.     border:none;
135.     border-radius:20px;
136.     height: 100px;
137.     width: 100%;
138.     justify-content: center;
139.     color: black;
140.     background-color: #50E3CE;
141.     font-size: 40px
142.   }
143. }
144. 
145. </style>