CSS实现进度条和订单进度条---竖向

news2024/11/17 23:35:49

之前做了一个横向订单进度条，手机访问显示很难兼容样式，下面做一个竖向的，再结合情况微调一下，方便去兼容手机。

1.直接放页面

效果图

代码如下（示例）：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<head>
<style type="text/css">
/*--- ul li 横向展示 --------*/
.uls li {
	margin-left: 5px;
	margin-bottom: 10px;
	list-style: none;
}

.goodsInfo {
	float: left;
}

#index_text {
	font-size: 16px;
	margin-top: -70px;
}
/*---- 订单进度 ----*/
.steps-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	display: flex;
}

.step {
	position: relative;
	width: 100%;
	padding-bottom: 20px;
	padding-left: 70px; /* 圆点左侧的间距 */
}

.step.active .step-circle {
	background-color: teal;
	color: #fff;
}

.step-line1 {
	position: absolute;
	top: 10px;
	left: 30px; /* 线条左侧的位置 */
	width: 2px;
	height: 100%;
	background-color: #9D9D9D;
	z-index: -1; /* 线条位于圆点下方 */
}

.step-line2 {
	position: absolute;
	top: 10px;
	left: 30px; /* 线条左侧的位置 */
	width: 2px;
	height: 100%;
	background-color: #9D9D9D;
	z-index: -1; /* 线条位于圆点下方 */
}

.step-line3 {
	position: absolute;
	top: 10px;
	left: 30px; /* 线条左侧的位置 */
	width: 2px;
	height: 100%;
	background-color: #9D9D9D;
	z-index: -1; /* 线条位于圆点下方 */
}

.step-line4 {
	position: absolute;
	top: 10px;
	left: 30px; /* 线条左侧的位置 */
	width: 2px;
	height: 100%;
	background-color: #9D9D9D;
	z-index: -1; /* 线条位于圆点下方 */
}

.step:last-child .step-line {
	display: none; /* 最后一个步骤不需要线条 */
}

.step-circle1 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step-circle2 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step-circle3 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step-circle4 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step-circle5 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step.active .step-circle {
	background-color: teal;
	color: #fff;
}

.time {
	height: 50px;
}

.time span {
	width: 100px;
	font-size: 14px;
}
</style>
</head>
<body>
	<header class="header home"> </header>
	<div class="table_page">
		<ul class="uls">
			<li>
				<h5>商品列表</h5>
			</li>
			<li style="border-top: 1px solid #eeeeee;">
				<h5 style="height: 50px;">快递信息</h5>
				<div class="steps-container">
					<div class="step">
						<div class="step-line1"></div>
						<div class="step-circle1"></div>
						<div class="time">
							<span>下单</span>
							&nbsp;&nbsp;&nbsp;
							<span id="createTime">2023-05-12  成功下单啦</span>
						</div>
					</div>
					<div class="step">
						<div class="step-line2"></div>
						<div class="step-circle2"></div>
						<div class="time">
							<span>付款</span>
							&nbsp;&nbsp;&nbsp;
							<span id="payTime">2023-05-13 通过支付宝付款</span>
						</div>
					</div>
					<div class="step">
						<div class="step-line3"></div>
						<div class="step-circle3"></div>
						<div class="time">
							<span>配货</span>
							&nbsp;&nbsp;&nbsp;
							<span id="prepareTime">2023-05-14 商家已经在备货啦</span>
						</div>
					</div>
					<div class="step">
						<div class="step-line4"></div>
						<div class="step-circle4"></div>
						<div class="time">
							<span>出库</span>
							&nbsp;&nbsp;&nbsp;
							<span id="deliverTime">2023-05-15 您的快递已经发出啦，等着接收吧</span>
						</div>
					</div>
					<div class="step">
						<div class="step-line5"></div>
						<div class="step-circle5"></div>
						<div class="time">
							<span>收货</span>
							&nbsp;&nbsp;&nbsp;
							<span id="tradeTime">2023-05-16 客户已收货</span>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		var createTime = document.getElementById("createTime").innerText;
		var payTime = document.getElementById("payTime").innerText;
		var prepareTime = document.getElementById("prepareTime").innerText;
		var deliverTime = document.getElementById("deliverTime").innerText;
		var tradeTime = document.getElementById("tradeTime").innerText;

		if (createTime != null && createTime != '') {
			$(".step-line1").css("background-color", "#84C1FF");
			$(".step-circle1").css("background-color", "#84C1FF");
		}
		if (payTime != null && payTime != '') {
			$(".step-line2").css("background-color", "#84C1FF");
			$(".step-circle2").css("background-color", "#84C1FF");
		}
		if (prepareTime != null && prepareTime != '') {
			$(".step-line3").css("background-color", "#84C1FF");
			$(".step-circle3").css("background-color", "#84C1FF");
		}
		if (deliverTime != null && deliverTime != '') {
			$(".step-line4").css("background-color", "#84C1FF");
			$(".step-circle4").css("background-color", "#84C1FF");
		}
		if (tradeTime != null && tradeTime != '') {
			$(".step-line5").css("background-color", "#84C1FF");
			$(".step-circle5").css("background-color", "#84C1FF");
		}
	</script>
</body>
</html>