优化进度条

app/index/view/pc/topic_laptop/index.html

@@ -905,28 +905,54 @@
     })();
 
     // 进度条动画
-    function animateProgressBars (container)
+    // function animateProgressBars (container)
-    {
+    // {
-        if (container._isAnimating) return;
+    //     if (container._isAnimating) return;
-        container._isAnimating = true;
+    //     container._isAnimating = true;
+
+    //     const progressFills = container.querySelectorAll('.progress-fill');
+    //     progressFills.forEach(fill =>
+    //     {
+    //         clearTimeout(fill._animateTimer);
+    //         fill.style.width = '0';
+    //         fill._animateTimer = setTimeout(() =>
+    //         {
+    //             const targetValue = fill.getAttribute('data-value');
+    //             fill.style.width = targetValue + '%';
+    //             setTimeout(() =>
+    //             {
+    //                 container._isAnimating = false;
+    //             }, 500);
+    //         }, 100);
+    //     });
+    // }
+     // 进度条动画 - 零HTML改动，仅优化性能
+     function animateProgressBars (container){
+        // 性能优化1：用WeakMap管理状态，避免污染DOM属性
+        const animationState = new WeakMap();
+        const state = animationState.get(container) || { isAnimating: false };
+
+        // 防止重复触发
+        if (state.isAnimating) return;
+        state.isAnimating = true;
+        animationState.set(container, state);
 
         const progressFills = container.querySelectorAll('.progress-fill');
         progressFills.forEach(fill =>
         {
             clearTimeout(fill._animateTimer);
-            fill.style.width = '0';
+            // 性能优化2：重置用transform而非width
-            fill._animateTimer = setTimeout(() =>
+            fill.style.transform = 'scaleX(0)';
+
+            // 性能优化3：用requestAnimationFrame替代setTimeout，对齐浏览器刷新
+            fill._animateTimer = requestAnimationFrame(() =>
             {
                 const targetValue = fill.getAttribute('data-value');
-                fill.style.width = targetValue + '%';
+                // 性能优化4：用transform替代width，消除重排
-                setTimeout(() =>
+                fill.style.transform = `scaleX(${targetValue / 100})`;
-                {
+            });
-                    container._isAnimating = false;
-                }, 500);
-            }, 100);
         });
     }
