2021-08-26

最新推荐文章于 2024-07-24 14:20:14 发布

铁壁阿童木v。

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量113

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_44384942/article/details/119933581

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

流程图：

<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>

<style>
	/*common css*/
	.stepPage {
		display: none;
		height: 100%;
	}

	.stepCont {
		width: 92%;
	}

	.ystep-container {
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB",
		"Wenquanyi Micro Hei", "Microsoft Yahei", Arial, sans-serif;
		display: inline-block;
		position: relative;
		color: #000;
		margin: 20px;
	}

	.ystep-container ul {
		list-style: none;
	}

	.ystep-container ul, .ystep-container li, .ystep-container p {
		margin: 0;
		padding: 0;
	}

	/*size css*/
	.ystep-lg {
		/*width: 700px;*/
		width: 100%;
		height: 60px;
		font-size: 18px;
		/*left: 15%;*/
		line-height: .3;
	}

	/*large size css*/
	.ystep-lg .ystep-container-steps {
		position: absolute;
		top: 2px;
		cursor: pointer;
		z-index: 10;
	}

	.ystep-lg li {
		float: left;
		width: 100px;
		height: 85px;
		margin-right: 100px;
	}

	.ystep-lg .ystep-step-done {
		background-position: -278px -132px;
	}

	.ystep-lg .ystep-step-undone {
		background-position: -137px -131px;
	}

	.ystep-lg .ystep-step-active {
		background-position: -414px -131px;
	}

	.ystep-lg .ystep-progress {
		width: 400px;
		height: 10px;
		position: absolute;
		top: 30px;
		left: 15px;
		float: left;
		margin-right: 10px;
		overflow: hidden;
	}

	.ystep-lg .ystep-progress-bar {
		width: 400px;
		height: 20px;
		background: #e4e4e4;
		display: inline-block;
		float: left;
	}

	.ystep-lg .ystep-progress-highlight {
		height: 20px;
		display: block;
	}

	/*blue css*/
	.ystep-blue .ystep-step-done {
		background-image: url("/img/pointes_blue.png");
		background-repeat: no-repeat;
	}

	.ystep-blue .ystep-step-undone {
		background-image: url("/img/pointes_blue.png");
		background-repeat: no-repeat;
		color: #9c9a9b;
	}

	.ystep-blue .ystep-step-active {
		background-image: url("/img/pointes_blue.png");
		background-repeat: no-repeat;
		color: #3276b1;
	}

	.ystep-blue .ystep-progress-highlight {
		background: #60baff;
	}

	/*鎸夐挳鏍峰紡*/
	.ystep {
		padding: 20px;
		/*min-width: 1114px;*/
	}

	.step-button {
		position: relative;
		/*top: -85px;*/
	}

	.step-button button {
		margin: 15px;
	}

	/* 计步器  */
	/*span {
		display: inline-block;
	}*/

	.ccbg {
		display: block;
		width: 2px;
		left: 10%;
		margin-top: 30px;
		margin-bottom: 30px;
		height: 80%;
		border-radius: 5px;
		position: relative;
		background: #CCCCCC;
		z-index: 1;
	}

	/*x是横线*/
	.x {
		display: inline-block;
		width: 2px;
		height: 100%;
		/*display: flex;*/
		/* background: crimson; */
	}

	/*开头结尾的横线*/
	.Xa, .Xb, .Xc, .Xd, .Xe {
		display: inline-block;
		/*margin-top: 15px;*/
		width: 2px;
		height: 19%;
	}


	/*.Xa,
	.Xa, {
		display: inline-block;
		margin-top: 15px;
		!*flex: 1;*!
		!* width: 20%; *!
		!* background: cadetblue; *!
		z-index: 2;
	}

	!*中间的横线*!

	.Xb, .Xc, .Xd, .Xe, .Xf, .Xg, .Xh {
		display: inline-block;
		margin-top: 15px;

		!*flex: 3;*!
		!* width: 80%; *!
		!* background: rgb(150, 201, 12); *!
		z-index: 2;
	}*/

	/*圆点*/
	.a, .b, .c, .d, .e, .f {
		width: 20px;
		height: 20px;
		left: -9px;
		background: #CCCCCC;
		/* flex: 1; */
		border-radius: 20px;
		position: absolute;
	}

	/*圆点的位置*/
	.a {
		/*top: 1%;*/
		transform: translateY(-50%);
		z-index: 3;
	}

	.b {
		top: 20%;
		transform: translateX(-50%);
		transform: translateY(-50%);
		z-index: 3;
	}

	.c {
		top: 40%;
		transform: translateX(-50%);
		transform: translateY(-50%);
		z-index: 3;
	}

	.d {
		top: 60%;
		transform: translateX(-50%);
		transform: translateY(-50%);
		z-index: 3;
	}

	.e {
		top: 80%;
		transform: translateX(-50%);
		transform: translateY(-50%);
		z-index: 3;
	}

	.f {
		top: 100%;
		transform: translateX(-50%);
		transform: translateY(-50%);
		z-index: 3;
	}

	/*字体*/
	.Texta, .Textb, .Textc, .Textd, .Texte, .Textf {
		position: absolute;
		/*top: -50px;*/
		color: #999999;
		width: 150px;
	}

	/*字体位置*/
	.Texta {
		left: 1000%;
		top: -5%;
	}

	.Textb {
		left: 1000%;
		top: 15%;
		/*transform: translateX(-50%);*/
	}

	.Textc {
		left: 1000%;
		top: 35%;
		/*transform: translateX(-50%);*/
	}

	.Textd {
		left: 1000%;
		top: 55%;
		/*transform: translateX(-50%);*/
	}

	.Texte {
		left: 1000%;
		top: 75%;
		/*transform: translateX(-50%);*/
	}

	.Textf {
		left: 1000%;
		top: 97%;
		/*transform: translateX(-50%);*/
	}

