From 0b1dbf4d39fcbfc4213ec740ac6de2164ce017fe Mon Sep 17 00:00:00 2001
From: JiXinHui <985276981@qq.com>
Date: Tue, 12 Aug 2025 14:39:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=AC=AC=E4=B8=80=E6=AC=A1=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/index.ts                      |  37 ++
 src/assets/css/main.scss                      |   8 +
 src/assets/font/DS-DIGI-1.ttf                 | Bin 0 -> 24448 bytes
 .../img/zheke/{留言数.png => ai-stats4.png}   | Bin
 src/components/item-wrap/item-wrap.vue        |  22 +-
 src/mock/mock-index.ts                        | 126 ++++++
 src/views/index/CenterBottom.vue              | 119 ++++++
 src/views/index/CenterTop.vue                 | 100 +++++
 src/views/index/LeftBottom.vue                | 155 ++++++++
 src/views/index/LeftCenter.vue                | 237 ++++++++++++
 src/views/index/LeftTop.vue                   | 112 ++++++
 src/views/index/RightCenter.vue               | 158 ++++++++
 src/views/index/RightTop.vue                  | 178 +++++++++
 src/views/index/average-duration.vue          | 218 +++++++++++
 src/views/index/common-questions.vue          | 143 +++++++
 src/views/index/components/CenterBottom.vue   | 119 ++++++
 src/views/index/components/CenterTop.vue      | 100 +++++
 .../index/components/ConsultationCard.vue     |   1 +
 src/views/index/components/LeftBottom.vue     | 155 ++++++++
 src/views/index/components/LeftCenter.vue     | 188 +++++++++
 src/views/index/components/LeftTop.vue        | 132 +++++++
 src/views/index/components/RightBottom.vue    | 119 ++++++
 src/views/index/components/RightCenter.vue    | 158 ++++++++
 src/views/index/components/RightTop.vue       | 178 +++++++++
 src/views/index/content-header.vue            | 361 +++++++++---------
 src/views/index/high-school-ranking.vue       | 154 ++++++++
 src/views/index/index.vue                     | 107 +++++-
 src/views/index/major-ranking.vue             | 162 ++++++++
 src/views/index/student-distribution.vue      | 178 +++++++++
 29 files changed, 3529 insertions(+), 196 deletions(-)
 create mode 100644 src/assets/font/DS-DIGI-1.ttf
 rename src/assets/img/zheke/{留言数.png => ai-stats4.png} (100%)
 create mode 100644 src/views/index/CenterBottom.vue
 create mode 100644 src/views/index/CenterTop.vue
 create mode 100644 src/views/index/LeftBottom.vue
 create mode 100644 src/views/index/LeftCenter.vue
 create mode 100644 src/views/index/LeftTop.vue
 create mode 100644 src/views/index/RightCenter.vue
 create mode 100644 src/views/index/RightTop.vue
 create mode 100644 src/views/index/average-duration.vue
 create mode 100644 src/views/index/common-questions.vue
 create mode 100644 src/views/index/components/CenterBottom.vue
 create mode 100644 src/views/index/components/CenterTop.vue
 create mode 100644 src/views/index/components/ConsultationCard.vue
 create mode 100644 src/views/index/components/LeftBottom.vue
 create mode 100644 src/views/index/components/LeftCenter.vue
 create mode 100644 src/views/index/components/LeftTop.vue
 create mode 100644 src/views/index/components/RightBottom.vue
 create mode 100644 src/views/index/components/RightCenter.vue
 create mode 100644 src/views/index/components/RightTop.vue
 create mode 100644 src/views/index/high-school-ranking.vue
 create mode 100644 src/views/index/major-ranking.vue
 create mode 100644 src/views/index/student-distribution.vue

diff --git a/src/api/modules/index.ts b/src/api/modules/index.ts
index d4b30d6..502d2db 100644
--- a/src/api/modules/index.ts
+++ b/src/api/modules/index.ts
@@ -10,6 +10,12 @@ const indexUrl=  {
     'rightBottom':'/bigscreen/rightBottom',//右下 
     'rightCenter':'/bigscreen/ranking',// 报警排名
     'consultationTrend':'/bigscreen/consultationTrend',// 咨询人数趋势图
+    'teacherConsultStats':'/bigscreen/teacherConsultStats',// 教师咨询数据统计
+    'studentDistribution':'/bigscreen/studentDistribution',// 学生用户属考生分布统计
+    'highSchoolRanking':'/bigscreen/highSchoolRanking',// 用户量属高中排行
+    'averageDuration':'/bigscreen/averageDuration',// 平均时长趋势
+    'majorRanking':'/bigscreen/majorRanking',// 用户量属专业排行
+    'commonQuestions':'/bigscreen/commonQuestions',// 常见咨询问题
 }
 
 export default indexUrl
@@ -54,6 +60,37 @@ export const rightBottom=(param:any={})=>{
     return GET(indexUrl.rightBottom,param)
 }
 
+/**咨询人数趋势图 */
 export const consultationTrend=(param:any={})=>{
     return GET(indexUrl.consultationTrend,param)
+}
+
+/**教师咨询数据统计 */
+export const teacherConsultStats=(param:any={})=>{
+    return GET(indexUrl.teacherConsultStats,param)
+}
+
+/**学生用户属考生分布统计 */
+export const studentDistribution=(param:any={})=>{
+    return GET(indexUrl.studentDistribution,param)
+}
+
+/**用户量属高中排行 */
+export const highSchoolRanking=(param:any={})=>{
+    return GET(indexUrl.highSchoolRanking,param)
+}
+
+/**平均时长趋势 */
+export const averageDuration=(param:any={})=>{
+    return GET(indexUrl.averageDuration,param)
+}
+
+/**用户量属专业排行 */
+export const majorRanking=(param:any={})=>{
+    return GET(indexUrl.majorRanking,param)
+}
+
+/**常见咨询问题 */
+export const commonQuestions=(param:any={})=>{
+    return GET(indexUrl.commonQuestions,param)
 }
\ No newline at end of file
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index a2b6318..3b923a9 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -12,6 +12,14 @@ html,body{
   src: url(../font/YouSheBiaoTiHei-2.ttf);
 }
 
