<template>
  <el-container>
      <el-aside width="200px">
        <h3 class="mb-2">流场示例</h3>
        <el-menu
          default-active="/leafletwind"
          class="el-menu-vertical-demo"
          :default-openeds="['leaflet']"
          :unique-opened="true"
          router
        >
          <el-sub-menu index="leaflet">
            <template #title>leaflet</template>
            <el-menu-item index="/leafletwind">风场</el-menu-item>
            <el-menu-item index="/leafletcurrent">洋流</el-menu-item>
            <el-menu-item index="/leafletocean">涌浪</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="cesium">
            <template #title>Cesium</template>
            <el-menu-item index="/cesiumwind">风场</el-menu-item>
            <el-menu-item index="/cesiumcurrent">洋流</el-menu-item>
            <el-menu-item index="/cesiumocean">涌浪</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="amap">
            <template #title>高德地图</template>
            <el-menu-item index="/amapwind">风场</el-menu-item>
            <el-menu-item index="/amapcurrent">洋流</el-menu-item>
            <el-menu-item index="/amapocean">涌浪</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="bmap">
            <template #title>百度地图</template>
            <el-menu-item index="/bmapwind">风场</el-menu-item>
            <el-menu-item index="/bmapcurrent">洋流</el-menu-item>
            <el-menu-item index="/bmapocean">涌浪</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="openlayer">
            <template #title>openlayer</template>
            <el-menu-item index="/openlayerwind">风场</el-menu-item>
            <el-menu-item index="/openlayercurrent">洋流</el-menu-item>
            <el-menu-item index="/openlayerocean">涌浪</el-menu-item>
          </el-sub-menu>
          <!-- <el-menu-item index="leaflet">
            <el-icon><document /></el-icon>
            <span>leaflet</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>Navigator Four</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
</template>
<style>
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  max-width: 100vw;
}
.el-menu {
  border-right: 0px !important;
}
.el-menu-item span {
  font-size: 16px;
  font-weight: bold;
}

.el-main {
  padding: 0 !important;
}
.el-container {
  height: 100vh;
}
.el-sub-menu__title {
  font-size: 16px !important;
  font-weight: bold;
}
</style>
