自定义进度条使用伪类元素实现

最新推荐文章于 2024-11-03 11:01:20 发布

grtjh203

最新推荐文章于 2024-11-03 11:01:20 发布

阅读量370

点赞数 8

文章标签： java windows 服务器

本文链接：https://blog.csdn.net/qq_59297167/article/details/134812603

版权

<template>
	<view class="serve">
		<view class="serve-top">家政服务</view>
		<view class="serve-progress">
			<view class="list" v-for="(item,index) in list">
				<view class="icon" :class="{activeIcon:active==index?true:false}">{{index+1}}</view>
				<view class="content" :class="{activeContent:active==index?true:false}">{{item}}</view>
			</view>
		</view>
		
			  
	</view>
</template>
data(){
			return{
				active: 0,
				list: ["添加个人信息","添加工作履历","提交申请等待审核"],
}
}
.serve{
		.serve-top{
			width: 100%;
			height: 200rpx;
			background-color: #fec544;
			line-height: 200rpx;
			color: #fff;
			font-weight:bold;
			text-align: center;
			font-size: 40rpx;
		}
		.serve-progress{
			width: 100%;
			padding: 0 50rpx;
			box-sizing: border-box;
			height: 130rpx;
			background-color: #fec544;
			display:flex;
			align-items: center;
			justify-content: center;
			.list{
				width:210rpx ;
				position: relative;
				.icon{
					width: 35rpx;
					height: 35rpx;
					line-height: 35rpx;
					text-align: center;
					background-color: #fff;
					border-radius: 50%;
					color: #fec544;
					position: relative;
					&::after{
						content: "";
						width: 130rpx ;
						height: 2rpx;
						display: block;
						background-color: #fff;
						position: absolute;
						left: 45rpx;
						top: 20rpx;
					}
					
				}
				.activeIcon{
					background-color:  #ff8d00;
					&::after{
						content: "";
						width: 130rpx ;
						height: 2rpx;
						display: block;
						background-color:  #ff8d00;
						position: absolute;
						left: 45rpx;
						top: 20rpx;
					}
				}
				
				.content{
					position: absolute;
					left: -27%;
					font-size: 24rpx;
					color: #fff;
					
				}
				.activeContent{
					color:  #ff8d00;
				}
				&:last-child{
					width: 35rpx;
					.icon{
						&::after{
							content: "";
							width: 0rpx ;
							height: 0rpx;
							background-color: #fff;
						}
					}
					.content{
						width: 300rpx;
						position: absolute;
						left: -225%;
						font-size: 24rpx;
						
					}
				}
				
			}
		}
}