笔记本

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

@@ -0,0 +1,53 @@
+/* 页面容器（模拟官网宽屏布局） */
+.xn-container {
+	min-width: 1280px;
+	max-width: 1440px;
+	width: 100%;
+	margin: 0 auto;
+}
+
+/* 图片容器样式（核心） */
+.xn-image-section {
+	overflow: hidden;
+	border-radius: 16px;
+	/* 官网图片圆角风格 */
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+	max-width: 1440px;
+	min-width: 1280px;
+	margin: 0 auto;
+}
+
+.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.67rem;
+	color: #cbcfd8;
+	text-align: center;
+	margin-top: 4.7rem;
+	margin-bottom: 1.26rem;
+}
+.xn-p {
+	padding-top: 0.6rem;
+}
+.xn-p p {
+	font-size: clamp(16px, 1vw, 0.22rem);
+	color: #fff;
+	text-align: center;
+	line-height: 2.4;
+}