笔记本移动端

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

@@ -0,0 +1,40 @@
+.amd-box {
+	width: 100%;
+	position: relative;
+	max-width: 6.82rem;
+	margin: 0 auto;
+	margin-top: -0.86rem;
+	z-index: 1;
+}
+
+.amd-img-header,
+.amd-img-main,
+.amd-img-footer {
+	width: 100%;
+	max-width: 6.82rem;
+}
+.amd-img-main {
+	display: flex;
+	justify-content: space-between;
+}
+.amd-img-main-left,
+.amd-img-main-right {
+	flex: 1;
+	max-width: 3.36rem;
+	display: block;
+}
+.amd-img-main-left img,
+.amd-img-main-right img {
+	width: 3.36rem;
+	display: block;
+	margin-top: 0.1rem;
+}
+.amd-img-header img {
+	width: 6.82rem;
+	display: block;
+}
+.amd-img-footer img {
+	width: 6.82rem;
+	margin-top: 0.1rem;
+	display: block;
+}

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

@@ -0,0 +1,50 @@
+.bly {
+	margin: 0 0.34rem;
+	aspect-ratio: 682/338;
+	/* max-height: 6.97rem; */
+	padding-top: 1.5rem;
+}
+
+.bly .ba-slider .handle:after {
+	position: absolute;
+	top: 50%;
+	/* 1. 缩小宽高：从48px改为32px（可根据需求再调，比如28px/30px） */
+	width: 0.32rem;
+	height: 0.32rem;
+	/* 2. 同步调整margin：宽高的一半，保证居中（48px对应-24px，32px对应-16px） */
+	margin: -0.16rem 0 0 -0.16rem;
+	content: '';
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #fff
+		url('https://dev.ow.f2b211.com/static/index/pc/images/ba-arrow.png')
+		/* 3. 缩小背景箭头：从22px改为16px（匹配整体尺寸） */ center center /
+		0.16rem 0.16rem no-repeat;
+	border: 1px solid #fff;
+	border-radius: 50%;
+	transition: all 0.3s ease;
+	transform: scale(1);
+	z-index: 5;
+	box-shadow: none;
+}
+
+.bly .ba-slider .handle.ba-draggable:after {
+	transform: scale(0.8);
+}
+.bly-t {
+	font-size: 0.36rem;
+	color: #fff;
+	text-align: center;
+	width: 100%;
+}
+.bly-p {
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	text-align: center;
+	width: 100%;
+	padding-top: 0.37rem;
+	padding-bottom: 0.56rem;
+	font-family: 'HarmonyOS-Light';
+	line-height: 1.5;
+}

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

