nk-shop2.0/pages/store/entryProcess/entryProcess.vue

<template>
  <view class="entryProcess">
    <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"></view>
          <view class="get-through" v-if="true">
            <text>1、填写入驻申请资本资料</text>
            <text>请按照营业执照和店招真实信息填写入驻基
              本材料，进行审核。</text>
            <button>开始填写</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    onLoad() {},
    onShow() {},
    methods: {},
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .entryProcess {
    height: 100%;
    background: linear-gradient(180deg, #F98649 0%, #F34E45 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;
        clear: both;
        width: 1px;
        height: 100%;
        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);
      }
    }
  }

  .text-box.get-through {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
</style>