vue进度条阶段显示

最新推荐文章于 2024-08-20 11:35:49 发布

张日琪

最新推荐文章于 2024-08-20 11:35:49 发布

阅读量1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45607006/article/details/119341809

版权

本文介绍了如何使用Vue和CSS创建一个阶段性的进度条，通过HTML结构、JavaScript控制及CSS样式设计，实现了时间点已过和未过的背景颜色区分，展示了一个带有动态效果的进度条。

摘要由CSDN通过智能技术生成

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

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">
                            <!--planShadow是鼠标悬浮边框加阴影，可以不管 -->
							<div class="planShadow">
                                <!--planHover是鼠标悬浮上边框变粗div，可以不管 -->
								<div class="