<template>
  <div class="main">
    <!-- 四个角的装饰 -->
    <div class="corner corner-top-left"></div>
    <div class="corner corner-top-right"></div>
    <div class="corner corner-bottom-left"></div>
    <div class="corner corner-bottom-right"></div>

    <div class="left">
      <left></left>
    </div>
    <div class="right">
      <right></right>
    </div>
    <!-- 地图中心 -->
    <div class="center">
      <MapCenter />
    </div>
    <div class="bottom">
      <bottom></bottom>
    </div>
    <top class="top"></top>
  </div>
</template>

<script setup>
import left from "./left.vue";
import right from "./right.vue";
import bottom from "./bottom.vue";
import top from "./top.vue";
import MapCenter from "../cockpit/components/MapCenter.vue";
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/RiskWarning_img/遮罩层.png");
  background-size: cover;
  background-position: center;
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 30%;
  height: 100%;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
  height: 100%;
}

.bottom {
  position: absolute;
  bottom: 10px;
  left: 30%;
  width: 40%;
  height: 50%;
}

.top {
  position: absolute;
  top: 10px;
  left: 30%;
  width: 40%;
  height: 15%;
  // background-color: #15293B;
}

.center {
  position: absolute;
  top: 0;
  // left: 25%;
  width: 100%;
  height: 100%;
  z-index: -1;
}

// 四个角的装饰
.corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #40a9ff;
  z-index: 100;
  pointer-events: none;

  &.corner-top-left {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 4px;
  }

  &.corner-top-right {
    top: 10px;
    right: 10px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 4px;
  }

  &.corner-bottom-left {
    bottom: 10px;
    left: 10px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 4px;
  }

  &.corner-bottom-right {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 4px;
  }
}
</style>
