前端 如何用 div 标签实现 步骤审批
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>步骤审批流程</title>
<style>
.approval-flow {
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.step {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
font-size: 14px;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
.step p {
margin: 0;
}
/* 步骤状态 */
.pending {
background-color: gray;
}
.approved {
background-color: green;
}
.rejected {
background-color: red;
}
/* 箭头连接线 */
.arrow {
position: absolute;
top: 50%;
width: 50px;
height: 3px;
background-color: gray;
left: 100%;
margin-left: 10px;
transform: translateY(-50%);
}
.arrow-right {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="approval-flow">
<div class="step pending" id="step1" onclick="changeStatus(1)">
<p>步骤1</p>
</div>
<div class="arrow"></div>
<div class="step pending" id="step2" onclick="changeStatus(2)">
<p>步骤2</p>
</div>
<div class="arrow"></div>
<div class="step pending" id="step3" onclick="changeStatus(3)">
<p>步骤3</p>
</div>
</div>
<script>
let currentStep = 1;
// 改变步骤的状态
function changeStatus(step) {
if (step < currentStep) return; // 如果点击的步骤是已完成的，不能点击
const stepElement = document.getElementById('step' + step);
if (step === currentStep) {
stepElement.classList.remove('pending');
stepElement.classList.add('approved'); // 当前步骤通过
currentStep++; // 前进到下一个步骤
}
}
</script>
</body>
</html>