leromro-mini/pages_home/pages/publicize/index.vue

<template>


    <view class="details-main">
        <view class="header-bgc">
            <view class="flex_c_s">
                <view>
                    <view class="header-title">资质认证</view>
                    <view class="header-text">请选择认证的分类，审核通过后即可去接单</view>
                </view>
                <view class="header-icon"></view>
            </view>
            <view class="header-card flex_c_c">
                <view class="header-card-icon"></view>
                <view class="header-card-content">
                    <view class="header-card-title">去资质认证</view>
                    <view class="header-card-desc">请勿选择跨度太大的服务避免审核失败</view>
                </view>
                <up-icon name="arrow-right" color="#7B7B7B" size="14"></up-icon>
            </view>
        </view>
        <view class="content-main">
            <view class="content-box">
                <view class="content-title">认证流程</view>
                <view class="content-list">
                    <view v-for="(item,index) in list" :key="item.key" class="list-item">
                        <view class="flex_c_l">
                            <view class="list-icon flex_c_c">{{ item.key }}</view>
                            <view class="list-rigth">
                                <view class="list-name">{{ item.name }}</view>
                                <view class="list-text">{{ item.text }}</view>
                            </view>
                        </view>
                        <view class="list-line" v-if="index < 3 "></view>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>

<script setup>
import { ref } from 'vue';

const isRefreshing = ref(false)

const list = [
    {
        name: '申请资质认证',
        text: '在线上发起您的资质认证',
        key: 1
    },
    {
        name: '选择认证类目，填选个人信息',
        text: '选择您擅长的认证类型',
        key: 2
    },
    {
        name: '认证审核中',
        text: '审核员根据您提交的信息进行资质审核',
        key: 3
    },
    {
        name: '认证完成，开始接单',
        text: '认证通过开启接单，高效又省心',
        key: 4
    },
]


</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>