<template>
    <div class="respon">
        <div class="szbw">
            <img :src="getImgUrl('system/text.gif')" alt="">
            <div class="respon_text">
                <span>所在部位</span>
                <span>烟草安全生产科</span>
            </div>
        </div>
        <div class="respon_list">
            <div class="respon_zrbw">
                <img :src="getImgUrl('indexImages/icon8.png')">
                <div>
                    <div class="title">责任部位</div>
                    <div class="num">
                        <span>2</span>处
                    </div>
                </div>
            </div>
            <div class="respon_zrbw">
                <img :src="getImgUrl('indexImages/icon9.png')">
                <div>
                    <div class="title">责任设备</div>
                    <div class="num">
                        <span>86</span>个
                    </div>
                </div>
            </div>
        </div>
        <ul class="propress">
            <li v-for="item in progList" :key="item">
                <span>{{ item.text }}&nbsp;:</span>
                <span>{{ item.num }}</span>
                <el-progress :text-inside="true" :percentage="item.num" :type="line" :stroke-width="7"
                    :show-text="false" />
            </li>
        </ul>
    </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
const progList = [
    {
        text: '设备一',
        num: '21',
    },
    {
        text: '设备二',
        num: '12',
    }, {
        text: '设备三',
        num: '12',
    }, {
        text: '设备四',
        num: '21',
    }, {
        text: '设备五',
        num: '12',
    },
    {
        text: '设备六',
        num: '18',
    }
]

</script>
<style lang="scss" scoped>
.respon {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .szbw {
        display: flex;
        margin-top: 10px;
        height: 90px;
        padding: 10px;
        box-sizing: border-box;
        background: rgba($color: #24363E, $alpha: 0.3);

        img {
            width: 110px;
            height: 70px;
        }

        .respon_text>span {
            display: block;
            margin: 12px;
            text-align: center;
            color: #BDC2C5;
            font-weight: 400;
            font-size: 16px;
        }

        .respon_text>span:first-child {
            background: rgba($color: #13947D, $alpha: 0.3);
            width: 70px;
            font-size: 12px;
            line-height: 20px;
            color: #5EFFD4;
        }
    }

    .respon_list {
        display: flex;
        margin-top: 10px;

        .respon_zrbw {
            flex: 1;
            display: flex;
            align-items: center;
            height: 60px;
            margin: 0 4px;
            background: rgba($color: #24363E, $alpha: 0.3);

            img {
                width: 28px;
                height: 28px;
                margin: 0 20px;
            }

            >div {
                .title {
                    font-size: 14px;
                    color: #539895;
                }

                .num {
                    font-size: 14px;
                    color: #A1966E;

                    span {
                        font-size: 18px;
                        color: #539895;
                        margin-right: 4px;
                    }
                }
            }
        }
    }

    .propress {
        height: 90px;
        margin-top: 10px;
        padding: 0 12px;
        box-sizing: border-box;

        li {
            width: 30%;
            overflow: hidden;
            float: left;
            line-height: 34px;
            margin: 0 4px 4px 4px;

            span {
                margin: 0 5px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #EBFBFF;
                line-height: 11px;
                overflow: hidden;
            }

            .el-progress {
                margin-top: 5px;
                overflow: hidden;
            }
        }
    }
}

::v-deep .el-progress-bar__outer {
    background-color: #000;
    border-radius: 0px !important;
}

::v-deep .el-progress-bar__inner {
    background-color: #1ADBA9 !important;
    border-radius: 0px;

}
</style>
