fix swiper css

themes/butterfly/source/css/swiper.css

@@ -1,30 +1,46 @@
-/* 1. 强制清空外层所有可能的背景、边框和阴影 */
+/* 1. 强制清空外层容器的背景、边框和阴影 */
 #swiperBox, 
 #swiper_container, 
 .blog-slider,
 .swiper-container {
     padding: 0 !important;
     margin: 0 auto !important;
-    background: none !important; /* 彻底删掉白色底色 */
+    background: none !important;
     border: none !important;
     box-shadow: none !important;
     width: 100% !important;
     overflow: hidden !important;
 }
 
-/* 2. 针对容器下方的白边进行“零间距”处理 */
+/* 2. 强力锁定比例，防止 JS 动态修改高度 */
-div#swiperBox {
-    margin-bottom: 20px !important; /* 只保留外部下边距，内部不留白 */
-}
-
 div#swiper_container {
-    height: 250px !important;
+    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; 
 }
 
-/* 3. 彻底隐藏那个奇怪的橙色方块 */
-/* 那个方块通常是 swiper-pagination-bullet-active 或导航按钮的背景 */
 .blog-slider__pagination .swiper-pagination-bullet,
 .swiper-pagination-bullet,
 .swiper-button-next,
@@ -32,12 +48,7 @@ div#swiper_container {
     outline: none !important;
 }
 
-/* 如果你不需要底部的圆点，直接用下面这行彻底删掉它 */
+/* 4. 图片填充修复：确保铺满不留白 */
-.blog-slider__pagination, .swiper-pagination {
-    display: none !important; 
-}
-
-/* 4. 修复图片和内容的覆盖，确保不露底色 */
 .blog-slider__item {
     width: 100% !important;
     height: 100% !important;
@@ -47,28 +58,81 @@ div#swiper_container {
     padding: 0 !important;
 }
 
-/* 5. 修正文字布局，防止重叠 */
+/* 5. 打包内容块并整体居中 */
 .blog-slider__content {
-    background: rgba(0, 0, 0, 0.45); /* 黑色半透明遮罩 */
+    background: rgba(0, 0, 0, 0.45) !important;
     width: 100% !important;
     height: 100% !important;
-    padding: 0 40px !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;
+    flex-direction: column !important;
-    justify-content: center;
+    justify-content: center !important;
-    align-items: center;
+    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.5rem !important;
+    font-size: 1.4rem !important;
-    color: #fff !important;
+    font-weight: bold !important;
-    margin: 5px 0 !important;
+    line-height: 1.3 !important;
-    display: block !important;
+    text-decoration: none !important;
 }
 
-/* 6. 解决左右箭头样式异常 */
+.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; /* 彻底去掉背景色 */
+    background: none !important;
 }