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