pbl-teacher-table/src/components/pages/pblCourse/component/procedureArea.vue

<template>
	<div class="procedure">
		<div class="title">5EX挑战</div>
		<div class="content" ref="content">
			<div class="procedure_content" v-for="(i, index) in 5" :key="index" :class="{active: phase.atPhase >= index}">
				<i class="img" :class="{ isDo : phase.doPhase > index}"></i>
				<i class="dot"></i>
				<span class="name">
					<span>阶段{{ index+1 }}</span>
				</span>
				<div class="stepBorder" v-if="i != 5" :style="{width: `calc(${contentWidth} / (${5 - 1}))`}" :class="{active: phase.doPhase > index}"></div>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			phase:{
				type:Object,
				default:()=>{
					return {
						doPhase:0,
						atPhase:0,
					}
				}
			}
		},
		data() {
			return {
				contentWidth:"100px",
			}
		},
		mounted () {
			this.$nextTick(() => {
				this.contentWidth = this.$refs.content.offsetWidth + "px";
    			window.addEventListener("resize", () => {
					this.contentWidth = this.$refs.content.offsetWidth + "px";
				})
			})
		},
		methods: {

		},
	}
</script>

<style scoped>
.procedure{
	width: 100%;
	height: 100%;
	background-image: url('../../../../assets/icon/pblCourse/top_pbl.png');
	background-size: 100% 100%;
    border-radius: 15px;
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
}


.procedure .title{
	position: absolute;
    top: 0;
    color: #fff;
    background: linear-gradient(90deg, rgba(54, 115, 232, 0) 0%, #727EF3 50%, rgba(54, 115, 232, 0) 100%);
    width: 190px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.procedure .content{
	display: flex;
    width: calc(100% - 40px);
    margin: 0 auto;
    justify-content: space-between;
	position: relative;
}
.content .procedure_content{
	display: flex;
    flex-direction: column;
    align-items: center;
	position: relative;
}
.content .procedure_content > .img.isDo{
	background-image: url('../../../../assets/icon/pblCourse/top_book_active.png');
}
.content .procedure_content > .img{
	background-image: url('../../../../assets/icon/pblCourse/top_book.png');
    display: block;
    width: 40px;
    height: 40px;
    background-size: 100% 100%;
}
.content .procedure_content > .dot{
	border: 2px solid #c8aeff;
    width: 16px;
    height: 16px;
    border-radius: 28px;
    margin-bottom: 10px;
	z-index: 1;
	background: #FFFFFF59;
	box-sizing: border-box;
}

.content .procedure_content.active > .dot{
	border: none;
    background: linear-gradient(90deg, #3673E8 0%, #AD88FD 100%);
}

.content .procedure_content > .name{
	background: rgba(255, 255, 255, .55);
	border: 2px solid #c8aeff;
    display: block;
    border-radius: 49px;
    font-size: 16px;
    padding: 3px 7px;
    font-weight: 600;
	position: relative;
	overflow: hidden;
}

.content .procedure_content.active > .name{
	/* border: none;  */
    background: linear-gradient(90deg, #3673E8 0%, #AD88FD 100%);
}

.content .procedure_content > .name > span{
	background-image: linear-gradient(90deg, #3673E8 0%, #AD88FD 100%);
    background-clip: text;
    color: transparent;
}

.content .procedure_content.active > .name > span{
	background-image: unset;
    background-clip: unset;
    color: #fff;
}

.content .procedure_content > .stepBorder{
	position: absolute;
    width: 100%;
    height: 10px;
    border: 1px solid #FFFFFF59;
    background: #FFFFFF8C;
    left: 22px;
    top: 43px;
    box-sizing: border-box;
}

.content .procedure_content > .stepBorder.active{
	background: linear-gradient(90deg, #3673E8 0%, #AD88FD 100%);
}
</style>