AIzhushou-screen/src/views/index/index.vue

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import ItemWrap from "@/components/item-wrap";
const ContentHeader = defineAsyncComponent(() => import("./content-header.vue"));

// 导入左侧组件
const LeftTop = defineAsyncComponent(() => import("./components/LeftTop.vue"));
const LeftCenter = defineAsyncComponent(() => import("./LeftCenter.vue"));
const AverageDuration = defineAsyncComponent(() => import("./average-duration.vue"));
const LeftBottom = defineAsyncComponent(() => import("./components/LeftBottom.vue"));

// 导入中间组件
const CenterTop = defineAsyncComponent(() => import("./components/CenterTop.vue"));
const CenterBottom = defineAsyncComponent(() => import("./components/CenterBottom.vue"));

// 导入右侧组件
const RightTop = defineAsyncComponent(() => import("./components/RightTop.vue"));
const RightCenter = defineAsyncComponent(() => import("./components/RightCenter.vue"));
const RightBottom = defineAsyncComponent(() => import("./components/RightBottom.vue"));
</script>

<template>
  <div class="index-box">
    <ContentHeader />
    <div class="content-container">
      <!-- 左侧内容区域 -->
      <div class="left-content">
        <ItemWrap title="教师咨询数据统计" class="left-contetn-top module-item">
          <LeftTop />
        </ItemWrap>
        
        <ItemWrap title="平均对话时长" class="left-contetn-center module-item">
          <LeftCenter />
        </ItemWrap>
        
        <!-- <ItemWrap title="学生用户高考年份统计" class="left-contetn-bottom module-item">
          <LeftBottom />
        </ItemWrap> -->
      </div>
      
      <!-- 中间内容区域 -->
      <div class="center-content">
        <ItemWrap class="module-item map-container">
          <CenterTop />
        </ItemWrap>
        
        <ItemWrap title="高频咨询问题" class="module-item">
          <CenterBottom />
        </ItemWrap>
      </div>
      
      <!-- 右侧内容区域 -->
      <div class="right-content">
        <ItemWrap title="平均时长趋势" class="module-item">
          <RightTop />
        </ItemWrap>
        
        <ItemWrap title="用户量属专业排行" class="module-item">
          <RightCenter />
        </ItemWrap>
        
        <ItemWrap title="常见咨询问题" class="module-item">
          <RightBottom />
        </ItemWrap>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 80px);
  padding: 20px;
}

.content-container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 20px;
  margin-top: 12px;
}

.left-content, .right-content {
  display: flex;
  flex-direction: column;
  width: 25%;
  gap: 20px;
}

.center-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.left-contetn-top {
  height: 200px;
}

.left-contetn-center {
  height: 250px;
}

.left-contetn-bottom {
  height: 240px;
}

// .module-item {
//   height: 100%;
//   flex: 1;
// }

.map-container {
  height: 60%;
}
</style>