<template>
  <div class="box">
    <el-row class="row">
      <!-- 左侧区域 -->
      <el-col :span="17"
        class="left">
        <el-row class="left-content"
          type="flex"
          direction="vertical">
          <!-- 左侧上区域 -->
          <el-row class="left-top"
            type="flex">
            <el-col :span="12"
              class="left-top-left">
              <siteCp />
            </el-col>
            <el-col :span="12"
              class="left-top-right">
              <rowCp />
            </el-col>
          </el-row>
          <!-- 左侧下区域 -->
          <el-col :span="24"
            class="left-bottom">
            <noiseCp />
          </el-col>
        </el-row>
      </el-col>

      <!-- 右侧区域 -->
      <el-col :span="7"
        class="right">
        <!-- <statuCp /> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import rowCp from "./components/baseInfo.vue";
import statuCp from "./components/netStatu.vue";
import noiseCp from "./components/noiseRatio.vue";
import siteCp from "./components/siteShow.vue";

export default {
  components: {
    siteCp, noiseCp, rowCp, statuCp
  },

}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  position: relative;
  display: flex;
  /* 方便查看 .box 的区域 */
}

.row {
  height: 100%;
  width: 100%;
}

.left {
  display: flex;
  height: 100%;
  flex-direction: column;
  /* 左侧区域背景颜色 */
  padding: 0;
  /* 确保填满整个区域 */
}

.right {
  height: 100%;
  /* 右侧区域背景颜色 */
  padding: 0;
  /* 确保填满整个区域 */
}

.left-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.left-top {
  display: flex;
  flex-direction: row;
  height: 50%;
  /* 占据父元素的一半高度 */
}

.left-top-left {
  /* 左侧上左区域背景颜色 */
  flex: 1;
  /* 占据左侧上区域的 50% 宽度 */
  padding: 10px;
}

.left-top-right {
  /* 左侧上右区域背景颜色 */
  flex: 1;
  /* 占据左侧上区域的 50% 宽度 */
  padding: 10px;
}

.left-bottom {
  /* 左侧下区域背景颜色 */
  flex: 1;
  /* 占据剩余高度 */
  padding: 10px;
}
</style>