+@font-face {
+  font-family: 'DS-Digital';
+  src: url('../font/DS-DIGI-1.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 html .el-message {
     --yh-bg-color-container:#242424;
     --yh-shadow-3: 0 16px 24px rgba(0, 0, 0, .14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
diff --git a/src/assets/font/DS-DIGI-1.ttf b/src/assets/font/DS-DIGI-1.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..09258773c7219ad9e60b92b918e3c50b58f43c9e
GIT binary patch
literal 24448
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/zheke/留言数.png b/src/assets/img/zheke/ai-stats4.png
similarity index 100%
rename from src/assets/img/zheke/留言数.png
rename to src/assets/img/zheke/ai-stats4.png
diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue
index 50923c9..a625e67 100644
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -12,15 +12,17 @@ const props = withDefaults(
 
 <template>
   <div class="item_wrap">
-  <div class="item_title" v-if="title !== ''">
-    <img class="title-bg" src="@/assets/img/zheke/title-bg.png" alt="">
-    <img class="title-line" src="@/assets/img/zheke/title-line.png" alt="">
-    <div class="title-inner">{{ title }}</div>
+    <div class="item_title" v-if="title !== ''">
+      <img class="title-bg" src="@/assets/img/zheke/title-bg.png" alt="" />
+      <img class="title-line" src="@/assets/img/zheke/title-line.png" alt="" />
+      <div class="title-inner">{{ title }}</div>
+    </div>
+    <div
+      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
+    >
+      <slot></slot>
+    </div>
   </div>
-  <div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
-    <slot></slot>
-  </div>
-</div>
 </template>
 
 <style scoped lang="scss">
@@ -30,7 +32,7 @@ $item_title_content-height: calc(100% - 33px);
 .item_wrap {
   background: #fff;
   border-radius: 20px;
-  padding: 30px;
+  padding: 20px 30px 0 30px;
 }
 
 .item_title {
@@ -49,7 +51,7 @@ $item_title_content-height: calc(100% - 33px);
 
   .title-inner {
     font-weight: 600;
-    color: #393D44;
+    color: #393d44;
   }
 }
 
diff --git a/src/mock/mock-index.ts b/src/mock/mock-index.ts
index d92b9c4..080fc5b 100644
--- a/src/mock/mock-index.ts
+++ b/src/mock/mock-index.ts
@@ -236,6 +236,132 @@ export default [
                 }
             };
         }
+    },
+    // 教师咨询数据统计
+    {
+        url: "/bigscreen/teacherConsultStats",
+        type: "get",
+        response: () => {
+            return {
+                success: true,
+                data: {
+                    consultCount: 12452,
+                    replyCount: 12452,
+                    messageCount: 2231
+                }
+            };
+        }
+    },
+    // 学生用户属考生分布统计
+    {
+        url: "/bigscreen/studentDistribution",
+        type: "get",
+        response: () => {
+            return {
+                success: true,
+                data: {
+                    years: ['2022', '2023', '2024', '2025', '2026', '2027'],
+                    values: [320, 400, 350, 500, 450, 380],
+                    totalCount: 24680,
+                    growthRate: 12.5
+                }
+            };
+        }
+    },
+    // 用户量属高中排行
+    {
+        url: "/bigscreen/highSchoolRanking",
+        type: "get",
+        response: () => {
+            return {
+                success: true,
+                data: [
+                    { rank: 1, school: '杭州第二中学', count: 3954 },
+                    { rank: 2, school: '杭州第一中学', count: 2360 },
+                    { rank: 3, school: '杭州学军中学', count: 1025 },
+                    { rank: 4, school: '杭州高级中学', count: 998 },
+                    { rank: 5, school: '杭州师范大学附属中学', count: 874 }
+                ]
+            };
+        }
+    },
+    // 平均时长趋势
+    {
+        url: "/bigscreen/averageDuration",
+        type: "get",
+        response: () => {
+            return {
+                success: true,
+                data: {
+                    days: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],
+                    durations: [65, 80, 45, 68, 80, 55, 60]
+                }
+            };
+        }
+    },
+    // 用户量属专业排行
+    {
+        url: "/bigscreen/majorRanking",
+        type: "get",
+        response: () => {
+            return {
+                success: true,
+                data: [
+                    { rank: 1, major: '计算机科学与技术', count: 3954 },
+                    { rank: 2, major: '软件工程', count: 2360 },
+                    { rank: 3, major: '人工智能', count: 1025 },
+                    { rank: 4, major: '数据科学与大数据技术', count: 998 },
+                    { rank: 5, major: '电子信息工程', count: 874 },
+                    { rank: 6, major: '通信工程', count: 3954 },
+                    { rank: 7, major: '网络工程', count: 2360 },
+                    { rank: 8, major: '信息安全', count: 1025 },
+                    { rank: 9, major: '物联网工程', count: 998 },
+                    { rank: 10, major: '自动化', count: 874 }
+                ]
+            };
+        }
+    },
+    // 常见咨询问题
+    {
+        url: "/bigscreen/commonQuestions",
+        type: "get",
+        response: () => {
+            return {
+                success: true,
+                data: [
+                    {
+                        id: 1,
+                        question: '学校有哪些奖学金政策和申请条件？',
+                        count: 3948
+                    },
+                    {
+                        id: 2,
+                        question: '我的高考成绩能报考哪些学校和专业？',
+                        count: 2249
+                    },
+                    {
+                        id: 3,
+                        question: '大学生实习和就业有哪些资源？',
+                        count: 900
+                    },
+                    {
+                        id: 4,
+                        question: '如何申请转专业以及需要满足什么条件？',
+                        count: 600
+                    },
+                    {
+                        id: 5,
+                        question: '如何申请休学、复学或者退学？',
+                        count: 380
+                    },
+                    {
+                        id: 6,
+                        question: '如果高考分数不理想，有哪些复读或者其他选择？',
+                        count: 20
+                    }
+                ]
+            };
+        }
     }
 ];
 
