maintenance_system/src/views/securitySurveillance/index.vue

<template>
    <div class="security-surveillance">
        <el-row style="display: flex;align-items: center;">
            <el-col :span="12">
                <TitleComponent title="安防监控管理" subtitle="实时监控、历史录像查询与视频管理" />
            </el-col>
            <!-- 关键：给内层 el-col 套上 el-row -->
            <el-col :span="12" style="text-align: right;">
                <el-row :gutter="16" justify="end"> <!-- gutter 可选，单位px，控制列间距 -->
                    <el-col :span="6" :push="3">
                        <el-input placeholder="搜索逆变器..." prefix-icon="search" />
                    </el-col>
                    <el-col :span="6" :push="3">
                        <el-select placeholder="请选择逆变器状态">
                            <el-option label="所有状态" value="0"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary">刷新数据<el-icon>
                                <Refresh />
                            </el-icon>
                        </el-button>
                    </el-col>
                </el-row> <!-- 闭合内层 el-row -->
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <Top />
        </el-row>
        <el-row style="margin-top: 20px;" :gutter="25">
            <el-col :span="18">
                <Spjk />
            </el-col>
            <el-col :span="6">
                <Spgl />
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col>
                <Sbzt />
            </el-col>
        </el-row>
    </div>

</template>
<style scoped>
.security-surveillance {
    padding: 20px;
    background-color: #F2F8FC;
}
</style>
<script setup>
import TitleComponent from "@/components/TitleComponent";
import Top from "./components/top"
import Spjk from "./components/spjk"
import Spgl from "./components/spgl";
import Sbzt from "./components/sbzt";
</script>