<template>
|
<div>
|
<div class="steps">
|
<div class="step" :class="step == 1 || step == 2 || step == 3 || step == 4 ? 'green' : ''">1</div>
|
<div class="line" :class="step == 1 || step == 2 || step == 3 || step == 4 ? 'green' : ''"></div>
|
<div class="step" :class="step == 2 || step == 3 || step == 4 ? 'green' : ''">2</div>
|
<div class="line" :class="step == 3 || step == 4 ? 'green' : ''"></div>
|
<div class="step" :class="step == 3 || step == 4 ? 'green' : ''">3</div>
|
<div class="line" :class="step == 4 ? 'green' : ''"></div>
|
<div class="step" :class="step == 4 ? 'green' : ''">4</div>
|
</div>
|
<div class="stepsText textColor">
|
<div>{{ $t('账号注册') }}</div>
|
<div>{{ $t('实名认证') }}</div>
|
<div>{{ $t('安全绑定') }}</div>
|
<div>{{ $t('去交易') }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
step: {
|
type: Number | String,
|
default: 1
|
},
|
},
|
components: {
|
|
},
|
data() {
|
return {
|
|
}
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.steps {
|
display: flex;
|
align-items: center;
|
margin-top: 70px;
|
padding-left: 20px;
|
|
.step {
|
width: 80px;
|
height: 80px;
|
line-height: 80px;
|
text-align: center;
|
font-size: 40px;
|
color: #fff;
|
|
@include themify() {
|
background: themed("bg_step");
|
}
|
|
border-radius: 50%;
|
}
|
|
.line {
|
width: 128px;
|
height: 9px;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
}
|
|
.green {
|
background: #2EBD85;
|
}
|
}
|
|
.stepsText {
|
display: flex;
|
padding-left: 20px;
|
margin-top: 20px;
|
|
div {
|
text-align: center;
|
width: 208px;
|
|
&:nth-child(1) {
|
width: 144px;
|
text-align: left;
|
}
|
|
&:nth-child(4) {
|
width: 144px;
|
text-align: right;
|
}
|
}
|
}
|
</style>
|
