You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.7 KiB
135 lines
2.7 KiB
<template>
|
|
<view class="content ">
|
|
<view class="stepTop">
|
|
<view class="steps flex-b">
|
|
<view class="proress" :style="{width: proressWith}"></view>
|
|
<view class="step">
|
|
<view class="num active" >01<view class="text">房屋信息</view></view>
|
|
</view>
|
|
<view class="step">
|
|
<view class="num" :class="{active: currentStep}">02<view class="text">个人资料</view></view>
|
|
</view>
|
|
<view class="step">
|
|
<view class="num" :class="{active: currentStep==2}">03<view class="text">认证成功</view></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line"></view>
|
|
|
|
<view class="padding">
|
|
<view class="step1">
|
|
<view class="h1">请选择您的房屋地址</view>
|
|
<view class="lab">房屋信息</view>
|
|
<view class="row flex-b">
|
|
<view class="lable">详细地址</view>
|
|
<view class="flex" @click="$goPage('/pages/subPage/authentication/comp/select1')">
|
|
<view class="adrs">请选择</view>
|
|
<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="btnBox">
|
|
<oneBtn text="下一步" :disabled="true"></oneBtn>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentStep: 1
|
|
}
|
|
},
|
|
computed: {
|
|
proressWith() {
|
|
if(this.currentStep==0) {
|
|
return 0
|
|
}else if(this.currentStep==1) {
|
|
return '290rpx'
|
|
}else {
|
|
return '100%'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
.line {
|
|
width: 100%;
|
|
height: 20rpx;
|
|
background: #EFEFEF;
|
|
}
|
|
.step1 {
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
color: #343434;
|
|
.lab {
|
|
padding: 30rpx 0 10rpx 0;
|
|
}
|
|
.row {
|
|
height: 96rpx;
|
|
border-bottom: 1px solid #EFEFEF;
|
|
.adrs {
|
|
color: $themC;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
.btnBox {
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
.stepTop {
|
|
padding: 20rpx 20rpx 50rpx 20rpx;
|
|
}
|
|
.steps {
|
|
width: 528rpx;
|
|
height: 50rpx;
|
|
background: #EFEFEF;
|
|
border-radius: 25rpx;
|
|
position: relative;
|
|
margin: 20rpx auto 40rpx auto;
|
|
.proress {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 290rpx;
|
|
background: linear-gradient(90deg, rgba(222,58,38,0.1) 0%, #DE3A26 100%);
|
|
border-radius: 25rpx;
|
|
|
|
}
|
|
.step {
|
|
.num {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
color: #9C9C9C;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
&.active {
|
|
border: 1px solid $themC;
|
|
color: $themC;
|
|
.text {
|
|
color: #333;
|
|
}
|
|
}
|
|
.text {
|
|
position: absolute;
|
|
bottom: -60rpx;
|
|
left: -26rpx;
|
|
font-size: 24rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|