1

css/index.css

@@ -25,29 +25,29 @@
   top: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  /* 整体文案块垂直方向居中，由内层 section-content 控制 */
-  align-items: stretch;
   /* 需要盖在 swiper-slide 之上，swiper 本身 z-index: 1，这里抬高一层 */
   z-index: 10;
   pointer-events: none;
 }
 
 .banner-cont .banner-text .section-content {
-  /* 让首页 banner 文案相对于视口靠左、垂直居中 */
+  /* 相对定位，便于内部文案块绝对居中定位 */
-  display: flex;
+  position: relative;
-  align-items: center;    /* 垂直居中 */
   height: 100%;
-  padding: 0 20px;        /* 与全站保持左右 20px 内边距 */
+  padding: 0 20px;        /* 左右 20px 内边距，与全站一致 */
-  /* 保持与下方 .section-content 区块相同的水平居中和宽度，保证左右对齐 */
+  margin: 0 auto;        /* 保持与其他 section-content 一致的水平布局 */
-  margin: 0 auto;
 }
 
 .banner-copy {
   max-width: 560px;
   text-align: left;
-  /* 与下方 .banner-item 内的文案左对齐（banner-list padding 20px + item padding 60px） */
+  /* 绝对定位：在整块 banner 内垂直居中，水平方向与下方卡片文案左侧对齐 */
-  padding-left: 60px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  /* 与下方 .banner-item 内的文案左对齐（section-content padding 20px + item padding 60px） */
+  padding-left: 80px;
 }
 
 .banner-copy #bannerTitle {