|
|
@@ -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 {
|
