1

css/index.css

@@ -1,61 +1,37 @@
 /* banner */
-.banner {
+.banner-cont {
   position: relative;
-  background: #f7f9fa;
+  width: 100%;
   overflow: hidden;
 }
 
-/* 轮播图作为背景层，图片负责铺满顶部区域 */
+.banner-cont .swiper-slide {
-.banner-bg {
+  width: 100%;
+  background: linear-gradient(0, #f7f9fa, #f9fafb);
+}
+
+.banner-cont .swiper-slide .img {
+  /* 图片撑开高度，避免被裁切 */
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+
+/* 文案层：覆盖在轮播上，使用 section-content 控制左右宽度 */
+.banner-cont .banner-text {
   position: absolute;
-  top: 0;
   left: 0;
-  width: 100%;
+  top: 0;
-  height: 420px;
-  overflow: hidden;
-}
-
-.banner-bg .banner-cont,
-.banner-bg .banner-cont .swiper-wrapper,
-.banner-bg .banner-cont .swiper-slide {
-  height: 100%;
-}
-
-.banner-bg .banner-cont .swiper-slide {
-  background: transparent;
-}
-
-.banner-bg .banner-cont .swiper-slide .img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
-}
-
-.banner-bg .banner-cont .swiper-pagination {
-  bottom: 24px;
-}
-
-.banner-bg .banner-cont .swiper-pagination-bullet {
-  width: 36px;
-  height: 4px;
-  background: #D7DCE4;
-  opacity: 1;
-  border-radius: 3px;
-}
-
-.banner-bg .banner-cont .swiper-pagination-bullet-active {
-  background: rgba(255, 103, 57, 1);
-}
-
-/* 文案 + 下方模块共用一个 section-content 容器，天然同宽 */
-.banner-main {
-  position: relative;
-  z-index: 1;
   display: flex;
-  flex-direction: column;
+  align-items: flex-start; /* 文案从上方开始 */
-  justify-content: space-between; /* 文案在上，banner-s 靠容器底部 */
+  pointer-events: none;
-  min-height: 420px;              /* 与 .banner-bg 高度保持一致 */
+}
-  padding-top: 80px;              /* 文案距离顶部的内边距 */
+
+.banner-cont .banner-text .section-content {
+  padding-top: 80px; /* 文案距顶部 */
   padding-bottom: 0;
 }
 
@@ -82,12 +58,6 @@
   pointer-events: auto;
 }
 
-/* banner 区域内的 section-content 不需要额外的上下 padding，由 .banner-main 控制 */
-.banner .section-content {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
 .banner .banner-s {
   box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
   border-radius: 3px;

index.html

@@ -13,17 +13,13 @@
 
   <!-- banner -->
   <section class="section banner">
-    <!-- 背景轮播图，只负责展示图片 -->
-    <div class="banner-bg">
     <div class="swiper banner-cont">
       <div class="swiper-wrapper" id="bannerWrapper"></div>
+      <!-- 如果需要分页器 -->
       <div class="swiper-pagination"></div>
-      </div>
+      <!-- 固定文案区域，使用第一张轮播图的标题/描述/按钮 -->
-    </div>
+      <div class="banner-text">
-
-    <!-- 内容区域，和下方模块共用同一个 section-content 容器 -->
         <div class="section-content">
-      <div class="banner-main">
           <div class="banner-copy">
             <h1 id="bannerTitle"></h1>
             <p class="banner-desc" id="bannerDesc"></p>
@@ -34,9 +30,12 @@
               style="display: none;"
             ></a>
           </div>
-
+        </div>
+      </div>
+    </div>
+    </div>
     <div class="banner-s">
-          <div class="banner-list">
+      <div class="section-content banner-list">
         <div class="banner-item" id="cloud-box">
           <h5>云服务器专场</h5>
           <p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
@@ -58,8 +57,7 @@
           <span class="banner-tag">价值2000元</span>
         </div>
       </div>
-        </div>
+
-      </div>
     </div>
   </section>