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