笔记本移动端

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