反代

css/index.css

@@ -151,28 +151,42 @@
 
 .banner-cont .swiper-slide .img {
   display: block;
-  width: 100%;
+  position: absolute;
-  height: 100%;
+  right: 0;
-  max-width: 100%;
+  top: 50%;
-  max-height: 100%;
+  transform: translateY(-50%);
-  object-fit: cover;
+  width: 55%;
-  opacity: 0.15;
+  height: auto;
-  mix-blend-mode: luminosity;
+  max-height: 85%;
+  object-fit: contain;
+  opacity: 0.95;
+  /* 移除 mix-blend-mode，让图片更清晰 */
+  filter: drop-shadow(0 20px 60px rgba(56, 189, 248, 0.3));
+  animation: floatImage 6s ease-in-out infinite;
 }
 
-/* 轮播文字层：居中偏左覆盖在图片上 */
+@keyframes floatImage {
+  0%, 100% {
+    transform: translateY(-50%) translateX(0);
+  }
+  50% {
+    transform: translateY(-50%) translateX(-20px);
+  }
+}
+
+/* 轮播文字层：左侧排列，为右侧图片留出空间 */
 .banner-cont .swiper-slide .section-content {
   position: absolute;
   top: 50%;
-  left: 50%;
+  left: 8%;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
-  max-width: 900px;
+  max-width: 650px;
   z-index: 10;
-  text-align: center;
+  text-align: left;
 }
 
 .banner-cont .swiper-slide h1 {
-  font-size: 64px;
+  font-size: 58px;
   line-height: 1.2;
   font-weight: 700;
   /* 渐变文字效果 */
@@ -181,41 +195,42 @@
   -webkit-text-fill-color: transparent;
   background-clip: text;
   letter-spacing: -1px;
-  animation: fadeInUp 1s ease-out;
+  animation: fadeInLeft 1s ease-out;
+  margin-bottom: 0;
 }
 
-@keyframes fadeInUp {
+@keyframes fadeInLeft {
   from {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateX(-50px);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
 
 .banner-cont .banner-desc {
-  font-size: 18px;
+  font-size: 17px;
-  margin-top: 30px;
+  margin-top: 24px;
-  margin-bottom: 50px;
+  margin-bottom: 40px;
-  max-width: 700px;
+  max-width: 580px;
-  margin-left: auto;
-  margin-right: auto;
   color: rgba(226, 232, 240, 0.85);
   line-height: 1.8;
-  animation: fadeInUp 1s ease-out 0.2s both;
+  animation: fadeInLeft 1s ease-out 0.2s both;
 }
 
 /* 轮播文案标签（标题上方的小圆角标签） */
 .banner-tags {
   margin-bottom: 20px;
-  animation: fadeInUp 1s ease-out 0.1s both;
+  animation: fadeInLeft 1s ease-out 0.1s both;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
 .banner-tag-pill {
   display: inline-block;
-  margin-right: 10px;
   padding: 6px 16px;
   font-size: 13px;
   border-radius: 999px;
@@ -224,11 +239,12 @@
   border: 1px solid rgba(56, 189, 248, 0.3);
   backdrop-filter: blur(10px);
   font-weight: 500;
+  white-space: nowrap;
 }
 
 /* 按钮优化 - 科技感渐变发光效果 */
 .banner-cont .btn2 {
-  animation: fadeInUp 1s ease-out 0.4s both;
+  animation: fadeInLeft 1s ease-out 0.4s both;
   position: relative;
   overflow: hidden;
   font-size: 16px;
@@ -237,6 +253,7 @@
   background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
   box-shadow: 0 12px 40px rgba(56, 189, 248, 0.4);
   transition: all 0.3s ease;
+  display: inline-block;
 }
 
 .banner-cont .btn2::before {
@@ -1313,7 +1330,11 @@ html {
 /* 大屏幕 1400px+ */
 @media (min-width: 1400px) {
   .banner-cont .swiper-slide h1 {
-    font-size: 72px;
+    font-size: 64px;
+  }
+
+  .banner-cont .swiper-slide .section-content {
+    max-width: 700px;
   }
 
   .section-title h2 {
@@ -1328,7 +1349,11 @@ html {
   }
 
   .banner-cont .swiper-slide h1 {
-    font-size: 56px;
+    font-size: 52px;
+  }
+
+  .banner-cont .swiper-slide .section-content {
+    max-width: 600px;
   }
 
   .service .service-box {
@@ -1344,7 +1369,16 @@ html {
   }
 
   .banner-cont .swiper-slide h1 {
-    font-size: 48px;
+    font-size: 44px;
+  }
+
+  .banner-cont .swiper-slide .section-content {
+    max-width: 500px;
+    left: 5%;
+  }
+
+  .banner-cont .swiper-slide .img {
+    width: 50%;
   }
 
   .banner-s .banner-list .banner-item {
@@ -1377,11 +1411,38 @@ html {
   }
 
   .banner-cont .swiper-slide h1 {
-    font-size: 40px;
+    font-size: 36px;
   }
 
   .banner-cont .banner-desc {
-    font-size: 16px;
+    font-size: 15px;
+  }
+
+  /* 平板尺寸下，图片改为背景，文字居中 */
+  .banner-cont .swiper-slide .img {
+    width: 100%;
+    height: 100%;
+    opacity: 0.15;
+    filter: none;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: none;
+    animation: none;
+  }
+
+  .banner-cont .swiper-slide .section-content {
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    max-width: 90%;
+  }
+
+  .banner-tags {
+    justify-content: center;
   }
 
   .banner-s .banner-list {