笔记本移动端

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

@@ -0,0 +1,129 @@
+.progress {
+	margin-left: 0.34rem;
+	margin-right: 0.34rem;
+	box-sizing: border-box;
+}
+/* .progress-section {
+	margin-left: 0.34rem;
+	margin-right: 0.34rem;
+	box-sizing: border-box;
+} */
+
+.progress-title {
+	font-size: 0.24rem;
+	color: #fff;
+	padding: 0.16rem 0 0.36rem 0;
+	font-family: 'HarmonyOS-Medium';
+}
+.progress-item .label {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	line-height: 1;
+	margin-top: 0.13rem;
+	margin-bottom: 0.36rem;
+}
+
+.progress-item .label .device-name {
+	flex: 1;
+	font-family: 'HarmonyOS-Medium';
+	margin-left: 0.04rem;
+}
+
+.progress-item .label .value {
+	text-align: right;
+	font-family: 'HarmonyOS-Medium';
+	margin-right: 0.04rem;
+}
+
+.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-bar {
+	flex: 1;
+	height: 0.1rem;
+	max-height: 0.2rem;
+	min-height: 0.1rem;
+	border-radius: 0.1rem;
+	overflow: hidden;
+	position: relative;
+	/* 性能优化1：开启硬件加速，减少重绘 */
+	transform: translateZ(0);
+	will-change: transform;
+}
+
+.progress-fill {
+	height: 100%;
+	border-radius: 0.05rem;
+	transform: scaleX(0);
+	transform-origin: left center;
+	transition: transform 1.2s ease-out;
+	will-change: transform;
+	position: relative;
+}
+
+/* 保留你所有原始的进度条颜色类 */
+.progress-fill.m4-max {
+	background: linear-gradient(40deg, #7e51ff, #e1d5ff);
+}
+
+.progress-fill.m2-max {
+	background: #bfc5d9;
+}
+
+@keyframes shimmer {
+	100% {
+		left: 150%;
+	}
+}
+
+.font20 {
+	font-size: 0.2rem !important;
+}
+.font18 {
+	font-size: 0.18rem !important;
+}
+.colorCBCFD8 {
+	color: #646778 !important;
+}
+
+.progress-p {
+	color: #cbcfd8;
+	font-size: 0.18rem;
+	margin-top: 0.51rem;
+	margin-bottom: 1.5rem;
+	text-align: center;
+}
+
+.progress-p1 {
+	color: #cbcfd8;
+	font-size: 0.18rem;
+	margin-top: 1.56rem;
+	text-align: center;
+}
+.w645 {
+	width: 6.45rem;
+}
+.w585 {
+	width: 5.85rem;
+}
+.w454 {
+	width: 4.54rem;
+}
+.w321 {
+	width: 3.21rem;
+}
+.w596 {
+	width: 5.96rem;
+}
+.w467 {
+	width: 4.67rem;
+}