~~
人事管理系统（一）
~~
使用vue搭建前端，后端用springboot（一个软件工程的项目）
1.登录页面
背景采用黑金主题，让人事管理系统看上去更加大气
提供三种登录方法：
管理员登录可以拥有最高权限的操作，
用户登录可以进行基本的操作，
游客登录可以进入观看系统的功能
代码段
<template><div class="headerimg"><button class="okbtn">确定</button><button @click="returnclick" class="retbtn">取消</button><p class="username">请输入用户名:</p><p class="password">请输入密码:</p><p class="spassword">请确认密码:</p><p class="mobnum">请输入手机号码:</p><input type="text" class="userin"><input type="text" class="passin"><input type="text" class="passsure"><input type="text" class="mobin"></div></template>
<style scoped>div{position: relative;}p{position: absolute;height: 26px;width: 288px;color: #FFD700;font-size: 28px;}input{border: #BEBEBE solid 1px;background-color: black;border-radius: 5px;color: #FFFFCE;font-size: 22px;}.headerimg {width: 100%;height: 100%;background-size: 100% 100%;margin:-8px;position: fixed;background: url("../assets/7.jpg");}.username{left: 680px;top: 300px;}.password{left: 707px;top: 380px;}.userin{position: absolute;left: 780px;top: 335px;}.passin{position: absolute;left: 780px;top: 415px;}.regt{height: 26px;position: absolute;left: 1082px;top: 345px;background-color: black;color: #FF6347;border: 0;font-size: 15px;cursor: pointer;}.forget{height: 26px;position: absolute;left: 1082px;top: 425px;background-color: black;color: #FF6347;border: 0;font-size: 15px;cursor: pointer;}.password{position: absolute;}.pasg{position: absolute;left: 1110px;top: 550px;font-size: 36px;color: #fff;background-color: black;cursor: pointer;border: 0;}.usr{position: absolute;left: 870px;top: 550px;font-size: 36px;color: #fff;background-color: black;cursor: pointer;border: 0;}.mst{position: absolute;left: 598px;top: 550px;font-size: 36px;color: #fff;background-color: black;cursor: pointer;border: 0;}</style>
2.注册页面
依旧采用黑金的背景以及金色的字体，提供如下功能：
输入用户名，输入密码并确认密码
最后输入手机号进行注册（还没想过这个的具体实现逻辑），
然后判断输入是否符合要求（要求会加在输入框后面），
点击确认按钮提示注册成功并返回主页面，点击取消按钮直接返回主页面
代码段
<template><div class="headerimg"><button class="okbtn">确定</button><button @click="returnclick" class="retbtn">取消</button><p class="username">请输入用户名:</p><p class="password">请输入密码:</p><p class="spassword">请确认密码:</p><p class="mobnum">请输入手机号码:</p><input type="text" class="userin"><input type="text" class="passin"><input type="text" class="passsure"><input type="text" class="mobin"></div></template>
<style scoped>div{position: relative;}p{font-size: 32px;color: gold;}button{font-size: 40px;}input{border: #BEBEBE solid 1px;background-color: black;border-radius: 5px;color: #FFFFCE;font-size: 30px;}.headerimg {width: 100%;height: 100%;background-size: 100% 100%;margin:-8px;position: fixed;background: url("../assets/8.jpg");}.username{position: absolute;left: 500px;top:200px;}.password{position: absolute;left: 500px;top: 300px;}.spassword{position: absolute;left: 500px;top:400px;}.mobnum{position: absolute;left: 500px;top:500px;}.userin{position: absolute;left: 740px;top: 238px;}.passin{position: absolute;left: 740px;top: 338px;}.passsure{position: absolute;left: 740px;top: 438px;}.mobin{position: absolute;left: 740px;top: 538px;}.okbtn{position: absolute;left: 900px;top: 700px;color: gold;background-color: black;cursor: pointer;}.retbtn{position: absolute;left: 1050px;top: 700px;color: gold;background-color: black;cursor: pointer;}</style>
目前只做了这么多，总的来说就是加了许多的标签和按钮然后在div盒子中进行布局，感觉样式和布局的代码可以优化，但只考虑到页面中应该不会新增其他的标签按钮，所以将标签和按钮同样的样式进行了统一，如有不足，敬请指正QAQ
如果觉得《软件工程-人事管理系统项目（一）》对你有帮助，请点赞、收藏，并留下你的观点哦！
