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

这篇具有很好参考价值的文章主要介绍了CSS实现进度条和订单进度条---竖向。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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


1.直接放页面

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

代码如下(示例):

<!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>

说明:根据后台获取的时间判断是否给按钮、线条上色,有值上色即可。文章来源地址https://www.toymoban.com/news/detail-514787.html

到了这里,关于CSS实现进度条和订单进度条---竖向的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT 利用开源7z 实现解压各种压缩包,包括进度条和文件名的显示(zip,7z,rar,iso等50多种格式)

            想做一个winRAR一样的解压软件吗?很简单,利用开源的7z库就能实现。我看网上其他人说的方法不敢苟同,误人子弟。以前自己在项目中使用过7z,这次又有需要,就想记录下来。如果你研究过如何用7z的话,一定知道7z的每一个GUID都代表了一种格式,50多种GUID也就有

    2024年02月04日
    浏览(54)
  • css文字竖向排列

     

    2024年02月07日
    浏览(25)
  • Spring Boot 在启动之前还做了哪些准备工作?

    目录 一:初始化资源加载器 二:校验主要源 三:设置主要源 四:推断 Web 应用类型

    2024年02月05日
    浏览(47)
  • 使用html,css和js给视频设置一个简易进度条

    代码依次为body内标签创建,css样式  和script 代码 这里我们先创建我们所需要的标签 视频的盒子,视频文件,进度条,和用来播放,暂停的按钮 然后我们来设置我们标签所需要的简单样式 按钮我没有设置样式,因为写出来实现效果就行了,有需要的话可以自由发挥 css的进度

    2024年02月15日
    浏览(59)
  • 价值 1k 嵌入式面试题-单片机 main 函数之前都做了啥?

            请说下单片机(Arm)在运行到 main() 函数前,都做了哪些工作? 系统初始化工作,太泛泛 硬件初始化,比较不具体         这道题应该从两方面回答,一个是比较表面的硬件的初始化(价值 200),另一个比较深层次的 C 环境的初始化,这也是加分比较多的一点(价

    2024年02月14日
    浏览(42)
  • CSS实现圆环进度条

    CSS实现圆环进度条 一、静态进度条 首先,我们先看一个静态进度条 第一步当然是先实现一个最外层的父级圆环。 其次是通过 clip-path 画出两个半圆,并绝对定位覆盖在父级圆环。 小于50的时候,我们只需要通过旋转右半圆,慢慢透露出父级圆环的颜色,即可达到效果。 大于

    2024年02月11日
    浏览(42)
  • 为了实现上网自由,我做了一个多功能串口服务器

    项目作者:小华的物联网嵌入式之旅 介绍:从事电气自动化行业,多次获得物联网设计竞赛,爱好嵌入式设计开发,物联网开发。 设计方案思路的由来,是因为我们现在的开发板基本需要通过串口与WIFI模组或以太网模组连接以实现联网功能,如果多个开发板就要配多个模组

    2024年02月12日
    浏览(38)
  • css 纯样式实现绘出进度条

    效果: css代码: html代码:

    2024年02月04日
    浏览(59)
  • 【Linux】从0到1实现一个进度条小程序

    个人主页:🍝在肯德基吃麻辣烫 我的gitee:gitee仓库 分享一句喜欢的话:热烈的火焰,冰封在最沉默的火山深处 进度条实现: 本文讲解如何从0到1实现一个进度条小程序。 我们在写作文的时候,写到了一行的结尾,就得另起一行并到开头继续写。 其中,这个另起一行的动作

    2024年02月14日
    浏览(49)
  • QT5.9实现一个视频播放器播放 暂停进度条

    参考博主 1https://blog.csdn.net/liji_digital/article/details/83691035 参考博主2https://blog.csdn.net/qq_41071706/article/details/89855986 通过选择按钮选择本地视频文件 点击播放按钮播放文本框中的文件(不支持其他类型文件的异常检测) 支持mp4 avi等等 如果不支持见参考博主2的内容 点击暂停按钮

    2023年04月22日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包