Merge pull request 'Migrate Renovate config' (#3) from renovate/migrate-config into master
Reviewed-on: #3 ··[CST 2026-02-23 Monday 08:41:34]
This commit is contained in:
138
css/swiper.css
Normal file
138
css/swiper.css
Normal file
@@ -0,0 +1,138 @@
|
||||
/* 1. 强制清空外层容器的背景、边框和阴影 */
|
||||
#swiperBox,
|
||||
#swiper_container,
|
||||
.blog-slider,
|
||||
.swiper-container {
|
||||
padding: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* 2. 强力锁定比例,防止 JS 动态修改高度 */
|
||||
div#swiper_container {
|
||||
width: 100% !important;
|
||||
|
||||
/* 使用 vw 单位根据屏幕宽度动态计算高度 */
|
||||
/* 16:9 比例下,高度 = 宽度 * 56.25% */
|
||||
height: 56.25vw !important;
|
||||
|
||||
/* 设定最大高度,防止在 PC 端显得过大(可根据需求调整,比如 400px) */
|
||||
max-height: 450px !important;
|
||||
|
||||
/* 设定最小高度,防止在极小屏幕下太扁 */
|
||||
min-height: 180px !important;
|
||||
|
||||
aspect-ratio: 16 / 9 !important;
|
||||
display: block !important;
|
||||
border-radius: 12px;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* 强制内部所有幻灯片跟随父容器高度 */
|
||||
.swiper-wrapper, .swiper-slide, .blog-slider__item {
|
||||
height: 100% !important;
|
||||
}
|
||||
/* 3. 彻底隐藏分页圆点或橙色元素 */
|
||||
.blog-slider__pagination, .swiper-pagination {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.blog-slider__pagination .swiper-pagination-bullet,
|
||||
.swiper-pagination-bullet,
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* 4. 图片填充修复:确保铺满不留白 */
|
||||
.blog-slider__item {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 5. 打包内容块并整体居中 */
|
||||
.blog-slider__content {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 核心:将内容容器设为居中参考点 */
|
||||
.blog-slider__content .blog-slider__item_content_wrapper, /* 尝试抓取可能的内层包裹 */
|
||||
.blog-slider__content > div:first-child, /* 备选抓取 */
|
||||
.blog-slider__content {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* 针对标题和描述的统一样式 */
|
||||
.blog-slider__title,
|
||||
.blog-slider__text {
|
||||
position: relative !important; /* 放弃绝对定位,回归正常流,防止重叠 */
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
transform: none !important;
|
||||
width: 85% !important;
|
||||
text-align: center !important;
|
||||
margin: 5px auto !important; /* 自动上下留白 */
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
a.blog-slider__title {
|
||||
font-size: 1.4rem !important;
|
||||
font-weight: bold !important;
|
||||
line-height: 1.3 !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.blog-slider__text {
|
||||
font-size: 0.9rem !important;
|
||||
opacity: 0.9;
|
||||
/* 限制描述文字行数,防止在16:9中撑破容器 */
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 针对手机端的极小屏幕适配 */
|
||||
@media screen and (max-width: 768px) {
|
||||
a.blog-slider__title {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
.blog-slider__text {
|
||||
font-size: 0.8rem !important;
|
||||
-webkit-line-clamp: 1; /* 手机端只留一行描述,防止空间拥挤 */
|
||||
}
|
||||
}
|
||||
/* 6. 移动端微调:防止文字过大或间距过宽 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__content {
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
a.blog-slider__title {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 7. 左右箭头样式:白色且无背景 */
|
||||
.swiper-button-next::after, .swiper-button-prev::after {
|
||||
font-size: 1.2rem !important;
|
||||
color: #fff !important;
|
||||
background: none !important;
|
||||
}
|
||||
Reference in New Issue
Block a user