hycw-ui/src/views/home/index.vue

<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>
          <!-- <MapView></MapView> -->
        </el-card>
      </el-col>
      <el-col :span="12" class="h-full-calc">
        <el-card class="h-40">
          <RiskIdentification height="95%"></RiskIdentification>
          <!-- <TargetSituation height="100%"></TargetSituation> -->
        </el-card>
        <el-card class="h-60 mt-10">
          <TargetSituation height="100%"></TargetSituation>
          <!-- <TargetMonth height="100%"></TargetMonth> -->
        </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";
import TargetMonth from "./components/TargetMonth/index.vue";
// import MapView from "../map-view/MapView.vue";

export default {
  components: {
    TargetMonth,
    TargetSituation,
    RiskIdentification,
    MapHy,
    PointsRanking,
    // MapView,
  },
  data() {
    return {
      chartOptions1: {
        data: [],
      },
      chartOptions2: {
        xData: [],
        data: [],
      },
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.mt-10 {
  margin-top: 10px;
}
.map-container {
  width: 100%;
  overflow-x: hidden;
  // height: 100vh;
  padding: 15px;
  // position: relative;
  background-image: url("../../assets/images/bg3.409270cc.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  // background-size: 100% 100%;
}
.h-full-calc {
  height: calc(100vh - 110px);
  // height: calc(100vh);
}
.mt-10 {
  margin-top: 10px;
}
.c-title {
  border-left: 4px solid #000;
}
.el-card {
  height: 100%;
}
.h-40 {
  height: calc(33% - 5px);
}
.h-60 {
  width: 100%;
  height: calc(67% - 5px);
}
.h-48 {
  height: calc(50% - 5px);
}
::v-deep {
  .el-card__body {
    height: 100%;
    border: 1px solid #1b3166;
  }
  .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: #00a4ff !important;
      border: none !important;
    }
  }
  .el-select-dropdown__list {
    background-color: #00a4ff !important;
  }
  .el-range-editor,
  .el-range-input,
  .el-range-separator {
    color: #fff !important;
    background-color: #00a4ff !important;
    border: none !important;
  }
  /* 修改下拉框悬停时的背景色 */
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #00a4ff !important;
  }
}
</style>