From c1f5e00dd5b446bd7657294581ea2b8af492404c Mon Sep 17 00:00:00 2001
From: JiXinHui <985276981@qq.com>
Date: Fri, 15 Aug 2025 15:56:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=94=A8=E6=88=B7=E6=84=8F=E5=90=91?=
 =?UTF-8?q?=E4=B8=93=E4=B8=9A=E6=8E=92=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/zheke/top1.png              | Bin 0 -> 1092 bytes
 src/assets/img/zheke/top2.png              | Bin 0 -> 1096 bytes
 src/assets/img/zheke/top3.png              | Bin 0 -> 1082 bytes
 src/assets/img/zheke/top4.png              | Bin 0 -> 1467 bytes
 src/components/item-wrap/item-wrap.vue     |   2 +-
 src/views/index/LeftBottom.vue             | 302 +++++++++------
 src/views/index/RightCenter.vue            | 417 ++++++++++++++++-----
 src/views/index/average-duration.vue       |  24 +-
 src/views/index/components/LeftBottom.vue  | 155 --------
 src/views/index/components/RightBottom.vue | 119 ------
 src/views/index/components/RightCenter.vue | 158 --------
 src/views/index/components/RightTop.vue    | 178 ---------
 src/views/index/index.vue                  |  37 +-
 13 files changed, 538 insertions(+), 854 deletions(-)
 create mode 100644 src/assets/img/zheke/top1.png
 create mode 100644 src/assets/img/zheke/top2.png
 create mode 100644 src/assets/img/zheke/top3.png
 create mode 100644 src/assets/img/zheke/top4.png
 delete mode 100644 src/views/index/components/LeftBottom.vue
 delete mode 100644 src/views/index/components/RightBottom.vue
 delete mode 100644 src/views/index/components/RightCenter.vue
 delete mode 100644 src/views/index/components/RightTop.vue

