iot-platform-app/components/common-approval/common-approval.vue

<template>
	<view class="common-approval">
		<ul>
			<li>
				<view class="line-box">
					<view class="top-line"></view><view class="yuan-box"></view><view class="line"></view>
				</view>
				<view class="text-box">
					<view class="name-stat">
						<span class="name">裤衩子</span>
						<span class="shenpi">发起审批</span>
						<span class="stat-box">审批通过</span>
					</view>
					<view class="content-text">
						审批意见：xxxxxxxxxxxxxx
					</view>
					<view class="time-box">
						2022-01-01 00:00:00
					</view>
				</view>
			</li>
			<li>
				<view class="line-box">
					<view class="top-line"></view><view class="yuan-box"></view><view class="line"></view>
				</view>
				<view class="text-box">
					<view class="name-stat">
						<span class="name">裤衩子</span>
						<span class="shenpi">发起审批</span>
						<span class="stat-box">审批通过</span>
					</view>
					<view class="content-text">
						审批意见：xxxxxxxxxxxxxx
					</view>
					<view class="time-box">
						2022-01-01 00:00:00
					</view>
				</view>
			</li>
			<li>
				<view class="line-box">
					<view class="top-line"></view><view class="yuan-box"></view><view class="line"></view>
				</view>
				<view class="text-box">
					<view class="name-stat">
						<span class="name">裤衩子</span>
						<span class="shenpi">发起审批</span>
						<span class="stat-box">审批通过</span>
					</view>
					<view class="content-text">
						审批意见：xxxxxxxxxxxxxx
					</view>
					<view class="time-box">
						2022-01-01 00:00:00
					</view>
				</view>
			</li>
			<li>
				<view class="line-box">
					<view class="top-line"></view><view class="yuan-box"></view><view class="line"></view>
				</view>
				<view class="text-box">
					<view class="name-stat">
						<span class="name">裤衩子</span>
						<span class="shenpi">发起审批</span>
						<span class="stat-box">审批通过</span>
					</view>
					<view class="content-text">
						审批意见：xxxxxxxxxxxxxx
					</view>
					<view class="time-box">
						2022-01-01 00:00:00
					</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
</script>

<style lang="less">
	.common-approval{
		ul{
			margin: 0;
			padding: 0;
			background-color: #ffffff;
			li{
				display: flex;
				justify-content: space-between;
				list-style: none;
				overflow: hidden; 
				padding-right: 24rpx;
				padding-bottom: 24rpx;
				.text-box{
					width: calc(100% - 72rpx);
					.time-box{
						color: #999999;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 28rpx;
					}
					.content-text{
						background-color: #F1F1F1;
						color: #666666;
						padding: 30rpx 24rpx;
					}
					.name-stat{
						height: 72rpx;
						line-height: 72rpx;
						font-size: 28rpx;
						.name{
							color: #333333;
						}
						.shenpi{
							color: #999999;
							margin-left: 14rpx;
							font-size: 24rpx;
						}
						.stat-box{
							color: #0084FF;
							float: right;
						}
					}
				}
				.line-box{
					width: 72rpx;
					height: 100rpx;
					
					.yuan-box{
						height: 24rpx;
						width: 24rpx;
						border:2rpx solid #0084FF;
						border-radius: 12rpx;
						box-sizing: border-box;
						position: relative;
						margin: 0rpx auto 0;
					}
					.yuan-box::before{
						width: 16rpx;
						height: 16rpx;
						background-color: #0084FF;
						position: absolute;
						top: 1rpx;
						left: 1rpx;
						content: " ";
						border-radius: 8rpx;
					}
					.top-line{
						margin: 0 auto;
						width: 4rpx;
						background-color: #DDDDDD;
						height: 30rpx;
						position: relative;
						
					}
					.line{
						width: 4rpx;
						height: 1000rpx;
						margin: 0 auto;
						background-color: #DDDDDD;
					}
				}
				
			}
			
			li:last-child{
				.line,.yuan-box::before{
					opacity: 0;
				}
				
			}
			li:first-child{
				.top-line{
					opacity: 0;
				}
			}
		}
	}
</style>