效果图：
// 这里设置默认初始步骤
StepContentFn('.starBox', "已申请:杨博:2020/2/3:已申请审批意见, 已立项:杨博:2020/5/5:已立项审批意见, 实施中:张三:2020/5/9:实施中意见, 等待中:杨博:2020/6/6:等待中审批意见,已完结:杨博:2020/6/6:已完结审批意见,zzz:涂磊:2023/6/6:new添加", '等待中');
如有添加，在后面 按格式 ,zzz:涂磊:2023/6/6:new添加
即可
1.添加一个UniHTMLFrame1到窗口，设置 其HTML属性为
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>jQuery动态数据流程步骤条特效</title>
</head>
<body>
<div class="starBox"></div>
<script type="text/javascript">
//步骤条控件
function StepContentFn(tag, stepContent, status) {
var descriptionValue = stepContent.indexOf(",") == -1 ? $(stepContent).val() : stepContent;
if (descriptionValue) {
var desplit = descriptionValue.split(",");
var temp = -1;
var isActiveValue = "is_finish"
var applyStatus = $(status).val() ? $(status).val() : status;
var mainStep = "<div class='control_processSteps'>";
for (let i = 0; i < desplit.length; i++) {
var desplitItem = desplit[i].split(":");
if ($.trim(desplitItem[0]) == $.trim(applyStatus)) {
temp = i;
}
mainStep += "<div class='processStep'><div class='step_head'><div class='step_line'></div><div class='step_icon_inner'>" + (i + 1) + "</div></div><div class='step_main'><div class='step_title'>" + desplitItem[0] + "</div><div class='step_description'><div>审批人：" + desplitItem[1] + "</div><div>审批时间：" + desplitItem[2] + "</div><div>审批意见：" + desplitItem[3] + "</div></div></div></div>"
}
mainStep += "</div>"
$(tag).prepend(mainStep);
for (i = 0; i < desplit.length; i++) {
if (temp >= i) {
isActiveValue = "is_finish";
$(".processStep").eq(i).find(".step_line").addClass("step_line_active");
} else if (temp == i - 1) {
isActiveValue = "is_process";
} else if (temp < i - 1) {
isActiveValue = "is_wait";
}
$(".processStep").eq(i).find(".step_head").addClass(isActiveValue);
$(".processStep").eq(i).find(".step_main>div").addClass(isActiveValue);
}
}
}
// 这里设置默认初始步骤
StepContentFn('.starBox', "已申请:杨博:2020/2/3:已申请审批意见, 已立项:杨博:2020/5/5:已立项审批意见, 实施中:张三:2020/5/9:实施中意见, 等待中:杨博:2020/6/6:等待中审批意见,已完结:杨博:2020/6/6:已完结审批意见,zzz:涂磊:2023/6/6:new添加", '等待中');
</script>
</body>
</html>
2添加CSS
在ServerModule的
@charset "utf-8";
.starBox{margin:100px auto;width:630px;}
.control_processSteps {
display: flex;
white-space: nowrap;
}
.processStep {
display: inline-block;
position: relative;
flex-shrink: 1;
flex-basis: 50%;
margin-right: 0px;
}
.step_main {
position: relative;
white-space: normal;
text-align: left;
}
/* 线条 */
.step_line {
position: absolute;
height: 4px;
top: 10px;
left: 0;
right: 0;
border-color: inherit;
background-color: #c0c4cc;
}
.processStep:last-of-type .step_line {
display: none;
}
.step_icon_inner {
position: relative;
z-index: 1;
display: inline-flex;
justify-content: center;
width: 24px;
height: 24px;
box-sizing: border-box;
border: 2px solid;
border-radius: 50%;
text-align: center;
font-weight: 700;
align-items: center;
font-size: 14px;
background: #fff;
}
.step_title {
font-size: 16px;
line-height: 38px;
cursor: pointer;
}
.step_description {
display: none;
position: absolute;
margin-top: -5px;
font-size: 12px;
line-height: 20px;
font-weight: 400;
background: #fff;
box-shadow: 0px 4px 4px #ccc;
border-radius: 5px;
padding: 10px;
z-index: 99;
}
.step_line_active {
background-color: #409eff;
}
/* 已完结状态 */
.is_finish {
color: #409eff;
border-color: #409eff;
}
.is_process {
color: #303133;
border-color: #303133;
}
.is_wait {
color: #c0c4cc;
border-color: #c0c4cc;
}
.step_main:hover .step_title+.is_finish {
display: inline-block;
}
标签：58,进度条,color,step,2020,var,line,border,uniGUI From： https://www.cnblogs.com/tulater/p/17110159.html