Kane
/
vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

保存进度！

This commit is contained in:
Kane 2022-12-14 22:41:46 +08:00
parent c469cb139f
commit a39c174cf4
1 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
企业级管理系统/前端/admin_system/src/views/account/Login.vue
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-12-14 15:23:54 * @Date: 2022-12-14 15:23:54
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-12-14 21:23:51 * @LastEditTime: 2022-12-14 22:39:54
* @FilePath: \admin_system\src\views\account\Login.vue * @FilePath: \admin_system\src\views\account\Login.vue
* @Description: * @Description:
* *
@ -20,11 +20,15 @@
<el-form ref="form" :model="form"> <el-form ref="form" :model="form">
<el-form-item> <el-form-item>
<label class="form-label">用户名</label> <label class="form-label">用户名</label>
<el-input type="text" v-model="loginForm.username"></el-input> <el-input type="text" v-model.lazy.trim="loginForm.username"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<label class="form-label">密码</label> <label class="form-label">密码</label>
<el-input type="password" v-model="loginForm.password"></el-input> <el-input type="password" v-model.lazy.trim="loginForm.password"></el-input>
</el-form-item>
<el-form-item v-show="current_menu === tab_menu[1].type">
<label class="form-label">确认密码</label>
<el-input type="password" v-model.lazy.trim="loginForm.confirm_password"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<label class="form-label">验证码</label> <label class="form-label">验证码</label>
@ -47,7 +51,6 @@
<script> <script>
// import { ref } from "vue"; // import { ref } from "vue";
export default { export default {
name: "loginPage", name: "loginPage",
data() { data() {
@ -55,12 +58,13 @@ export default {
loginForm: { loginForm: {
username: "", username: "",
password: "", password: "",
confirm_password: "",
}, },
tab_menu: [ tab_menu: [
{ type: "login", label: "登录" }, { type: "login", label: "登录" },
{ type: "regiester", label: "注册" }, { type: "regiester", label: "注册" },
], ],
current_menu: "login", current_menu: "",
} }
}, },
methods: { methods: {
@ -68,10 +72,14 @@ export default {
this.current_menu = type; this.current_menu = type;
} }
}, },
created() {
//初始化菜单选项
this.current_menu = this.tab_menu[0].type;
}
}; };
</script> </script>
<style lang="scss" scoped> <style scoped>
#login { #login {
height: 100vh; height: 100vh;
background-color: #344a5f; background-color: #344a5f;
@ -86,7 +94,7 @@ export default {
border-radius: 5px; border-radius: 5px;
} }
.menu-tab { /*.menu-tab {
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
@ -103,6 +111,24 @@ export default {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
} }
}*/
.menu-tab {
text-align: center;
margin-bottom: 15px;
}
.menu-tab li {
display: inline-block;
padding: 10px 24px;
margin: 0 10px;
color: #fff;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.menu-tab .current {
background-color: rgba(0, 0, 0, 0.1);
} }
.form-label { .form-label {
@ -112,7 +138,6 @@ export default {
} }
.el-button-block { .el-button-block {
// display: block;
width: 100%; width: 100%;
} }
</style> </style>