chelvc-custom/src/pageMerchant/mineModule/certification/components/top-process.vue

<template>
  <view class="container">
    <view class="top-box">
      <span class="top-title">商家开店流程</span>
      <view class="process-box">
        <view class="process-item">
          <view class="item">
            1
          </view>
          <span>提交资料</span>
        </view>
        <view class="border"></view>
        <view class="process-item">
          <view class="item">
            2
          </view>
          <span>平台审核</span>
        </view>
        <view class="border"></view>
        <view class="process-item">
          <view class="item">
            3
          </view>
          <span>开始营业</span>
        </view>
      </view>
    </view>
  </view>
</template>

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

      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .top-box {
      background-color: #F7F7F7;
      padding: 40rpx;
      border-radius: 20rpx;

      .top-title {
        font-weight: 600;
        font-size: 32rpx;
      }

      .process-box {
        display: flex;
        justify-content: space-around;
        margin-top: 30rpx;
        width: 100%;

        .process-item {
          .item {
            background-color: #5992BB;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            color: #fff;
            font-size: 36rpx;
            text-align: center;
            line-height: 100rpx;
            margin: 0 auto 20rpx;
          }
        }

        .border {
          width: 15%;
          height: 2rpx;
          border-bottom: 2rpx solid #000;
          margin-top: 8%;
        }
      }
    }
  }
</style>