vue进度条阶段显示

效果图（时间点过的背景色为蓝色，时间点未过的为灰色）：

UI设计图

 

 

html代码：

<div class="main">
				<div class="mainTitle">新人学习阶段</div>
				<div class="mainHr">
					<div v-for="(i,index) in item1">
						<div v-if="i.pass" :class="'mainHr'+i.bgIndex"></div>	
					</div>	
				</div>
				<div class="mainCotent" >
					<div class="mainPlan" v-for="(i,index) in item1" >
						<div v-if="i.pass" :class="'bg2-'+i.bgIndex" class="planItem1" >
							<div class="planTitle1">{
  {i.title}}</div>
							<div class="planHr1"></div>
							<div class="planListBox1">
								<div class="planList1" v-for="(j,index) in i.list">
									{
  {j.name}}
								</div>
							</div>	
						</div>
						<div v-if="!i.pass" :class="'bg1-'+i.bgIndex" class="planItem2">