sis_zhfx/src/components/coms/progress-bar/progress-bar.vue

<template>
    <div class="progress-bar">
        <div class="progress-bar-header">
            <div class="progress-bar-title gray-l font-md">{{ title }}</div>
            <div class="progress-bar-state" :class="'bg-' + color"></div>
        </div>
        <div class="progress-bar-body">
            <div class="progress-bar-name">
                <div class="progress-bar-text gray font-sm">{{ name }}</div>
                <div class="progress-bar-progress font-md" :class="color">{{progress}}%</div>
            </div>
            <div class="progress-bar-box">
                <div class="progress-bar-bar" :class="'bg-' + color" :style="'width: ' + progress + '%;'"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "progress-bar",
    componentName: "progress-bar",
    props: {
        progress: {
            type: Number,
            default: 80,
        },
        color: {
            type: String,
            default: "green",
        },
        title: {
            type: String,
            default: "风机",
        },
        name: {
            type: String,
            default: "风机健康度",
        },
    },
    data() {},
    methods: {},
};
</script>

<style lang="less">
.progress-bar {
    width: 100%;

    .progress-bar-header {
        width: 100%;
        height: 3.148vh;
        background: #53626833;
        display: flex;
        align-items: center;
        padding: 0 1.852vh;

        .progress-bar-state {
            width: 1.111vh;
            height: 1.111vh;
            border-radius: 50%;
            margin-left: auto;
            position: relative;

            &::after {
                content: "";
                width: 1.667vh;
                height: 1.667vh;
                border-radius: 50%;
                background: #53626833;
                position: absolute;
                top: -0.278vh;
                left: -0.278vh;
            }
        }
    }

    .progress-bar-body {
        padding: 11px 20px;

        .progress-bar-name {
            display: flex;

            .progress-bar-progress {
                margin-left: auto;
            }
        }

        .progress-bar-box {
            width: 100%;
            height: 0.741vh;
            background: #53626833;
            margin-top: 0.741vh;
            position: relative;

            .progress-bar-bar {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
        }
    }
}
</style>