退款详情列表显示--纵向退款进度条显示

吃瓜群众欢乐多

于 2022-05-30 10:13:24 发布

阅读量243

点赞数

分类专栏： React CSS 文章标签： css javascript html

本文链接：https://blog.csdn.net/sinat_36146776/article/details/125041486

版权

React 同时被 2 个专栏收录

43 篇文章 3 订阅

订阅专栏

CSS

20 篇文章 1 订阅

订阅专栏

横向退款进度样式demo
最终实现这个效果
在这里插入图片描述 dom代码

import { View } from "@tarojs/components"
import { formatDate } from '@/utils/timeFormat'
import './index.less'

export default (props) => {

	return <View className='steps-box'>
		{props.list?.length && props.list.map((item, index) => (
			<View className='step-item'>
				<View className='step-item-left'>
					<View className='step-item-tail'></View>
					<View>
						{item.status === 0 && <View className='step-item-circle'></View>}
						{item.status === 1 && <View className='step-item-icon'></View>}
					</View>
				</View>
				<View className='flex-1 step-item-right'>
					<View className='step-item-txt'>{item.currentStatusDisplay}</View>
					                                 {/* 时间格式化 */}
					<View className='step-item-txt'>{formatDate(item.updatedAt)} </View>
				</View>
			</View>
		))}
	</View>
}

css代码

List item

.steps-box{
	.step-item{
		display: flex;
		position: relative;
		
		.step-item-left{
			width: 30px;
		}
		.step-item-right{
			margin-bottom:20px
		}

		.step-item-circle{
			width: 16px;
			height: 16px;
			background-color: #D90D1E;
			border-radius: 50%;
			position: relative;
			z-index: 2;
		}
		.step-item-circle:after{
			content: "";
			display: block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: #fff;
			position: relative;
			top: 4px;
			left: 4px;
		}

		.step-item-tail{
			display: block;
			position: absolute;
			top: 0;
			left: 8px;
			width: 1px;
			height: 100%;
			&::after{
				width: 1px;
				height: 100%;
				display: inline-block;
				background: #C4C4C4;
				border-radius: 1px;
				transition: background .3s;
				content: "";
			}
		}
		
		.step-item-icon{
			width: 6px;
			height: 6px;
			border-radius: 50%;
			margin-left:6px;
			background: #C4C4C4;
		}
		.step-item-txt{
			font-size: 12px;
			line-height: 17px;
			color: #6D6F73;
			margin-bottom: 4px;
		}

	}
	.step-item:last-child .step-item-tail{
		display: none;
	}
	.step-item:last-child .step-item-right{
		margin-bottom: 0;
	}
	.step-item:first-child .step-item-tail{
		width: 0;
	}

}