CSS实现竖向步骤条

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>微信:13009502995td>
        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>
<br>br>
<div class="steps-container">
    <div class="step">
        <div class="step-line">div>
        <div class="step-circle" >1div>
        <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">2div>
        <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;">3div>
        <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">4div>
        <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">5div>
        <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
在这里插入图片描述
相关阅读:
【笔者感悟】笔者的学习感悟【二】
Ubuntu离线或在线安装Python解释器
 python神经网络编程代码,python神经网络编程豆瓣
 基于Python开发的DIY字符画程序(源码+可执行程序exe文件+程序配置说明书+程序使用说明书)
tensor张量 ------ python特殊的数据结构
 一周速学SQL Server（第六天）
Nginx之正则表达式、location匹配及rewrite重写
 【OpenCV】级联分类器训练模型
 DHCP协议从入门到部署DHCP服务器进行实验
 引擎入门 | Unity UI简介–第2部分（4）
原文地址：https://blog.csdn.net/guoruijun_2012_4/article/details/133967903