<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"> 这是一名jiujs</span>
                </div>
                <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span>
                    <span class="text"> 这是一名jiujs发射点发射点点大夫</span>
                </div>
                <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">3</span> <span
                        class="text"> 这是一名jiujs啊沙发沙发沙发沙发沙发阿松大沙sdsa发</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> 