maintenance_system/src/views/securitySurveillance/components/sbzt.vue

<template>
    <el-card style="border-radius: 15px;">
        <el-row gutter="35">
            <el-col :span="8" class="status-card">
                <div class="title">设备状态</div>
                <!-- gutter设置为20，创建左右间隙 -->
                <el-row gutter="20" style="width: 100%;">
                    <!-- 一行2个，每个占12格（24/2=12） -->
                    <el-col :span="12">
                        <div class="item">
                            <div class="status">在线</div>
                            <div class="count" style="color: rgba(0, 184, 122, 1);">{{ data?.sumOnLine || 0 }}</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="item">
                            <div class="status">离线</div>
                            <div class="count" style="color: rgba(102, 102, 102, 1);">{{ data?.sumOffLine || 0 }}</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="item">
                            <div class="status">网络延迟</div>
                            <div class="count" style="color: rgba(255, 208, 35, 1);">8</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="item">
                            <div class="status">故障</div>
                            <div class="count" style="color: rgba(227, 39, 39, 1);">1</div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="16" class="alarm-card">
                <div class="title">最近报警</div>
                <el-row class="list">
                    <el-col>
                        <div class="item red">
                            <div class="sub-title">
                                异常移动检测
                            </div>
                            <div class="content">
                                A区b栋102 | 今天08:23
                            </div>
                        </div>
                    </el-col>
                    <el-col>
                        <div class="item yellow">
                            <div class="sub-title">
                                设备连接不稳定
                            </div>
                            <div class="content">
                                A区b栋102 | 今天08:23
                            </div>
                        </div>
                    </el-col>
                    <el-col>
                        <div class="item red">
                            <div class="sub-title">
                                异常移动检测
                            </div>
                            <div class="content">
                                A区b栋102 | 今天08:23
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-card>
</template>
<style scoped>
.title {
    font-family: "Alibaba-PuHuiTi-Bold";
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgb(0, 30, 59);
    text-align: left;
    vertical-align: top;
    margin-bottom: 20px;
}

.status-card {

    .item {
        background: rgba(245, 245, 245, 0.2);
        border: 1px solid rgba(230, 233, 238, 1);
        margin-bottom: 20px;
        border-radius: 15px;
        padding: 15px 30px;
        text-align: center;

        .status {
            color: rgba(175, 175, 175, 1);
            font-size: 20px;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .count {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
    }
}

.alarm-card {
    .item {
        border: 1px solid #E6E9EE;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 10px;
        position: relative;
        padding-left: 20px;
        text-align: left;
    }

    .red {
        ::v-deep::before {
            position: absolute;
            content: '';
            background-color: rgba(227, 39, 39, 1);
            height: 100%;
            width: 7px;
            border-radius: 7px 0px 0px 7px;
            top: 0;
            left: 1px;
        }
    }

    .yellow {
        ::v-deep::before {
            position: absolute;
            content: '';
            background-color: rgba(255, 208, 35, 1);
            height: 100%;
            width: 7px;
            border-radius: 7px 0px 0px 7px;
            top: 0;
            left: 1px;
        }
    }
}
</style>
<script setup>
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})
</script>