diff --git a/src/views/index/CenterBottom.vue b/src/views/index/CenterBottom.vue
new file mode 100644
index 0000000..e771694
--- /dev/null
+++ b/src/views/index/CenterBottom.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { commonQuestions } from "@/api";
+
+interface QuestionItem {
+  id: number;
+  question: string;
+  count: number;
+}
+
+// 问题数据
+const questionData = ref<QuestionItem[]>([]);
+
+// 获取问题数据
+const fetchQuestionData = () => {
+  commonQuestions().then(res => {
+    if (res.success) {
+      questionData.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  fetchQuestionData();
+});
+</script>
+
+<template>
+  <div class="common-questions">
+    <div class="question-list">
+      <div v-for="(item, index) in questionData" :key="index" class="question-item">
+        <div class="question-rank">{{ index + 1 }}</div>
+        <div class="question-content">
+          <div class="question-text">{{ item.question }}</div>
+          <div class="question-count">
+            <span class="count-value">{{ item.count }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.common-questions {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.question-list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.question-item {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.question-rank {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+  margin-right: 15px;
+  font-size: 14px;
+  color: #666;
+  flex-shrink: 0;
+  
+  // 前三名使用不同颜色
+  .question-item:nth-child(1) & {
+    background-color: #f5222d;
+    color: #fff;
+  }
+  
+  .question-item:nth-child(2) & {
+    background-color: #fa8c16;
+    color: #fff;
+  }
+  
+  .question-item:nth-child(3) & {
+    background-color: #52c41a;
+    color: #fff;
+  }
+}
+
+.question-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.question-text {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+  margin-bottom: 5px;
+}
+
+.question-count {
+  font-size: 12px;
+  color: #999;
+  
+  .count-value {
+    color: #4B96FF;
+    font-weight: bold;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/CenterTop.vue b/src/views/index/CenterTop.vue
new file mode 100644
index 0000000..59a28ec
--- /dev/null
+++ b/src/views/index/CenterTop.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { centerMap } from "@/api";
+// import 'echarts/map/js/china';
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+// 地图数据
+const mapData = ref({
+  dataList: [] as {name: string, value: number}[],
+  regionCode: 'china'
+});
+
+// 获取地图数据
+const getMapData = () => {
+  centerMap({regionCode: 'china'}).then(res => {
+    if (res.success) {
+      mapData.value = res.data;
+      initChart();
+    }
+  });
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}'
+    },
+    visualMap: {
+      min: 0,
+      max: 1000,
+      left: 'left',
+      top: 'bottom',
+      text: ['高', '低'],
+      calculable: true,
+      inRange: {
+        color: ['#e0f3f8', '#4575b4']
+      }
+    },
+    series: [
+      {
+        name: '用户分布',
+        type: 'map',
+        map: 'china',
+        roam: false,
+        label: {
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: true
+          }
+        },
+        data: mapData.value.dataList
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+onMounted(() => {
+  getMapData();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除事件监听
+const onUnmounted = () => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+};
+</script>
+
+<template>
+  <div class="map-container" ref="chartRef"></div>
+</template>
+
+<style scoped lang="scss">
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/LeftBottom.vue b/src/views/index/LeftBottom.vue
new file mode 100644
index 0000000..302bf0c
--- /dev/null
+++ b/src/views/index/LeftBottom.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { highSchoolRanking } from "@/api";
+
+interface RankingItem {
+  rank: number;
+  school: string;
+  count: number;
+}
+
+// 排行数据
+const rankingData = ref<RankingItem[]>([]);
+
+// 获取排行数据
+const fetchRankingData = () => {
+  highSchoolRanking().then(res => {
+    if (res.success) {
+      rankingData.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  fetchRankingData();
+});
+</script>
+
+<template>
+  <div class="high-school-ranking">
+    <div class="ranking-list">
+      <div class="ranking-header">
+        <div class="header-item rank">排名</div>
+        <div class="header-item school">学校名称</div>
+        <div class="header-item count">用户数</div>
+      </div>
+      <div class="ranking-body">
+        <div v-for="(item, index) in rankingData" :key="index" class="ranking-item">
+          <div class="item-rank" :class="{ 'top-rank': item.rank <= 3 }">
+            <span class="rank-number">{{ item.rank }}</span>
+          </div>
+          <div class="item-school">{{ item.school }}</div>
+          <div class="item-count">{{ item.count }}人</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.high-school-ranking {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.ranking-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ranking-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+
+.ranking-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ranking-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.header-item, .item-rank, .item-school, .item-count {
+  display: flex;
+  align-items: center;
+}
+
+.rank {
+  width: 60px;
+  justify-content: center;
+}
+
+.school {
+  flex: 1;
+}
+
+.count {
+  width: 80px;
+  justify-content: flex-end;
+}
+
+.item-rank {
+  width: 60px;
+  justify-content: center;
+  
+  .rank-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #f5f5f5;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  &.top-rank {
+    .rank-number {
+      background-color: #4B96FF;
+      color: #fff;
+    }
+    
+    &:nth-child(1) .rank-number {
+      background-color: #f5222d;
+    }
+    
+    &:nth-child(2) .rank-number {
+      background-color: #fa8c16;
+    }
+    
+    &:nth-child(3) .rank-number {
+      background-color: #52c41a;
+    }
+  }
+}
+
+.item-school {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
+
+.item-count {
+  width: 80px;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #4B96FF;
+  font-weight: bold;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/LeftCenter.vue b/src/views/index/LeftCenter.vue
new file mode 100644
index 0000000..dfee453
--- /dev/null
+++ b/src/views/index/LeftCenter.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { averageDuration } from "@/api";
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+// 数据
+const chartData = ref({
+  dates: ['7/1', '7/2', '7/3', '7/4', '7/5'],
+  values: [80, 90, 55, 82, 62]
+});
+
+// 过滤选项
+const conversationTypes = ref([
+  { label: '会话类型', value: 'all' }
+]);
+const selectedType = ref('all');
+
+const timeFilters = ref([
+  { label: '时间筛选', value: 'week' }
+]);
+const selectedTimeFilter = ref('week');
+
+// 获取数据
+const getChartData = () => {
+  averageDuration({
+    type: selectedType.value, 
+    timeFilter: selectedTimeFilter.value
+  }).then(res => {
+    if (res.success) {
+      // 假设API返回的数据格式是 {dates: [], values: []}
+      // chartData.value = res.data;
+      initChart();
+    } else {
+      // 如果API调用失败，使用模拟数据
+      initChart();
+    }
+  }).catch(() => {
+    // 如果发生错误，使用模拟数据
+    initChart();
+  });
+};
+
+// 监听筛选条件变化
+const handleFilterChange = () => {
+  getChartData();
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    grid: {
+      top: '10%',
+      left: '8%',
+      right: '5%',
+      bottom: '15%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.value.dates,
+      axisLine: {
+        lineStyle: {
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999',
+        fontSize: 12
+      }
+    },
+    yAxis: {
+      type: 'value',
+      max: 100,
+      interval: 30,
+      axisLabel: {
+        color: '#99AABF',
+        fontSize: 12,
+        formatter: '{value}'
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#E0E0E0'
+        }
+      }
+    },
+    series: [
+      {
+        type: 'bar',
+        data: chartData.value.values,
+        barWidth: '30%',
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#4B96FF' // 蓝色渐变开始
+              },
+              {
+                offset: 1,
+                color: '#65CBFF' // 蓝色渐变结束
+              }
+            ]
+          },
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+onMounted(() => {
+  getChartData();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除事件监听
+const onUnmounted = () => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+};
+</script>
+
+<template>
+  <div class="average-duration">
+    <div class="chart-header">
+      <div class="filters">
+        <div class="filter-item">
+          <el-select v-model="selectedType" size="small" class="filter-select" @change="handleFilterChange">
+            <el-option
+              v-for="item in conversationTypes"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <el-select v-model="selectedTimeFilter" size="small" class="filter-select" @change="handleFilterChange">
+            <el-option
+              v-for="item in timeFilters"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+    </div>
+    <div class="chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.average-duration {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px;
+  box-sizing: border-box;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    
+    .title-icon {
+      width: 4px;
+      height: 16px;
+      background-color: #4B96FF;
+      margin-right: 8px;
+      border-radius: 2px;
+    }
+  }
+  
+  .filters {
+    display: flex;
+    gap: 10px;
+    
+    .filter-item {
+      .filter-select {
+        width: 120px;
+        
+        :deep(.el-input__wrapper) {
+          background-color: #f5f7fa;
+          box-shadow: none;
+          border-radius: 4px;
+        }
+        
+        :deep(.el-input__inner) {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  flex: 1;
+  width: 100%;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/LeftTop.vue b/src/views/index/LeftTop.vue
new file mode 100644
index 0000000..8cb1cdd
--- /dev/null
+++ b/src/views/index/LeftTop.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { teacherConsultStats } from "@/api";
+
+// 教师咨询数据
+const teacherStats = ref({
+  consultCount: 0,
+  replyCount: 0,
+  messageCount: 0
+});
+
+// 获取教师咨询数据
+const getTeacherStats = () => {
+  teacherConsultStats().then(res => {
+    if (res.success) {
+      teacherStats.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  getTeacherStats();
+});
+</script>
+
+<template>
+  <div class="stats-container">
+    <div class="stat-item">
+      <div class="stat-icon blue-bg">
+        <img src="@/assets/img/zheke/蓝色.png" alt="咨询次数">
+      </div>
+      <div class="stat-info">
+        <div class="stat-value">{{ teacherStats.consultCount }}</div>
+        <div class="stat-label">咨询次数</div>
+      </div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-icon orange-bg">
+        <img src="@/assets/img/zheke/橙色.png" alt="回复数">
+      </div>
+      <div class="stat-info">
+        <div class="stat-value">{{ teacherStats.replyCount }}</div>
+        <div class="stat-label">回复数</div>
+      </div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-icon cyan-bg">
+        <img src="@/assets/img/zheke/浅蓝色.png" alt="留言数">
+      </div>
+      <div class="stat-info">
+        <div class="stat-value">{{ teacherStats.messageCount }}</div>
+        <div class="stat-label">留言数</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.stats-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 15px 0;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.stat-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+  
+  img {
+    width: 30px;
+    height: 30px;
+  }
+  
+  &.blue-bg {
+    background-color: rgba(75, 150, 255, 0.1);
+  }
+  
+  &.orange-bg {
+    background-color: rgba(250, 140, 22, 0.1);
+  }
+  
+  &.cyan-bg {
+    background-color: rgba(24, 144, 255, 0.1);
+  }
+}
+
+.stat-info {
+  .stat-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .stat-label {
+    font-size: 14px;
+    color: #666;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/RightCenter.vue b/src/views/index/RightCenter.vue
new file mode 100644
index 0000000..674a4cc
--- /dev/null
+++ b/src/views/index/RightCenter.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { majorRanking } from "@/api";
+
+interface RankingItem {
+  rank: number;
+  major: string;
+  count: number;
+}
+
+// 排行数据
+const rankingData = ref<RankingItem[]>([]);
+
+// 获取排行数据
+const fetchRankingData = () => {
+  majorRanking().then(res => {
+    if (res.success) {
+      rankingData.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  fetchRankingData();
+});
+</script>
+
+<template>
+  <div class="major-ranking">
+    <div class="ranking-list">
+      <div class="ranking-header">
+        <div class="header-item rank">排名</div>
+        <div class="header-item major">专业名称</div>
+        <div class="header-item count">用户数</div>
+      </div>
+      <div class="ranking-body">
+        <div v-for="(item, index) in rankingData" :key="index" class="ranking-item">
+          <div class="item-rank" :class="{ 'top-rank': item.rank <= 3 }">
+            <span class="rank-number">{{ item.rank }}</span>
+          </div>
+          <div class="item-major">{{ item.major }}</div>
+          <div class="item-count">{{ item.count }}人</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.major-ranking {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.ranking-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ranking-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+
+.ranking-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ranking-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.header-item, .item-rank, .item-major, .item-count {
+  display: flex;
+  align-items: center;
+}
+
+.rank {
+  width: 60px;
+  justify-content: center;
+}
+
+.major {
+  flex: 1;
+}
+
+.count {
+  width: 80px;
+  justify-content: flex-end;
+}
+
+.item-rank {
+  width: 60px;
+  justify-content: center;
+  
+  .rank-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #f5f5f5;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  &.top-rank {
+    .rank-number {
+      background-color: #4B96FF;
+      color: #fff;
+    }
+    
+    &:nth-child(1) .rank-number {
+      background-color: #f5222d;
+    }
+    
+    &:nth-child(2) .rank-number {
+      background-color: #fa8c16;
+    }
+    
+    &:nth-child(3) .rank-number {
+      background-color: #52c41a;
+    }
+  }
+}
+
+.item-major {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-count {
+  width: 80px;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #4B96FF;
+  font-weight: bold;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/RightTop.vue b/src/views/index/RightTop.vue
new file mode 100644
index 0000000..6bde41b
--- /dev/null
+++ b/src/views/index/RightTop.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { averageDuration } from "@/api";
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+// 过滤选项
+const filterOptions = [
+  { value: 'all', label: '全部来源' },
+  { value: 'web', label: '网页端' },
+  { value: 'mobile', label: '移动端' }
+];
+const selectedFilter = ref(filterOptions[0].value);
+
+// 图表数据
+const chartData = ref({
+  days: [] as string[],
+  durations: [] as number[]
+});
+
+// 获取图表数据
+const getChartData = () => {
+  averageDuration().then(res => {
+    if (res.success) {
+      chartData.value = res.data;
+      initChart();
+    }
+  });
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    grid: {
+      top: '10%',
+      left: '3%',
+      right: '4%',
+      bottom: '15%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.value.days,
+      axisLine: {
+        lineStyle: {
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '分钟',
+      nameTextStyle: {
+        color: '#999999'
+      },
+      min: 0,
+      max: 100,
+      interval: 20,
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999'
+      }
+    },
+    series: [
+      {
+        name: '平均时长',
+        type: 'bar',
+        barWidth: '40%',
+        data: chartData.value.durations,
+        itemStyle: {
+          color: '#4B96FF'
+        }
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+// 处理过滤器变化
+const handleFilterChange = () => {
+  // 这里可以根据选择的过滤条件重新获取数据并更新图表
+  console.log('Filter changed to:', selectedFilter.value);
+  getChartData(); // 简单实现，实际应该传入过滤参数
+};
+
+onMounted(() => {
+  getChartData();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除事件监听
+const onUnmounted = () => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+};
+</script>
+
+<template>
+  <div class="average-duration">
+    <div class="filter-container">
+      <div class="filter-label">数据来源:</div>
+      <el-select v-model="selectedFilter" placeholder="选择来源" size="small" @change="handleFilterChange">
+        <el-option
+          v-for="item in filterOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
+    <div class="chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.average-duration {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-container {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  
+  .filter-label {
+    font-size: 14px;
+    color: #666;
+    margin-right: 10px;
+  }
+  
+  :deep(.el-input__wrapper) {
+    background-color: #f5f7fa;
+    box-shadow: none;
+  }
+  
+  :deep(.el-select .el-input) {
+    width: 120px;
+  }
+}
+
+.chart-container {
+  flex: 1;
+  width: 100%;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/average-duration.vue b/src/views/index/average-duration.vue
new file mode 100644
index 0000000..c75719a
--- /dev/null
+++ b/src/views/index/average-duration.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import { averageDuration } from "@/api";
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+// 数据
+const chartData = ref({
+  dates: ['7/1', '7/2', '7/3', '7/4', '7/5'],
+  values: [80, 90, 55, 82, 62]
+});
+
+// 过滤选项
+const conversationTypes = ref([
+  { label: '会话类型', value: 'all' }
+]);
+const selectedType = ref('all');
+
+const timeFilters = ref([
+  { label: '时间筛选', value: 'week' }
+]);
+const selectedTimeFilter = ref('week');
+
+// 获取数据
+const getChartData = () => {
+  averageDuration({
+    type: selectedType.value, 
+    timeFilter: selectedTimeFilter.value
+  }).then(res => {
+    if (res.success) {
+      // 假设API返回的数据格式是 {dates: [], values: []}
+      // chartData.value = res.data;
+      initChart();
+    } else {
+      // 如果API调用失败，使用模拟数据
+      initChart();
+    }
+  }).catch(() => {
+    // 如果发生错误，使用模拟数据
+    initChart();
+  });
+};
+
+// 监听筛选条件变化
+const handleFilterChange = () => {
+  getChartData();
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    grid: {
+      top: '10%',
+      left: '8%',
+      right: '5%',
+      bottom: '15%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.value.dates,
+      axisLine: {
+        lineStyle: {
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999',
+        fontSize: 12
+      }
+    },
+    yAxis: {
+      type: 'value',
+      max: 100,
+      interval: 30,
+      axisLabel: {
+        color: '#99AABF',
+        fontSize: 12,
+        formatter: '{value}'
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#E0E0E0'
+        }
+      }
+    },
+    series: [
+      {
+        type: 'bar',
+        data: chartData.value.values,
+        barWidth: '30%',
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#4B96FF' // 蓝色渐变开始
+              },
+              {
+                offset: 1,
+                color: '#65CBFF' // 蓝色渐变结束
+              }
+            ]
+          },
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+onMounted(() => {
+  getChartData();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+});
+</script>
+
+<template>
+  <div class="average-duration">
+    <div class="chart-header">
+      <div class="filters">
+        <div class="filter-item">
+          <el-select v-model="selectedType" size="small" class="filter-select" @change="handleFilterChange">
+            <el-option
+              v-for="item in conversationTypes"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <el-select v-model="selectedTimeFilter" size="small" class="filter-select" @change="handleFilterChange">
+            <el-option
+              v-for="item in timeFilters"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+    </div>
+    <div class="chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.average-duration {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 10px;
+  
+  .filters {
+    display: flex;
+    gap: 10px;
+    
+    .filter-item {
+      .filter-select {
+        width: 120px;
+        
+        :deep(.el-input__wrapper) {
+          background-color: #f5f7fa;
+          box-shadow: none;
+          border-radius: 4px;
+        }
+        
+        :deep(.el-input__inner) {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  flex: 1;
+  width: 100%;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/common-questions.vue b/src/views/index/common-questions.vue
new file mode 100644
index 0000000..52f2c31
--- /dev/null
+++ b/src/views/index/common-questions.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+// 模拟数据
+const questionData = ref([
+  {
+    id: 1,
+    question: '学校有哪些奖学金政策和申请条件？',
+    count: 3948
+  },
+  {
+    id: 2,
+    question: '我的高考成绩能报考哪些学校和专业？',
+    count: 2249
+  },
+  {
+    id: 3,
+    question: '大学生实习和就业有哪些资源？',
+    count: 900
+  },
+  {
+    id: 4,
+    question: '如何申请转专业以及需要满足什么条件？',
+    count: 600
+  },
+  {
+    id: 5,
+    question: '如何申请休学、复学或者退学？',
+    count: 380
+  },
+  {
+    id: 6,
+    question: '如果高考分数不理想，有哪些复读或者其他选择？',
+    count: 20
+  }
+]);
+
+// 获取问题数据
+const fetchQuestionData = () => {
+  // 这里可以替换为实际的API调用
+  // 模拟API调用
+  setTimeout(() => {
+    // 数据已经在上面定义
+  }, 500);
+};
+
+onMounted(() => {
+  fetchQuestionData();
+});
+</script>
+
+<template>
+  <div class="common-questions">
+    <div class="question-list">
+      <div v-for="(item, index) in questionData" :key="index" class="question-item">
+        <div class="question-rank">{{ index + 1 }}</div>
+        <div class="question-content">
+          <div class="question-text">{{ item.question }}</div>
+          <div class="question-count">
+            <span class="count-value">{{ item.count }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.common-questions {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.question-list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.question-item {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.question-rank {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+  margin-right: 15px;
+  font-size: 14px;
+  color: #666;
+  flex-shrink: 0;
+  
+  // 前三名使用不同颜色
+  .question-item:nth-child(1) & {
+    background-color: #f5222d;
+    color: #fff;
+  }
+  
+  .question-item:nth-child(2) & {
+    background-color: #fa8c16;
+    color: #fff;
+  }
+  
+  .question-item:nth-child(3) & {
+    background-color: #52c41a;
+    color: #fff;
+  }
+}
+
+.question-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.question-text {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+  margin-bottom: 5px;
+}
+
+.question-count {
+  font-size: 12px;
+  color: #999;
+  
+  .count-value {
+    color: #4B96FF;
+    font-weight: bold;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/components/CenterBottom.vue b/src/views/index/components/CenterBottom.vue
new file mode 100644
index 0000000..e771694
--- /dev/null
+++ b/src/views/index/components/CenterBottom.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { commonQuestions } from "@/api";
+
+interface QuestionItem {
+  id: number;
+  question: string;
+  count: number;
+}
+
+// 问题数据
+const questionData = ref<QuestionItem[]>([]);
+
+// 获取问题数据
+const fetchQuestionData = () => {
+  commonQuestions().then(res => {
+    if (res.success) {
+      questionData.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  fetchQuestionData();
+});
+</script>
+
+<template>
+  <div class="common-questions">
+    <div class="question-list">
+      <div v-for="(item, index) in questionData" :key="index" class="question-item">
+        <div class="question-rank">{{ index + 1 }}</div>
+        <div class="question-content">
+          <div class="question-text">{{ item.question }}</div>
+          <div class="question-count">
+            <span class="count-value">{{ item.count }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.common-questions {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.question-list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.question-item {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.question-rank {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+  margin-right: 15px;
+  font-size: 14px;
+  color: #666;
+  flex-shrink: 0;
+  
+  // 前三名使用不同颜色
+  .question-item:nth-child(1) & {
+    background-color: #f5222d;
+    color: #fff;
+  }
+  
+  .question-item:nth-child(2) & {
+    background-color: #fa8c16;
+    color: #fff;
+  }
+  
+  .question-item:nth-child(3) & {
+    background-color: #52c41a;
+    color: #fff;
+  }
+}
+
+.question-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.question-text {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+  margin-bottom: 5px;
+}
+
+.question-count {
+  font-size: 12px;
+  color: #999;
+  
+  .count-value {
+    color: #4B96FF;
+    font-weight: bold;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/components/CenterTop.vue b/src/views/index/components/CenterTop.vue
new file mode 100644
index 0000000..59a28ec
--- /dev/null
+++ b/src/views/index/components/CenterTop.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { centerMap } from "@/api";
+// import 'echarts/map/js/china';
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+// 地图数据
+const mapData = ref({
+  dataList: [] as {name: string, value: number}[],
+  regionCode: 'china'
+});
+
+// 获取地图数据
+const getMapData = () => {
+  centerMap({regionCode: 'china'}).then(res => {
+    if (res.success) {
+      mapData.value = res.data;
+      initChart();
+    }
+  });
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}'
+    },
+    visualMap: {
+      min: 0,
+      max: 1000,
+      left: 'left',
+      top: 'bottom',
+      text: ['高', '低'],
+      calculable: true,
+      inRange: {
+        color: ['#e0f3f8', '#4575b4']
+      }
+    },
+    series: [
+      {
+        name: '用户分布',
+        type: 'map',
+        map: 'china',
+        roam: false,
+        label: {
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: true
+          }
+        },
+        data: mapData.value.dataList
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+onMounted(() => {
+  getMapData();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除事件监听
+const onUnmounted = () => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+};
+</script>
+
+<template>
+  <div class="map-container" ref="chartRef"></div>
+</template>
+
+<style scoped lang="scss">
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/components/ConsultationCard.vue b/src/views/index/components/ConsultationCard.vue
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/src/views/index/components/ConsultationCard.vue
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/src/views/index/components/LeftBottom.vue b/src/views/index/components/LeftBottom.vue
new file mode 100644
index 0000000..302bf0c
--- /dev/null
+++ b/src/views/index/components/LeftBottom.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { highSchoolRanking } from "@/api";
+
+interface RankingItem {
+  rank: number;
+  school: string;
+  count: number;
+}
+
+// 排行数据
+const rankingData = ref<RankingItem[]>([]);
+
+// 获取排行数据
+const fetchRankingData = () => {
+  highSchoolRanking().then(res => {
+    if (res.success) {
+      rankingData.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  fetchRankingData();
+});
+</script>
+
+<template>
+  <div class="high-school-ranking">
+    <div class="ranking-list">
+      <div class="ranking-header">
+        <div class="header-item rank">排名</div>
+        <div class="header-item school">学校名称</div>
+        <div class="header-item count">用户数</div>
+      </div>
+      <div class="ranking-body">
+        <div v-for="(item, index) in rankingData" :key="index" class="ranking-item">
+          <div class="item-rank" :class="{ 'top-rank': item.rank <= 3 }">
+            <span class="rank-number">{{ item.rank }}</span>
+          </div>
+          <div class="item-school">{{ item.school }}</div>
+          <div class="item-count">{{ item.count }}人</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.high-school-ranking {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.ranking-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ranking-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+
+.ranking-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ranking-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.header-item, .item-rank, .item-school, .item-count {
+  display: flex;
+  align-items: center;
+}
+
+.rank {
+  width: 60px;
+  justify-content: center;
+}
+
+.school {
+  flex: 1;
+}
+
+.count {
+  width: 80px;
+  justify-content: flex-end;
+}
+
+.item-rank {
+  width: 60px;
+  justify-content: center;
+  
+  .rank-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #f5f5f5;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  &.top-rank {
+    .rank-number {
+      background-color: #4B96FF;
+      color: #fff;
+    }
+    
+    &:nth-child(1) .rank-number {
+      background-color: #f5222d;
+    }
+    
+    &:nth-child(2) .rank-number {
+      background-color: #fa8c16;
+    }
+    
+    &:nth-child(3) .rank-number {
+      background-color: #52c41a;
+    }
+  }
+}
+
+.item-school {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
+
+.item-count {
+  width: 80px;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #4B96FF;
+  font-weight: bold;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/components/LeftCenter.vue b/src/views/index/components/LeftCenter.vue
new file mode 100644
index 0000000..0632e4c
--- /dev/null
+++ b/src/views/index/components/LeftCenter.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { studentDistribution } from "@/api";
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+// 数据
+const chartData = ref({
+  years: [] as string[],
+  values: [] as number[],
+  totalCount: 0,
+  growthRate: 0
+});
+
+// 获取数据
+const getChartData = () => {
+  studentDistribution().then(res => {
+    if (res.success) {
+      chartData.value = res.data;
+      initChart();
+    }
+  });
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    grid: {
+      top: '15%',
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.value.years,
+      axisLine: {
+        lineStyle: {
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999'
+      }
+    },
+    series: [
+      {
+        name: '学生人数',
+        type: 'line',
+        data: chartData.value.values,
+        smooth: true,
+        showSymbol: true,
+        symbolSize: 8,
+        itemStyle: {
+          color: '#4B96FF'
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(75, 150, 255, 0.3)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(75, 150, 255, 0.1)'
+              }
+            ]
+          }
+        }
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+onMounted(() => {
+  getChartData();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除事件监听
+const onUnmounted = () => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+};
+</script>
+
+<template>
+  <div class="student-distribution">
+    <div class="chart-container" ref="chartRef"></div>
+    <div class="chart-info">
+      <div class="info-item">
+        <div class="info-label">总考生数量</div>
+        <div class="info-value">{{ chartData.totalCount.toLocaleString() }}</div>
+      </div>
+      <div class="info-item">
+        <div class="info-label">同比增长</div>
+        <div class="info-value increase">+{{ chartData.growthRate }}%</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.student-distribution {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  flex: 1;
+  width: 100%;
+}
+
+.chart-info {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+  padding: 10px 0;
+  
+  .info-item {
+    text-align: center;
+    
+    .info-label {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 5px;
+    }
+    
+    .info-value {
+      font-size: 20px;
+      font-weight: bold;
+      color: #333;
+      
+      &.increase {
+        color: #52c41a;
+      }
+      
+      &.decrease {
+        color: #f5222d;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/components/LeftTop.vue b/src/views/index/components/LeftTop.vue
new file mode 100644
index 0000000..691f9a1
--- /dev/null
+++ b/src/views/index/components/LeftTop.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { teacherConsultStats } from "@/api";
+
+interface TeacherStats {
+  consultCount: number;
+  replyCount: number;
+  messageCount: number;
+  [key: string]: number; // 添加索引签名
+}
+
+// 教师咨询数据
+const teacherStats = ref<TeacherStats>({
+  consultCount: 0,
+  replyCount: 0,
+  messageCount: 0,
+});
+
+// 获取教师咨询数据
+const getTeacherStats = () => {
+  teacherConsultStats().then((res) => {
+    if (res.success) {
+      teacherStats.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  getTeacherStats();
+});
+</script>
+
+<template>
+  <div class="stats-container">
+    <div class="stat-item blue-card">
+      <div class="stat-icon">
+        <img src="@/assets/img/zheke/ai-stats1.png" alt="咨询次数" />
+      </div>
+      <div class="stat-label">咨询次数</div>
+      <div class="stat-value">
+        {{ teacherStats.consultCount }}<span class="unit">次</span>
+      </div>
+    </div>
+
+    <div class="stat-item orange-card">
+      <div class="stat-icon">
+        <img src="@/assets/img/zheke/ai-stats2.png" alt="回复数" />
+      </div>
+      <div class="stat-info">
+        <div class="stat-value">
+          {{ teacherStats.replyCount }}<span class="unit">次</span>
+        </div>
+        <div class="stat-label">回复数</div>
+      </div>
+    </div>
+
+    <div class="stat-item cyan-card">
+      <div class="stat-icon">
+        <img src="@/assets/img/zheke/ai-stats4.png" alt="留言数" />
+      </div>
+      <div class="stat-info">
+        <div class="stat-value">
+          {{ teacherStats.messageCount }}<span class="unit">条</span>
+        </div>
+        <div class="stat-label">留言数</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.stats-container {
+  display: flex;
+  gap: 6px;
+  height: 100%;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+
+.stat-item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 10px;
+  padding: 9px 0 0 14px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+
+  &.blue-card {
+    background-image: url("@/assets/img/zheke/蓝色.png");
+  }
+
+  &.orange-card {
+    background-image: url("@/assets/img/zheke/橙色.png");
+  }
+
+  &.cyan-card {
+    background-image: url("@/assets/img/zheke/浅蓝色.png");
+  }
+}
+
+.stat-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+
+  .unit {
+    font-size: 14px;
+    margin-left: 2px;
+  }
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #fff;
+  opacity: 0.9;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/components/RightBottom.vue b/src/views/index/components/RightBottom.vue
new file mode 100644
index 0000000..e771694
--- /dev/null
+++ b/src/views/index/components/RightBottom.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { commonQuestions } from "@/api";
+
+interface QuestionItem {
+  id: number;
+  question: string;
+  count: number;
+}
+
+// 问题数据
+const questionData = ref<QuestionItem[]>([]);
+
+// 获取问题数据
+const fetchQuestionData = () => {
+  commonQuestions().then(res => {
+    if (res.success) {
+      questionData.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  fetchQuestionData();
+});
+</script>
+
+<template>
+  <div class="common-questions">
+    <div class="question-list">
+      <div v-for="(item, index) in questionData" :key="index" class="question-item">
+        <div class="question-rank">{{ index + 1 }}</div>
+        <div class="question-content">
+          <div class="question-text">{{ item.question }}</div>
+          <div class="question-count">
+            <span class="count-value">{{ item.count }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.common-questions {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.question-list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.question-item {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.question-rank {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+  margin-right: 15px;
+  font-size: 14px;
+  color: #666;
+  flex-shrink: 0;
+  
+  // 前三名使用不同颜色
+  .question-item:nth-child(1) & {
+    background-color: #f5222d;
+    color: #fff;
+  }
+  
+  .question-item:nth-child(2) & {
+    background-color: #fa8c16;
+    color: #fff;
+  }
+  
+  .question-item:nth-child(3) & {
+    background-color: #52c41a;
+    color: #fff;
+  }
+}
+
+.question-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.question-text {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+  margin-bottom: 5px;
+}
+
+.question-count {
+  font-size: 12px;
+  color: #999;
+  
+  .count-value {
+    color: #4B96FF;
+    font-weight: bold;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/components/RightCenter.vue b/src/views/index/components/RightCenter.vue
new file mode 100644
index 0000000..674a4cc
--- /dev/null
+++ b/src/views/index/components/RightCenter.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { majorRanking } from "@/api";
+
+interface RankingItem {
+  rank: number;
+  major: string;
+  count: number;
+}
+
+// 排行数据
+const rankingData = ref<RankingItem[]>([]);
+
+// 获取排行数据
+const fetchRankingData = () => {
+  majorRanking().then(res => {
+    if (res.success) {
+      rankingData.value = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  fetchRankingData();
+});
+</script>
+
+<template>
+  <div class="major-ranking">
+    <div class="ranking-list">
+      <div class="ranking-header">
+        <div class="header-item rank">排名</div>
+        <div class="header-item major">专业名称</div>
+        <div class="header-item count">用户数</div>
+      </div>
+      <div class="ranking-body">
+        <div v-for="(item, index) in rankingData" :key="index" class="ranking-item">
+          <div class="item-rank" :class="{ 'top-rank': item.rank <= 3 }">
+            <span class="rank-number">{{ item.rank }}</span>
+          </div>
+          <div class="item-major">{{ item.major }}</div>
+          <div class="item-count">{{ item.count }}人</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.major-ranking {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.ranking-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ranking-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+
+.ranking-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ranking-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.header-item, .item-rank, .item-major, .item-count {
+  display: flex;
+  align-items: center;
+}
+
+.rank {
+  width: 60px;
+  justify-content: center;
+}
+
+.major {
+  flex: 1;
+}
+
+.count {
+  width: 80px;
+  justify-content: flex-end;
+}
+
+.item-rank {
+  width: 60px;
+  justify-content: center;
+  
+  .rank-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #f5f5f5;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  &.top-rank {
+    .rank-number {
+      background-color: #4B96FF;
+      color: #fff;
+    }
+    
+    &:nth-child(1) .rank-number {
+      background-color: #f5222d;
+    }
+    
+    &:nth-child(2) .rank-number {
+      background-color: #fa8c16;
+    }
+    
+    &:nth-child(3) .rank-number {
+      background-color: #52c41a;
+    }
+  }
+}
+
+.item-major {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-count {
+  width: 80px;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #4B96FF;
+  font-weight: bold;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/components/RightTop.vue b/src/views/index/components/RightTop.vue
new file mode 100644
index 0000000..6bde41b
--- /dev/null
+++ b/src/views/index/components/RightTop.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { averageDuration } from "@/api";
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+// 过滤选项
+const filterOptions = [
+  { value: 'all', label: '全部来源' },
+  { value: 'web', label: '网页端' },
+  { value: 'mobile', label: '移动端' }
+];
+const selectedFilter = ref(filterOptions[0].value);
+
+// 图表数据
+const chartData = ref({
+  days: [] as string[],
+  durations: [] as number[]
+});
+
+// 获取图表数据
+const getChartData = () => {
+  averageDuration().then(res => {
+    if (res.success) {
+      chartData.value = res.data;
+      initChart();
+    }
+  });
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    grid: {
+      top: '10%',
+      left: '3%',
+      right: '4%',
+      bottom: '15%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.value.days,
+      axisLine: {
+        lineStyle: {
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '分钟',
+      nameTextStyle: {
+        color: '#999999'
+      },
+      min: 0,
+      max: 100,
+      interval: 20,
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999'
+      }
+    },
+    series: [
+      {
+        name: '平均时长',
+        type: 'bar',
+        barWidth: '40%',
+        data: chartData.value.durations,
+        itemStyle: {
+          color: '#4B96FF'
+        }
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+// 处理过滤器变化
+const handleFilterChange = () => {
+  // 这里可以根据选择的过滤条件重新获取数据并更新图表
+  console.log('Filter changed to:', selectedFilter.value);
+  getChartData(); // 简单实现，实际应该传入过滤参数
+};
+
+onMounted(() => {
+  getChartData();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除事件监听
+const onUnmounted = () => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+};
+</script>
+
+<template>
+  <div class="average-duration">
+    <div class="filter-container">
+      <div class="filter-label">数据来源:</div>
+      <el-select v-model="selectedFilter" placeholder="选择来源" size="small" @change="handleFilterChange">
+        <el-option
+          v-for="item in filterOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
+    <div class="chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.average-duration {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-container {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  
+  .filter-label {
+    font-size: 14px;
+    color: #666;
+    margin-right: 10px;
+  }
+  
+  :deep(.el-input__wrapper) {
+    background-color: #f5f7fa;
+    box-shadow: none;
+  }
+  
+  :deep(.el-select .el-input) {
+    width: 120px;
+  }
+}
+
+.chart-container {
+  flex: 1;
+  width: 100%;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/content-header.vue b/src/views/index/content-header.vue
index 18f8369..ec61ea4 100644
--- a/src/views/index/content-header.vue
+++ b/src/views/index/content-header.vue
@@ -24,20 +24,20 @@ const formattedConsultCount = computed(() => formatNumber(consultCount.value));
 
 // 筛选选项
 const consultTypeOptions = [
-  { value: 'all', label: '全部类型' },
-  { value: 'academic', label: '学业咨询' },
-  { value: 'career', label: '就业咨询' },
-  { value: 'personal', label: '个人发展' },
-  { value: 'other', label: '其他咨询' }
+  { value: "all", label: "全部类型" },
+  { value: "academic", label: "学业咨询" },
+  { value: "career", label: "就业咨询" },
+  { value: "personal", label: "个人发展" },
+  { value: "other", label: "其他咨询" },
 ];
 const selectedConsultType = ref(consultTypeOptions[0].value);
 
 const timeRangeOptions = [
-  { value: '1week', label: '近一周' },
-  { value: '1month', label: '近一月' },
-  { value: '3months', label: '近三月' },
-  { value: 'halfyear', label: '近半年' },
-  { value: '1year', label: '近一年' }
+  { value: "1week", label: "近一周" },
+  { value: "1month", label: "近一月" },
+  { value: "3months", label: "近三月" },
+  { value: "halfyear", label: "近半年" },
+  { value: "1year", label: "近一年" },
 ];
 const selectedTimeRange = ref(timeRangeOptions[0].value);
 
@@ -53,28 +53,28 @@ const dateRange = ref<[Date, Date]>(getDefaultDateRange() as [Date, Date]);
 // 咨询人数趋势图
 const option = ref({});
 const getData = () => {
-    // 可以添加筛选参数
-    const params = {
-        consultType: selectedConsultType.value,
-        timeRange: selectedTimeRange.value,
-        dateRange: dateRange.value
-    };
-    
-    consultationTrend().then((res)=> {
-        if(res.success) {
-            setOptions(res.data)
-        } else {
-            ElMessage({
-          message: res.msg,
-          type: "warning",
-        });
-        }
-    })
-}
+  // 可以添加筛选参数
+  const params = {
+    consultType: selectedConsultType.value,
+    timeRange: selectedTimeRange.value,
+    dateRange: dateRange.value,
+  };
+
+  consultationTrend().then((res) => {
+    if (res.success) {
+      setOptions(res.data);
+    } else {
+      ElMessage({
+        message: res.msg,
+        type: "warning",
+      });
+    }
+  });
+};
 
 // 监听筛选条件变化
 const handleFilterChange = () => {
-    getData();
+  getData();
 };
 
 // 监听筛选条件变化
@@ -82,125 +82,124 @@ watch(selectedConsultType, handleFilterChange);
 watch(selectedTimeRange, handleFilterChange);
 watch(dateRange, handleFilterChange);
 
-const setOptions = async (newData:any) => {
-    option.value = {
-        grid: {
-            top: '15%',
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
+const setOptions = async (newData: any) => {
+  option.value = {
+    grid: {
+      top: "15%",
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    backgroundColor: "#ffffff",
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "line",
+        lineStyle: {
+          color: "#4B96FF",
+          width: 1,
         },
-        backgroundColor: '#ffffff',
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'line',
-                lineStyle: {
-                    color: '#4B96FF',
-                    width: 1
-                }
-            },
-            backgroundColor: 'rgba(255, 255, 255, 0.9)',
-            borderColor: '#F1F1F1',
-            borderWidth: 1,
-            padding: [8, 10],
-            textStyle: {
-                color: '#666'
-            },
-            formatter: function(params: any) {
-                const data = params[0];
-                return `${data.name}<br/><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#4B96FF;margin-right:5px;"></span>${data.value}`;
-            }
+      },
+      backgroundColor: "rgba(255, 255, 255, 0.9)",
+      borderColor: "#F1F1F1",
+      borderWidth: 1,
+      padding: [8, 10],
+      textStyle: {
+        color: "#666",
+      },
+      formatter: function (params: any) {
+        const data = params[0];
+        return `${data.name}<br/><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#4B96FF;margin-right:5px;"></span>${data.value}`;
+      },
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: newData.dateList,
+      axisLine: {
+        lineStyle: {
+          color: "#E0E0E0",
         },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: newData.dateList,
-            axisLine: {
-                lineStyle: {
-                    color: '#E0E0E0'
-                }
-            },
-            axisLabel: {
-                color: '#999999',
-                formatter: function(value: string) {
-                    return value.replace('2023-', '');
-                }
-            }
+      },
+      axisLabel: {
+        color: "#999999",
+        formatter: function (value: string) {
+          return value.replace("2023-", "");
         },
-        yAxis: {
-            type: 'value',
-            max: 900,
-            min: 0,
-            interval: 300,
-            splitNumber: 3,
-            axisLine: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed',
-                    color: '#E0E0E0'
-                }
-            },
-            axisLabel: {
-                color: '#999999',
-                formatter: '{value}'
-            }
+      },
+    },
+    yAxis: {
+      type: "value",
+      max: 900,
+      min: 0,
+      interval: 300,
+      splitNumber: 3,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "#E0E0E0",
         },
-        series: [
-            {
-                type: 'line',
-                data: newData.valueList,
-                smooth: true,
-                symbol: 'circle',
-                symbolSize: 8,
-                showSymbol: function(idx: number) {
-                    // 只在特定位置显示圆点，例如第三个点
-                    return idx === 2;
-                },
-                itemStyle: {
-                    color: '#fff',
-                    borderColor: '#4B96FF',
-                    borderWidth: 2
-                },
-                lineStyle: {
-                    color: '#4B96FF',
-                    width: 3
-                },
-                areaStyle: {
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: 'rgba(75, 150, 255, 0.3)'
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(75, 150, 255, 0.1)'
-                            }
-                        ]
-                    }
-                }
-            }
-        ]
-    }
-}
+      },
+      axisLabel: {
+        color: "#999999",
+        formatter: "{value}",
+      },
+    },
+    series: [
+      {
+        type: "line",
+        data: newData.valueList,
+        smooth: true,
+        symbol: "circle",
+        symbolSize: 8,
+        showSymbol: function (idx: number) {
+          // 只在特定位置显示圆点，例如第三个点
+          return idx === 2;
+        },
+        itemStyle: {
+          color: "#fff",
+          borderColor: "#4B96FF",
+          borderWidth: 2,
+        },
+        lineStyle: {
+          color: "#4B96FF",
+          width: 3,
+        },
+        areaStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(75, 150, 255, 0.3)",
+              },
+              {
+                offset: 1,
+                color: "rgba(75, 150, 255, 0.1)",
+              },
+            ],
+          },
+        },
+      },
+    ],
+  };
+};
 
 // 组件挂载时获取数据
 onMounted(() => {
-    getData();
+  getData();
 });
-
 </script>
 
 <template>
@@ -208,10 +207,9 @@ onMounted(() => {
     <!-- 今日咨询人数 -->
     <div class="header-item today-count">
       <div class="item-title">今日咨询人数</div>
-      <!-- 使用格式化后的值 -->
-      <div class="seven-segment-container">
-        <div class="seven-segment-display">{{ formattedValue }}</div>
-      </div>
+
+      <div class="seven-segment-display">{{ formattedValue }}</div>
+
       <div class="count-details">
         <div class="detail-item">
           <div class="icon-wrap student-icon">
@@ -240,14 +238,14 @@ onMounted(() => {
       <div class="stats-cards">
         <div class="stat-card blue-card">
           <div class="card-icon">
-            <img src="@/assets/img/zheke/ai-stats1.png" alt="咨询次数">
+            <img src="@/assets/img/zheke/ai-stats1.png" alt="咨询次数" />
           </div>
           <div class="card-label">咨询次数</div>
           <div class="card-value">12,452<span class="unit">次</span></div>
         </div>
         <div class="stat-card orange-card">
           <div class="card-icon">
-            <img src="@/assets/img/zheke/ai-stats2.png" alt=" 平均对话次数">
+            <img src="@/assets/img/zheke/ai-stats2.png" alt=" 平均对话次数" />
           </div>
           <div class="card-content">
             <div class="card-label">平均对话次数</div>
@@ -256,7 +254,7 @@ onMounted(() => {
         </div>
         <div class="stat-card green-card">
           <div class="card-icon">
-            <img src="@/assets/img/zheke/ai-stats3.png" alt="智能回复率">
+            <img src="@/assets/img/zheke/ai-stats3.png" alt="智能回复率" />
           </div>
           <div class="card-content">
             <div class="card-label">智能回复率</div>
@@ -272,7 +270,11 @@ onMounted(() => {
         <div class="item-title">咨询人数趋势图</div>
         <div class="chart-filters">
           <div class="filter-item">
-            <el-select v-model="selectedConsultType" placeholder="咨询类型" size="small">
+            <el-select
+              v-model="selectedConsultType"
+              placeholder="咨询类型"
+              size="small"
+            >
               <el-option
                 v-for="item in consultTypeOptions"
                 :key="item.value"
@@ -292,7 +294,11 @@ onMounted(() => {
             />
           </div>
           <div class="filter-item">
-            <el-select v-model="selectedTimeRange" placeholder="时间范围" size="small">
+            <el-select
+              v-model="selectedTimeRange"
+              placeholder="时间范围"
+              size="small"
+            >
               <el-option
                 v-for="item in timeRangeOptions"
                 :key="item.value"
@@ -304,7 +310,11 @@ onMounted(() => {
         </div>
       </div>
       <div class="chart-container">
-        <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'"></v-chart>
+        <v-chart
+          class="chart"
+          :option="option"
+          v-if="JSON.stringify(option) != '{}'"
+        ></v-chart>
       </div>
     </div>
   </div>
@@ -315,17 +325,13 @@ onMounted(() => {
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  height: 260px;
+  height: 240px;
   width: 100%;
-
   background-color: #fff;
   border-radius: 20px;
-  // padding: 15px;
-  // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
-
   .header-item {
     height: 100%;
+    padding: 20px 0 0 38px;
     .item-title {
       font-family: DouyinSans;
       font-weight: bold;
@@ -337,27 +343,22 @@ onMounted(() => {
   // 今日咨询人数
   .today-count {
     width: 25%;
-    // border: 1px solid black;
-    padding: 30px 40px;
-
-    .seven-segment-container {
-      margin: 15px 0;
-      height: 100px;
-      display: flex;
-      align-items: center;
-      // justify-content: center;
-      .seven-segment-display {
-        font-size: 100px;
-        font-family: DS-Digital;
-        font-weight: bold;
-        color: #4d50dd;
-      }
+   
+    box-sizing: border-box;
+    .seven-segment-display {
+      font-size: 100px;
+      font-family: DS-Digital;
+      font-weight: bold;
+      color: #4d50dd;
+      height: 74px;
+      line-height: 74px;
+      margin-top: 22px;
+      letter-spacing: 10px;
     }
 
     .count-details {
       display: flex;
-      // gap: 40px;
-
+      margin-top: 22px;
       .detail-item {
         flex: 1;
         display: flex;
@@ -395,8 +396,6 @@ onMounted(() => {
   // AI咨询数据统计
   .ai-stats {
     width: 29%;
-    padding: 30px 35px;
-
     .stats-cards {
       margin-top: 24px;
       display: flex;
@@ -435,7 +434,7 @@ onMounted(() => {
         .card-icon {
           width: 40px;
           height: 40px;
-          margin-bottom:14px;
+          margin-bottom: 14px;
         }
 
         .card-label {
@@ -460,14 +459,10 @@ onMounted(() => {
   // 咨询人数趋势图
   .trend-chart {
     flex: 1;
-    padding: 30px 33px 0 35px;
-
     .chart-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-    //   margin-bottom: 15px;
-
       .chart-filters {
         display: flex;
         gap: 15px;
@@ -478,16 +473,16 @@ onMounted(() => {
           font-size: 12px;
           color: #666;
           min-width: 120px;
-          
+
           :deep(.el-input__wrapper) {
             background-color: #f5f7fa;
             box-shadow: none;
           }
-          
+
           :deep(.el-select .el-input) {
             width: 120px;
           }
-          
+
           :deep(.el-date-editor--daterange) {
             width: 240px;
           }
diff --git a/src/views/index/high-school-ranking.vue b/src/views/index/high-school-ranking.vue
new file mode 100644
index 0000000..4a9034c
--- /dev/null
+++ b/src/views/index/high-school-ranking.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+// 模拟数据
+const rankingData = ref([
+  { rank: 1, school: '杭州第二中学', count: 3954 },
+  { rank: 2, school: '杭州第一中学', count: 2360 },
+  { rank: 3, school: '杭州学军中学', count: 1025 },
+  { rank: 4, school: '杭州高级中学', count: 998 },
+  { rank: 5, school: '杭州师范大学附属中学', count: 874 }
+]);
+
+// 获取排行数据
+const fetchRankingData = () => {
+  // 这里可以替换为实际的API调用
+  // 模拟API调用
+  setTimeout(() => {
+    // 数据已经在上面定义
+  }, 500);
+};
+
+onMounted(() => {
+  fetchRankingData();
+});
+</script>
+
+<template>
+  <div class="high-school-ranking">
+    <div class="ranking-list">
+      <div class="ranking-header">
+        <div class="header-item rank">排名</div>
+        <div class="header-item school">学校名称</div>
+        <div class="header-item count">用户数</div>
+      </div>
+      <div class="ranking-body">
+        <div v-for="(item, index) in rankingData" :key="index" class="ranking-item">
+          <div class="item-rank" :class="{ 'top-rank': item.rank <= 3 }">
+            <span class="rank-number">{{ item.rank }}</span>
+          </div>
+          <div class="item-school">{{ item.school }}</div>
+          <div class="item-count">{{ item.count }}人</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.high-school-ranking {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.ranking-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ranking-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+
+.ranking-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ranking-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.header-item, .item-rank, .item-school, .item-count {
+  display: flex;
+  align-items: center;
+}
+
+.rank {
+  width: 60px;
+  justify-content: center;
+}
+
+.school {
+  flex: 1;
+}
+
+.count {
+  width: 80px;
+  justify-content: flex-end;
+}
+
+.item-rank {
+  width: 60px;
+  justify-content: center;
+  
+  .rank-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #f5f5f5;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  &.top-rank {
+    .rank-number {
+      background-color: #4B96FF;
+      color: #fff;
+    }
+    
+    &:nth-child(1) .rank-number {
+      background-color: #f5222d;
+    }
+    
+    &:nth-child(2) .rank-number {
+      background-color: #fa8c16;
+    }
+    
+    &:nth-child(3) .rank-number {
+      background-color: #52c41a;
+    }
+  }
+}
+
+.item-school {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
+
+.item-count {
+  width: 80px;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #4B96FF;
+  font-weight: bold;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 7f640b4..fe99582 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,11 +1,69 @@
 <script setup lang="ts">
-import zkItem from "@/components/zk-item";
-import ContentHeader from "./content-header.vue";
+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>
 
@@ -13,8 +71,51 @@ import ContentHeader from "./content-header.vue";
 .index-box {
   width: 100%;
   display: flex;
+  flex-direction: column;
   min-height: calc(100% - 80px);
-  justify-content: space-between;
   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>
diff --git a/src/views/index/major-ranking.vue b/src/views/index/major-ranking.vue
new file mode 100644
index 0000000..b828cb6
--- /dev/null
+++ b/src/views/index/major-ranking.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+// 模拟数据
+const rankingData = ref([
+  { rank: 1, major: '计算机科学与技术', count: 3954 },
+  { rank: 2, major: '软件工程', count: 2360 },
+  { rank: 3, major: '人工智能', count: 1025 },
+  { rank: 4, major: '数据科学与大数据技术', count: 998 },
+  { rank: 5, major: '电子信息工程', count: 874 },
+  { rank: 6, major: '通信工程', count: 3954 },
+  { rank: 7, major: '网络工程', count: 2360 },
+  { rank: 8, major: '信息安全', count: 1025 },
+  { rank: 9, major: '物联网工程', count: 998 },
+  { rank: 10, major: '自动化', count: 874 }
+]);
+
+// 获取排行数据
+const fetchRankingData = () => {
+  // 这里可以替换为实际的API调用
+  // 模拟API调用
+  setTimeout(() => {
+    // 数据已经在上面定义
+  }, 500);
+};
+
+onMounted(() => {
+  fetchRankingData();
+});
+</script>
+
+<template>
+  <div class="major-ranking">
+    <div class="ranking-list">
+      <div class="ranking-header">
+        <div class="header-item rank">排名</div>
+        <div class="header-item major">专业名称</div>
+        <div class="header-item count">用户数</div>
+      </div>
+      <div class="ranking-body">
+        <div v-for="(item, index) in rankingData" :key="index" class="ranking-item">
+          <div class="item-rank" :class="{ 'top-rank': item.rank <= 3 }">
+            <span class="rank-number">{{ item.rank }}</span>
+          </div>
+          <div class="item-major">{{ item.major }}</div>
+          <div class="item-count">{{ item.count }}人</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.major-ranking {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+}
+
+.ranking-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ranking-header {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+
+.ranking-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ranking-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.header-item, .item-rank, .item-major, .item-count {
+  display: flex;
+  align-items: center;
+}
+
+.rank {
+  width: 60px;
+  justify-content: center;
+}
+
+.major {
+  flex: 1;
+}
+
+.count {
+  width: 80px;
+  justify-content: flex-end;
+}
+
+.item-rank {
+  width: 60px;
+  justify-content: center;
+  
+  .rank-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #f5f5f5;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  &.top-rank {
+    .rank-number {
+      background-color: #4B96FF;
+      color: #fff;
+    }
+    
+    &:nth-child(1) .rank-number {
+      background-color: #f5222d;
+    }
+    
+    &:nth-child(2) .rank-number {
+      background-color: #fa8c16;
+    }
+    
+    &:nth-child(3) .rank-number {
+      background-color: #52c41a;
+    }
+  }
+}
+
+.item-major {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-count {
+  width: 80px;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #4B96FF;
+  font-weight: bold;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/student-distribution.vue b/src/views/index/student-distribution.vue
new file mode 100644
index 0000000..1c0b17c
--- /dev/null
+++ b/src/views/index/student-distribution.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+// 模拟数据
+const years = ['2022', '2023', '2024', '2025', '2026', '2027'];
+const data = [320, 400, 350, 500, 450, 380];
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    grid: {
+      top: '15%',
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: years,
+      axisLine: {
+        lineStyle: {
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#999999'
+      }
+    },
+    series: [
+      {
+        name: '学生人数',
+        type: 'line',
+        data: data,
+        smooth: true,
+        showSymbol: true,
+        symbolSize: 8,
+        itemStyle: {
+          color: '#4B96FF'
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(75, 150, 255, 0.3)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(75, 150, 255, 0.1)'
+              }
+            ]
+          }
+        }
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除事件监听
+const onUnmounted = () => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+};
+
+// 添加默认导出
+defineComponent({
+  name: 'StudentDistribution'
+});
+</script>
+
+<template>
+  <div class="student-distribution">
+    <div class="chart-container" ref="chartRef"></div>
+    <div class="chart-info">
+      <div class="info-item">
+        <div class="info-label">总考生数量</div>
+        <div class="info-value">24,680</div>
+      </div>
+      <div class="info-item">
+        <div class="info-label">同比增长</div>
+        <div class="info-value increase">+12.5%</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.student-distribution {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  flex: 1;
+  width: 100%;
+}
+
+.chart-info {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+  padding: 10px 0;
+  
+  .info-item {
+    text-align: center;
+    
+    .info-label {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 5px;
+    }
+    
+    .info-value {
+      font-size: 20px;
+      font-weight: bold;
+      color: #333;
+      
+      &.increase {
+        color: #52c41a;
+      }
+      
+      &.decrease {
+        color: #f5222d;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file