jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

优化进度条
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
Details

Browse Source
This commit is contained in:
liqian
2025-12-20 15:30:14 +08:00
parent 128fb60bad
commit 77e84f1086
3 changed files with 242 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/index/view/pc/topic_laptop/index.html
View File

@@ -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();

193
public/static/index/pc/css/topic_laptop/progress.css
View File

@@ -1,22 +1,23 @@
.container {
/* 你的原始基础样式保留，仅添加/修改性能相关属性 */
.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 {
}
.progress-section {
max-width: 14.4rem;
/* min-width: 1280px; */
}
.progress-title {
}
.progress-title {
font-size: 0.48rem;
color: #fff;
padding: 2.13rem 0 0.78rem 0;
font-family: "HarmonyOS-Medium";
}
}
.progress-item .label {
.progress-item .label {
font-size: 0.4rem;
color: #cbcfd8;
margin-bottom: 0.08rem;
@@ -26,46 +27,48 @@
line-height: 1;
margin-top: 0.3rem;
margin-bottom: 0.76rem;
}
}
.progress-item .label .device-name {
.progress-item .label .device-name {
flex: 1;
font-family: "HarmonyOS-Medium";
}
}
.progress-item .label .baseline {
.progress-item .label .baseline {
color: #cbcfd8;
font-size: 0.6rem;
}
}
.progress-item .label .value {
.progress-item .label .value {
font-size: 0.4rem;
min-width: 0.8rem;
text-align: right;
margin-left: 0.16rem;
font-family: "HarmonyOS-Medium";
}
.colorLinearGradient {
}
.colorLinearGradient {
background: linear-gradient(90deg, #7e51ff, #d5dfff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.progress-item .label .value.m4-max {
}
.progress-item .label .value.m4-max {
color: #5e5ce6;
}
}
.progress-item .label .value.gray {
.progress-item .label .value.gray {
color: #86868b;
}
}
.progress-bar-container {
.progress-bar-container {
display: flex;
align-items: center;
gap: 0.16rem;
}
}
.progress-bar {
.progress-bar {
flex: 1;
height: 0.2rem;
max-height: 20px;
@@ -73,34 +76,42 @@
border-radius: 10px;
overflow: hidden;
position: relative;
}
/* 性能优化1：开启硬件加速，减少重绘 */
transform: translateZ(0);
will-change: transform;
}
.progress-fill {
.progress-fill {
height: 100%;
border-radius: 0.05rem;
transition: width 1.2s ease-out;
width: 0;
/* 性能优化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 {
/* 保留你所有原始的进度条颜色类 */
.progress-fill.m4-max {
background: linear-gradient(40deg, #7e51ff, #e1d5ff);
}
}
.progress-fill.m2-max {
.progress-fill.m2-max {
background: #bfc5d9;
}
}
.progress-fill.m1-max {
.progress-fill.m1-max {
background: #bfc5d9;
}
}
.progress-fill.baseline {
.progress-fill.baseline {
background: #bfc5d9;
}
}
/* 流光动效 */
/* .progress-fill::after {
/* 流光动效（保留你的注释，如需启用可直接解开） */
/* .progress-fill::after {
content: '';
position: absolute;
top: 0;
@@ -115,88 +126,78 @@
);
animation: shimmer 1.5s infinite;
} */
@keyframes shimmer {
@keyframes shimmer {
100% {
left: 150%;
}
}
}
/* 基准说明 */
.baseline-note {
/* 基准说明（保留原始样式） */
.baseline-note {
margin-top: 0.3rem;
font-size: 0.13rem;
color: #86868b;
padding-top: 0.15rem;
border-top: 1px solid #e9e9eb;
}
}
.baseline-note sup {
.baseline-note sup {
font-size: 0.1rem;
vertical-align: top;
}
.w1440 {
}
/* 保留你所有设计稿固定宽度类（完全不动） */
.w1440 {
width: 14.4rem;
/* max-width: 1440px;
min-width: 1280px; */
}
.w1368 {
}
.w1368 {
width: 13.68rem;
/* min-width: 1280px; */
}
.w1243 {
/* width: 1243px; */
}
.w1243 {
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 {
}
.w964 {
width: 9.64rem;
}
.w681 {
}
.w681 {
width: 6.81rem;
} */
.font32 {
}
.w1274 {
width: 12.74rem;
}
.w1000 {
width: 10rem;
}
.font32 {
font-size: 0.32rem !important;
}
.colorCBCFD8 {
}
.colorCBCFD8 {
color: #646778 !important;
}
.color8A8787 {
}
.color8A8787 {
color: #646778 !important;
}
.progress-p {
}
.progress-p {
color: #cbcfd8;
font-size: clamp(16px, 1vw, 0.22rem);
margin-top: 1.56rem;
margin-bottom: 2rem;
text-align: center;
}
.progress-p1 {
}
.progress-p1 {
color: #cbcfd8;
font-size: clamp(16px, 1vw, 0.22rem);
margin-top: 1.56rem;
/* margin-bottom: 1.66rem; */
text-align: center;
}
}

173
public/static/index/pc/css/topic_laptop/progress2.css
View File

@@ -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;
}