调整饼图样式

src/views/screen/components/RiskStatisticsPanel.vue

@@ -32,11 +32,11 @@
               </div>
             </ElTooltip>
           </div>
-          <div class="legend-value-row">
+          <!-- <div class="legend-value-row">
             <div class="legend-value" v-for="status in statusList" :key="`${status.key}-value`">
               {{ item.status[status.key] }}
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
       </div>
@@ -104,7 +104,7 @@ const buildOption = (item: ChartItem): EChartsOption => ({
   series: [
     {
       type: 'pie' as const,
-      radius: ['40%', '60%'],
+      radius: ['70%', '90%'],
       center: ['50%', '50%'],
       startAngle: 90,
       avoidLabelOverlap: false,
@@ -182,7 +182,7 @@ const handleTabClick = (tab: TabType) => {
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 12px;
     padding: 0 12px 12px;
-    width: 66%;
+    width: 70%;
     // margin: 0 auto;
   }
 
@@ -190,7 +190,7 @@ const handleTabClick = (tab: TabType) => {
     background: rgba(18, 34, 63, 0.65);
     border: 1px solid rgba(58, 112, 179, 0.55);
     border-radius: 10px;
-    padding: 5px;
+    padding: 5px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -239,20 +239,22 @@ const handleTabClick = (tab: TabType) => {
   }
 
   .legend {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    margin-top: 0;
-    width: auto;
+    // display: flex;
+    // flex-direction: column;
+    // gap: 6px;
+    // margin-top: 0;
+    // width: auto;
+    // justify-content: space-between;
   }
 
   .legend-label-row {
     flex-wrap: nowrap;
-    gap: 10px;
-    justify-content: flex-start;
     align-items: center;
     color: #cbd5e1;
     font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2px;
   }
 
   .legend-item {
@@ -289,33 +291,89 @@ const handleTabClick = (tab: TabType) => {
   }
 }
 
-@media (width <=1280px) {
-  .left-bottom .legend-label-row {
-    gap: 8px;
+/* 简化版尺寸适配：只控制字体大小和图表尺寸 */
+@media (width <= 1680px) {
+  .left-bottom {
+    .panel-title {
+      font-size: 0.75rem;
     }
 
-  .left-bottom .legend-label {
-    display: none;
+    .tab {
+      padding: 2px 8px;
+      font-size: 0.78rem;
     }
 
-  .left-bottom .legend-item {
-    gap: 4px;
+    .chart-title {
+      font-size: 12px;
     }
 
-  .left-bottom .chart-wrapper {
-    flex-basis: 80px;
+    .chart-wrapper {
+      flex: 0 0 80px;
       width: 80px;
       height: 80px;
     }
-}
 
-@media (width <=3000px) {
-  .left-bottom .legend-label {
-    display: none;
+    .legend-label-row {
+      font-size: 11px;
+    }
   }
 }
 
-@media (width >3000px) {
+@media (width <= 1400px) {
+  .left-bottom {
+    .panel-title {
+      font-size: 0.7rem;
+    }
+
+    .tab {
+      padding: 1px 6px;
+      font-size: 0.72rem;
+    }
+
+    .chart-title {
+      font-size: 11px;
+    }
+
+    .chart-wrapper {
+      flex: 0 0 72px;
+      width: 72px;
+      height: 72px;
+    }
+
+    .legend-label-row {
+      font-size: 10px;
+    }
+  }
+}
+
+@media (width <= 1200px) {
+  .left-bottom {
+    .panel-title {
+      font-size: 0.65rem;
+    }
+
+    .tab {
+      padding: 1px 4px;
+      font-size: 0.68rem;
+    }
+
+    .chart-title {
+      font-size: 10px;
+    }
+
+    .chart-wrapper {
+      flex: 0 0 64px;
+      width: 64px;
+      height: 64px;
+    }
+
+    .legend-label-row {
+      font-size: 9px;
+    }
+  }
+}
+
+// @media (width >3000px) {
   .left-bottom .chart-content {
     flex-direction: column;
     align-items: center;
@@ -323,7 +381,7 @@ const handleTabClick = (tab: TabType) => {
   }
 
   .left-bottom .legend {
-    align-items: center;
+    // align-items: center;
     width: 100%;
   }
 
@@ -331,14 +389,6 @@ const handleTabClick = (tab: TabType) => {
     display: inline;
   }
 
-  .left-bottom .legend-label-row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    gap: 18px;
-  }
-
   .left-bottom .legend-item {
     flex-direction: column;
     align-items: center;
@@ -350,35 +400,35 @@ const handleTabClick = (tab: TabType) => {
     display: block;
   }
 
-  .left-bottom .legend-value-row {
-    display: none;
-  }
+  // .left-bottom .legend-value-row {
+  //   display: none;
+  // }
 
   .left-bottom .chart-wrapper {
-    flex-basis: 110px;
-    width: 110px;
-    height: 110px;
-  }
+    flex-basis: 60px;
+    width: 60px;
+    height: 60px;
   }
+// }
 
-@media (width <=1024px) {
-  .left-bottom .chart-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+// @media (width <=1024px) {
+//   .left-bottom .chart-grid {
+//     grid-template-columns: repeat(2, minmax(0, 1fr));
+//   }
 
-  .left-bottom .donut-chart {
-    height: 80px !important;
-  }
-}
+//   .left-bottom .donut-chart {
+//     height: 80px !important;
+//   }
+// }
 
-@media (width <=768px) {
-  .left-bottom .chart-grid {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
+// @media (width <=768px) {
+//   .left-bottom .chart-grid {
+//     grid-template-columns: repeat(1, minmax(0, 1fr));
+//   }
 
-  .left-bottom .chart-card {
-    padding: 5px;
-  }
-}
+//   .left-bottom .chart-card {
+//     padding: 5px;
+//   }
+// }
 </style>