<template>
    <el-card header="步骤条结构样式">
        <div class="step-wrap">
            <div
                v-for="item in list"
                :key="item.title"
                class="step-item"
            >
                <samp :style="{ backgroundColor: item.color }"></samp>
                <span>{{ item.title }}</span>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="jsx">
import { ref } from 'vue';

const list = ref([
    {
        color: 'green',
        title: '步骤1',
    },
    {
        color: 'blue',
        title: '步骤2',
    },
    {
        color: 'purple',
        title: '步骤3',
    },
    {
        color: 'orange',
        title: '步骤4',
    },
]);
</script>

<style lang="scss" scoped>
.step-wrap {
    display: block;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    color: #999;

    .step-item {
        display: flex;
        align-items: center;
        padding-left: 20px;
        height: 50px;

        &:last-child > samp::before {
            height: 0px;
        }

        samp {
            display: block;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background-color: #ccc;
            margin-right: 10px;
            z-index: 9;

            &::before {
                display: block;
                position: relative;
                left: 5px;
                top: 11px;
                content: '';
                width: 1px;
                height: 50px;
                background-color: #ccc;
            }
        }

        span {
            display: block;
            line-height: 50px;
        }
    }
}
</style>
