Jelajahi Sumber

fix: set explicit banner height and remove gaps

- Set #swiper height to 500px (fixed height)
- Add height: 100% to .swiper-slide
- Set img to width: 100%, height: 100%, object-fit: cover
- Add margin: 0 and padding: 0 to #header
- Ensure no spacing between header and banner

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Ryuiso 3 minggu lalu
induk
melakukan
2c9bc4e603
2 mengubah file dengan 12 tambahan dan 1 penghapusan
  1. 2 0
      src/components/Header.vue
  2. 10 1
      src/view/HomePage.vue

+ 2 - 0
src/components/Header.vue

@@ -154,6 +154,8 @@ export default {
   background: #f4f4f4;
   transition: all ease 0.6s;
   box-shadow: none;
+  margin: 0;
+  padding: 0;
 }
 
 #header .header-top {

+ 10 - 1
src/view/HomePage.vue

@@ -185,6 +185,8 @@ export default {
 
 /* 轮播图 */
 #swiper {
+  width: 100%;
+  height: 500px;
   margin: 0;
   padding: 0;
 }
@@ -196,8 +198,15 @@ export default {
   padding: 0;
 }
 
+#swiper .banner-swiper .swiper-slide {
+  width: 100%;
+  height: 100%;
+}
+
 #swiper .banner-swiper .swiper-slide img {
-  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   background-size: cover;
 }