可视化大屏flex布局

九个盒子

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

defineOptions({
  name: "BigScreen"
});

const screenName = ref<string>("大屏标题");

// 窗口大小变化处理
const handleResize = (): void => {
  const container: HTMLElement | null = document.querySelector(".big-screen");
  if (container) {
    container.style.width = `${window.innerWidth}px`;
    container.style.height = `${window.innerHeight}px`;
  }
};

onMounted((): void => {
  window.addEventListener("resize", handleResize);
  handleResize();
});

onUnmounted((): void => {
  window.removeEventListener("resize", handleResize);
});
</script>

<template>
  <div class="big-screen">
    <div class="header">{{ screenName }}</div>

    <!-- 九宫格布局 -->
    <div class="grid-container">
      <div class="grid-item" v-for="i in 9" :key="i">
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">图表{{ i }}</div>
            <div class="chart-total">统计{{ i }}</div>
          </div>
          <div class="chart-content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.big-screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    // background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr; // 修改宽度
    grid-template-rows: 1fr 1fr 1fr; // 修改高度
    gap: 10px;
    padding: 20px;
    height: calc(100% - 60px);
    box-sizing: border-box;

    .grid-item {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;

      .chart-container {
        height: 100%;
        display: flex;
        flex-direction: column;

        .chart-header {
          width: 100%;
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #ccc;
        }

        .chart-content {
          flex: 1;
          background-color: #f8f8f8;
        }
      }
    }
  }
}
</style>

八个盒子

增加样式

// 设置为中间列两行 &:nth-child(2) { *grid-column*: 2 / 3; *grid-row*: 1 / 3; } // 设置为中间列两行

将盒子数改为8

<div class="grid-item" v-for="i in 8" :key="i">

六个盒子

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

defineOptions({
  name: "BigScreen"
});

const screenName = ref<string>("大屏标题");

// 窗口大小变化处理
const handleResize = (): void => {
  const container: HTMLElement | null = document.querySelector(".big-screen");
  if (container) {
    container.style.width = `${window.innerWidth}px`;
    container.style.height = `${window.innerHeight}px`;
  }
};

onMounted((): void => {
  window.addEventListener("resize", handleResize);
  handleResize();
});

onUnmounted((): void => {
  window.removeEventListener("resize", handleResize);
});
</script>

<template>
  <div class="big-screen">
    <div class="header">{{ screenName }}</div>

    <!-- 九宫格布局 -->
    <div class="grid-container">
      <div class="grid-item left-box">
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">左侧盒子 - 行1</div>
            <div class="chart-total">统计</div>
          </div>
          <div class="chart-content"></div>
        </div>
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">左侧盒子 - 行2</div>
            <div class="chart-total">统计</div>
          </div>
          <div class="chart-content"></div>
        </div>
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">左侧盒子 - 行3</div>
            <div class="chart-total">统计</div>
          </div>
          <div class="chart-content"></div>
        </div>
      </div>
      <div class="grid-item right-box">
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">右侧盒子 - 行1</div>
            <div class="chart-total">统计</div>
          </div>
          <div class="chart-content"></div>
        </div>
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">右侧盒子 - 行2</div>
            <div class="chart-total">统计</div>
          </div>
          <div class="chart-content"></div>
        </div>
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">右侧盒子 - 行3</div>
            <div class="chart-total">统计</div>
          </div>
          <div class="chart-content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.big-screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; // 修改为两列布局，左右各占30%，中间占40%
    gap: 10px;
    padding: 20px;
    height: calc(100% - 60px);
    box-sizing: border-box;

    .grid-item {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
      display: grid; // 添加网格布局
      grid-template-rows: repeat(3, 1fr); // 添加三行布局
      gap: 10px; // 添加行间距

      .chart-container {
        height: 100%;
        display: flex;
        flex-direction: column;

        .chart-header {
          width: 100%;
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #ccc;
        }

        .chart-content {
          flex: 1;
          background-color: #f8f8f8;
        }
      }
    }

    .left-box {
      grid-column: 1 / 2;
    }

    .right-box {
      grid-column: 3 / 4;
    }
  }
}
</style>

两个盒子

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

defineOptions({
  name: "BigScreen"
});

const screenName = ref<string>("大屏标题");

// 窗口大小变化处理
const handleResize = (): void => {
  const container: HTMLElement | null = document.querySelector(".big-screen");
  if (container) {
    container.style.width = `${window.innerWidth}px`;
    container.style.height = `${window.innerHeight}px`;
  }
};

onMounted((): void => {
  window.addEventListener("resize", handleResize);
  handleResize();
});

onUnmounted((): void => {
  window.removeEventListener("resize", handleResize);
});
</script>

<template>
  <div class="big-screen">
    <div class="header">{{ screenName }}</div>

    <!-- 九宫格布局 -->
    <div class="grid-container">
      <div class="grid-item left-box">
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">左侧盒子</div>
            <div class="chart-total">统计</div>
          </div>
          <div class="chart-content"></div>
        </div>
      </div>
      <div class="grid-item right-box">
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-title">右侧盒子</div>
            <div class="chart-total">统计</div>
          </div>
          <div class="chart-content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.big-screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; // 修改为两列布局，左右各占30%，中间占40%
    gap: 10px;
    padding: 20px;
    height: calc(100% - 60px);
    box-sizing: border-box;

    .grid-item {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;

      .chart-container {
        height: 100%;
        display: flex;
        flex-direction: column;

        .chart-header {
          width: 100%;
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #ccc;
        }

        .chart-content {
          flex: 1;
          background-color: #f8f8f8;
        }
      }
    }

    .left-box {
      grid-column: 1 / 2;
    }

    .right-box {
      grid-column: 3 / 4;
    }
  }
}
</style>