之前做了一个横向订单进度条,手机访问显示很难兼容样式,下面做一个竖向的,再结合情况微调一下,方便去兼容手机。
1.直接放页面
代码如下(示例):文章来源:https://www.toymoban.com/news/detail-514787.html
<!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>
<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>
<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>
<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>
<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>
<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>
说明:根据后台获取的时间判断是否给按钮、线条上色,有值上色即可。文章来源地址https://www.toymoban.com/news/detail-514787.html
到了这里,关于CSS实现进度条和订单进度条---竖向的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!