liqian
991ca5b61c
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
75 lines
1.6 KiB
CSS
75 lines
1.6 KiB
CSS
/* 轮播容器 - 核心：基于视口高度自适应 */
|
||
.auto-swiper-container {
|
||
width: 100%;
|
||
/* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */
|
||
/* height: 60vh; */
|
||
/* max-height: 800px;
|
||
min-height: 300px; */
|
||
overflow: hidden;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 轮播项 - 填充容器高度 */
|
||
.auto-swiper-slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 图片自适应核心：填充屏幕比例高度，保持比例 */
|
||
.auto-swiper-slide img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; /* 优先填充容器，裁剪超出部分（无拉伸） */
|
||
/* object-fit: contain; 可选：完整显示图片，不裁剪（可能留黑边） */
|
||
display: block;
|
||
}
|
||
.swiper-container-texts {
|
||
position: absolute;
|
||
left: 50%;
|
||
top:2.3rem;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
}
|
||
|
||
.swiper-container-texts-t {
|
||
font-size: 0.9rem;
|
||
text-align: center;
|
||
width: 100%;
|
||
line-height: 1;
|
||
}
|
||
.swiper-container-texts-p {
|
||
padding-top: 0.43rem;
|
||
font-size: 0.28rem;
|
||
text-align: center;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
letter-spacing: 1.3px;
|
||
|
||
}
|
||
.swiper-container-texts-p div {
|
||
font-family: "HarmonyOS-Light";
|
||
}
|
||
.swiper-container-texts-line {
|
||
width: 1px;
|
||
height: 0.16rem;
|
||
background: #fff;
|
||
margin: 0 12px;
|
||
}
|
||
.swiper-container-texts-img {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 0.63rem;
|
||
cursor: pointer;
|
||
}
|
||
.swiper-container-texts-img a {
|
||
width: 1.82rem;
|
||
}
|
||
.swiper-container-texts-img img {
|
||
width: 1.82rem;
|
||
} |