<template>
    <div class="air-sky-land">
        <!-- 地图 -->
         <div class="map-section">
            <MapCenter />
         </div>

        <div class="left-section">
            <div class="remote-monitor-section">
                <SectionTitle title="遥感监控（空）" />
                <!-- 遥感监控 -->
                <RemoteMonitor />
            </div>

            <div class="aircraft-monitor-section">
                <SectionTitle title="无人机检测（天）" />
                <!-- 无人机检测 -->
                <AircraftMonitor />
            </div>
        </div>

        <div class="common-monitor-section">
            <SectionTitle title="常规检测（地）" />
            <!-- 常规检测 -->
            <CommonMonitor />
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import SectionTitle from './components/SectionTitle/SectionTitle.vue';
import RemoteMonitor from './components/RemoteMonitor/RemoteMonitor.vue';
import CommonMonitor from './components/CommonMonitor/CommonMonitor.vue';
import AircraftMonitor from './components/AircraftMonitor/AircraftMonitor.vue';
import MapCenter from './components/MapCenter/MapCenter.vue';

</script>
<style scoped lang="scss" src="./AirSkyLand.scss"></style>