shop-applet/pages/store/entryProcess/entryProcess.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>