258 lines
7.1 KiB
Vue
258 lines
7.1 KiB
Vue
<template>
|
||
<view class="entryProcess">
|
||
<view class="cont-wrapper">
|
||
<view class="record flex">
|
||
<view class="circle"></view>
|
||
<view class="cont-box">
|
||
<view class="title">入驻申请</view>
|
||
<view class="text-box">
|
||
<view class="have-filled" v-if="true">
|
||
<text>1.填写入驻申请基本材料 2023-05-08完成</text>
|
||
<text>2.完成审核2023-05-08完成</text>
|
||
</view>
|
||
<view class="get-through" v-else>
|
||
<text class="through-title">1、填写入驻申请资本资料</text>
|
||
<text>请按照营业执照和店招真实信息填写入驻基
|
||
本材料，进行审核。</text>
|
||
<view class="through-btn">开始填写</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="record flex">
|
||
<view class="circle"></view>
|
||
<view class="cont-box">
|
||
<view class="title">签署入驻《里海云》电子版本合同</view>
|
||
<view class="text-box">
|
||
<view class="have-filled" v-if="true">
|
||
<text>1.完成签署《里海云》电子版本合同 2023-05-08完成</text>
|
||
</view>
|
||
<view class="get-through" v-else>
|
||
<text class="through-title">1、填写入驻申请资本资料</text>
|
||
<text>请按照营业执照和店招真实信息填写入驻基
|
||
本材料，进行审核。</text>
|
||
<view class="through-btn">签署合同</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="record flex">
|
||
<view class="circle"></view>
|
||
<view class="cont-box">
|
||
<view class="title">签署里海云《履约保证金协议》</view>
|
||
<view class="text-box">
|
||
<view class="have-filled" v-if="false">
|
||
<text>1.完成签署履约保证金协议2023-05-08 13:15完成</text>
|
||
</view>
|
||
<view class="get-through" v-else>
|
||
<text class="through-title">1、签署里海云《履约保证金协议》</text>
|
||
<text>请详细阅读里海云履约保证金协议，并充分理解内容后进行电子签名。</text>
|
||
<view class="flex_a_c" style="margin-top: auto;">
|
||
<view class="through-btn">签署协议</view>
|
||
<view class="tiaoguo">跳过</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="record flex">
|
||
<view class="circle"></view>
|
||
<view class="cont-box">
|
||
<view class="title">缴纳履约保证金</view>
|
||
<view class="text-box">
|
||
<view class="have-filled" v-if="!true">
|
||
<text>1.完成履约保证金缴纳 2023-05-08 13:15完成</text>
|
||
</view>
|
||
<view class="get-through" v-else>
|
||
<text class="through-title">1、缴纳履约保证金</text>
|
||
<text>线上缴纳履约保证金，完成保证金审核后签约完成。</text>
|
||
<view class="flex_a_c" style="margin-top: auto;">
|
||
<view class="through-btn">缴纳履约保证金</view>
|
||
<view class="tiaoguo">跳过</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="record flex" :class="!true ? '' : 'on-record'">
|
||
<view class="circle"></view>
|
||
<view class="cont-box">
|
||
<view class="title">完善店铺开业信息</view>
|
||
<view class="text-box" v-if="!true">
|
||
<view class="have-filled" v-if="true">
|
||
<text>1.完成签署《里海云》电子版本合同 2023-05-08完成</text>
|
||
</view>
|
||
<view class="get-through" v-else>
|
||
<text class="through-title">1、填写并上传店铺信息</text>
|
||
<text>填写并上传店铺信息，设置店招、头像、街景图片、开业时间等基础信息，完成开业</text>
|
||
<view class="through-btn">完善信息</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sub-btn" v-if="true">进入店铺</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onShow() {},
|
||
methods: {},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.sub-btn {
|
||
width: 535.09rpx;
|
||
height: 71.93rpx;
|
||
font-size: 31.58rpx;
|
||
color: $uni-theme-color;
|
||
text-align: center;
|
||
line-height: 71.93rpx;
|
||
background: #F2F2F2;
|
||
border-radius: 5px 5px 5px 5px;
|
||
margin: 87.72rpx auto;
|
||
}
|
||
|
||
.entryProcess {
|
||
height: 100%;
|
||
padding: 16px;
|
||
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/entryBg.png") no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.cont-wrapper {
|
||
height: 100%;
|
||
|
||
:last-child {
|
||
.circle {
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.record {
|
||
position: relative;
|
||
margin-bottom: 14.04rpx;
|
||
|
||
.circle {
|
||
width: 31.58rpx;
|
||
height: 31.58rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
margin: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
&::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: 45.61rpx;
|
||
clear: both;
|
||
width: 1px;
|
||
height: calc(100% - 18px);
|
||
background-color: #EDF7F3;
|
||
// margin: 31.58rpx;
|
||
}
|
||
}
|
||
|
||
.cont-box {
|
||
flex: 1;
|
||
margin-left: 7.02rpx;
|
||
|
||
.title {
|
||
color: #fff;
|
||
font-size: 31.58rpx;
|
||
}
|
||
|
||
.text-box {
|
||
width: 631.58rpx;
|
||
// height: 366.67rpx;
|
||
color: #fff;
|
||
border-radius: 10px;
|
||
padding: 29.82rpx 24.56rpx;
|
||
margin-top: 35.09rpx;
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
}
|
||
}
|
||
|
||
.on-record {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.text-box .have-filled {
|
||
height: 100%;
|
||
font-size: 14px;
|
||
|
||
text {
|
||
display: block;
|
||
margin-bottom: 12.28rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.text-box .get-through {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #000;
|
||
width: 100%;
|
||
height: 307.02rpx;
|
||
padding: 24.56rpx;
|
||
border-radius: 5px;
|
||
background-color: #fff;
|
||
|
||
text {
|
||
display: block;
|
||
font-size: 28.07rpx;
|
||
color: #616365;
|
||
}
|
||
|
||
.through-title {
|
||
font-size: 31.58rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 8.77rpx;
|
||
}
|
||
|
||
.through-btn {
|
||
width: 100%;
|
||
height: 70.18rpx;
|
||
font-size: 31.58rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 70.18rpx;
|
||
background: linear-gradient(86deg, #F98649 0%, #F98349 4%, #F34E45 100%);
|
||
border-radius: 5px;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.tiaoguo {
|
||
width: 175.44rpx;
|
||
height: 70.18rpx;
|
||
font-size: 31.58rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 70.18rpx;
|
||
border-radius: 5px;
|
||
background-color: $uni-theme-color;
|
||
margin-left: 17.54rpx;
|
||
}
|
||
}
|
||
</style> |