plantScreen/src/components/warnDetail.vue

<template>
    <div class="warn-box">
        <div class="offWarn" @click="emit('off')">关闭</div>
        <div class="box-top">
            <img :src="u" style="width: 5vw;height: 4.5vw;" alt="">
            <div style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 1vw;">
                <div style="font-family:FZCYJ ;">告警数据:</div>
                <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">1</span>
                    <span class="text"> 老东赛！</span>
                </div>
                <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span>
                    <span class="text"> 这是一名后端开发</span>
                </div>
                <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">3</span> <span
                        class="text"> 这是一名地方都是开发建设的咖啡机发动机</span>
                </div>
            </div>
        </div>
        <div class="box-bottom">

            <div style="font-family: FZCYJ;">告警原因</div>
            <div class="text" style="width: 10vw;">这地方时间回到房间和第三方季后赛得分</div>
            <div style="font-family: FZCYJ;margin-top: 1vh;">建议解决方案</div>
            <div class="settle text">实打实的技术的开发和迪斯科飞机还是打开非官方的离开国家队联发科更健康</div>
        </div>



    </div>
</template>

<style lang="scss" scoped>
.warn-box {
    width: 91%;
    top: 8.5vh;
    height: 21vh;
    z-index: 1;
    position: absolute;
    // margin-left: 1%;
    backdrop-filter: blur(4px);
    background-color: rgba(14, 53, 113, 0.6);
    box-sizing: border-box;
    padding: 2vh;

    .offWarn {
        position: absolute;
        right: 1vh;
        cursor: pointer;
    }

    .box-top {
        display: flex;
        height: 4.5lvw;

        .warn-li {
            position: relative;
            display: flex;
            width: 15vw;
            align-items: center;


            .pm-img {
                position: absolute;
                width: 1vw;
                height: 1vw;
            }

            .pm-num {
                font-family: FZCYJ;
                // margin: 0 5px;
                margin-left: 0.3vw;
                margin-right: 0.5vw;
            }



        }
    }

    .box-bottom {
        margin-top: 1vh;
    }

    .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }
}
</style>
<script setup>
import { ref, reactive, defineEmits } from "vue"
const u = ref('https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png')

const emit = defineEmits(['off'])



</script>