diff --git a/src/views/screen/components/RiskStatisticsPanel.vue b/src/views/screen/components/RiskStatisticsPanel.vue
index b68e09d..e2f11c0 100644
--- a/src/views/screen/components/RiskStatisticsPanel.vue
+++ b/src/views/screen/components/RiskStatisticsPanel.vue
@@ -32,11 +32,11 @@
-
+
@@ -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;
- width: 80px;
- height: 80px;
+ .chart-wrapper {
+ flex: 0 0 80px;
+ width: 80px;
+ height: 80px;
+ }
+
+ .legend-label-row {
+ font-size: 11px;
+ }
}
}
-@media (width <=3000px) {
- .left-bottom .legend-label {
- display: none;
+@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 >3000px) {
+@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;
+// }
+// }