JDHDB/src/components/Layouts/index.vue

<template>
    <div id="layout">
        <div class="layout-cont">
            <div class="map">
                <img src="@/assets/images/layout_cont.png" alt="地图图片">
            </div>
            <div class="map-card lb">
                <div class="title">图例</div>
                <div class="item">重大风险</div>
                <div class="item level-1">较大风险</div>
                <div class="item level-2">一般风险</div>
                <div class="item level-3">低风险</div>
            </div>    
            <div class="map-card rt">
                <div class="title">作业项目</div>
                <div class="item" v-for="(item,index) in items" :key="'project-work'+index" :class="item.color?'custom':'project-'+index">
                    <span>
                        <span class="icon" v-if="item.color" :style="{backgroundColor: item.color}" />
                        <span>{{item.name}}</span>                    
                    </span>
                    <span class="number" v-if="item.number">{{item.number}}</span>
                </div>
            </div>              
        </div>
    </div>
</template>
<script>
export default {
    name:'Layouts',
    setup() {
        return{
            items:[
                {color:'#F53F3F',name:"动火作业"},
                {color:'#F49062',name:"受限空间作业"},
                {color:'#CC5120',name:"高处作业"},
                {color:'#165DFF',name:"起重作业"},
                {color:'#FADC19',name:"预热器清堵作业",number:"3"},
                {color:'#9FDB1D',name:"篦冷机清大块作业",number:"5"},
                {color:'#00B42A',name:"交叉作业"},
                {color:'#14C9C9',name:"临时用电作业",number:"1"},
                {color:'#3491FA',name:"动土作业",number:"1"},
                {color:'#722ED1',name:"断路作业",number:"2"},
                {color:'#E744E7',name:"防护设备拆除"},
                {color:'#F5319D',name:"高温及其他危险作业"},
                {color:'#86909C',name:"盲板抽堵作业"}
            ]
        }
    },
    mounted() {
            
    },
}
</script>
<style lang="scss" scoped>
#layout{
    &{
        width: 100%;
        height: calc(100% - 11.82vh); 
        position: absolute;
        top: 11.78vh;
    }
    .layout-cont{
        width: 100%;
        height: 100%;
        // border: 1px solid rgb(0, 255, 213);  
        box-sizing: border-box; 
        .map{
        // 2420.41*1868.11
            display: block;
            width: 63.03vw;
            height: 86.49vh;
            margin: 0 auto;
            // border: 1px solid red;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .map-card{
            padding:0.8vw;
            position: absolute;
            box-sizing: border-box;
            background: linear-gradient( rgba(4, 58, 152, 0.2),rgba(4, 58, 152, 0.4));
            background-image: radial-gradient(
            rgba(39, 115, 255, 0.1) 50%,
            rgba(39, 115, 255, 0.2),
            rgba(39, 115, 255, 0.5));
            .title{
                color: #fff;
                font-size: 1.2vh;
                line-height: 1;
                font-weight: bold;
                padding-bottom: 0.1vh;
                font-family: Microsoft YaHei UI;
            }
            &.lb{
               min-width: 7.92%;
               bottom:4.76vh;
               left: 2%;
            }
            &.rt{
               top: 1.5vh; 
               right: 2%;
               min-width:13.33% ;
               .title{
                color: #0075ff;
               }
            }
            .item{
                position: relative;
                color: #fff;
                font-size: 1.5vh;
                line-height: 1;
                margin-top: 1.6vh;
                text-indent: 1.5vw;
                display: flex;
                justify-content: space-between;
                .number{
                    font-family: 'YouSheBiaoTiHei';
                }
                &::before{
                    display: block;
                    content: "";
                    width: 1vw;
                    height: 0.6vw;
                    background-color: red;
                    position: absolute;
                    left: 0;
                    top: 0.12vh;
                    border: 2px solid #000;
                } 
                &.custom::before{
                    display: none;
                }
                &.custom .icon{
                    display: block;
                    width: 1vw;
                    height: 0.6vw;
                    background-color: red;
                    position: absolute;
                    left: 0;
                    top: 0.12vh;
                    border: 2px solid #000;                    
                }
                &.level-1::before{
                    background-color: #FF6100;
                }   
                &.level-2::before{
                    background-color: #FFFF00;
                } 
                &.level-3::before{
                    background-color: #0000FF;
                }  
                // 作业项目 
                &.project-1::before{
                    background-color: #F53F3F;
                }    
                &.project-2::before{
                    background-color: #F49062;
                } 
                &.project-3::before{
                    background-color: #CC5120;
                } 
                &.project-4::before{
                    background-color: #165DFF;
                } 
                &.project-5::before{
                    background-color: #FADC19;
                } 
                &.project-6::before{
                    background-color: #9FDB1D;
                } 
                &.project-7::before{
                    background-color: #00B42A;
                } 
                &.project-8::before{
                    background-color: #14C9C9;
                }      
                &.project-9::before{
                    background-color: #3491FA;
                } 
                &.project-10::before{
                    background-color: #722ED1;
                } 
                &.project-11::before{
                    background-color: #E744E7;
                } 
                &.project-12::before{
                    background-color: #F5319D;
                } 
                &.project-13::before{
                    background-color: #86909C;
                }                   
            }
        }
    }
}
</style>