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; +// } +// }