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

news2024/10/6 14:31:25

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

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>

说明：根据后台获取的时间判断是否给按钮、线条上色，有值上色即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/695007.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Java高级语法】（二十一）数组操作类：解析Arrays类中的全部操作方法，解锁Java数组操作技巧~

【Java高级语法】（二十一）数组操作类：解析Arrays类中的全部操作方法，解锁Java数组操作技巧~

Java高级语法详解之数组操作类 1️⃣ 概念2️⃣ 优势和缺点3️⃣ 使用3.1 Arrays类常用方法3.2 使用技巧 4️⃣ 应用场景&#x1f33e; 总结 前言&#xff1a;在学习本文之前&#xff0c;应该先学习并清楚了解Java基础部分的数组相关的概念和知识。 若还不具备学习条件&#xf…
阅读更多...
途乐证券|人工智能概念再度下挫 海天瑞声、寒武纪等跌超10%

途乐证券|人工智能概念再度下挫 海天瑞声、寒武纪等跌超10%

人工智能概念26日盘中大幅回调&#xff0c;截至发稿&#xff0c;当虹科技跌近18%&#xff0c;美亚柏科、昆仑万维跌约13%&#xff0c;博睿数据、光云科技、海天瑞声、寒武纪等跌超10%&#xff0c;焦点科技跌停&#xff0c;云从科技、朗玛信息、三六零等跌超9%。 香港途乐证券有…
阅读更多...
力扣125：判断字符串是否是回文字符串

力扣125：判断字符串是否是回文字符串

题目描述&#xff1a; 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个回文串。 字母和数字都属于字母数字字符。 给定一个字符串s&#xff0c;如果它是回文串&#xff0c;返回true&#xff1…
阅读更多...
文件批量重命名利器！统一重命名和隐藏编号，让不同类型的文件整齐有序

文件批量重命名利器！统一重命名和隐藏编号，让不同类型的文件整齐有序

进入数字时代&#xff0c;我们的电脑中存储了大量的文件&#xff0c;但是随着时间的推移&#xff0c;这些文件名可能变得混乱而难以管理。那么正需要文件批量改名高手来为你排忧解难&#xff0c;不仅可以将不同类型的文件统一重命名&#xff0c;还能隐藏顺序编号&#xff0c;让…
阅读更多...
k8s calico 网络异常处理

k8s calico 网络异常处理

故障 worker3故障重启后&#xff0c;该节点的 pod 访问不了其它节点服务 2023-06-26T07:44:41.041Z ERROR setup unable to start manager {"error": "Get \"https://10.244.64.1:443/api?timeout32s\": dial tcp 10.244.64.1:443: i/o…
阅读更多...
还在用gtest?更好用的测试框架介绍

还在用gtest?更好用的测试框架介绍

gtest需要安装有时候带来很多不方便。网络原因&#xff0c;下载安装gtest或者git上拉gtest都可能因为网络原因失败。除了gtest之外&#xff0c;还有很多轻量级易用的单元测试库&#xff0c;比如doctest。 现代C unit-test库 除了gtest之外&#xff0c;还有很多轻量级易用的单元…
阅读更多...
Vscode如何快速打开用户的 settings.json 文件

Vscode如何快速打开用户的 settings.json 文件

1、打开vscode编辑器&#xff0c;本文演示的vscode是中文版 2、点击右下角齿轮’设置’ 3、在弹出的设置菜单中选择: 设置 ’ 快捷键 cmd, &#xff08;macos&#xff09; ctrl,&#xff08;windows&#xff09; 4、 点击 设置 ’ 后, 弹出设置窗口 5、在设置窗口右上角点击…
阅读更多...
一些性能优化思路与策略

一些性能优化思路与策略

一些性能优化思路与策略 1. 前言2. 性能观察指标3.性能监控工具/途径 1. 前言 今天公司同事做技术分享&#xff0c;题目就是&#xff1a;一些性能优化思路与策略&#xff0c;我学习了一下然后做了如下总结。 2. 性能观察指标 响应时间:平均响应时间&#xff0c;TP95、TP99等等…
阅读更多...
将字符串“01:03”转换成秒数

将字符串“01:03”转换成秒数

场景&#xff1a;我们经常遇到这种场景&#xff0c;用户使用前端的时间组件自定义时间长度&#xff0c;比如antd的timePicker&#xff0c;传递选中的时间给后端&#xff0c;但是在后端中我们一般会使用秒数或者分钟数去保存&#xff0c;而不会保存一个字符串。 这个时候我们需要…
阅读更多...
探索OpenCV的AI实现视频超分

探索OpenCV的AI实现视频超分

OpenCV除了使用光流算法与普通插值实现图像视频超分&#xff0c;还提供AI深度学习实现视频超分。算法模型包括&#xff1a;edsr、espcn、fsrcnn、lapsrn&#xff0c;实现超分的倍数有2、3、4、8。通过AI实现的视频超分比传统算法的效果更好&#xff0c;图像更清晰。 1、超分算…
阅读更多...
大数据面试题之Mysql:每日三题(五)