@@ -0,0 +1,49 @@
+.cpu {
+	margin-top: 1.5rem;
+	width: 100%;
+	aspect-ratio: 750/882;
+	position: relative;
+}
+.cpu-main {
+	width: 100%;
+	aspect-ratio: 750/882;
+}
+.cpu-texts-t {
+	color: #fff;
+	font-size: 0.36rem;
+	line-height: 1;
+	text-align: center;
+	padding-top: 0.19rem;
+}
+.cpu-texts-p {
+	color: #cbcfd8;
+	font-size: 0.18rem;
+	margin-top: 0.37rem;
+	line-height: 1;
+	text-align: center;
+}
+.cpu-footer {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.cpu-footer-img {
+	display: flex;
+	gap: 0.1rem;
+}
+.cpu-footer img {
+	width: 100%;
+	max-width: 1.48rem;
+	display: block;
+}
+.cpu-footer-desc {
+	font-size: 0.16rem;
+	color: #cbcfd8;
+	text-align: center;
+	margin-top: 0.38rem;
+	margin-bottom: 0.51rem;
+	width: 100%;
+}

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

@@ -0,0 +1,59 @@
+.endurance {
+	position: relative;
+	width: 100%;
+	margin-top: 1.78rem;
+	aspect-ratio: 750/778;
+}
+.endurance-texts {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	position: absolute;
+	top: -0.4rem;
+}
+.endurance-t {
+	width: 100%;
+	font-size: 0.5rem;
+	color: #fff;
+	text-align: center;
+}
+.endurance-t span:nth-child(1) {
+	font-size: 0.4rem;
+	line-height: 1;
+}
+.endurance-t span:nth-child(2) {
+	font-size: 0.36rem;
+	margin-left: 0.11rem;
+	line-height: 1;
+}
+.endurance-p {
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	text-align: center;
+	padding-top: 0.37rem;
+	font-family: 'HarmonyOS-Light';
+}
+.endurance-img {
+	width: 100%;
+
+	position: absolute;
+	bottom: 0.62rem;
+	display: flex;
+	justify-content: center;
+	gap: 0.2rem;
+}
+.endurance-img img {
+	width: 2.46rem;
+	display: block;
+}
+.endurance-footer-p {
+	color: #ffffff;
+	font-size: 0.18rem;
+	position: absolute;
+	bottom: 0;
+	text-align: center;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 100%;
+}

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

@@ -0,0 +1,43 @@
+.footer-imgs {
+	width: 6.8rem;
+	margin: 0 auto;
+	margin-top: 1.5rem;
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+.footer-imgs img {
+	width: 2.22rem;
+}
+.footer-imgs img:nth-child(4),
+.footer-imgs img:nth-child(5),
+.footer-imgs img:nth-child(6) {
+	margin-top: 0.09rem;
+}
+
+.footer-texts {
+	width: 6.8rem;
+	margin: 0 auto;
+	font-size: 0.16rem;
+	color: #cbcfd8;
+	white-space: normal;
+	margin-top: 1.5rem;
+}
+.footer-texts p {
+	text-indent: clamp(-16px, -1vw, -0.22rem);
+	line-height: 1.5;
+	margin-bottom: 0.1rem;
+	font-family: 'HarmonyOS-Light';
+	letter-spacing: 1px;
+}
+.footer-texts-en {
+	width: 6.8rem;
+	margin: 0 auto;
+	font-size: 0.16rem;
+	color: #cbcfd8;
+	white-space: normal;
+}
+.footer-texts-en p {
+	text-indent: clamp(-16px, -1vw, -0.22rem);
+	font-family: 'HarmonyOS-Light';
+}

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

@@ -0,0 +1,69 @@
+.fs {
+	width: 100%;
+}
+.fs-box {
+	width: 100%;
+	aspect-ratio: 16/9; /* 2560/1440=16/9，核心比例约束 */
+	position: relative;
+	will-change: contents; /* 告诉浏览器该元素即将变化，提前优化 */
+	contain: layout paint; /* 限制重排重绘范围 */
+}
+.fs-img,
+.fs-video {
+	backface-visibility: hidden; /* 开启硬件加速 */
+	transform: translateZ(0); /* 硬件加速 */
+}
+.fs-box img {
+	width: 100%;
+}
+.fs-box-img {
+	display: flex;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.fs-h-img {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	gap: 0.13rem;
+}
+.fs-h-img img {
+	width: 3.35rem;
+}
+.fs-b-img {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	margin-top: 0.13rem;
+}
+.fs-b-img img {
+	width: 6.81rem;
+}
+.fs-ts {
+	font-size: 0.18rem;
+	text-align: center;
+	color: #cbcfd8;
+	padding: 0.4rem 0;
+}
+.dl {
+	width: 100%;
+	padding-top: 1.01rem;
+}
+.dl-t {
+	color: #fff;
+	font-size: 0.36rem;
+	width: 100%;
+	text-align: center;
+	line-height: 1.5;
+}
+.dl-p {
+	color: #cbcfd8;
+	font-size: 0.18rem;
+	width: 100%;
+	text-align: center;
+	padding-top: 0.37rem;
+	/* padding-bottom: 0.37rem; */
+	line-height: 1.5;
+	font-family: 'HarmonyOS-Light';
+}

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

@@ -0,0 +1,44 @@
+.gpu {
+	width: 100%;
+	position: relative;
+	box-sizing: border-box;
+}
+.gpu-texts {
+	color: #fff;
+	font-size: 0.36rem;
+	margin: 0 0.34rem;
+}
+.gpu-texts-t {
+	line-height: 1.5;
+}
+
+.gpu-texts-p {
+	font-size: 0.16rem;
+	color: #cbcfd8;
+	line-height: 1.5;
+	margin-top: 0.32rem;
+}
+.gpu-main-img {
+	width: 100%;
+	aspect-ratio: 750/780;
+}
+.gpu-amd-img {
+	width: 100%;
+}
+.gpu-amd-img img {
+	max-width: 2.26rem;
+	width: 100%;
+	margin-top: 2.39rem;
+	margin-left: 0.45rem;
+}
+.gpu-footer-imgs {
+	display: flex;
+	position: absolute;
+	bottom: 0.61rem;
+	gap: 0.1rem;
+	left: 50%;
+	transform: translateX(-50%);
+}
+.gpu-footer-imgs img {
+	max-width: 1.63rem;
+}

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

@@ -0,0 +1,13 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+html {
+	width: 100% !important;
+	overflow-x: hidden;
+}
+body {
+	width: 100%;
+	background: #000;
+	overflow-x: hidden;
+}

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

@@ -0,0 +1,43 @@
+.ips {
+	position: relative;
+}
+.ips-t {
+	font-size: 0.36rem;
+	color: #fff;
+	line-height: 1.5;
+	margin-top: 1.5rem;
+	margin-left: 0.38rem;
+	margin-right: 0.38rem;
+	margin-bottom: 0.46rem;
+}
+.ips-bg {
+	aspect-ratio: 750/678;
+	position: relative;
+}
+.ips-bg p {
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	line-height: 1.5;
+	margin-left: 0.38rem;
+	margin-right: 0.38rem;
+	position: absolute;
+	top: -0.3rem;
+}
+.ips-imgs {
+	width: 6.8rem;
+	flex-wrap: wrap;
+	gap: 0.1rem;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: -3rem;
+	display: flex;
+}
+.ips-imgs img {
+	width: 3.35rem;
+	display: block;
+}
+.ips-imgs img:nth-child(3),
+.ips-imgs img:nth-child(4) {
+	margin-top: 0.1rem;
+}

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

@@ -0,0 +1,29 @@
+.m2 {
+	width: 100%;
+	margin-top: 1.09rem;
+}
+.m2-bg {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 750/846;
+}
+
+.m2-bg-t1 {
+	font-size: 0.36rem;
+	color: #fff;
+	width: 100%;
+	text-align: center;
+	line-height: 1.5;
+	padding-top: 1.3rem;
+}
+.m2-img-box {
+	position: absolute;
+	bottom: 0.66rem;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	gap: 0.11rem;
+}
+.m2-img-box img {
+	width: 2.22rem;
+}

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

@@ -0,0 +1,34 @@
+.memory {
+	width: 100%;
+}
+.memory-t {
+	font-size: 0.36rem;
+	color: #fff;
+	width: 100%;
+	text-align: center;
+	padding-bottom: 0.37rem;
+	line-height: 1.5;
+}
+.memory-img {
+	width: 100%;
+	aspect-ratio: 750/727;
+	position: relative;
+}
+.memory-p {
+	width: 100%;
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	text-align: center;
+	line-height: 1.5;
+}
+.memory-footer-img {
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: -0.74rem;
+}
+
+.memory-footer-img img {
+	width: 6.83rem;
+	display: block;
+}

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

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

@@ -0,0 +1,25 @@
+/* .qb {
+    position: absolute;
+    top:3rem;
+    left: 50%;
+    transform: translateX(-50%);
+} */
+.qb-t {
+	width: 100%;
+	font-size: 0.36rem;
+	color: #fff;
+	text-align: center;
+	padding-top: 1.5rem;
+}
+.qb-p {
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	text-align: center;
+	padding-top: 0.37rem;
+	padding-bottom: 0.34rem;
+	font-family: 'HarmonyOS-Light';
+	line-height: 1.5;
+}
+.qb-bg-img1 {
+	width: 6.9rem;
+}

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

@@ -0,0 +1,28 @@
+.rgb-t {
+	font-size: 0.36rem;
+	color: #fff;
+	width: 100%;
+	text-align: center;
+	margin-top: 4.84rem;
+	margin-bottom: 0.37rem;
+	line-height: 1.5;
+}
+.rgb-bg {
+	aspect-ratio: 750/582;
+}
+.rgb-p {
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	line-height: 1.5;
+	text-align: center;
+}
+.rgb-imgs {
+	display: flex;
+	gap: 0.1rem;
+	margin-top: 0.28rem;
+	justify-content: center;
+}
+.rgb-imgs img {
+	width: 2.17rem;
+	display: block;
+}

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

@@ -0,0 +1,85 @@
+/* 轮播容器 - 核心：基于视口高度自适应 */
+.auto-swiper-container {
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+
+/* 轮播项 - 填充容器高度 */
+.auto-swiper-slide {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 图片自适应核心：填充屏幕比例高度，保持比例 */
+.auto-swiper-slide img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover; /* 优先填充容器，裁剪超出部分（无拉伸） */
+	/* object-fit: contain; 可选：完整显示图片，不裁剪（可能留黑边） */
+	display: block;
+}
+.swiper-container-texts {
+	position: absolute;
+	left: 50%;
+	top: 0.91rem;
+	transform: translateX(-50%);
+	z-index: 10;
+	width: 100%;
+}
+
+.swiper-container-texts-t {
+	font-size: 0.48rem;
+	text-align: center;
+	width: 100%;
+	line-height: 1;
+}
+.swiper-container-texts-p {
+	padding-top: 0.68rem;
+	font-size: 0.16rem;
+	/* text-align: center; */
+	width: 100%;
+	display: flex;
+	align-items: center;
+	letter-spacing: 1.3px;
+	justify-content: center;
+}
+.swiper-container-texts-p div {
+	font-family: 'HarmonyOS-Light';
+}
+.swiper-container-texts-line {
+	width: 1px;
+	height: 0.16rem;
+	background: #fff;
+	margin: 0 12px;
+}
+.swiper-container-texts-img {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	padding-top: 0.63rem;
+	cursor: pointer;
+}
+.swiper-container-texts-img a {
+	width: 100%;
+	max-width: 1.18rem;
+}
+.swiper-container-texts-img img {
+	width: 100%;
+	max-width: 1.18rem;
+}
+.swiper-slide-t {
+	font-size: 0.2rem;
+	text-align: center;
+	color: #fff;
+}
+.swiper-slide-p {
+	font-size: 0.16rem;
+	color: #cbcfd8;
+	text-align: center;
+	margin-top: 0.18rem;
+}

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

@@ -0,0 +1,105 @@
+.tabs-container {
+	width: 6.03rem;
+	margin: 0 auto;
+}
+.tabs-header-box {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	margin-top: 0.48rem;
+}
+.tabs-header {
+	display: inline-flex;
+	/* 改为inline-flex，宽度由子元素决定 */
+	position: relative;
+	border-bottom: 1px solid #cbcfd8;
+	margin: 0 auto;
+	width: 1.75rem;
+	display: flex;
+}
+
+.tab-item {
+	/* padding: 12px 24px; */
+	font-size: 0.18rem;
+	cursor: pointer;
+	transition: color 0.2s ease;
+	white-space: nowrap;
+	color: #cbcfd8;
+	flex: 1;
+	text-align: center;
+}
+
+.tab-item {
+	margin-bottom: 0.08rem;
+}
+
+.tab-indicator {
+	position: absolute;
+	bottom: 0;
+	height: 2px;
+	background-color: #fff;
+	transform: translateX(0);
+	width: 0.87rem;
+	transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
+		width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+	will-change: transform, width;
+	backface-visibility: hidden;
+	perspective: 1000px;
+}
+
+.tab-content {
+	width: 6.03rem;
+	width: 6.03rem;
+	/* min-width: 1280px; */
+	margin: 0 auto;
+}
+
+.content-video {
+	max-width: 100%;
+	height: auto;
+	border-radius: 8px;
+}
+.tabs-p {
+	width: 100%;
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	text-align: center;
+	margin-top: 0.48rem;
+	display: none;
+}
+.tabs-p.active {
+	display: block;
+}
+.tab-panel {
+	display: none;
+}
+.tab-panel-img {
+	background: #1c1c1e;
+	width: 5.77rem;
+	overflow: hidden;
+	display: flex;
+	justify-content: flex-end;
+	border-radius: 0.16rem;
+}
+.tab-panel-img img {
+	width: 5.77rem;
+}
+.tab-panel.active {
+	display: block;
+}
+.tab-t {
+	font-size: 0.36rem;
+	color: #cbcfd8;
+	width: 100%;
+	text-align: center;
+	margin-top: 1.5rem;
+	margin-bottom: 0.7rem;
+	display: none;
+}
+.tab-t.active {
+	display: block;
+}
+/* .tab-ts {
+    margin-top: 2.97rem;
+	margin-bottom: 1rem;
+} */

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

@@ -0,0 +1,37 @@
+.wifi {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 750/595;
+	margin-top: 3.45rem;
+}
+.wifi-texts {
+	position: absolute;
+	top: -2.3rem;
+	left: 0.42rem;
+	width: 100%;
+}
+.wifi-t {
+	width: 100%;
+	font-size: 0.36rem;
+	color: #fff;
+	line-height: 1.5;
+}
+.wifi-p {
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	padding-top: 0.37rem;
+	line-height: 1.4;
+	font-family: 'HarmonyOS-Light';
+}
+.wifi-img {
+	width: 100%;
+	position: absolute;
+	bottom: -0.22rem;
+	display: flex;
+	justify-content: center;
+	gap: 0.1rem;
+}
+.wifi-img img {
+	width: 3.35rem;
+	display: block;
+}

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

@@ -0,0 +1,9 @@
+.window {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	margin-top: 1.5rem;
+}
+.window img {
+	width: 6.8rem;
+}

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

@@ -0,0 +1,52 @@
+.xn-container {
+	width: 6.8rem;
+	margin: 0 auto;
+	box-sizing: border-box;
+}
+
+/* 图片容器样式（核心） */
+.xn-image-section {
+	overflow: hidden;
+	border-radius: 0.16rem;
+	background: #0d0c10;
+	border: 1px solid #3f3f45;
+	width: 6.8rem;
+}
+
+.zoom-image {
+	width: 100%;
+	height: auto;
+	display: block;
+	/* 调整transform过渡时间为2s，opacity为1.5s，可按需修改 */
+	transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s ease;
+	transform: scale(0.8);
+	/* 初始缩放比例 */
+	opacity: 0.9;
+	/* 初始透明度（略暗，放大后变亮） */
+}
+
+/* 滚动触发后的放大状态 */
+.zoom-image.active {
+	transform: scale(1.1);
+	/* 放大5%（官网常用比例，不夸张） */
+	opacity: 1;
+}
+.xn-t {
+	font-size: 0.36rem;
+	color: #fff;
+	text-align: center;
+	margin-top: 1.5rem;
+	margin-bottom: 0.6rem;
+}
+.xn-p {
+	width: 6.8rem;
+	padding-top: 0.6rem;
+	padding-left: 0.11rem;
+	font-size: 0.16rem;
+	margin: 0 auto;
+}
+.xn-p p {
+	color: #cbcfd8;
+	text-align: left;
+	line-height: 1.5;
+}

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

@@ -0,0 +1,123 @@
+/* 图片容器：100vw宽，最小宽度1440px，按图片原始比例（2560:1857）定高 */
+.zoom-container {
+	width: 7.5rem;
+	height: 6.05rem;
+	position: relative;
+}
+
+/* 图片包裹层：与容器同尺寸，定位参考系，承接缩放变换 */
+.img-wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	/* z-index: -10; */
+}
+
+/* 图片：按原始比例填充包裹层，不裁切，初始放大+过渡动画 */
+.bg-img {
+	width: 7.5rem;
+	height: 6.05rem;
+	display: block;
+	transform: scale(1.5);
+	transition: transform 1.8s ease;
+	transform-origin: center center;
+}
+
+/* 图片缩小后的状态 */
+.bg-img.zoom-out {
+	transform: scale(1);
+}
+
+/* 标注样式：关键修正 - 基于容器绝对定位，百分比参考图片原始比例 */
+.annotation {
+	position: absolute;
+	color: #48494d;
+	font-size: calc(12px + 0.3vw);
+	opacity: 0;
+	transform: translateY(calc(10px + 0.5vw));
+	transition: opacity 0.8s ease, transform 0.8s ease;
+	pointer-events: none;
+	z-index: 10;
+	white-space: nowrap;
+	/* 关键：标注的定位参考系是容器（与图片同比例），而非缩放后的图片 */
+	top: 0;
+	left: 0;
+	/* 重置默认值，依赖内联style的百分比定位 */
+}
+
+/* 标注显示状态 */
+.annotation.anno-show {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.annotation span {
+	position: relative;
+	display: inline-block;
+	/* 确保文字居中对齐 */
+	text-align: center;
+}
+
+/* 标注线条样式：基于文字定位，适配缩放 */
+.annotation span::before {
+	content: '';
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 0.01rem;
+	height: 0;
+	bottom: calc(100% + 6px);
+	background-color: #48494d;
+	transition: height 0.8s ease;
+	transform-origin: bottom center;
+}
+/* 向上延伸的标注线条（给需要向上的.annotation加anno-up类） */
+.annotation.anno-up span::before {
+	/* 把线条位置从文字下方，改成文字上方 */
+	bottom: auto;
+	top: 0.3rem; /* 定位到文字顶部外 */
+	/* 线条方向改为向上延伸 */
+	transform-origin: top center;
+}
+.annotation.anno-up1 span::before {
+	/* 把线条位置从文字下方，改成文字上方 */
+	bottom: auto;
+	top: 0.5rem; /* 定位到文字顶部外 */
+	/* 线条方向改为向上延伸 */
+	transform-origin: top center;
+}
+/* 标注显示时，设置线条最终高度 */
+.annotation.anno-show span::before {
+	height: 0.57rem;
+	/* 最终高度（vw单位） */
+}
+
+.zoom-t {
+	width: 100%;
+	text-align: center;
+	font-size: 0.36rem;
+	color: #fff;
+	padding-top: 1.5rem;
+}
+.zoom-p {
+	width: 100%;
+	text-align: center;
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	position: absolute;
+	top: 0.37rem;
+	z-index: 10;
+	line-height: 1.5;
+	font-family: 'HarmonyOS-Light';
+}
+
+/* 标注延迟类 */
+.anno-delay-1 {
+	transition-delay: 0.8s;
+}
+.anno-delay-1 span::before {
+	transition-delay: 0.8s;
+}