<template>
  <div class="common-layout">
    <el-container class="el-container">
      <!-- 头部 -->
      <el-header class="el-header">
        <h2>220kV南河变电站辅助设备监控系统(全站总览)</h2>
      </el-header>

      <!-- 主题 -->
      <el-main class="el-main">
        <RouterView />

        <!-- <RouterView /> -->
        <!-- <index /> -->
      </el-main>

      <!-- 底部 -->
      <el-footer class="el-footer">
        <div class="footer-navigation">
          <el-button plain class="nav-item flex-1">全站报文</el-button>
          <el-button plain class="nav-item flex-1">越限信息</el-button>
          <el-button plain class="nav-item flex-1">异常设备</el-button>
          <el-button plain class="nav-item flex-1">消防系统</el-button>
          <el-button plain class="nav-item flex-1">安全防范</el-button>
          <el-button plain class="nav-item flex-1">在线监测</el-button>
          <el-button plain class="nav-item flex-1">给排水系统</el-button>
          <el-button plain class="nav-item flex-1">环境监控</el-button>
          <el-button plain class="nav-item flex-1">照明控制</el-button>
          <el-button plain class="nav-item flex-1">智能锁控</el-button>
          <el-button plain class="nav-item flex-1">智能联动</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { createRouter, RouterView } from 'vue-router';
import index from '@/layout/themeLayout/index.vue';
</script>

<style lang="less" scoped>
.common-layout {
  width: 100%;
  height: 100vh;

  .el-container {
    width: 100%;
    height: 100vh;
    .el-header {
      width: 100%;
      height: 8vh;
      //   background: #25af91;
      display: flex;
      align-items: center;
      justify-content: center;
      h2 {
        margin: 0px;
        padding: 0;
        text-align: center;
        // display: inline;
      }
    }
    .el-main {
      margin: 0px;
      padding: 0px;
      width: 100%;
      flex: 1;
      min-height: 0;
      //   background: #441c66;
    }
    .el-footer {
      width: 100%;
      height: 8vh;
      //   background: #4a6cde;
      padding: 0;
      display: flex;
      .footer-navigation {
        width: 100%;
        display: flex;
        .nav-item {
          margin: 0;
          border-radius: var(--el-border-radius-base);
          flex: 1;
          height: 100%;
        }
      }
    }
  }
}
</style>
