写一个员工管理系统的前端页面
时间: 2024-01-10 19:03:41 浏览: 90
前后端分离员工管理系统,后端采用SpringBoot+MyBatis,前端采用Vue+ElementUI.zip
好的,以下是一个简单的员工管理系统的前端页面,包括员工列表、添加员工、编辑员工和删除员工等功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工管理系统</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
color: #333;
font-weight: bold;
}
form {
margin: 20px 0;
}
input[type="text"], input[type="email"], input[type="tel"] {
padding: 6px;
border-radius: 4px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
font-size: 16px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.btn-danger {
background-color: #f44336;
color: white;
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.btn-danger:hover {
background-color: #da190b;
}
</style>
</head>
<body>
<h1>员工管理系统</h1>
<h2>员工列表</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 这里使用模板引擎或者前端框架来循环输出员工列表 -->
<tr>
<td>1</td>
<td>张三</td>
<td>zhangsan@example.com</td>
<td>13812345678</td>
<td>
<button class="btn-edit">编辑</button>
<button class="btn-delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>lisi@example.com</td>
<td>13912345678</td>
<td>
<button class="btn-edit">编辑</button>
<button class="btn-delete">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加员工</h2>
<form id="form-add">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" required>
<input type="submit" value="添加">
</form>
<h2>编辑员工</h2>
<form id="form-edit">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" required>
<input type="submit" value="保存">
<button class="btn-danger">删除</button>
</form>
<script>
// 这里使用 JavaScript 或者 jQuery 来实现添加员工、编辑员工和删除员工的功能
</script>
</body>
</html>
```
这个页面使用了 HTML、CSS 和 JavaScript(或者 jQuery)来实现。在员工列表中,我们使用了表格来展示员工的信息,并添加了编辑和删除按钮来进行相关操作。在添加员工和编辑员工的表单中,我们使用了表单元素来收集员工的信息,并添加了提交按钮和删除按钮来进行相关操作。在实际开发中,我们需要将这个前端页面与后端数据进行连接,来实现真正的员工管理系统。
阅读全文