mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-18 08:44:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

add sign up page

Browse Source
This commit is contained in:
MaysWind
2023-07-08 00:29:22 +08:00
parent 9d0b874488
commit 48d9a09307
9 changed files with 828 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/StepsBar.vue
+99
View File
@@ -0,0 +1,99 @@
<template>
<div class="d-flex" :style="`min-width: ${minWidth}px`" v-if="minWidth"></div>
<v-slide-group class="slide-group-with-stepper mb-10 hidden-xs" show-arrows>
<v-slide-group-item :key="idx" v-for="(step, idx) in steps">
<div class="cursor-pointer mx-1"
:class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx) }"
@click="changeStep(step)">
<div class="d-flex align-center gap-x-2">
<div class="d-flex align-center gap-2">
<div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
<div class="slide-group-stepper-indicator"></div>
</div>
<h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
</div>
<div style="line-height: 0;">
<h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
<span class="text-xs step-subtitle">{{ step.subTitle }}</span>
</div>
<div class="slide-group-stepper-link-line" v-if="idx < steps.length - 1"></div>
</div>
</div>
</v-slide-group-item>
</v-slide-group>
<v-slide-group class="slide-group-with-stepper mb-3 hidden-sm-and-up" direction="vertical">
<v-slide-group-item :key="idx" v-for="(step, idx) in steps">
<div class="cursor-pointer mx-1 mb-3"
:class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx) }"
@click="changeStep(step)">
<div class="d-flex align-center gap-x-2">
<div class="d-flex align-center gap-2">
<div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
<div class="slide-group-stepper-indicator"></div>
</div>
<h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
</div>
<div style="line-height: 0;">
<h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
<span class="text-xs step-subtitle">{{ step.subTitle }}</span>
</div>
</div>
</div>
</v-slide-group-item>
</v-slide-group>
</template>
<script>
export default {
props: [
'steps',
'currentStep',
'minWidth'
],
emits: [
'step:change'
],
methods: {
changeStep(step) {
this.$emit('step:change', step.name);
},
isStepActive(step) {
return this.currentStep === step.name;
},
isStepCompleted(stepIndex) {
for (let i = 0; i < this.steps.length; i++) {
if (this.steps[i].name === this.currentStep) {
return stepIndex < i;
}
}
return false;
}
}
}
</script>
<style>
.slide-group-with-stepper .v-slide-group__content .slide-group-stepper-link-line {
background-color: rgb(var(--v-theme-primary));
border-radius: 0.1875rem;
block-size: .1875rem;
inline-size: 3.75rem;
opacity: var(--v-activated-opacity);
}
.slide-group-with-stepper .v-slide-group__content .slide-group-stepper-indicator {
background-color: rgb(var(--v-theme-surface));
border: 0.3125rem solid rgb(var(--v-theme-primary));
border-radius: 50%;
block-size: 1.25rem;
inline-size: 1.25rem;
opacity: var(--v-activated-opacity);
}
.slide-group-with-stepper .v-slide-group__content .slide-group-step-completed .slide-group-stepper-indicator,
.slide-group-with-stepper .v-slide-group__content .slide-group-step-active .slide-group-stepper-indicator,
.slide-group-with-stepper .v-slide-group__content .slide-group-step-completed .slide-group-stepper-link-line {
opacity: 1;
}
</style>