diff --git a/src/assets/img/zheke/top1.png b/src/assets/img/zheke/top1.png
new file mode 100644
index 0000000000000000000000000000000000000000..15ca39c57461bdc2cdb89417b1df65d255fb1cbe
GIT binary patch
literal 1092
zcmaJ=TSyd97#^uaOid`l3)D3GV&Kkgb=R48ytM1&f-ABvDLpkib94utIpfT+9rvXR
zK?Z{LWQGqxU~dt<^iY&|tH>~^mkI<8gdhlN>8YYK>S_;d184sK9KP@SFXunkySvVm
zm)4XL1W_LAh$gU=@Tx5-#{ZScYjfCCqxL@31N%`%u>sMh!4x24hB5#WK+#5rUxF|}
z?DOf#KGYZQ6jf-@iie?H!@_KW2)DSFq7DK?roe!1O4QfK&nQyYB&xSD&c>|>Nb4P0
z8}wwml4^EP6*Q`)nGCxk7BB!(NY@xL9nqDjEnN}&-Z4XwTM#rTQQJxN#k<J}v;i5U
zS-;A%JQ)&bF4zzVvh^g-@+`yh3>WaToXCbmo+o!c3P-cGelZc1cVgk4M5Ph3M25*^
zGIS<DLwkVX1VQjLc;1f@erMD~it9HWUtS>!9M#q>q(hVR6qOVlK@x>C-7dkfc4bXx
zr%kwFjH_4-N3&i@d0;&Lf2d*Xq8*d~d-?uT*h!9BfJp!cj@T-`xPG4($`T_sP!P0}
z5Dw+L*qw$5I%#N;JV$e6U9WCxFyoxuBE;ij%yf`qsvs7XC@ewix+b=VgrM9cH-&^I
zmg8i$EfNgK4I%9Dk;Xt!$aAAm9Wj83@?33?D-`5<vtU>_aunG51)#|`G{~)*MZIt?
z!Gd}_T&-{}p@LinC&PF*``1n9kMQ_-?(W>;&F<s_6OX%%=XxzwIgH=Lqgb>p>3&GP
z8xa?u&(2mJT(HaLYo8QvEKdHo{Zvy@sq}vPOO;&A7HyQ=xi?i-C0BGe+AXgZ=N6V<
zEU*uW!*w&&at*Q6FyE1D_*9b1jdiZo``DSOsVVt;F5Nk?lzZ^avzwn+ZykI6Hqtzb
z-J9$B(rQ>bmz_AO%^Q{LwKq1aPyGIMXyIb(f%j)g-|$s8`*E6IKVIKCKHhU_`fh7|
kcv<>cG`4cNiYO{3PQ5u&u|Ck8_TF`@y(@bE^!Y1)0Bdw>NdN!<

literal 0
HcmV?d00001

diff --git a/src/assets/img/zheke/top2.png b/src/assets/img/zheke/top2.png
new file mode 100644
index 0000000000000000000000000000000000000000..abfb4ca28125b7951edeeb19d257622374342e59
GIT binary patch
literal 1096
zcmaJ=O-K|`93Qhp{OH5FlwptAh=O)LSJ$1K%p6x29Fc8FqeITlJaw>{H_klUaVxNp
zK29AxBpxE@5Cj!SL7<tWmK`LlPTeXYBFK<#1@*>U>(Dmv=Dqjl|NH&Fe(!2~TXT8I
zt`dr($`dV0lI${BmBmHm|ML3fr)1lSn>z6^)QvNm3#kSJr6EXIS`SP@%^2)|0qZEL
zFl44Wai`iU>BwTVz=!cIhoC8{uHJVvy$@oLhCQY&)5{Z2XkZ#L-BGP_s?!L2&6cbS
zk7e6ZdbUrG8Fc+&Q0Gg8z=Bu<zIEF6Bwwaic_nfV%q$I7U2vaF|4yn?Z3m6Wg`kGv
z!aBzZAR1%%nuu7#9Rva=a4aXVycp(qiHk~t0M<U5M01U9DXGNQVv(Cn_hRfwESt$>
zn2g9Ew}<6pu~@(%2w~z8_6BXN`C;1&<roy`>8|Nu6WJhO)Y51G%QVUKcL|oWPHTH>
zZ6Xb0ea&Hch6_r{IjZXaT`g<f+rvrtC*OY(d#OPOvPtNn0aqu3>kb8>9I4TT8b)pk
zq0_l8w)Y~8yk6u0foFKIzr(Z*l<^L%0#sE>*dEqw9VQf+CKQZm8d6-WRwANM6OGk!
zJRj$3qkMxBCni4D7*T|V99BX4fCX)w!y13E(Y)9|3zkD7E6_F1KqKxV3#`^GnfY^x
z<mFq#8u@dn&WmM9GHfu}zb2hC5%~nib={K7y7Hk-<n9t(pX&NNMc%|jLTO0(Z`1hx
zp}FVN(_2et-Ljd=$)fjjhjyu_#yMWB-Vi%e7AhR2`Ztz}p<4wr^96UN7Ct^2;uq#;
zxp8WHsVIhKS_*G2$t!i`2j}Bmt=Hz4WLjQ`j7>IQx_u&EI==10r^V5#@Z)AZ``}yE
zinYA>>g@1dwC~yCk~}tf8Od_RNOb$_C|D4W{`kJ<%1>$}I&&O^`iK4O$qSFaZfRe+
qv0-WVrt~}Q%eyT{&TXEhiaF}d`5hHQ{dXS*Z#&V{rrbN)b@3N*`DbPT

literal 0
HcmV?d00001

diff --git a/src/assets/img/zheke/top3.png b/src/assets/img/zheke/top3.png
new file mode 100644
index 0000000000000000000000000000000000000000..d619d67522084882eab4ed605ce0c4369509a109
GIT binary patch
literal 1082
zcmaJ=&ui0A9FMC%#$ez<=BA*}RQ!d_uhz8*i?dsrt+0&IRou}ud0WGlyqLV%v>vtz
z?gt*GCtVL-#LbHy1#zIr4tkJ*^B{T<6!9X6{sH34Y^w)r;N`vV<Ma7^f4-%W;eqzH
z18o#VwPy#F9NA^E4z}(l|IJ$q&&k$>Gh=uZjpLH;K`L#c0t8uGpMW{2o8?O{VGl(`
zqE>zkk7+}afow((F-%~)giTRBy@9J6lMsUfoUk03{`TZ44J=cpFPzah&FzOpYp~+M
z(aLb%s7xB7N%x)wJ%L07Y>0Ib*i()#1v0&@E0J?}&C*~Sf+uDAcTi*62<S&11l<f5
zGdNBFNs-~Z6Y*~DG!Qs}V>yB4<1vnxxTGWqp!U(kn`e$oIYq7cB9=@SF?J=EEtN`4
zDb65og5^a~3^fEHMi4Q->|i~JIexURpg`a7EEikI0imK^K+{;JNu<A1u-%5N<JZbW
z3dRPy%km5trc?)N+W(=p-9Y;|2mi$TPhme_b|IUCKAQFn(zx+x=*pG)J*Z>k<q?{y
zS8=3>F!GDY1p?3T;KT*XF;U4sxlPbCDeL%HcMO<SWSU4YmSsw6QdPuEQca2}j^|ab
zPe`XyX<m#gqL4|%g*sP3#<UF`T<4k%Zi;Kl4QIi2iDw0R)@5j_9<sr9&XUzU7Nx0P
zjcYcIC7Ef;Wl1n>*xA22UB4pZ6CN9LON_?kLx+sJN9Owcy<CdCi3eFFoe$m>hVIPV
zUY?sf(y{otb3PfgZ(RR!^zFK-7tE=h-q%ibH@D+sYsdI8H8OuQl8^5{{HdU~w9Mb!
zb^9FuihKR+{@TEewG~yCtLp<srL$bUR!*!A)XX<qcVAvftnRUgmNz=Owu<TQ>iUBJ
z<Iqa<_=nlVX6yHFGvH_B)Qd+gT}#o8t@ka{8#A+oO4|*8-{Q4}#|ypGcX4k7Jfqs&
UeS53bycWLZY-U(_*mv>jFZF$0EdT%j

literal 0
HcmV?d00001

diff --git a/src/assets/img/zheke/top4.png b/src/assets/img/zheke/top4.png
new file mode 100644
index 0000000000000000000000000000000000000000..b991e259cc5f892fb321ad196fbbc5ca704edd9b
GIT binary patch
literal 1467
zcmeAS@N?(olHy`uVBq!ia0vp^Hb5-R!3HE1Lf`xWQj#UE5hcO-X(i=}MX3yqDfvmM
z3ZA)%>8U}fi7AzZCsTnsn3Xd_B1$5BeXNr6bM+EIYV;~{3xK+T2HIB?BqnF4mMA2p
zrf25aD!t#mUr8Y|#a1cY)Yrhbz&SM|)1#^=HMq(zB)KX(*)m1R-cG@$!U||WZfZ%Q
zLPc&)Ua?h$trFN=D<B&rtgoa1R#K8}s|0aWgl~X?bAC~(f|;IyZnA-ak%GCUo}rnE
zv6+F6f{}rdfxdx}zM-+MfuWUwxs{QT0u(3#Z7WJivkG!?gW3h;*(zm}loVL$>z9|8
z>y;bp<rk&v8(Lagg3K^7(gmu}Ew0QfNvzP#D^`Y?;F4OLT$EW*l9`{U05UN#DZjMD
zRte}*h!=7T;Kt?^LxTwzVEPq_1^R}11|ToN6#Dw&SDKp(S6y5Zl!|aKR)dQ}DhpEe
zgHnt0ON)|$5tpV6vZ}z!xhOTUB)=#mKR*W+iUAq<CHch}`2`9_hI)ny8sV9FDf#8a
znqUpSzE+-j#U+V($*G<$wn{)F^fEJ3tPBh+%nghTP0cMW3=Iw444e!t3@l6xT%C=a
zoJ@@^oMC!h@{>z*Q}aq-dQ%X3&2Z`krG?xApv^9+MVV!(DQ-pixe8!ETV>*Qi!n~~
zpn6kqyTt^jUVWfr^g%I;6w@#vVDbSm;prC0fv5b`JYaG!0;cQZ@6&l17?|`tT^vIy
zZtaPP&O59iAhX=g!~gQ`uWGglOY2N@dY2{$Zt9PGb4BRk)??OZ>=aHvzkZ&*VSDt-
z?MlvfZ|%7Lc*nJOzi$Umv9!3q;#gE*<0i3VKfiwaT*t2Cyz<nH2}QYUG>oQ3B(p@%
z@fB-o*qhU^o~v1G!y}Cd5mnvDwf0)!BG(>n=+2XymczV9falwqN(HwKJi9|*Hk;&I
zeD*(I6`ofpqIp+B<iOP%Jh_V>oG@5s^=l8CU$*^^52XgO$G+&Kt$uhsY(b}kJENC$
z{4U<iqTHNF(fExHh7UHKIVlip960l)Km?EbML(vc>GzT)rndY)Wbk?UmM`8l3s{Vb
z402`8?oZ}BHle$GTJ_{_Q#z-dYY=P-JbT4>Sx(e}tS7tITuM69xaMZm%BMQ^_i7_N
zR2?>iG%qko-X@v0^~;rcOMiZlYH&^3<2P%mMf#(TOcqD(+6!6-56)(75tiIM<($Eq
z+(YjUe{FU3uxC+xJ$Ief>}h85`&hzt+yo7OSrlZQ`m*}*ZvOO_+2yt_P78Z@)Eb-S
zn4drQIHLa2C%wz=Q|y?Q2q|cBZ=1QrLSFEg{t1O<&jKBf)5}9A@3T-SY`U~&lVFCx
zzpTHC9|V@FF7#lNnUpY*h3C@r*tX+QO{~hrT|ph;=}aP~_l@t|H<;EeI5Dv))|mHH
z_V@aaGB+<u3g|P6oLzfL_EQdP`gJSO6;BU`8m6;6wBv5NIU}R*<?8fTydTO{Sl%T*
h{pTH5``^ETk%8x5de1dh-q)bw)YH|^Wt~$(698-x9LfLy

literal 0
HcmV?d00001

diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue
index a6e791d..f8ae55a 100644
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -81,7 +81,7 @@ $item_title_content-height: calc(100% - 33px - 20px);
 
 .item_title_content_def {
   width: 100%;
-  height: 1px;
+  height: 100%;
   background: #fff;
 }
 </style>
diff --git a/src/views/index/LeftBottom.vue b/src/views/index/LeftBottom.vue
index 302bf0c..d7250e8 100644
--- a/src/views/index/LeftBottom.vue
+++ b/src/views/index/LeftBottom.vue
@@ -1,155 +1,221 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { highSchoolRanking } from "@/api";
+import * as echarts from 'echarts';
+import { studentDistribution } from "@/api";
 
-interface RankingItem {
-  rank: number;
-  school: string;
-  count: number;
-}
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
 
-// 排行数据
-const rankingData = ref<RankingItem[]>([]);
+// 年份筛选选项
+const yearOptions = ref([
+  { label: '年份筛选', value: 'all' }
+]);
+const selectedYear = ref('all');
 
-// 获取排行数据
-const fetchRankingData = () => {
-  highSchoolRanking().then(res => {
+// 数据
+const chartData = ref({
+  years: ['2022', '2023', '2024', '2025', '2026', '2027'],
+  values: [50, 200, 550, 850, 750, 900, 200]
+});
+
+// 获取数据
+const getChartData = () => {
+  studentDistribution().then(res => {
     if (res.success) {
-      rankingData.value = res.data;
+      // 实际项目中应该使用API返回的数据
+      // chartData.value = res.data;
+      initChart();
+    } else {
+      // 如果API调用失败，使用模拟数据
+      initChart();
     }
+  }).catch(() => {
+    // 如果发生错误，使用模拟数据
+    initChart();
   });
 };
 
+// 处理年份筛选变化
+const handleYearChange = () => {
+  getChartData();
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  
+  chart = echarts.init(chartRef.value);
+  
+  const option = {
+    grid: {
+      top: '15%',
+      left: '0',
+      right: '5%',
+      bottom: '0',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.value.years,
+      axisLine: {
+        lineStyle: {
+          color: '#E0E0E0'
+        }
+      },
+      axisLabel: {
+        color: '#99AABF',
+        fontSize: 12
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '',
+      max: 900,
+      interval: 300,
+      axisLabel: {
+        color: '#99AABF',
+        fontSize: 12
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#E0E0E0'
+        }
+      }
+    },
+    series: [
+      {
+        data: chartData.value.values,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        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)'
+              }
+            ]
+          }
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 10,
+          itemStyle: {
+            color: '#4B96FF'
+          },
+          data: [
+            { coord: ['2025', 850] }
+          ]
+        }
+      }
+    ]
+  };
+  
+  chart.setOption(option);
+};
+
+// 监听窗口大小变化，重绘图表
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
 onMounted(() => {
-  fetchRankingData();
+  getChartData();
+  window.addEventListener('resize', handleResize);
 });
+
+// 组件卸载时移除事件监听
+const onUnmounted = () => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+};
 </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 class="student-distribution">
+    <div class="chart-header">
+      <div class="filters">
+        <div class="filter-item">
+          <el-select v-model="selectedYear" size="small" class="filter-select" @change="handleYearChange">
+            <el-option
+              v-for="item in yearOptions"
+              :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">
-.high-school-ranking {
+.student-distribution {
   width: 100%;
   height: 100%;
-  padding: 10px 0;
+  position: relative;
 }
 
-.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 {
+.chart-header {
+  position: absolute;
+  right: 0;
+  top: -35px;
   display: flex;
+  justify-content: space-between;
   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;
+  margin-bottom: 15px;
   
-  .rank-number {
+  .filters {
     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;
-    }
+    gap: 10px;
     
-    &:nth-child(1) .rank-number {
-      background-color: #f5222d;
-    }
-    
-    &:nth-child(2) .rank-number {
-      background-color: #fa8c16;
-    }
-    
-    &:nth-child(3) .rank-number {
-      background-color: #52c41a;
+    .filter-item {
+      .filter-select {
+        width: 100px;
+        
+        :deep(.el-input__wrapper) {
+          background-color: #f5f7fa;
+          box-shadow: none;
+          border-radius: 4px;
+        }
+        
+        :deep(.el-input__inner) {
+          font-size: 12px;
+        }
+      }
     }
   }
 }
 
-.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;
+.chart-container {
+  width: 100%;
+  height: 100%;
 }
 </style> 
\ No newline at end of file
diff --git a/src/views/index/RightCenter.vue b/src/views/index/RightCenter.vue
index 674a4cc..681a485 100644
--- a/src/views/index/RightCenter.vue
+++ b/src/views/index/RightCenter.vue
@@ -1,45 +1,213 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { majorRanking } from "@/api";
+import { ref, onMounted } from "vue";
+import { majorRanking, highSchoolRanking } from "@/api";
+import top1Img from "@/assets/img/zheke/top1.png";
+import top2Img from "@/assets/img/zheke/top2.png";
+import top3Img from "@/assets/img/zheke/top3.png";
+import top4Img from "@/assets/img/zheke/top4.png";
 
 interface RankingItem {
+  rank: number;
+  name: string;
+  count: number;
+}
+
+interface MajorRankingItem {
   rank: number;
   major: string;
   count: number;
 }
 
+interface SchoolRankingItem {
+  rank: number;
+  school: string;
+  count: number;
+}
+
 // 排行数据
 const rankingData = ref<RankingItem[]>([]);
 
+// 排行类型
+const rankingTypes = [
+  { label: "用户意向专业排行", value: "major" },
+  { label: "用户生源高中排行", value: "school" },
+];
+const selectedRankingType = ref("major");
+
 // 获取排行数据
 const fetchRankingData = () => {
-  majorRanking().then(res => {
-    if (res.success) {
-      rankingData.value = res.data;
-    }
-  });
+  if (selectedRankingType.value === "major") {
+    majorRanking().then((res) => {
+      if (res.success) {
+        // 转换数据格式
+        rankingData.value = res.data.map((item: MajorRankingItem) => ({
+          rank: item.rank,
+          name: item.major,
+          count: item.count,
+        }));
+      }
+    });
+  } else {
+    highSchoolRanking().then((res) => {
+      if (res.success) {
+        // 转换数据格式
+        rankingData.value = res.data.map((item: SchoolRankingItem) => ({
+          rank: item.rank,
+          name: item.school,
+          count: item.count,
+        }));
+      }
+    });
+  }
+};
+
+// 处理排行类型变化
+const handleRankingTypeChange = () => {
+  fetchRankingData();
+};
+
+// 计算最大用户数，用于进度条百分比计算
+const maxCount = ref(0);
+const getProgressWidth = (count: number) => {
+  if (maxCount.value === 0) return "0%";
+  return `${(count / maxCount.value) * 100}%`;
+};
+
+// 监听数据变化，计算最大值
+const updateMaxCount = () => {
+  if (rankingData.value.length > 0) {
+    maxCount.value = Math.max(...rankingData.value.map((item) => item.count));
+  }
+};
+
+// 模拟数据
+const initMockData = () => {
+  const mockData = [];
+  for (let i = 1; i <= 10; i++) {
+    mockData.push({
+      rank: i,
+      name:
+        selectedRankingType.value === "major" ? "视觉传达设计" : "视觉传达设计",
+      count: 3954,
+    });
+  }
+  rankingData.value = mockData;
+  updateMaxCount();
+};
+
+// 年份筛选选项
+const yearOptions = ref([{ label: "年份筛选", value: "all" }]);
+
+// 学院筛选
+const selectedYear = ref("all");
+
+// 处理年份筛选变化
+const handleYearChange = () => {
+  console.log("年份筛选");
+};
+
+// 获取排名图片
+const getRankImage = (rank: number) => {
+  switch (rank) {
+    case 1: return top1Img;
+    case 2: return top2Img;
+    case 3: return top3Img;
+    default: return top4Img;
+  }
 };
 
 onMounted(() => {
+  // 获取真实数据
   fetchRankingData();
+
+  // 如果没有真实数据，使用模拟数据
+  setTimeout(() => {
+    if (rankingData.value.length === 0) {
+      initMockData();
+    } else {
+      updateMaxCount();
+    }
+  }, 500);
 });
 </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 class="ranking-container">
+    <!-- 排行类型切换 -->
+    <div class="ranking-tabs">
+      <div
+        v-for="type in rankingTypes"
+        :key="type.value"
+        class="tab-item"
+        :class="{ active: selectedRankingType === type.value }"
+        @click="
+          selectedRankingType = type.value;
+          handleRankingTypeChange();
+        "
+      >
+        {{ type.label }}
       </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="ranking-list">
+      <!-- 标题装饰 -->
+      <div class="ranking-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">
+          {{
+            selectedRankingType === "major"
+              ? "用户意向专业排行"
+              : "用户生源高中排行"
+          }}
+        </div>
+        <!-- 学院筛选 -->
+        <div class="filter-item">
+          <el-select
+            v-model="selectedYear"
+            size="small"
+            class="filter-select"
+            @change="handleYearChange"
+          >
+            <el-option
+              v-for="item in yearOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+      <div
+        v-for="(item, index) in rankingData"
+        :key="index"
+        class="ranking-item"
+      >
+        <div class="item-content">
+          <div
+            class="rank-badge"
+            :class="`topItem-${item.rank <= 3 ? item.rank : 'other'}`"
+          >
+            <img 
+              :src="getRankImage(item.rank)" 
+              :alt="`top${item.rank}`"
+              class="rank-bg"
+            />
+            <span class="rank-text">TOP {{ item.rank }}</span>
           </div>
-          <div class="item-major">{{ item.major }}</div>
-          <div class="item-count">{{ item.count }}人</div>
+          <div class="item-name">{{ item.name }}</div>
+          <div class="item-count">{{ item.count.toLocaleString() }}人</div>
+        </div>
+        <div class="progress-bar">
+          <div
+            class="progress-inner"
+            :style="{ width: getProgressWidth(item.count) }"
+          ></div>
         </div>
       </div>
     </div>
@@ -47,112 +215,181 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-.major-ranking {
-  width: 100%;
-  height: 100%;
-  padding: 10px 0;
-}
-
-.ranking-list {
+.ranking-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-.ranking-header {
-  display: flex;
-  padding: 10px 0;
-  border-bottom: 1px solid #eee;
-  font-weight: bold;
+.ranking-title {
+  height: 33px;
+  line-height: 33px;
+  width: 100%;
   color: #333;
-  font-size: 14px;
+  text-align: left;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: 41px;
+  background: transparent;
+  font-weight: bold;
+  font-size: 20px;
+  margin-bottom: 20px;
+
+  .title-bg {
+    height: 33px;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .title-line {
+    height: 2px;
+    position: absolute;
+    left: 0;
+    bottom: 2px;
+  }
+
+  .title-inner {
+    font-weight: 600;
+    color: #393d44;
+  }
+
+  .filter-item {
+    position: absolute;
+    right: 0;
+    bottom: 5px;
+    font-weight: normal;
+    .filter-select {
+      width: 100px;
+    }
+  }
 }
 
-.ranking-body {
+.ranking-tabs {
+  display: flex;
+  border-bottom: 1px solid #e6e9f0;
+  margin-bottom: 10px;
+
+  .tab-item {
+    padding: 10px 15px;
+    font-size: 14px;
+    color: #666;
+    cursor: pointer;
+    position: relative;
+
+    &.active {
+      color: #4b96ff;
+      font-weight: 500;
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #4b96ff;
+      }
+    }
+  }
+}
+
+.ranking-list {
   flex: 1;
   overflow-y: auto;
+  padding: 5px 0;
+
+  /* 隐藏滚动条 */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Firefox */
+  scrollbar-width: none;
+
+  /* IE */
+  -ms-overflow-style: none;
 }
 
 .ranking-item {
   display: flex;
-  padding: 12px 0;
-  border-bottom: 1px solid #f5f5f5;
-  
+  flex-direction: column;
+  margin-bottom: 23px;
+  // border-bottom: 1px solid #f0f2f5;
+
   &:last-child {
     border-bottom: none;
   }
 }
 
-.header-item, .item-rank, .item-major, .item-count {
+.rank-badge {
+  width: 60px;
+  height: 30px;
   display: flex;
   align-items: center;
-}
-
-.rank {
-  width: 60px;
   justify-content: center;
-}
+  font-size: 16px;
+  font-weight: bold;
+  position: relative; 
 
-.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;
+  .rank-bg {
+    position: absolute; 
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    object-fit: cover;
   }
-  
-  &.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;
+
+  .rank-text {
+    position: relative; // 确保文字在图片上方
+    z-index: 1;
+    color: white;
+  }
+
+  &.topItem-other {
+    .rank-text {
+      color: #545966;
     }
   }
 }
 
-.item-major {
+.item-content {
   flex: 1;
-  font-size: 14px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px; // 添加固定的底部间距
+}
+
+.item-name {
+  font-size: 16px;
   color: #333;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-left: 27px;
 }
 
 .item-count {
-  width: 80px;
-  justify-content: flex-end;
-  font-size: 14px;
-  color: #4B96FF;
-  font-weight: bold;
+  font-size: 16px;
+  color: #2D2E30;
+  font-weight: 400;
+  margin-left: auto;
 }
-</style> 
\ No newline at end of file
+
+.progress-bar {
+  height: 6px;
+  background-color: #f0f2f5;
+  border-radius: 3px;
+  overflow: hidden;
+
+  .progress-inner {
+    height: 100%;
+    background-color: #4b96ff;
+    border-radius: 3px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/index/average-duration.vue b/src/views/index/average-duration.vue
index c75719a..505c1c3 100644
--- a/src/views/index/average-duration.vue
+++ b/src/views/index/average-duration.vue
@@ -159,13 +159,13 @@ onUnmounted(() => {
         </div>
         <div class="filter-item">
           <el-select v-model="selectedTimeFilter" size="small" class="filter-select" @change="handleFilterChange">
-            <el-option
+        <el-option
               v-for="item in timeFilters"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
         </div>
       </div>
     </div>
@@ -196,13 +196,13 @@ onUnmounted(() => {
     .filter-item {
       .filter-select {
         width: 120px;
-        
-        :deep(.el-input__wrapper) {
-          background-color: #f5f7fa;
-          box-shadow: none;
+  
+  :deep(.el-input__wrapper) {
+    background-color: #f5f7fa;
+    box-shadow: none;
           border-radius: 4px;
-        }
-        
+  }
+  
         :deep(.el-input__inner) {
           font-size: 12px;
         }
diff --git a/src/views/index/components/LeftBottom.vue b/src/views/index/components/LeftBottom.vue
deleted file mode 100644
index 302bf0c..0000000
--- a/src/views/index/components/LeftBottom.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<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/RightBottom.vue b/src/views/index/components/RightBottom.vue
deleted file mode 100644
index e771694..0000000
--- a/src/views/index/components/RightBottom.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<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
deleted file mode 100644
index 674a4cc..0000000
--- a/src/views/index/components/RightCenter.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<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
deleted file mode 100644
index 6bde41b..0000000
--- a/src/views/index/components/RightTop.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<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/index.vue b/src/views/index/index.vue
index bf8d41a..42f5b3c 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -6,17 +6,15 @@ const ContentHeader = defineAsyncComponent(() => import("./content-header.vue"))
 // 导入左侧组件
 const LeftTop = defineAsyncComponent(() => import("./LeftTop.vue"));
 const LeftCenter = defineAsyncComponent(() => import("./LeftCenter.vue"));
-const AverageDuration = defineAsyncComponent(() => import("./average-duration.vue"));
-const LeftBottom = defineAsyncComponent(() => import("./components/LeftBottom.vue"));
+const LeftBottom = defineAsyncComponent(() => import("./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"));
+const RightCenter = defineAsyncComponent(() => import("./RightCenter.vue"));
 </script>
 
 <template>
@@ -33,35 +31,24 @@ const RightBottom = defineAsyncComponent(() => import("./components/RightBottom.
           <LeftCenter />
         </ItemWrap>
         
-        <!-- <ItemWrap title="学生用户高考年份统计" class="left-contetn-bottom module-item">
+        <ItemWrap title="学生用户高考年份统计" class="left-contetn-bottom module-item">
           <LeftBottom />
-        </ItemWrap> -->
+        </ItemWrap>
       </div>
       
       <!-- 中间内容区域 -->
       <div class="center-content">
-        <ItemWrap class="module-item map-container">
-          <CenterTop />
-        </ItemWrap>
-        
-        <ItemWrap title="高频咨询问题" class="module-item">
+        <CenterTop />
+        <!-- <ItemWrap title="高频咨询问题" class="module-item">
           <CenterBottom />
-        </ItemWrap>
+        </ItemWrap> -->
       </div>
       
       <!-- 右侧内容区域 -->
       <div class="right-content">
-        <ItemWrap title="平均时长趋势" class="module-item">
-          <RightTop />
-        </ItemWrap>
-        
-        <ItemWrap title="用户量属专业排行" class="module-item">
+        <ItemWrap class="right-content-top module-item">
           <RightCenter />
         </ItemWrap>
-        
-        <ItemWrap title="常见咨询问题" class="module-item">
-          <RightBottom />
-        </ItemWrap>
       </div>
     </div>
   </div>
@@ -87,7 +74,7 @@ const RightBottom = defineAsyncComponent(() => import("./components/RightBottom.
 .left-content, .right-content {
   display: flex;
   flex-direction: column;
-  width: 25%;
+  width: 500px;
   gap: 10px;
 }
 
@@ -110,6 +97,10 @@ const RightBottom = defineAsyncComponent(() => import("./components/RightBottom.
   height: 240px;
 }
 
+.right-content-top {
+  height: 710px;
+}
+
 // .module-item {
 //   height: 100%;
 //   flex: 1;