<template>
    <div class="stepNoticPage">
        <div class="everyBox">
            <span class="markStep1"></span>
            <span>代表当前执行步骤</span>
        </div>
        <div class="everyBox">
            <span class="markStep2"></span>
            <span>代表已执行完步骤</span>
        </div>
        <div class="everyBox">
            <span class="markStep3"></span>
            <span>代表未执行步骤</span>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    created() {
        
    },
    methods: {
        
    }
}
</script>
<style lang='scss' scoped>
    .stepNoticPage {
        padding-left: 16px;
        .imgStyle {
            width: 100%;
            height: auto;
        }
        .everyBox{
            position: relative;
            display: inline-block;
            width: 150px;
            span:first-child{
                display: inline-block;
                width: 32px;
                height: 10px;
                border-radius: 5px;
            }
            span:last-child{
                position: absolute;
                top: 0px;
                left: 40px;
                font-size: 12px;
            }
        }
        .markStep1{
            background: #ffcccc;
            border: 1px solid #cc3333;
        }
        .markStep2{
            background: #d3f5e2;
            border: 1px solid #99ca40;
        }
        .markStep3{
            background: #fdf5e6;
            border: 1px solid #99ca40;
        }
    }
</style>