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>
        </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">
          <Box2
            v-if="chartOptions.data && chartOptions.data.length > 0"
            :chartOptions="chartOptions"
            height="95%"
          ></Box2>
          <el-empty v-else></el-empty>
        </el-card>
        <el-card class="h-60 mt-10">
          <Box1
            v-if="chartOptions.data && chartOptions.data.length > 0"
            :chartOptions="chartOptions"
            height="100%"
          ></Box1>
          <el-empty v-else></el-empty>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MapHy from "./components/map/index.vue";
import Box1 from "./components/box1/index.vue";
import Box2 from "./components/box1 copy/index.vue";
import PointsRanking from "./components/points-ranking/index.vue";
export default {
  components: {
    Box1,
    Box2,
    MapHy,
    PointsRanking,
  },
  data() {
    return {
      chartOptions: {
        xData: [],
        data: [],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.chartOptions.data = [
        120, 200, 150, 80, 70, 110, 130, 70, 110, 130, 200, 150,
      ];
      this.chartOptions.xData = Array(12)
        .fill(0)
        .map((it, i) => `${i + 1}月`);
    },
  },
};
</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;
  }
}
</style>