</style>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">

			<input id="A" name="A" th:value="${A}" type="hidden">
			<input id="B" name="B" th:value="${B}" type="hidden">

			<div class="stepCont stepCont2" style="text-align:center;position:fixed;top:0;bottom: 0;padding-top:10px;background:#f3f3f4;z-index:99;height:100%;">
								<!--竖线-->
						        <span class="ccbg">
						        <span class="x">
								<span class="Xa" id="Xaa"></span>
						        <span class="Xb" id="Xbb"></span>
						        <span class="Xc" id="Xcc"></span>
						        <span class="Xd" id="Xdd"></span>
								<span class="Xe" id="Xee"></span>
						        </span>

								<!--字体-->
						        <span class="Texta" id="Ta" style="text-align: left">
									<div>创建人:
										<span id="createUser" name="createUser" th:text="${turnDO.createUser}"></span>
									</div>
									<div>创建时间:
										<span id="createDate" th:text="${#dates.format(turnDO.createDate,'yyyy-MM-dd')}"></span>
									</div>
								</span>
						        <span class="Textb" id="Tb" style="text-align: left">
									<div>分解人:
										<span id="decUser" name="decUser" th:text="${turnDO.decUser}"></span>
									</div>
									<div>分解时间:
										<span id="decDate" name="decDate" th:text="${#dates.format(turnDO.decDate,'yyyy-MM-dd')}">待分解</span>
									</div>
								</span>
						        <span class="Textc" id="Tc" style="text-align: left">
									<div>辨识人:
										<span id="ideUser" name="ideUser" th:text="${turnDO.ideUser}"></span>
									</div>
									<div>辨识时间:
										<span id="ideDate" name="ideDate" th:text="${#dates.format(turnDO.ideDate,'yyyy-MM-dd')}">待辨识</span>
									</div>
								</span>
								<span class="Textd" id="Td" style="text-align: left">
									<div>评价人:
										<span id="evaUser" th:text="${turnDO.evaUser}"></span>
									</div>
									<div>评价时间:
										<span id="evaDate" th:text="${#dates.format(turnDO.evaDate,'yyyy-MM-dd')}">待评价</span>
									</div>
								</span>
						        <span class="Texte" id="Te" style="text-align: left">
									<div>审核人:
										<span id="examUser" th:text="${turnDO.examUser}"></span>
									</div>
									<div>审核时间:
										<span id="examDate" th:text="${#dates.format(turnDO.examDate,'yyyy-MM-dd')}">待审核</span>
									</div>
								</span>
						        <span class="Textf" id="Tf" style="text-align: left">
									<div>结束</div>
								</span>

									<!--圆点-->
									<span class="a" id="Ya"></span>
                                    <span class="b" id="Yb"></span>
                                    <span class="c" id="Yc"></span>
                                    <span class="d" id="Yd"></span>
                                    <span class="e" id="Ye"></span>
                                    <span class="f" id="Yf"></span>
						        </span>
				<!--<input th:value="${companyCheckDanger.status}" id="statusData" type="hidden">-->

			</div>

        </div>
    </div>
