151 lines
3.4 KiB
Vue
151 lines
3.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class="background"></view>
|
|
<view style="padding-top: 20px;" :class="stepText.length == 5?'step-load':'step-loadaf'">
|
|
<u-steps :current="stepPage" class="stepbox" active-color="#8d95a1" inactive-color="#d9e6f9">
|
|
<u-steps-item :title="stepText[0]">
|
|
<view class="slot-icon-ing" slot="icon" v-if="stepPage === 0">
|
|
<view class="slot-icon-dot"></view>
|
|
</view>
|
|
<view class="slot-icon-ed" slot="icon" v-if="stepPage > 0">
|
|
<u-icon name="checkbox-mark" color="#fff" size="14"></u-icon>
|
|
</view>
|
|
</u-steps-item>
|
|
<view v-for="(item,index) in stepText.slice(1,stepText.length - 1)" :key="index" style="flex: 1;">
|
|
<u-steps-item :title="item">
|
|
<view class="slot-icon-ing" slot="icon" v-if="stepPage === index+1">
|
|
<view class="slot-icon-dot"></view>
|
|
</view>
|
|
<view class="slot-icon-no" slot="icon" v-if="stepPage < index+1">{{index+2}}</view>
|
|
<view class="slot-icon-ed" slot="icon" v-if="stepPage > index+1">
|
|
<u-icon name="checkbox-mark" color="#fff" size="14"></u-icon>
|
|
</view>
|
|
</u-steps-item>
|
|
</view>
|
|
<u-steps-item :title="stepText[stepText.length - 1]">
|
|
<view class="slot-icon-ing" slot="icon" v-if="stepPage === stepText.length - 1">
|
|
<view class="slot-icon-dot"></view>
|
|
</view>
|
|
<view class="slot-icon-no" slot="icon" v-if="stepPage < stepText.length - 1">{{stepText.length}}</view>
|
|
</u-steps-item>
|
|
</u-steps>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
stepPage: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
stepText: {
|
|
type: Array,
|
|
default () {
|
|
return ['基本信息', '作业人员', '确认信息']
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.background {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #edf1fd;
|
|
z-index: -1;
|
|
}
|
|
|
|
.step-load>>>.u-steps-item__wrapper {
|
|
background-color: #edf1fd;
|
|
}
|
|
|
|
.step-load>>>.u-text__value--main {
|
|
color: #3d4b70;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.step-load>>>.u-steps-item__line--row {
|
|
height: 4px;
|
|
width: 50px !important;
|
|
left: 55px !important;
|
|
border-radius: 500px;
|
|
}
|
|
|
|
.step-load>>>.u-steps-item__wrapper--row {
|
|
width: 42px;
|
|
}
|
|
.step-loadaf>>>.u-steps-item__wrapper {
|
|
background-color: #edf1fd;
|
|
}
|
|
|
|
.step-loadaf>>>.u-text__value--main {
|
|
color: #3d4b70;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.step-loadaf>>>.u-steps-item__line--row {
|
|
height: 4px;
|
|
width: 119px !important;
|
|
left: 84px !important;
|
|
border-radius: 500px;
|
|
}
|
|
|
|
.step-loadaf>>>.u-steps-item__wrapper--row {
|
|
width: 62px;
|
|
}
|
|
|
|
.slot-icon-ed {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #3d4b70;
|
|
border-radius: 100px;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slot-icon-ing {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #cceaff;
|
|
border-radius: 100px;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
line-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slot-icon-no {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #7785a2;
|
|
border-radius: 100px;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slot-icon-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: #3695ff;
|
|
border-radius: 100px;
|
|
color: #fff;
|
|
line-height: 10px;
|
|
}
|
|
</style> |