refactor(views): 重构中间区域组件布局和样式

src/views/index/CenterBottom.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from "vue";
 import { commonQuestions } from "@/api";
 
 interface QuestionItem {
@@ -13,7 +13,7 @@ const questionData = ref<QuestionItem[]>([]);
 
 // 获取问题数据
 const fetchQuestionData = () => {
-  commonQuestions().then(res => {
+  commonQuestions().then((res) => {
     if (res.success) {
       questionData.value = res.data;
     }
@@ -27,13 +27,26 @@ onMounted(() => {
 
 <template>
   <div class="common-questions">
-    <div class="question-list">
+    <div class="table-container">
-      <div v-for="(item, index) in questionData" :key="index" class="question-item">
+      <div class="table-header">
-        <div class="question-rank">{{ index + 1 }}</div>
+        <div class="header-rank">排名</div>
-        <div class="question-content">
+        <div class="header-content">问题内容</div>
-          <div class="question-text">{{ item.question }}</div>
+        <div class="header-count">命中次数</div>
+      </div>
+      <div class="question-list">
+        <div
+          v-for="(item, index) in questionData.slice(0, 4)"
+          :key="index"
+          class="question-item"
+        >
+          <div class="question-rank" :class="`rank-${index + 1}`">
+            <div class="rank-number">{{ index + 1 }}</div>
+          </div>
+          <div class="question-content">
+            <div class="question-text">{{ item.question }}</div>
+          </div>
           <div class="question-count">
-            <span class="count-value">{{ item.count }}</span>
+            <span class="count-value">{{ item.count.toLocaleString() }}</span>
           </div>
         </div>
       </div>
@@ -45,75 +58,140 @@ onMounted(() => {
 .common-questions {
   width: 100%;
   height: 100%;
-  padding: 10px 0;
+}
+
+.table-container {
+  margin-top: 6px;
+  background: transparent;
+}
+
+.table-header {
+  display: flex;
+  background: linear-gradient(90deg, rgba(130, 157, 244), rgba(239, 241, 254));
+  border-radius: 2px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+
+  .header-rank {
+    width: 80px;
+    padding: 12px 20px;
+    text-align: center;
+  }
+
+  .header-content {
+    flex: 1;
+    padding: 12px 20px;
+  }
+
+  .header-count {
+    width: 120px;
+    padding: 12px 20px;
+    text-align: center;
+    color: #94A8F6;
+  }
 }
 
 .question-list {
-  width: 100%;
+  background: rgba(255, 255, 255, 0.9);
-  height: 100%;
-  overflow-y: auto;
 }
 
 .question-item {
   display: flex;
-  padding: 15px 0;
+  align-items: center;
-  border-bottom: 1px solid #f5f5f5;
+  border-bottom: 1px solid rgba(33, 150, 243, 0.1);
-  
-  &:last-child {
-    border-bottom: none;
-  }
 }
 
 .question-rank {
-  width: 24px;
+  width: 80px;
-  height: 24px;
+  padding: 8px 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f5f5f5;
+
-  border-radius: 50%;
+  &.rank-1 {
-  margin-right: 15px;
+    .rank-number {
-  font-size: 14px;
+      width: 24px;
-  color: #666;
+      height: 19px;
-  flex-shrink: 0;
+      border-radius: 2px;
-  
+      background: #E8A767;
-  // 前三名使用不同颜色
+      color: #fff;
-  .question-item:nth-child(1) & {
+      display: flex;
-    background-color: #f5222d;
+      align-items: center;
-    color: #fff;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: bold;
+    }
   }
-  
+
-  .question-item:nth-child(2) & {
+  &.rank-2 {
-    background-color: #fa8c16;
+    .rank-number {
-    color: #fff;
+      width: 24px;
+      height: 19px;
+      border-radius: 2px;
+      background: #A0A8C6;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: bold;
+    }
   }
-  
+
-  .question-item:nth-child(3) & {
+  &.rank-3 {
-    background-color: #52c41a;
+    .rank-number {
-    color: #fff;
+      width: 24px;
+      height: 19px;
+      border-radius: 2px;
+      background: #B89681 ;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;  
+      font-weight: bold;
+    }
+  }
+
+  &.rank-4 {
+    .rank-number {
+      width: 24px;
+      height: 19px;
+      border-radius: 2px;
+      background: linear-gradient(124deg, rgba(3,0,0,0.16), rgba(255,255,255,0.16));
+     color: #545966;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: bold;
+    }
   }
 }
 
 .question-content {
   flex: 1;
-  display: flex;
+  padding: 8px 20px;
-  flex-direction: column;
 }
 
 .question-text {
   font-size: 14px;
-  color: #333;
+  color: #2D2E30;
-  line-height: 1.5;
+  line-height: 1.6;
-  margin-bottom: 5px;
+  font-weight: bold;
+  
 }
 
 .question-count {
-  font-size: 12px;
+  width: 120px;
-  color: #999;
+  padding: 8px 20px;
-  
+  text-align: center;
+
   .count-value {
-    color: #4B96FF;
     font-weight: bold;
+    font-size: 16px;
+    color: #2D2E30;
   }
 }
-</style> 
+</style>

src/views/index/center-map.vue

@@ -109,8 +109,8 @@ getData(code.value);
 
 <style scoped lang="scss">
 .centermap {
-  margin-bottom: 30px;
+  // margin-bottom: 30px;
-  background: #fff;
+  background: transparent;
 
   .maptitle {
     height: 60px;

src/views/index/components/CenterBottom.vue

@@ -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> 

src/views/index/components/CenterTop.vue

@@ -1,100 +0,0 @@
-<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> 

src/views/index/components/ConsultationCard.vue

@@ -1 +0,0 @@
- 

src/views/index/index.vue

@@ -10,8 +10,7 @@ const LeftBottom = defineAsyncComponent(() => import("./LeftBottom.vue"));
 
 
 // 导入中间组件
-const CenterTop = defineAsyncComponent(() => import("./components/CenterTop.vue"));
+const CenterBottom = defineAsyncComponent(() => import("./CenterBottom.vue"));
-const CenterBottom = defineAsyncComponent(() => import("./components/CenterBottom.vue"));
 const CenterMap = defineAsyncComponent(() => import("./center-map.vue"));
 
 // 导入右侧组件
@@ -44,10 +43,9 @@ const mapRef: any = ref(null);
       <!-- 中间内容区域 -->
       <div class="center-content">
         <CenterMap class="center_content_top" title="咨询地图"/>
-        <!-- <CenterTop /> -->
+        <ItemWrap title="高频咨询问题" class="center_content_bottom module-item">
-        <!-- <ItemWrap title="高频咨询问题" class="module-item">
           <CenterBottom />
-        </ItemWrap> -->
+        </ItemWrap>
       </div>
       
       <!-- 右侧内容区域 -->
@@ -88,11 +86,14 @@ const mapRef: any = ref(null);
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  // gap: 20px;
 }
 
 .center_content_top {
-
+  height: 410px;
+}
+.center_content_bottom {
+  height: 300px;
 }
 
 .left-contetn-top {