dev #1
@@ -194,28 +194,32 @@ onMounted(loadData)
|
|||||||
<main v-loading="loading" class="wizard-main">
|
<main v-loading="loading" class="wizard-main">
|
||||||
<div class="wizard-steps-container" aria-label="评测任务创建步骤">
|
<div class="wizard-steps-container" aria-label="评测任务创建步骤">
|
||||||
<div class="custom-wizard-steps">
|
<div class="custom-wizard-steps">
|
||||||
<div
|
<template v-for="(step, index) in WIZARD_STEPS" :key="step.title">
|
||||||
v-for="(step, index) in WIZARD_STEPS"
|
<div
|
||||||
:key="step.title"
|
v-if="index !== 0"
|
||||||
class="step-item"
|
class="step-connector"
|
||||||
:class="{
|
:class="{ 'is-active': currentStep >= index }"
|
||||||
'is-active': currentStep === index,
|
></div>
|
||||||
'is-completed': currentStep > index,
|
<div
|
||||||
}"
|
class="step-item"
|
||||||
:aria-current="currentStep === index ? 'step' : undefined"
|
:class="{
|
||||||
>
|
'is-active': currentStep === index,
|
||||||
<div v-if="index !== 0" class="step-connector"></div>
|
'is-completed': currentStep > index,
|
||||||
<div class="step-node">
|
}"
|
||||||
<div class="step-icon" aria-hidden="true">
|
:aria-current="currentStep === index ? 'step' : undefined"
|
||||||
<i v-if="currentStep > index" class="fa fa-check" />
|
>
|
||||||
<span v-else>{{ index + 1 }}</span>
|
<div class="step-node">
|
||||||
</div>
|
<div class="step-icon" aria-hidden="true">
|
||||||
<div class="step-text">
|
<i v-if="currentStep > index" class="fa fa-check" />
|
||||||
<div class="step-title">{{ step.title }}</div>
|
<span v-else>{{ index + 1 }}</span>
|
||||||
<div class="step-description">{{ step.description }}</div>
|
</div>
|
||||||
|
<div class="step-text">
|
||||||
|
<div class="step-title">{{ step.title }}</div>
|
||||||
|
<div class="step-description">{{ step.description }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -308,14 +312,10 @@ onMounted(loadData)
|
|||||||
|
|
||||||
.step-item {
|
.step-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-item:first-child {
|
|
||||||
flex: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-connector {
|
.step-connector {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
@@ -324,8 +324,7 @@ onMounted(loadData)
|
|||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-item.is-active .step-connector,
|
.step-connector.is-active {
|
||||||
.step-item.is-completed .step-connector {
|
|
||||||
background: #5146e5;
|
background: #5146e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user