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

<template>
  <div class="map-container">
    <Header>配网安全精益管理辅助应用</Header>
    <el-row :gutter="10">
      <el-col :span="12" class="h-full-calc">
        <el-card class="h-48">
          <PointsRanking></PointsRanking>
        </el-card>
        <el-card class="h-48 mt-10">
          <TargetSituation height="100%"></TargetSituation>

          <!-- <MapView></MapView> -->
        </el-card>
      </el-col>
      <el-col :span="12" class="h-full-calc">
        <el-card>
          <MapHy></MapHy>
        </el-card>
        <!-- <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";
import TargetMonth from "./components/TargetMonth/index.vue";
import Header from "./components/Header.vue";
// import MapView from "../map-view/MapView.vue";

export default {
  components: {
    TargetMonth,
    TargetSituation,
    RiskIdentification,
    MapHy,
    PointsRanking,
    Header,
    // 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 - 30px);
  height: calc(100vh - 90px);
}
.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;
    background-image: url("../../assets/images/card_bg.png");
    // background-color: rgba(0, 34, 51, 0.6);
    background-repeat: no-repeat;
    background-size: 100% 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: #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>