大数据面试题之Mysql:每日三题(五)

大数据面试题之Mysql:每日三题 1.MySQL索引存储结构(六种)2.on和where的区别3.mysql是怎么查重的&#xff1f;(重点掌握3种&#xff0c;distinct&#xff0c;group by&#xff0c;row_number) 很开心写完上一篇&#xff0c;就立刻找到了我入职的第二家公司&#xff0c;所以我还…
阅读更多...
Gitlab保护分支与合并请求

Gitlab保护分支与合并请求

目录 引言 1、成员角色指定 1、保护分支设置 2、合并请求 引言 熟悉了Git工作流之后&#xff0c;有几个重要的分支&#xff0c;如Master(改名为Main)、Develop、Release分支等&#xff0c;是禁止开发成员随意合并和提交的&#xff0c;在此分支上的提交和推送权限仅限项目负责…
阅读更多...
电商假货品牌如何应对

电商假货品牌如何应对

随着电商的逐步发展&#xff0c;不同渠道首的产品上架数量呈明显增长&#xff0c;这些链接里会有经销商店铺&#xff0c;或者是非授权店铺&#xff0c;同时伴随的还会有低价、窜货、假货产品。假货大多是低价链接&#xff0c;面对线上逐渐增多的假货链接&#xff0c;品牌又该如…
阅读更多...
C++ / QT 旅游产品管理系统

C++ / QT 旅游产品管理系统

一、项目介绍 旅游产品管理系统 你是一家旅行社的 IT 主管&#xff0c;现在需要你设计并实现一个旅游产品管理系统。 1 &#xff09; 基本功能要求 * 实现基础界面&#xff1a; 参照现有的旅游产品管理系统&#xff1a;查看产品、选择产品、使用说明等内容 * 支持旅游产品…
阅读更多...
【每日一题】Leetcode - 283. 移动零

【每日一题】Leetcode - 283. 移动零

题目 Leetcode - 283. 移动零 解题思路 从右向左遍历&#xff0c;遇到0&#xff0c;就将后面所有元素前移&#xff0c;同时更新长度&#xff0c;使其减1&#xff0c;因为移动n次&#xff0c;倒数n位就被0占据&#xff0c;后续操作可忽略 class Solution {public void moveZ…
阅读更多...
G1吊舱全面升级，新增软件驱动库，支持多平台使用

G1吊舱全面升级，新增软件驱动库，支持多平台使用

G1吊舱&#xff0c;是我们去年推出的一款自研的云台产品&#xff0c;体积小巧&#xff0c;功能强大&#xff0c;上市后得到了很多朋友的支持。在上市后的一年期间&#xff0c;我们多方收集用户反馈&#xff0c;并基于用户的宝贵建议对G1吊舱进行了软硬件上的升级。 ​ 一、软件…
阅读更多...
【ubuntu】【vmware tools】解决重启后看不到共享目录的问题

【ubuntu】【vmware tools】解决重启后看不到共享目录的问题

1、现象 ubuntu 22 vmware 16&#xff0c;安装后会发现 “Reinstall VMware Tools…” 灰色不可用。如图&#xff1a; 2、原因分析 ubuntu 22 ISO 内不再提供 VMware Tools 的安装包&#xff0c;未检测到所以灰色不可用 在 Ubuntu 22 上挂载 Windows HGFS 共享目录&#xff…
阅读更多...
点成分享丨实验室磁力搅拌器的原理及应用

点成分享丨实验室磁力搅拌器的原理及应用

磁力搅拌器概述 磁力搅拌器是一种广泛应用于化学实验室、生物技术、制药和其他研究领域的实验室设备。在实验中&#xff0c;溶液需要混合均匀才能进行下一步的反应或测量。传统的方法是通过手动搅拌或机械搅拌来实现&#xff0c;但这些方法都有一定的缺陷&#xff0c;如不均匀、…
阅读更多...
图解平衡二叉搜索树

图解平衡二叉搜索树

gitee仓库&#xff1a;https://gitee.com/WangZihao64/data-structure-and-algorithm/tree/master/avl 有如下一棵树(采用加入左结点平衡因子-1&#xff0c;加入右结点平衡因子1的方式)&#xff1a; 插入有以下几种情况&#xff1a; 1.平衡因子变为2 2.平衡因子变为0 3.平衡因…
阅读更多...
一个基于 SpringCloud 微服务架构的前后端分离博客系统

一个基于 SpringCloud 微服务架构的前后端分离博客系统

项目介绍 蘑菇博客( MoguBlog )&#xff0c;一个基于微服务架构的前后端分离博客系统。Web 端使用 Vue ElementUi , 移动端使用 uniapp 和 ColorUI。 后端使用 SpringCloud SpringBoot Mybatis-plus进行开发&#xff0c;使用 Jwt SpringSecurity 做登录验证和权限校验&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023