/* 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; }