-
     function isElementInView (el)
     {
         const rect = el.getBoundingClientRect();

public/static/index/pc/css/topic_laptop/progress.css

@@ -1,14 +1,15 @@
+    /* 你的原始基础样式保留，仅添加/修改性能相关属性 */
     .container {
         max-width: 14.4rem;
-	/* min-width: 1280px; */
         margin: 0 auto;
         border-radius: 12px;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     }
+
     .progress-section {
         max-width: 14.4rem;
-	/* min-width: 1280px; */
     }
+
     .progress-title {
         font-size: 0.48rem;
         color: #fff;
@@ -45,12 +46,14 @@
         margin-left: 0.16rem;
         font-family: "HarmonyOS-Medium";
     }
+
     .colorLinearGradient {
         background: linear-gradient(90deg, #7e51ff, #d5dfff);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
     }
+
     .progress-item .label .value.m4-max {
         color: #5e5ce6;
     }
@@ -73,16 +76,24 @@
         border-radius: 10px;
         overflow: hidden;
         position: relative;
+        /* 性能优化1：开启硬件加速，减少重绘 */
+        transform: translateZ(0);
+        will-change: transform;
     }
 
     .progress-fill {
         height: 100%;
         border-radius: 0.05rem;
-	transition: width 1.2s ease-out;
+        /* 性能优化2：替换width动画为transform，消除重排 */
-	width: 0;
+        transform: scaleX(0);
+        transform-origin: left center;
+        transition: transform 1.2s ease-out;
+        will-change: transform;
         position: relative;
+        /* 移除原始的width: 0; */
     }
 
+    /* 保留你所有原始的进度条颜色类 */
     .progress-fill.m4-max {
         background: linear-gradient(40deg, #7e51ff, #e1d5ff);
     }
@@ -99,7 +110,7 @@
         background: #bfc5d9;
     }
 
-/* 流光动效 */
+    /* 流光动效（保留你的注释，如需启用可直接解开） */
     /* .progress-fill::after {
 	content: '';
 	position: absolute;
@@ -115,14 +126,13 @@
 	);
 	animation: shimmer 1.5s infinite;
 } */
-
     @keyframes shimmer {
         100% {
             left: 150%;
         }
     }
 
-/* 基准说明 */
+    /* 基准说明（保留原始样式） */
     .baseline-note {
         margin-top: 0.3rem;
         font-size: 0.13rem;
@@ -135,57 +145,48 @@
         font-size: 0.1rem;
         vertical-align: top;
     }
+
+    /* 保留你所有设计稿固定宽度类（完全不动） */
     .w1440 {
         width: 14.4rem;
-	/* max-width: 1440px;
-	min-width: 1280px; */
     }
+
     .w1368 {
         width: 13.68rem;
-	/* min-width: 1280px; */
     }
+
     .w1243 {
-	/* width: 1243px; */
         width: 12.43rem;
     }
+
     .w964 {
-	/* width: 964px; */
         width: 9.64rem;
     }
+
     .w681 {
-	/* width: 681px; */
         width: 6.81rem;
     }
+
     .w1274 {
-	/* width: 1274px; */
         width: 12.74rem;
     }
+
     .w1000 {
-	/* width: 1000px; */
         width: 10rem;
     }
-/* .w1368 {
+
-	width: 13.68rem;
-	min-width: 1280px;
-}
-.w1243 {
-	width: 12.43rem;
-}
-.w964 {
-	width: 9.64rem;
-}
-.w681 {
-	width: 6.81rem;
-} */
     .font32 {
         font-size: 0.32rem !important;
     }
+
     .colorCBCFD8 {
         color: #646778 !important;
     }
+
     .color8A8787 {
         color: #646778 !important;
     }
+
     .progress-p {
         color: #cbcfd8;
         font-size: clamp(16px, 1vw, 0.22rem);
@@ -193,10 +194,10 @@
         margin-bottom: 2rem;
         text-align: center;
     }
+
     .progress-p1 {
         color: #cbcfd8;
         font-size: clamp(16px, 1vw, 0.22rem);
         margin-top: 1.56rem;
-    /* margin-bottom: 1.66rem; */
         text-align: center;
     }

public/static/index/pc/css/topic_laptop/progress2.css

@@ -1,173 +0,0 @@
-.container {
-	max-width: 14.4rem;
-	/* min-width: 1280px; */
-	margin: 0 auto;
-	border-radius: 12px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-}
-.progress-section {
-	max-width: 14.4rem;
-	/* min-width: 1280px; */
-}
-.progress-title {
-	font-size: 0.48rem;
-	color: #fff;
-	padding: 2.13rem 0 0.78rem 0;
-    font-family: "HarmonyOS-Medium";
-}
-
-.progress-item .label {
-	font-size: 0.4rem;
-	color: #cbcfd8;
-	margin-bottom: 0.08rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
-	line-height: 1;
-	margin-top: 0.3rem;
-	margin-bottom: 0.76rem;
-}
-
-.progress-item .label .device-name {
-	flex: 1;
-    font-family: "HarmonyOS-Medium";
-}
-
-.progress-item .label .baseline {
-	color: #cbcfd8;
-	font-size: 0.6rem;
-}
-
-.progress-item .label .value {
-	font-size: 0.4rem;
-	min-width: 0.8rem;
-	text-align: right;
-	margin-left: 0.16rem;
-    font-family: "HarmonyOS-Medium";
-}
-.colorLinearGradient {
-	background: linear-gradient(90deg, #7e51ff, #d5dfff);
-	-webkit-background-clip: text;
-	background-clip: text;
-	color: transparent;
-}
-.progress-item .label .value.m4-max {
-	color: #5e5ce6;
-}
-
-.progress-item .label .value.gray {
-	color: #86868b;
-}
-
-.progress-bar-container {
-	display: flex;
-	align-items: center;
-	gap: 0.16rem;
-    /* 新增：让容器成为定位参考 */
-    position: relative;
-}
-
-.progress-bar {
-	flex: 1;
-	height: 0.2rem;
-	max-height: 20px;
-	min-height: 10px;
-	border-radius: 10px;
-	overflow: hidden;
-	position: relative;
-    /* 新增：进度条本身宽度100%，通过父容器控制实际宽度 */
-    width: 100%;
-}
-
-/* ========== 核心优化：进度条填充层（去掉流光） ========== */
-.progress-fill {
-	height: 100%;
-	border-radius: 0.05rem;
-    /* 移除width过渡，改用transform（性能更优） */
-    transition: transform 1.2s ease-out;
-    /* 初始状态：向左偏移100%（完全隐藏） */
-    transform: translateX(-100%);
-    /* 固定宽度100%，不再动态修改width */
-	width: 100%;
-	position: absolute;
-    left: 0;
-    top: 0;
-}
-
-/* 新增：进度条激活状态（通过JS添加此类名） */
-.progress-fill.active {
-    transform: translateX(0); /* 偏移0，完全显示 */
-}
-
-.progress-fill.m4-max {
-	background: linear-gradient(40deg, #7e51ff, #e1d5ff);
-}
-
-.progress-fill.m2-max {
-	background: #bfc5d9;
-}
-
-.progress-fill.m1-max {
-	background: #bfc5d9;
-}
-
-.progress-fill.baseline {
-	background: #bfc5d9;
-}
-
-/* 基准说明 */
-.baseline-note {
-	margin-top: 0.3rem;
-	font-size: 0.13rem;
-	color: #86868b;
-	padding-top: 0.15rem;
-	border-top: 1px solid #e9e9eb;
-}
-
-.baseline-note sup {
-	font-size: 0.1rem;
-	vertical-align: top;
-}
-.w1440 {
-	width: 14.4rem;
-}
-.w1368 {
-	width: 13.68rem;
-}
-.w1243 {
-    width: 12.43rem;
-}
-.w964 {
-    width:9.64rem;
-}
-.w681 {
-    width: 6.81rem;
-}
-.w1274 {
-    width: 12.74rem;
-}
-.w1000 {
-    width:10rem;
-}
-.font32 {
-	font-size: 0.32rem !important;
-}
-.colorCBCFD8 {
-	color: #646778 !important;
-}
-.color8A8787 {
-	color: #646778 !important;
-}
-.progress-p {
-	color: #cbcfd8;
-	font-size: clamp(16px, 1vw, 0.22rem);
-	margin-top: 1.23rem;
-    margin-bottom: 5.04rem;
-	text-align: center;
-}
-.progress-p1 {
-    color: #cbcfd8;
-	font-size: clamp(16px, 1vw, 0.22rem);
-	margin-top: 1.56rem;
-	text-align: center;
-}