Sfoglia il codice sorgente

fix(mobile/home): 修复统计图表x轴标签重叠和间距问题

- 使用循环生成24小时标签,避免手动列举不全
- 调整x轴标签字体大小、旋转角度和显示间隔,防止重叠
- 优化卡片图标容器样式,确保图片适配显示
- 减少图表容器高度和底部间距,适配移动端布局
reaper 1 mese fa
parent
commit
20b8492adf
1 ha cambiato i file con 23 aggiunte e 8 eliminazioni
  1. 23 8
      app/components/mobile/home/StatsSection.vue

+ 23 - 8
app/components/mobile/home/StatsSection.vue

@@ -79,7 +79,10 @@ const statsList = computed(() => [
 
 // 生成 24小时 Mock 数据
 const generateData = () => {
-  const hours = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
+  const hours = []
+  for (let i = 0; i < 24; i++) {
+    hours.push(`${i.toString().padStart(2, '0')}:00`)
+  }
   const seriesData1 = [] // DDoS
   const seriesData2 = [] // CC
   const seriesData3 = [] // WAF
@@ -134,7 +137,9 @@ const chartOption = computed(() => ({
     },
     axisLabel: {
       color: 'rgba(255, 255, 255, 0.5)',
-      fontSize: 12
+      fontSize: 10,
+      rotate: 45,
+      interval: 1
     }
   },
   yAxis: {
@@ -229,7 +234,7 @@ const chartOption = computed(() => ({
   justify-content: space-between;
   box-sizing: border-box;
   gap: 10px;
-  margin-bottom: 60px;
+  margin-bottom: 22px;
 
   .card {
     flex: 1;
@@ -267,15 +272,27 @@ const chartOption = computed(() => ({
 
     .card-icon {
       position: absolute;
+      height: 24px;
+      width: 24px;
       left: 50%;
       top: 0;
       transform: translate(-50%, -50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
       // border-radius: 100px;
       // border: 1px solid rgba(64, 64, 64, 0.50);
       // background: rgba(255, 255, 255, 0.10);
       // box-shadow: -20px 68px 20px 0 rgba(0, 0, 0, 0.00), -13px 43px 18px 0 rgba(0, 0, 0, 0.01), -7px 24px 15px 0 rgba(0, 0, 0, 0.04), -3px 11px 11px 0 rgba(0, 0, 0, 0.07), -1px 3px 6px 0 rgba(0, 0, 0, 0.08);
       // backdrop-filter: blur(7.5px);
       z-index: 2;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
     }
 
     .value {
@@ -296,16 +313,14 @@ const chartOption = computed(() => ({
   text-align: center;
 
   .chart-title {
-    font-size: 30px;
-    font-weight: 400;
-    margin-bottom: 40px;
-    letter-spacing: 1px;
     color: #FFF;
+    font-size: 14px;
+    font-weight: 400;
   }
 
   .chart-container {
     width: 100%;
-    height: 400px;
+    height: 220px;
     position: relative;
 
     .chart {