From 77e84f1086410f8dfd5f74cf349503c6087f72fd Mon Sep 17 00:00:00 2001
From: liqian <735273025@qq.com>
Date: Sat, 20 Dec 2025 15:30:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/pc/topic_laptop/index.html     |  52 ++-
 .../index/pc/css/topic_laptop/progress.css    | 405 +++++++++---------
 .../index/pc/css/topic_laptop/progress2.css   | 173 --------
 3 files changed, 242 insertions(+), 388 deletions(-)
 delete mode 100644 public/static/index/pc/css/topic_laptop/progress2.css

diff --git a/app/index/view/pc/topic_laptop/index.html b/app/index/view/pc/topic_laptop/index.html
index 3e927862..5e40f78b 100644
--- a/app/index/view/pc/topic_laptop/index.html
+++ b/app/index/view/pc/topic_laptop/index.html
@@ -905,28 +905,54 @@
     })();
 
     // 进度条动画
-    function animateProgressBars (container)
-    {
-        if (container._isAnimating) return;
-        container._isAnimating = true;
+    // function animateProgressBars (container)
+    // {
+    //     if (container._isAnimating) return;
+    //     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';
-            fill._animateTimer = setTimeout(() =>
+            // 性能优化2：重置用transform而非width
+            fill.style.transform = 'scaleX(0)';
+
+            // 性能优化3：用requestAnimationFrame替代setTimeout，对齐浏览器刷新
+            fill._animateTimer = requestAnimationFrame(() =>
             {
                 const targetValue = fill.getAttribute('data-value');
-                fill.style.width = targetValue + '%';
-                setTimeout(() =>
-                {
-                    container._isAnimating = false;
-                }, 500);
-            }, 100);
+                // 性能优化4：用transform替代width，消除重排
+                fill.style.transform = `scaleX(${targetValue / 100})`;
+            });
         });
     }
-
     function isElementInView (el)
     {
         const rect = el.getBoundingClientRect();
diff --git a/public/static/index/pc/css/topic_laptop/progress.css b/public/static/index/pc/css/topic_laptop/progress.css
index 2072cf57..29d5e9fe 100644
--- a/public/static/index/pc/css/topic_laptop/progress.css
+++ b/public/static/index/pc/css/topic_laptop/progress.css
@@ -1,202 +1,203 @@
-.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;
-}
-
-.progress-bar {
-	flex: 1;
-	height: 0.2rem;
-	max-height: 20px;
-	min-height: 10px;
-	border-radius: 10px;
-	overflow: hidden;
-	position: relative;
-}
-
-.progress-fill {
-	height: 100%;
-	border-radius: 0.05rem;
-	transition: width 1.2s ease-out;
-	width: 0;
-	position: relative;
-}
-
-.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;
-}
-
-/* 流光动效 */
-/* .progress-fill::after {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: -100%;
-	width: 50%;
-	height: 100%;
-	background: linear-gradient(
-		90deg,
-		transparent,
-		rgba(255, 255, 255, 0.3),
-		transparent
-	);
-	animation: shimmer 1.5s infinite;
-} */
-
-@keyframes shimmer {
-	100% {
-		left: 150%;
-	}
-}
-
-/* 基准说明 */
-.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;
-	/* 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);
-	margin-top: 1.56rem;
-    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;
-}
\ No newline at end of file
+    /* 你的原始基础样式保留，仅添加/修改性能相关属性 */
+    .container {
+        max-width: 14.4rem;
+        margin: 0 auto;
+        border-radius: 12px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+    }
+
+    .progress-section {
+        max-width: 14.4rem;
+    }
+
+    .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;
+    }
+
+    .progress-bar {
+        flex: 1;
+        height: 0.2rem;
+        max-height: 20px;
+        min-height: 10px;
+        border-radius: 10px;
+        overflow: hidden;
+        position: relative;
+        /* 性能优化1：开启硬件加速，减少重绘 */
+        transform: translateZ(0);
+        will-change: transform;
+    }
+
+    .progress-fill {
+        height: 100%;
+        border-radius: 0.05rem;
+        /* 性能优化2：替换width动画为transform，消除重排 */
+        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);
+    }
+
+    .progress-fill.m2-max {
+        background: #bfc5d9;
+    }
+
+    .progress-fill.m1-max {
+        background: #bfc5d9;
+    }
+
+    .progress-fill.baseline {
+        background: #bfc5d9;
+    }
+
+    /* 流光动效（保留你的注释，如需启用可直接解开） */
+    /* .progress-fill::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: -100%;
+	width: 50%;
+	height: 100%;
+	background: linear-gradient(
+		90deg,
+		transparent,
+		rgba(255, 255, 255, 0.3),
+		transparent
+	);
+	animation: shimmer 1.5s infinite;
+} */
+    @keyframes shimmer {
+        100% {
+            left: 150%;
+        }
+    }
+
+    /* 基准说明（保留原始样式） */
+    .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.56rem;
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+
+    .progress-p1 {
+        color: #cbcfd8;
+        font-size: clamp(16px, 1vw, 0.22rem);
+        margin-top: 1.56rem;
+        text-align: center;
+    }
\ No newline at end of file
diff --git a/public/static/index/pc/css/topic_laptop/progress2.css b/public/static/index/pc/css/topic_laptop/progress2.css
deleted file mode 100644
index 01d76eb5..00000000
--- a/public/static/index/pc/css/topic_laptop/progress2.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file