mky-vent-base/src/views/vent/home/configurable/components/center-area-green.vue

<template>
    <div class="center-area-green">
        <div class="container">
            <div class="risk-score">
                <div class="item-label">风险得分</div>
                <div class="item-val">1.45</div>
            </div>
            <div class="dust-warn">
                <div class="dust-icon"></div>
                <div class="item-content">
                    <div class="ite-label">粉尘监测预警</div>
                    <div class="ite-val">低风险</div>
                </div>
            </div>
            <div class="vent-warn">
                <div class="vent-icon"></div>
                <div class="item-content">
                    <div class="ite-label">通风监测预警</div>
                    <div class="ite-val">低风险</div>
                </div>
            </div>
            <div class="gas-warn">
                <div class="gas-icon"></div>
                <div class="item-content1">
                    <div class="ite-content">
                        <div class="ite-label">瓦斯监测预警</div>
                        <div class="ite-val">低风险</div>
                    </div>
                    <div class="ite-content">
                        <div class="ite-label">矿井瓦斯等级鉴定</div>
                        <div class="ite-val">低瓦斯</div>
                    </div>
                </div>
            </div>
            <div class="device-warn">
                <div class="device-icon"></div>
                <div class="item-content">
                    <div class="ite-label">设备监测预警</div>
                    <div class="ite-val">低风险</div>
                </div>
            </div>
            <div class="fire-warn">
                <div class="fire-icon"></div>
                <div class="item-content">
                    <div class="ite-label">火灾监测预警</div>
                    <div class="ite-val">低风险</div>
                </div>
            </div>
        </div>
    </div>
</template>

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


</script>

<style lang="less" scoped>
.center-area-green {
    height: 100%;

    .container {
        position: relative;
        width: 100%;
        height: calc(100% - 25px);
        margin-top: 25px;
        background: url(/src/assets/images/home-green/1-1.png) no-repeat center;
        background-size: 95% 100%;
    }

    .risk-score {
        position: absolute;
        left: 50%;
        top: -46px;
        transform: translate(-44%, 0);
        width: 206px;
        height: 60px;
        font-size: 18px;
        color: #fff;
        background: url(/src/assets/images/home-green/1-2.png) no-repeat;
        background-size: 100% 100%;

        .item-label {
            text-align: center;
            margin-bottom: 5px;

        }

        .item-val {
            text-align: center;
            font-family: 'douyuFont';
        }
    }

    .dust-warn {
        position: absolute;
        left: 220px;
        top: 52px;
        width: 120px;
        height: 106px;
        background: url(/src/assets/images/home-green/1-7.png) no-repeat;
        background-size: 100% 100%;
    }

    .vent-warn {
        position: absolute;
        left: 134px;
        top: 232px;
        width: 120px;
        height: 106px;
        background: url(/src/assets/images/home-green/1-5.png) no-repeat;
        background-size: 100% 100%;
    }

    .gas-warn {
        position: absolute;
        left: 434px;
        top: 368px;
        width: 120px;
        height: 106px;
        background: url(/src/assets/images/home-green/1-3.png) no-repeat;
        background-size: 100% 100%;
    }

    .device-warn {
        position: absolute;
        right: 130px;
        top: 222px;
        width: 120px;
        height: 106px;
        background: url(/src/assets/images/home-green/1-6.png) no-repeat;
        background-size: 100% 100%;
    }

    .fire-warn {
        position: absolute;
        right: 121px;
        top: 52px;
        width: 120px;
        height: 106px;
        background: url(/src/assets/images/home-green/1-4.png) no-repeat;
        background-size: 100% 100%;
    }

    .item-content {
        position: absolute;
        left: -4px;
        top: -54px;
        width: 127px;
        height: 56px;
        background: url(/src/assets/images/home-green/1-8.png) no-repeat;
        background-size: 100% 100%;
    }
    .item-content1 {
        display: flex;
        position: absolute;
        left: -60px;
        top: -54px;
        width: 258px;
        height: 56px;
        background: url(/src/assets/images/home-green/1-9.png) no-repeat;
        background-size: 100% 100%;
    }
    .ite-label{
        text-align: center;
        margin-bottom: 8px;
        padding-top: 4px;
    }
    .ite-val{
        text-align: center;
        font-family: 'douyuFont';
    }
    .ite-content{
        width: 50%;
        height: 100%;
    }
}
</style>