uniapp 时间轴

<view class="zong">
		<view class="user_box" style="width: 80%; margin: 40rpx auto;">
			<view class="user_for" v-for="(list,id) in userList" :key="id">
				<view class="line_box">
					<!-- 圆球 -->
					<view class="line_radio" :style="{ 'background' : list.istrue ? '#ef6f16' : '#8e8b8d' , 'border' : list.istrue ? 'solid 6rpx #fbc293' : 'solid 6rpx #b9b7b6'}"></view>
					<!-- 线 -->
					<view class="line_for" v-for="item in 3" :style="{ 'background' : list.istrue ? '#ef6f16' : '#8e8b8d'}"></view>
				</view>
				
				<view class="right_box"  :style="{ 'color' : list.istrue ? '#ef6f16' : '#8e8b8d'}">
					<view class="title">{{list.title}} <text style="margin-left: 20rpx;" v-if="list.title1" @click="Jump(list)">({{list.title1}})</text></view>
					<view class="desc">
						<image src="../../static/logo.png" mode=""></image>
						{{list.desc}}
					</view>
				</view>
			</view>
		</view>
	</view>

export default {
	name: '',
	props: {
		
	},
	data(){
		return{
			userList: [
				{
					id: 0,
					title: "下载工商营业执照",
					title1: "立即下载",
					desc: '可以营业',
					istrue:true,
					url:'http://www.xixihaha.com'
				},{
					id: 1,
					title: "申请银行开户",
					title1: "已完成",
					desc: '2022-3-31',
					istrue:true,
					url:''
				},
				{
					id: 2,
					title: "银行审核通过",
					title1: "戳我了解更多",
					desc: '正在为您办理中，请耐心等待',
					istrue:false,
					url:'http://www.guge.com'
				},{
					id: 3,
					title: "税务局税种核定",
					title1: "",
					desc: '尚未开始',
					istrue:false,
					url:'http://www.taobao.com'
				},{
					id: 4,
					title: "税务实名认证",
					title1: "",
					desc: '尚未开始',
					istrue:false,
					url:'http://www.meirenzheng.com'
				},{
					id: 5,
					title: "税务局票种核定",
					title1: "",
					desc: '尚未开始',
					istrue:false,
					url:'http://www.meiheding.com'
				}
				
			]
		}
	},
	methods:{
		Jump(item){
			if(!item.url){
				console.log('没有要跳转的路径')
				return
			}
			console.log(item.url)
		}
	},
}

.user_for{
	display: flex;
}
.item_year {
	font-size: 34rpx;
	height: 50rpx;
}
.line_for {
	width: 4rpx;
	height: 24rpx;
	margin: 0 20rpx 10rpx;
	background-color:#559DFF;
}
.line_radio {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
}
.right_box {
	padding: 0rpx 20rpx 20rpx 20rpx;
}
.desc{
	font-size: 30rpx;
	color: #8e8b8d;
	display: flex;
	margin-top: 20rpx;
	align-items: center;
	
}
image{
	margin-right: 20rpx;
	width: 34rpx;
	height: 34rpx;
	border-radius: 50%;
}