<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.steps-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.step {
position: relative;
/*width: 100%;*/
padding-bottom: 20px;
padding-left: 70px; /* 圆点左侧的间距 */
}
.step.active .step-circle {
background-color: teal;
color: #fff;
}
.step-line {
position: absolute;
top: 0;
left: 20px; /* 线条左侧的位置 */
width: 2px;
height: 100%;
background-color: #ddd;
z-index: -1; /* 线条位于圆点下方 */
}
.step:last-child .step-line {
display: none; /* 最后一个步骤不需要线条 */
}
.step-circle {
position: absolute;
left: 0;
top: 20px;
transform: translateY(-50%);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background-color: #ddd;
text-align: center;
font-size: 14px;
color: #333;
}
.step.active .step-circle {
background-color: teal;
color: #fff;
}
#table1 {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
text-align:center;
}
#table1 td {
border: 0px solid #ccc;
padding: 2px;
text-align: left;
}
#table2 {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
text-align:center;
}
#table2 td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
img{
border-radius:50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div >
<table id = "table1">
<tr>
<td rowspan="3"><img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="70px" height="70px" ; /></td>
<td >蒙古穿婚纱布里亚特风</td>
</tr>
<tr>
<td >客户:乌里雅苏</td>
</tr>
<tr>
<td>微信:13009502995</td>
</tr>
</table>
<table id = "table2">
<tr>
<td >身高</td>
<td >体重</td>
<td >体重</td>
</tr>
<tr>
<td >身高</td>
<td >体重</td>
<td >体重</td>
</tr>
<tr>
<td >身高</td>
<td >体重</td>
<td ><a href="" style="color: red;">更多参数>></a></td>
</tr>
</table>
</div><!--//content-->
<br></br>
<div class="steps-container">
<div class="step">
<div class="step-line"></div>
<div class="step-circle" >1</div>
<div>
<h3 style = "color: black;"> 导购接单</h3>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="郭丙强" />郭丙强
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="于利"/>于利
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="测试1"/>测试1
</p>
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle">2</div>
<div>
<h3 style = "color: black;"> 裁剪派单</h3>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="郭丙强" />郭丙强
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="于利"/>于利
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="测试1"/>测试1
</p>
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle" style="background-color: red;">3</div>
<div>
<h3 style = "color: black;"> 缝纫派单</h3>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="刘金萍" />刘金萍
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="付丽云" />付丽云
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="惠建芳" />惠建芳
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="张爱玲" />张爱玲
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="张俊芳" />张俊芳
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="陈润红" />陈润红
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="测试2" />测试2
</p>
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle">4</div>
<div>
<h3 class="sub-title" style = "color: black;"> 钉扣派单</h3>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step03" value="Lkhagvasuren" />Lkhagvasuren
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step03" value="测试3" />测试3
</p>
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle">5</div>
<div>
<h3 class="sub-title" style = "color: black;"> 质检派单</h3>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step04" value="那日苏" />那日苏
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step04" value="测试4" />测试4
</p>
</div>
</div>
</div>
<div style="text-align: center;">
<button type="button" onclick="getCheckBox()" style="font-size: 20px; height:50px ;width: 400px; background-color: red;">确定派单</button>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
<script>
function workFlowView(){
window.open("http://39.104.17.29:7077/strutsJspAjax/index002.html");
}
function getCheckBox(){
var arr = new Array();
var arr01 = new Array();
var items = document.getElementsByName("step01");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr01.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr01.length==0){
alert("请选择第一步中的人员");
return;
}
var arr02 = new Array();
var items = document.getElementsByName("step02");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr02.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr02.length==0){
alert("请选择第二步中的人员");
return;
}
var arr03 = new Array();
var items = document.getElementsByName("step03");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr03.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr03.length==0){
alert("请选择第三步中的人员");
return;
}
var arr04 = new Array();
var items = document.getElementsByName("step04");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr04.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr04.length==0){
alert("请选择第四步中的人员");
return;
}
let that=this
let url = window.location.href
//let url = "http://www.menggu100.com:7077/strutsJspAjax/index001.html?orderIdByGrj=202308354657941354008000";
let p=url.split('?')[2]
let params=new URLSearchParams(p)
params.get('orderNo');
$.ajax({
type:"post",
url:"SendOrderAction?method=excuteAjax&personNames="+arr.toString()+"&orderNo="+params.get('orderNo'),
data:{//设置数据源
},
dataType:"json",//设置需要返回的数据类型
success:function(data){
var returnWebData = eval("("+data+")");//将数据转换成json类型，可以把data用alert()输出出来看看到底是什么样的结构
if(returnWebData.order_no=="yes"){
alert("已下发派遣任务！");
}else if(returnWebData.Warning=="insertSuccess"){
alert("下发派遣任务成功！");
}else{
}
},
error:function(){
//alert("系统异常，请稍后重试！");
}//这里不要加","
});
};
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
// 事件
util.on('lay-on', {
"test-confirm01": function(){
layer.confirm('确认该流程执行完毕？点击确定按钮后无法修改！', {icon: 3}, function(){
}, function(){
});
},
"test-confirm02": function(){
layer.confirm('确认该流程执行完毕？点击确定按钮后无法修改！', {icon: 3}, function(){
}, function(){
});
},
})
});
</script>
</body>
</html>
文章来源地址https://www.toymoban.com/news/detail-722418.html
文章来源：https://www.toymoban.com/news/detail-722418.html
到了这里，关于CSS实现竖向步骤条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
