<template>
  <div class="map-container">
    <el-row :gutter="10">
      <el-col :span="12" class="h-full-calc">
        <el-card class="h-40">
          <PointsRanking></PointsRanking>
        </el-card>
        <el-card class="h-60 mt-10">
          <MapHy></MapHy>
        </el-card>
      </el-col>
      <!-- <el-col :span="8" class="h-full-calc">
        <el-card class="h-full">
          <MapHy></MapHy>
        </el-card>
      </el-col> -->
      <el-col :span="12" class="h-full-calc">
        <el-card class="h-40">
          <RiskIdentification height="95%"></RiskIdentification>
        </el-card>
        <el-card class="h-60 mt-10">
          <TargetSituation height="100%"></TargetSituation>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MapHy from "./components/map/index.vue";
import TargetSituation from "./components/TargetSituation/index.vue";
import RiskIdentification from "./components/RiskIdentification/index.vue";
import PointsRanking from "./components/PointsRanking/index.vue";

export default {
  components: {
    TargetSituation,
    RiskIdentification,
    MapHy,
    PointsRanking,
  },
  data() {
    return {
      chartOptions1: {
        data: [],
      },
      chartOptions2: {
        xData: [],
        data: [],
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.mt-10 {
  margin-top: 10px;
}
.map-container {
  padding: 15px;
  background-color: rgba(11, 42, 96, 0.8);
}
.h-full-calc {
  height: calc(100vh - 200px);
}
.mt-10 {
  margin-top: 10px;
}
.c-title {
  border-left: 4px solid #000;
}
.el-card {
  height: 100%;
}
.h-40 {
  height: calc(33% - 5px);
}
.h-60 {
  height: calc(67% - 5px);
}
.h-48 {
  height: calc(50% - 5px);
}
.el-card__body {
  height: 100%;
}
::v-deep {
  .el-card__body {
    height: 100%;
  }
  .el-card {
    border: none;
    background-color: rgba(11, 42, 96, 0);
  }
  .el-table {
    background-color: transparent;
    color: white;
  }
  .el-table tr {
    background-color: transparent !important;
  }
  .el-table th {
    color: white;
    background-color: transparent !important;
  }
  .el-loading-mask {
    background-color: transparent !important;
  }
  /* 修改下拉框默认状态下的背景色 */
  .el-select,
  .el-date-editor {
    .el-input__inner {
      color: #fff !important;
      background-color: #5a6fc0 !important;
      border: none !important;
    }
  }
  .el-select-dropdown__list {
    background-color: #5a6fc0 !important;
  }
  .el-range-editor,
  .el-range-input,
  .el-range-separator {
    color: #fff !important;
    background-color: #5a6fc0 !important;
    border: none !important;
  }
  /* 修改下拉框悬停时的背景色 */
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #5a6fc0 !important;
  }
}
</style>
