liqian
48e3d7f846
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
106 lines
1.8 KiB
CSS
106 lines
1.8 KiB
CSS
.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;
|
||
} */
|