~~
人事管理系统（一）
~~
使用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