</div>
<script type="text/javascript" src="/js/appjs/riskPlan/evaluation/riskplanPlan/tree.js"></script>
</body>
</html>

js:
var a=document.getElementById(“A”).value;
var b=document.getElementById(“B”).value;

console.log(“a:”+a)
console.log(“b:”+b)

if(0a || 1a || (2a && 1b) || (3a && 1b)){
//添加未发布
document.getElementById(“Ta”).style.color=’#000000’;
document.getElementById(“Ya”).style.backgroundColor=’#006dcd’;
}else if(2a && 2b){
document.getElementById(“Ta”).style.color=’#000000’;
document.getElementById(“Tb”).style.color=’#000000’;
document.getElementById(“Ya”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yb”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xaa”).style.backgroundColor=’#006dcd’;
}else if(2a && 3b){
document.getElementById(“Ta”).style.color=’#000000’;
document.getElementById(“Tb”).style.color=’#000000’;
document.getElementById(“Tc”).style.color=’#000000’;
document.getElementById(“Ya”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yb”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yc”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xaa”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xbb”).style.backgroundColor=’#006dcd’;
}else if(2a && 4b){
document.getElementById(“Ta”).style.color=’#000000’;
document.getElementById(“Tb”).style.color=’#000000’;
document.getElementById(“Tc”).style.color=’#000000’;
document.getElementById(“Td”).style.color=’#000000’;
document.getElementById(“Ya”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yb”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yc”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yd”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xaa”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xbb”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xcc”).style.backgroundColor=’#006dcd’;
}else if(2a && 5b){
document.getElementById(“Ta”).style.color=’#000000’;
document.getElementById(“Tb”).style.color=’#000000’;
document.getElementById(“Tc”).style.color=’#000000’;
document.getElementById(“Td”).style.color=’#000000’;
document.getElementById(“Te”).style.color=’#000000’;
document.getElementById(“Ya”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yb”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yc”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yd”).style.backgroundColor=’#006dcd’;
document.getElementById(“Ye”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xaa”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xbb”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xcc”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xdd”).style.backgroundColor=’#006dcd’;
}else{
document.getElementById(“Ta”).style.color=’#000000’;
document.getElementById(“Tb”).style.color=’#000000’;
document.getElementById(“Tc”).style.color=’#000000’;
document.getElementById(“Td”).style.color=’#000000’;
document.getElementById(“Te”).style.color=’#000000’;
document.getElementById(“Tf”).style.color=’#000000’;
document.getElementById(“Ya”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yb”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yc”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yd”).style.backgroundColor=’#006dcd’;
document.getElementById(“Ye”).style.backgroundColor=’#006dcd’;
document.getElementById(“Yf”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xaa”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xbb”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xcc”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xdd”).style.backgroundColor=’#006dcd’;
document.getElementById(“Xee”).style.backgroundColor=’#006dcd’;
}
效果：
在这里插入图片描述

铁壁阿童木v。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-26

流程图：<!DOCTYPE html><html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"><meta charset="utf-8"><head th:include="include :: header"></head><style> /*common
复制链接

扫一扫