<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生产线步骤流程</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.process-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.process-header {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.process-steps {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 50px;
}
.process-steps::before {
content: '';
position: absolute;
top: 15px;
left: 0;
right: 0;
height: 3px;
background: #ddd;
z-index: 1;
}
.step {
position: relative;
z-index: 2;
text-align: center;
width: 20%;
}
.step-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: #ddd;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
transition: all 0.3s;
}
.step.active .step-circle {
background: #4CAF50;
}
.step.completed .step-circle {
background: #2196F3;
}
.step-title {
font-size: 14px;
margin-bottom: 5px;
}
.step-description {
font-size: 12px;
color: #666;
min-height: 60px;
}
.process-controls {
text-align: center;
margin-top: 30px;
}
button {
padding: 8px 20px;
margin: 0 10px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background: #cccccc;
cursor: not-allowed;
}
.website-link {
text-align: center;
margin: 30px 0;
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="process-container">
<h1 class="process-header">生产线流程管理系统</h1>
<div class="process-steps">
<div class="step active" data-step="1">
<div class="step-circle">1</div>
<div class="step-title">原材料准备</div>
<div class="step-description">检查并准备生产所需原材料</div>
</div>
<div class="step" data-step="2">
<div class="step-circle">2</div>
<div class="step-title">加工处理</div>
<div class="step-description">对原材料进行初步加工处理</div>
</div>
<div class="step" data-step="3">
<div class="step-circle">3</div>
<div class="step-title">组装</div>
<div class="step-description">将各部件组装成完整产品</div>
</div>
<div class="step" data-step="4">
<div class="step-circle">4</div>
<div class="step-title">质量检测</div>
<div class="step-description">对成品进行质量检测</div>
</div>
<div class="step" data-step="5">
<div class="step-circle">5</div>
<div class="step-title">包装出货</div>
<div class="step-description">包装成品并准备出货</div>
</div>
</div>
<div class="process-controls">
<button id="prev-btn" disabled>上一步</button>
<button id="next-btn">下一步</button>
<button id="reset-btn">重置</button>
</div>
<div class="website-link">
</div>
</div>
<script>
$(document).ready(function() {
var currentStep = 1;
var totalSteps = $('.step').length;
// 更新步骤状态
function updateSteps() {
$('.step').each(function() {
var stepNum = parseInt($(this).data('step'));
$(this).removeClass('active completed');
if (stepNum === currentStep) {
$(this).addClass('active');
} else if (stepNum < currentStep) {
$(this).addClass('completed');
}
});
// 更新按钮状态
$('#prev-btn').prop('disabled', currentStep === 1);
$('#next-btn').prop('disabled', currentStep === totalSteps);
}
// 下一步按钮点击事件
$('#next-btn').click(function() {
if (currentStep < totalSteps) {
currentStep++;
updateSteps();
}
});
// 上一步按钮点击事件
$('#prev-btn').click(function() {
if (currentStep > 1) {
currentStep--;
updateSteps();
}
});
// 重置按钮点击事件
$('#reset-btn').click(function() {
currentStep = 1;
updateSteps();
});
// 初始化
updateSteps();
});
</script>
</body>
</html>
扫一扫
1535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
