From 5d15e2f48c9fe70f1613cbd4ce234386c11f70b9 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Fri, 21 Nov 2025 19:31:49 +0800
Subject: [PATCH] 1

---
 css/index.css | 78 ++++++++++++++--------------------------------
 index.html    | 86 +++++++++++++++++++++++++--------------------------
 2 files changed, 66 insertions(+), 98 deletions(-)

diff --git a/css/index.css b/css/index.css
index 7716b4c..49ebd49 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,61 +1,37 @@
 /* banner */
-.banner {
+.banner-cont {
   position: relative;
-  background: #f7f9fa;
+  width: 100%;
   overflow: hidden;
 }
 
-/* 轮播图作为背景层，图片负责铺满顶部区域 */
-.banner-bg {
+.banner-cont .swiper-slide {
+  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%;
-  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 {
+  top: 0;
   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;
-  justify-content: space-between; /* 文案在上，banner-s 靠容器底部 */
-  min-height: 420px;              /* 与 .banner-bg 高度保持一致 */
-  padding-top: 80px;              /* 文案距离顶部的内边距 */
+  align-items: flex-start; /* 文案从上方开始 */
+  pointer-events: none;
+}
+
+.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;
diff --git a/index.html b/index.html
index 32cfce7..6e25044 100644
--- a/index.html
+++ b/index.html
@@ -13,54 +13,52 @@
 
   <!-- 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>
-
-    <!-- 内容区域，和下方模块共用同一个 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>
-          <a
-            class="btn btn2 btn-normal"
-            href="javascript:;"
-            id="bannerButton"
-            style="display: none;"
-          ></a>
-        </div>
-
-        <div class="banner-s">
-          <div class="banner-list">
-            <div class="banner-item" id="cloud-box">
-              <h5>云服务器专场</h5>
-              <p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
-              <span class="banner-tag">4核8G仅需228元</span>
-            </div>
-            <div class="banner-item" id="domain-box">
-              <h5>域名注册</h5>
-              <p class="title-desc mt-10 mb-10">优选主流域名注册服务</p>
-              <span class="banner-tag">.top 88元起</span>
-            </div>
-            <div class="banner-item" id="cps-box">
-              <h5>CPS推广</h5>
-              <p class="title-desc mt-10 mb-10">多种产品高达30%高额佣金</p>
-              <span class="banner-tag">最高可返佣金5W</span>
-            </div>
-            <div class="banner-item" id="logon-box">
-              <h5>注册有礼</h5>
-              <p class="title-desc mt-10 mb-10">免费注册领取专属礼包</p>
-              <span class="banner-tag">价值2000元</span>
-            </div>
+    <div class="swiper banner-cont">
+      <div class="swiper-wrapper" id="bannerWrapper"></div>
+      <!-- 如果需要分页器 -->
+      <div class="swiper-pagination"></div>
+      <!-- 固定文案区域，使用第一张轮播图的标题/描述/按钮 -->
+      <div class="banner-text">
+        <div class="section-content">
+          <div class="banner-copy">
+            <h1 id="bannerTitle"></h1>
+            <p class="banner-desc" id="bannerDesc"></p>
+            <a
+              class="btn btn2 btn-normal"
+              href="javascript:;"
+              id="bannerButton"
+              style="display: none;"
+            ></a>
           </div>
         </div>
       </div>
     </div>
+    </div>
+    <div class="banner-s">
+      <div class="section-content banner-list">
+        <div class="banner-item" id="cloud-box">
+          <h5>云服务器专场</h5>
+          <p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
+          <span class="banner-tag">4核8G仅需228元</span>
+        </div>
+        <div class="banner-item" id="domain-box">
+          <h5>域名注册</h5>
+          <p class="title-desc mt-10 mb-10">优选主流域名注册服务</p>
+          <span class="banner-tag">.top 88元起</span>
+        </div>
+        <div class="banner-item" id="cps-box">
+          <h5>CPS推广</h5>
+          <p class="title-desc mt-10 mb-10">多种产品高达30%高额佣金</p>
+          <span class="banner-tag">最高可返佣金5W</span>
+        </div>
+        <div class="banner-item" id="logon-box">
+          <h5>注册有礼</h5>
+          <p class="title-desc mt-10 mb-10">免费注册领取专属礼包</p>
+          <span class="banner-tag">价值2000元</span>
+        </div>
+      </div>
+
+    </div>
   </section>
 
   <!-- 服务内容 -->