orico-official-website/public/static/index/pc/css/topic_laptop/progress.css

    /* 你的原始基础样式保留，仅添加/修改性能相关属性 */
    .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;
    }