笔记本

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

@@ -0,0 +1,106 @@
+.tabs-container {
+	width: 100%;
+	/* color: #fff;
+	width: 1440px;
+	max-width: 1440px;
+	min-width: 1280px;
+	margin: 0 auto; */
+	margin-bottom: 4rem;
+}
+.tabs-header-box {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	margin-top: 1rem;
+}
+.tabs-header {
+	display: inline-flex;
+	/* 改为inline-flex，宽度由子元素决定 */
+	position: relative;
+	border-bottom: 1px solid #cbcfd8;
+	margin: 0 auto;
+	width: 2.33rem;
+	display: flex;
+}
+
+.tab-item {
+	/* padding: 12px 24px; */
+	font-size: clamp(16px, 1vw, 0.22rem);
+	cursor: pointer;
+	transition: color 0.2s ease;
+	white-space: nowrap;
+	color: #cbcfd8;
+	flex: 1;
+	text-align: center;
+}
+
+.tab-item:nth-child(1) {
+	margin-bottom: 24px;
+}
+
+.tab-item:nth-child(2) {
+	margin-bottom: 24px;
+}
+
+.tab-indicator {
+	position: absolute;
+	bottom: 0;
+	height: 2px;
+	background-color: #fff;
+	transform: translateX(0);
+	width: 80px;
+	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: 1440px;
+	max-width: 1440px;
+	min-width: 1280px;
+	margin: 0 auto;
+}
+
+/* 新增样式 */
+.content-image {
+	max-width: 100%;
+	height: auto;
+	border-radius: 8px;
+}
+.content-image img {
+	max-width: 14.4rem;
+}
+
+.content-video {
+	max-width: 100%;
+	height: auto;
+	border-radius: 8px;
+}
+.tabs-p {
+	width: 100%;
+	font-size: clamp(16px, 1vw, 0.22rem);
+	color: #cbcfd8;
+	text-align: center;
+	margin-top: 1rem;
+    display: none;
+}
+.tabs-p.active {
+	display: block;
+}
+.tab-panel {
+	display: none;
+}
+
+.tab-panel.active {
+	display: block;
+}
+.tab-t {
+	font-size: 0.63rem;
+	color: #cbcfd8;
+	width: 100%;
+	text-align: center;
+	margin-top: 3.97rem;
+	margin-bottom: 0.6rem;
+}