liqian
991ca5b61c
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
130 lines
2.3 KiB
CSS
130 lines
2.3 KiB
CSS
.tabs-container {
|
||
width: 100%;
|
||
/* color: #fff;
|
||
width: 1440px;
|
||
max-width: 1440px;
|
||
min-width: 1280px;
|
||
margin: 0 auto; */
|
||
margin-bottom: 2.98rem;
|
||
}
|
||
.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: 14.4rem;
|
||
max-width: 14.4rem;
|
||
/* 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:0.7rem;
|
||
display: none;
|
||
}
|
||
.tabs-p.active {
|
||
display: block;
|
||
}
|
||
.tab-panel {
|
||
display: none;
|
||
}
|
||
.tab-panel-img {
|
||
background:#1c1c1e ;
|
||
width: 100%;
|
||
max-width: 14.4rem;
|
||
max-height: 7rem;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-top: 0.7rem;
|
||
border-radius: 0.16rem;
|
||
}
|
||
.tab-panel-img img {
|
||
width: 100%;
|
||
|
||
max-width: 13.7rem;
|
||
height: 100%;
|
||
}
|
||
.tab-panel.active {
|
||
display: block;
|
||
}
|
||
.tab-t {
|
||
font-size: 0.63rem;
|
||
color: #cbcfd8;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 3rem;
|
||
margin-bottom: 0.7rem;
|
||
display: none;
|
||
}
|
||
.tab-t.active {
|
||
display: block;
|
||
}
|
||
/* .tab-ts {
|
||
margin-top: 2.97rem;
|
||
margin-bottom: 1rem;
|
||
} */ |