diff --git a/css/index.css b/css/index.css
index be8b1b9..c3a2a1c 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,13 +1,13 @@
 /* banner */
-.banner-cont {
-  width: 100%;
-}
-
-.banner-cont .swiper-slide {
-  height: 500px;
-  width: 100%;
-  background: linear-gradient(0, #f7f9fa, #f9fafb);
-}
+.banner-cont {
+  width: 100%;
+}
+
+.banner-cont .swiper-slide {
+  height: 500px;
+  width: 100%;
+  background: linear-gradient(0, #f7f9fa, #f9fafb);
+}
 
 .banner-cont .swiper-slide .img {
   /* position: absolute; */
@@ -35,9 +35,31 @@
   border-radius: 3px;
 }
 
-.banner-cont .swiper-pagination-bullet-active {
-  background: rgba(255, 103, 57, 1);
-}
+.banner-cont .swiper-pagination-bullet-active {
+  background: rgba(255, 103, 57, 1);
+}
+
+.banner-cont {
+  position: relative;
+}
+
+.banner-cont .banner-text {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.banner-cont .banner-text .section-content {
+  z-index: 1;
+}
+
+.banner-cont .banner-text .btn {
+  pointer-events: auto;
+}
 
 .banner .banner-s {
   box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
diff --git a/index.html b/index.html
index aca86d7..97557d4 100644
--- a/index.html
+++ b/index.html
@@ -9,16 +9,29 @@
 </head>
 
 <body id="index">
-  <header>{include file="public/header"}</header>
-
+  <header>{include file="public/header"}</header>
+
   <!-- banner -->
   <section class="section banner">
     <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">
+          <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">
diff --git a/js/index.js b/js/index.js
index 7ce394e..83fd7e9 100644
--- a/js/index.js
+++ b/js/index.js
@@ -60,16 +60,6 @@ $(function () {
     list.forEach((item) => {
       const slide = document.createElement("div");
       slide.className = "swiper-slide";
-      const title = item.title ? `<h1>${item.title}</h1>` : "";
-      const desc = item.description
-        ? `<p class="banner-desc">${item.description}</p>`
-        : "";
-      let buttonHtml = "";
-      if (item.button_text) {
-        const link = item.button_link || "javascript:;";
-        const target = item.button_blank ? "_blank" : "_self";
-        buttonHtml = `<a class="btn btn2 btn-normal" href="${link}" target="${target}">${item.button_text}</a>`;
-      }
       const targetAttr = item.blank ? "_blank" : "_self";
       const imgHtml = `<img class="img-responsive img center-block" src="${
         item.img || ""
@@ -77,14 +67,7 @@ $(function () {
       const mediaBlock = item.url
         ? `<a href="${item.url}" target="${targetAttr}">${imgHtml}</a>`
         : imgHtml;
-      const contentBlock =
-        title || desc || buttonHtml
-          ? `<div class="section-content">${title}${desc}${buttonHtml}</div>`
-          : "";
-      slide.innerHTML = `
-        ${mediaBlock}
-        ${contentBlock}
-      `;
+      slide.innerHTML = mediaBlock;
       wrapper.appendChild(slide);
     });
     initBannerSwiper();
@@ -93,6 +76,27 @@ $(function () {
   // 设置首页函数
   function setIndexData() {
     const commentObj = JSON.parse(sessionStorage.commentData);
+    const bannerList = commentObj.banner || [];
+
+    // 使用第一张轮播图的标题/描述/按钮渲染固定文案区域
+    if (bannerList.length) {
+      const first = bannerList[0];
+      $("#bannerTitle").text(first.title || "");
+      $("#bannerDesc").text(first.description || "");
+      const $btn = $("#bannerButton");
+      if (first.button_text) {
+        const link = first.button_link || first.url || "javascript:;";
+        const target = first.button_blank ? "_blank" : "_self";
+        $btn
+          .text(first.button_text)
+          .attr("href", link)
+          .attr("target", target)
+          .show();
+      } else {
+        $btn.hide();
+      }
+    }
+
     renderBannerSlides(commentObj.banner);
     if (commentObj.honor.length > 0) {
       commentObj.honor.forEach((item) => {
