修改DeviceStatusPie组件的圆饼图自适应的问题

src/components/ui/DeviceStatusPie.vue

@@ -132,18 +132,24 @@ export default {
   align-items: center;
   gap: clamp(10px, 2vw, 30px);
   padding: 10px;
+  container-type: size; /* 核心修改：让它成为容器查询的根节点 */
 }
 
 /* 饼图 */
 .tech-pie-chart {
   position: relative;
-  width: auto;
-  height: 100%;
-  aspect-ratio: 1;
+  /* 核心修改：直接计算出一个绝对的正方形尺寸！
+     取“父级宽度的45%”和“父级高度”中更小的那一个作为边长，彻底杜绝拉伸 */
+  width: min(45cqw, 100cqh - 20px);
+  height: min(45cqw, 100cqh - 20px);
+  
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
+  
+  /* 核心修改：把饼图自己也变成一个容器，为了让里面的文字根据它缩放 */
+  container-type: inline-size;
 }
 
 .chart-ring {
@@ -170,6 +176,7 @@ export default {
   height: 100%;
   transform: rotate(-90deg);
   filter: drop-shadow(0 0 20px rgba(0, 255, 120, 0.2));
+  overflow: visible; /* 核心修改：防止描边在 scale 时被 SVG 盒子裁切 */
 }
 
 .pie-segment {
@@ -178,6 +185,7 @@ export default {
   stroke-linecap: round;
   transition: all 0.5s cubic-bezier(0.3, 0.9, 0.3, 1);
   cursor: pointer;
+  transform-origin: center; /* 核心修改：确保放大是从中心向外扩展 */
 }
 .pie-segment:hover {
   stroke-width: 100;
@@ -205,12 +213,13 @@ export default {
 }
 
 .center-total {
-  font-size: clamp(16px, 3vh, 36px);
+  font-size: clamp(16px, 3cqh, 36px);
   font-weight: 700;
   color: #00ff88;
+  line-height: 1;
 }
 .center-label {
-  font-size: clamp(10px, 1.2vh, 14px);
+  font-size: clamp(10px, 1.2cqh, 14px);
   color: rgba(255, 255, 255, 0.8);
   letter-spacing: 1px;
   margin-top: 3px;
@@ -222,6 +231,7 @@ export default {
   flex-direction: column;
   gap: clamp(6px, 1.5vh, 12px);
   width: 45%;
+  flex-shrink: 0; /* 核心修改：保证右侧内容不被变形挤压 */
 }
 
 .status-item {

src/views/Home.vue

@@ -89,7 +89,7 @@
         </div>
         <div class="panel-item">
           <PanelContainer title="关键路口" class="table-panel">
-            <SeamlessScroll :data="keyIntersectionData" :limit="2">
+            <SeamlessScroll :data="keyIntersectionData" :limit="4">
               <template #default="{ list }">
                 <TechTable :columns="keyIntersectionColumns" :data="list"
                   @row-click="onIntersectionRowClick" />