From 716fe9c7f25eb0eee9e5ccc48c6fb8316c932004 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Sat, 22 Nov 2025 23:28:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/index.css | 1597 +++++++++++++++++++++++++++++++++++++++----------
 js/index.js   |  259 ++++----
 2 files changed, 1424 insertions(+), 432 deletions(-)

diff --git a/css/index.css b/css/index.css
index 30492b8..c72818d 100644
--- a/css/index.css
+++ b/css/index.css
@@ -7,9 +7,63 @@
 
 .banner-cont .swiper-slide {
   position: relative;
-  height: 500px;
+  height: 650px;
   width: 100%;
-  background: linear-gradient(0, #f7f9fa, #f9fafb);
+  /* 深色科技渐变背景 */
+  background:
+    radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 70%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
+    linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
+  overflow: hidden;
+}
+
+/* 动态网格背景 */
+.banner-cont .swiper-slide::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes gridMove {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+/* 光晕装饰效果 */
+.banner-cont .swiper-slide::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
+  animation: glow 8s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes glow {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.1);
+  }
 }
 
 .banner-cont .swiper-slide .img {
@@ -19,6 +73,8 @@
   max-width: 100%;
   max-height: 100%;
   object-fit: cover;
+  opacity: 0.15;
+  mix-blend-mode: luminosity;
 }
 
 /* 轮播文字层：居中偏左覆盖在图片上 */
@@ -27,53 +83,126 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  max-width: 640px;
+  max-width: 900px;
+  z-index: 10;
+  text-align: center;
 }
 
 .banner-cont .swiper-slide h1 {
-  font-size: 40px;
+  font-size: 64px;
   line-height: 1.2;
-  color: #111827;
+  font-weight: 700;
+  /* 渐变文字效果 */
+  background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -1px;
+  animation: fadeInUp 1s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .banner-cont .banner-desc {
-  font-size: 16px;
+  font-size: 18px;
   margin-top: 30px;
-  margin-bottom: 40px;
-  max-width: 550px;
-  color: rgba(0, 0, 0, 0.75);
+  margin-bottom: 50px;
+  max-width: 700px;
+  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;
 }
 
 /* 轮播文案标签（标题上方的小圆角标签） */
 .banner-tags {
-  margin-bottom: 12px;
+  margin-bottom: 20px;
+  animation: fadeInUp 1s ease-out 0.1s both;
 }
 
 .banner-tag-pill {
   display: inline-block;
-  margin-right: 8px;
-  padding: 4px 12px;
-  font-size: 14px;
+  margin-right: 10px;
+  padding: 6px 16px;
+  font-size: 13px;
   border-radius: 999px;
-  background: rgba(255, 103, 57, 0.08);
-  color: #FF6739;
+  background: rgba(56, 189, 248, 0.15);
+  color: #38BDF8;
+  border: 1px solid rgba(56, 189, 248, 0.3);
+  backdrop-filter: blur(10px);
+  font-weight: 500;
 }
 
+/* 按钮优化 - 科技感渐变发光效果 */
+.banner-cont .btn2 {
+  animation: fadeInUp 1s ease-out 0.4s both;
+  position: relative;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 14px 48px;
+  background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+  box-shadow: 0 12px 40px rgba(56, 189, 248, 0.4);
+  transition: all 0.3s ease;
+}
+
+.banner-cont .btn2::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transform: rotate(45deg);
+  transition: all 0.6s ease;
+}
+
+.banner-cont .btn2:hover::before {
+  left: 100%;
+}
+
+.banner-cont .btn2:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 48px rgba(56, 189, 248, 0.6);
+}
+
+/* 分页器优化 */
 .banner-cont .swiper-pagination-bullet {
-  width: 36px;
+  width: 40px;
   height: 4px;
-  background: #D7DCE4;
+  background: rgba(148, 163, 184, 0.3);
   opacity: 1;
-  border-radius: 3px;
+  border-radius: 2px;
+  transition: all 0.3s ease;
 }
 
 .banner-cont .swiper-pagination-bullet-active {
-  background: rgba(255, 103, 57, 1);
+  width: 60px;
+  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
+  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.6);
 }
 
+/* Banner下方快速入口卡片 - 玻璃态设计 */
 .banner .banner-s {
-  box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
-  border-radius: 3px;
+  margin-top: -80px;
+  position: relative;
+  z-index: 20;
+  backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.37);
+  border-radius: 16px;
 }
 
 .banner .banner-s .banner-list {
@@ -86,474 +215,1286 @@
   flex: 1;
   cursor: pointer;
   width: 335px;
-  padding: 30px 60px;
+  padding: 36px 50px;
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 16px;
+}
+
+/* 分隔线效果 */
+.banner-s .banner-list .banner-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 20%;
+  height: 60%;
+  width: 1px;
+  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.2), transparent);
 }
 
 .banner-s .banner-list .banner-item:hover {
-  background: rgba(247, 248, 249, 1);
+  background: rgba(56, 189, 248, 0.08);
+  transform: translateY(-8px);
+  box-shadow: 0 12px 28px rgba(56, 189, 248, 0.15);
 }
 
 .banner-s .banner-list .banner-item:hover h5 {
-  color: #FF6739;
+  color: #38BDF8;
+  transform: translateX(5px);
+}
+
+.banner-s .banner-list .banner-item h5 {
+  color: #F9FAFB;
+  font-size: 20px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.banner-s .banner-list .banner-item .title-desc {
+  color: rgba(203, 213, 225, 0.8);
+  font-size: 13px;
+  line-height: 1.6;
 }
 
 .banner-list .banner-item .banner-tag {
   font-size: 12px;
-  color: #FF6739;
-  border: 1px solid #FF6739;
-  padding: 5px 8px;
-  border-radius: 3px;
+  color: #38BDF8;
+  background: rgba(56, 189, 248, 0.12);
+  border: 1px solid rgba(56, 189, 248, 0.3);
+  padding: 6px 12px;
+  border-radius: 6px;
+  display: inline-block;
+  font-weight: 500;
+  transition: all 0.3s ease;
 }
-
+
+.banner-s .banner-list .banner-item:hover .banner-tag {
+  background: rgba(56, 189, 248, 0.2);
+  border-color: rgba(56, 189, 248, 0.5);
+  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
+}
+
 /* 服务内容 */
 .service-content {
   display: flex;
   margin-top: 60px;
-  margin: -10px;
+  margin: -12px;
   margin-top: 50px;
 }
 
-/* 服务模块整体背景：与首页 banner 保持暗色科技感基调 */
+/* 服务模块整体背景：深色科技感基调 */
 .section.service {
   background:
-    radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 40%),
-    linear-gradient(180deg, #020617 0%, #020617 100%);
+    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
+    radial-gradient(circle at 85% 80%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
+    linear-gradient(180deg, #020617 0%, #0F172A 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 添加动态背景装饰 */
+.section.service::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    radial-gradient(circle at 80% 50%, rgba(99, 102, 241, 0.02) 1px, transparent 1px);
+  background-size: 30px 30px;
+  animation: float 15s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
 }
 
 .section.service .section-title h2 {
   color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
 }
 
 .section.service .section-title .section-desc {
-  color: rgba(148, 163, 184, 0.95);
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
 }
-
+
+/* 服务卡片 - 3D悬浮效果 */
 .service .service-box {
-  min-height: 191px;
-  margin: 10px;
+  min-height: 240px;
+  margin: 12px;
   position: relative;
-  padding: 30px;
-  border-radius: 14px;
-  /* 服务卡片使用深色半透明面板，叠加在暗色背景上 */
-  background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22) 0%, transparent 42%),
-    rgba(15, 23, 42, 0.96);
-  border: 1px solid rgba(148, 163, 184, 0.4);
-  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.85);
+  padding: 32px;
+  border-radius: 20px;
+  /* 深色玻璃态面板 */
+  background:
+    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
+    rgba(15, 23, 42, 0.85);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  box-shadow:
+    0 4px 24px rgba(15, 23, 42, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
   color: #E5E7EB;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  overflow: hidden;
+}
+
+/* 卡片光晕装饰 */
+.service .service-box::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.service .service-box:hover::before {
+  opacity: 1;
 }
 
 .service .service-box:hover {
-  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.95);
-  border-color: rgba(56, 189, 248, 0.75);
+  transform: translateY(-12px) scale(1.02);
+  box-shadow:
+    0 20px 60px rgba(56, 189, 248, 0.25),
+    0 0 40px rgba(56, 189, 248, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  border-color: rgba(56, 189, 248, 0.4);
 }
 
 .service .service-box .service-title {
   color: #F9FAFB;
+  font-size: 22px;
+  font-weight: 600;
+  transition: all 0.3s ease;
 }
-
+
 .service .service-box:hover h4 {
   color: #38BDF8;
-}
-
-.service .service-hot::before {
-  content: '';
-  height: 60px;
-  width: 60px;
-  position: absolute;
-  right: -4px;
-  top: -4px;
-  background: url('../assets/img/index/hot.png');
-  background-repeat: no-repeat;
-  background-size: 100%;
-
-}
-
+  text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+}
+
+/* Hot标签优化 */
+.service .service-hot::before {
+  content: '';
+  height: 70px;
+  width: 70px;
+  position: absolute;
+  right: -5px;
+  top: -5px;
+  background: url('../assets/img/index/hot.png');
+  background-repeat: no-repeat;
+  background-size: 100%;
+  filter: drop-shadow(0 0 10px rgba(255, 103, 57, 0.6));
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
 .service-box .title-desc {
-  margin: 16px 0;
-  height: 42px;
-  color: rgba(148, 163, 184, 0.96);
+  margin: 18px 0;
+  height: 44px;
+  color: rgba(203, 213, 225, 0.8);
+  line-height: 1.6;
 }
-
-.service .service-tag-group {
-  display: flex;
-}
-
-.service .service-tag-group .service-tag {
+
+/* 服务标签组 */
+.service .service-tag-group {
   display: flex;
-  align-items: center;
-  justify-items: center;
-  margin-right: 8px;
-  font-size: 12px;
-  padding: 0 12px;
-  color: #E5E7EB;
-  height: 24px;
-  background: rgba(15, 23, 42, 0.9);
-  border: 1px solid rgba(148, 163, 184, 0.6);
-  border-radius: 999px;
+  flex-wrap: wrap;
+  gap: 8px;
 }
-
-
+
+.service .service-tag-group .service-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  padding: 0 14px;
+  height: 26px;
+  color: #94A3B8;
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 999px;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.service .service-box:hover .service-tag {
+  color: #38BDF8;
+  background: rgba(56, 189, 248, 0.12);
+  border-color: rgba(56, 189, 248, 0.3);
+  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
+}
+
+
 /* 解决方案 */
 .resolve {
-  background: #13182C url(../assets/img/index/home-bg.png) no-repeat center center;
+  background: #0F172A url(../assets/img/index/home-bg.png) no-repeat center center;
   background-size: cover;
+  position: relative;
 }
-
-.resolve-content {
-  margin: -10px;
-  margin-top: 60px;
-}
-
+
+/* 添加深色遮罩增强对比度 */
+.resolve::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
+  pointer-events: none;
+}
+
+.resolve .section-content {
+  position: relative;
+  z-index: 1;
+}
+
+.resolve .section-title h2 {
+  color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.resolve .section-title .section-desc {
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
+}
+
+.resolve-content {
+  margin: -12px;
+  margin-top: 60px;
+}
+
+/* 解决方案卡片 - 错落悬浮效果 */
 .resolve-content .resolve-box {
   position: relative;
   top: 0;
   max-width: 335px;
-  padding: 30px;
-  margin: 10px;
-  background: #F7F8F9;
-  box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
-  opacity: 1;
-  border-radius: 10px;
-  transition: .5s all;
+  padding: 36px;
+  margin: 12px;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   background-size: cover;
   background-repeat: no-repeat;
-}
-
-.resolve-content .resolve-box:nth-child(1) {
-  background-image: url('../assets/img/index/solution-1.png');
-
-}
-
-.resolve-content .resolve-box:nth-child(2) {
-  background-image: url('../assets/img/index/solution-2.png');
-}
-
-.resolve-content .resolve-box:nth-child(3) {
-  background-image: url('../assets/img/index/solution-3.png');
-}
-
-.resolve-content .resolve-box:nth-child(4) {
-  background-image: url('../assets/img/index/solution-7.png');
-}
-
-.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(1) {
-  background-image: url('../assets/img/index/solution-4.png');
-}
-
-.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(2) {
-  background-image: url('../assets/img/index/solution-5.png');
-}
-
-.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(3) {
-  background-image: url('../assets/img/index/solution-6.png');
-}
-
-.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(4) {
-  background-image: url('../assets/img/index/solution-8.png');
-}
-
-
+  background-blend-mode: overlay;
+  overflow: hidden;
+}
+
+/* 卡片发光边框效果 */
+.resolve-content .resolve-box::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 16px;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.3));
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.resolve-content .resolve-box:hover::before {
+  opacity: 1;
+}
+
+/* 错落布局 - 奇数偶数不同的hover效果 */
+.resolve-content .resolve-box:nth-child(even) {
+  transform: translateY(15px);
+}
+
 .resolve-content .resolve-box:hover {
-  top: -10px;
+  transform: translateY(-15px) scale(1.03);
+  box-shadow:
+    0 20px 50px rgba(56, 189, 248, 0.25),
+    0 0 50px rgba(56, 189, 248, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  border-color: rgba(56, 189, 248, 0.4);
+}
+
+.resolve-content .resolve-box:nth-child(even):hover {
+  transform: translateY(-5px) scale(1.03);
+}
+
+.resolve-content .resolve-box:nth-child(1) {
+  background-image: url('../assets/img/index/solution-1.png');
+}
+
+.resolve-content .resolve-box:nth-child(2) {
+  background-image: url('../assets/img/index/solution-2.png');
+}
+
+.resolve-content .resolve-box:nth-child(3) {
+  background-image: url('../assets/img/index/solution-3.png');
+}
+
+.resolve-content .resolve-box:nth-child(4) {
+  background-image: url('../assets/img/index/solution-7.png');
+}
+
+.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(1) {
+  background-image: url('../assets/img/index/solution-4.png');
+}
+
+.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(2) {
+  background-image: url('../assets/img/index/solution-5.png');
+}
+
+.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(3) {
+  background-image: url('../assets/img/index/solution-6.png');
+}
+
+.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(4) {
+  background-image: url('../assets/img/index/solution-8.png');
 }
 
 .resolve-content .resolve-box:hover h4,
 .resolve-content .resolve-box:hover .resolve-link {
-  color: rgba(56, 189, 248, 1);
+  color: #38BDF8;
+  text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
 }
-
-.resolve-content .resolve-box h4 {
-  color: rgba(0, 0, 0, 0.9);
-  font-size: 22px;
-  margin-bottom: 20px;
-}
-
-.resolve-content .resolve-box .resolve-link {
-  color: rgba(0, 0, 0, 0.60);
-  margin-top: 60px;
-  font-size: 14px;
-}
-
-
-
+
+.resolve-content .resolve-box h4 {
+  color: #F9FAFB;
+  font-size: 24px;
+  margin-bottom: 20px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.resolve-content .resolve-box .title-desc {
+  color: rgba(203, 213, 225, 0.85);
+  line-height: 1.7;
+}
+
+.resolve-content .resolve-box .resolve-link {
+  color: rgba(148, 163, 184, 0.9);
+  margin-top: 60px;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.resolve-content .resolve-box .resolve-link .icon-arrow-right {
+  margin-left: 5px;
+  transition: transform 0.3s ease;
+}
+
+.resolve-content .resolve-box:hover .resolve-link .icon-arrow-right {
+  transform: translateX(5px);
+}
+
+
+
 /* 服务实践 */
 .practice {
   /* 与解决方案区域衔接的暗色背景 */
-  background: linear-gradient(180deg, #020617 0%, #020617 100%);
+  background: linear-gradient(180deg, #0F172A 0%, #020617 100%);
+  position: relative;
+}
+
+.practice::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    radial-gradient(circle at 80% 50%, rgba(99, 102, 241, 0.02) 1px, transparent 1px);
+  background-size: 40px 40px;
+  pointer-events: none;
 }
 
 .practice .section-title h2 {
   color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
 }
 
 .practice .section-title .section-desc {
-  color: rgba(148, 163, 184, 0.95);
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
 }
-
+
 .practice .practice-content {
-  margin: -10px;
-  margin-top: 40px;
+  margin: -12px;
+  margin-top: 50px;
   flex-wrap: wrap;
 }
 
+/* 实践卡片优化 */
 .practice .practice-box {
-  margin: 10px;
-  padding: 30px;
+  margin: 12px;
+  padding: 36px;
   width: 453px;
-  border-radius: 14px;
+  border-radius: 20px;
   text-align: center;
-  /* 实践卡片使用深色面板，避免在暗背景上出现纯白块突兀 */
-  background: rgba(15, 23, 42, 0.96);
-  border: 1px solid rgba(148, 163, 184, 0.4);
-  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.85);
+  background:
+    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
+    rgba(15, 23, 42, 0.85);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
   color: #E5E7EB;
   flex-shrink: 0;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
 }
-
-.practice .practice-box img {
-  width: 177px;
-  height: 66px;
-  cursor: pointer;
-}
-
-.practice-box:hover {
-  box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
-}
-
-.brand-group {
-  margin: -10px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.practice .brand-box {
-  margin: 10px;
-  width: 216px;
-  height: 124px;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  border: 1px solid #E6EAED;
-}
-
-.practice .brand-box img {
-  width: 86px;
-  height: 75px;
-  cursor: pointer;
-}
-
-.practice .brand-box:hover {
-  box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
-}
-
-/* 基础措施 */
+
+.practice .practice-box:hover {
+  transform: translateY(-8px);
+  box-shadow:
+    0 16px 48px rgba(56, 189, 248, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  border-color: rgba(56, 189, 248, 0.3);
+}
+
+.practice .practice-box img {
+  width: 177px;
+  height: 66px;
+  cursor: pointer;
+  filter: grayscale(0.3) brightness(1.1);
+  transition: all 0.3s ease;
+}
+
+.practice .practice-box:hover img {
+  filter: grayscale(0) brightness(1.2);
+  transform: scale(1.05);
+}
+
+.brand-group {
+  margin: -12px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.practice .brand-box {
+  margin: 12px;
+  width: 216px;
+  height: 140px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  border-radius: 12px;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.practice .brand-box:hover {
+  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.15);
+  border-color: rgba(56, 189, 248, 0.3);
+  transform: translateY(-5px);
+}
+
+.practice .brand-box img {
+  width: 86px;
+  height: 75px;
+  cursor: pointer;
+  filter: grayscale(0.5);
+  transition: filter 0.3s ease;
+}
+
+.practice .brand-box:hover img {
+  filter: grayscale(0);
+}
+
+/* 基础设施 */
 .section-base {
-  /* 统一为暗色科技风背景，下方 cert 卡片及地图以亮色卡片形式凸显 */
+  /* 统一为暗色科技风背景 */
   background:
-    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 40%),
-    linear-gradient(180deg, #020617 0%, #020617 100%);
+    radial-gradient(ellipse at 50% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
+    radial-gradient(ellipse at 50% 80%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
+    linear-gradient(180deg, #020617 0%, #0F172A 100%);
+  position: relative;
+  overflow: hidden;
 }
-
-.section-base .base {
-  margin-top: 42px;
-}
-
-.section-base>.section-content {
-  padding: 62px 20px 0;
-}
-
+
+.section-base::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
+  background-size: 60px 60px;
+  pointer-events: none;
+}
+
+.section-base .base {
+  margin-top: 50px;
+}
+
+.section-base>.section-content {
+  padding: 62px 20px 0;
+  position: relative;
+  z-index: 1;
+}
+
 .section-base .base img {
   width: calc(100% - 140px);
   margin-left: 35px;
   height: 520px;
   padding-right: 80px;
+  filter: drop-shadow(0 0 30px rgba(56, 189, 248, 0.3));
+  animation: mapGlow 3s ease-in-out infinite alternate;
 }
-
+
+@keyframes mapGlow {
+  from {
+    filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.2));
+  }
+  to {
+    filter: drop-shadow(0 0 40px rgba(56, 189, 248, 0.4));
+  }
+}
+
 .base .base-content {
   margin-bottom: 100px;
 }
 
+/* 数据展示优化 - 数字计数器效果 */
+.base .base-content h2 {
+  color: #38BDF8;
+  font-size: 56px;
+  font-weight: 700;
+  text-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
+  transition: all 0.3s ease;
+}
+
 .base .base-content .title-desc {
   white-space: nowrap;
-  color: rgba(148, 163, 184, 0.95);
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 15px;
+}
+
+.base .base-content .fboxRow:hover h2 {
+  transform: scale(1.1);
+  text-shadow: 0 0 40px rgba(56, 189, 248, 0.8);
 }
 
 .section-base .section-title h2 {
   color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
 }
 
 .section-base .section-title .section-desc {
-  color: rgba(148, 163, 184, 0.95);
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
 }
 
-.section-base .base-content h2 {
-  color: #F9FAFB;
+/* 认证卡片区域 */
+.cert {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
+    rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
-
-.cert {
-  border: 2px solid #FFFFFF;
-  border-radius: 3px;
-  background: linear-gradient(180deg, #F4F6F8 0%, #FDFEFE 100%);
-  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08);
-}
-
-.cert-list {
-  padding: 0 20px;
-}
-
-.cert-list .cert-item {
-  padding: 13px 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 200px;
-}
-
-.cert-list .cert-item img {
-  height: 56px;
-  width: 56px;
-  cursor: pointer;
-}
-
-.cert-list .cert-item .title-desc {
-  font-size: 12px;
-  margin-top: 5px;
-}
-
+
+.cert-list {
+  padding: 0 20px;
+}
+
+.cert-list .cert-item {
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 200px;
+  transition: all 0.3s ease;
+}
+
+.cert-list .cert-item:hover {
+  transform: translateY(-5px);
+}
+
+.cert-list .cert-item img {
+  height: 60px;
+  width: 60px;
+  cursor: pointer;
+  filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.2));
+  transition: all 0.3s ease;
+}
+
+.cert-list .cert-item:hover img {
+  transform: scale(1.1);
+  filter: drop-shadow(0 6px 20px rgba(56, 189, 248, 0.4));
+}
+
+.cert-list .cert-item .title-desc {
+  font-size: 12px;
+  margin-top: 10px;
+  color: rgba(203, 213, 225, 0.8);
+}
+
 /* 新闻 */
 .section.news {
-  background: linear-gradient(180deg, #020617 0%, #020617 100%);
+  background:
+    radial-gradient(ellipse at 30% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse at 70% 50%, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
+    linear-gradient(180deg, #0F172A 0%, #020617 100%);
+  position: relative;
+}
+
+.section.news::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    radial-gradient(circle at 30% 50%, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    radial-gradient(circle at 70% 50%, rgba(99, 102, 241, 0.02) 1px, transparent 1px);
+  background-size: 35px 35px;
+  pointer-events: none;
 }
 
 .section.news .section-title h2 {
   color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
 }
 
 .section.news .section-title .section-desc {
-  color: rgba(148, 163, 184, 0.95);
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
 }
+
 .news-content {
   margin-top: 60px;
   display: flex;
   flex-wrap: wrap;
   gap: 130px;
+  position: relative;
+  z-index: 1;
 }
-
+
+/* 新闻列表块优化 */
 .news-content .news-cont {
   flex: 1;
-  /* 新闻列表块采用深色卡片，与整体暗色背景协调 */
-  background: rgba(15, 23, 42, 0.92);
-  border-radius: 16px;
-  padding: 24px 24px 16px;
-  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.7);
-  border: 1px solid rgba(148, 163, 184, 0.4);
+  background:
+    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.06) 0%, transparent 60%),
+    rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(16px);
+  border-radius: 20px;
+  padding: 28px 28px 20px;
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-
+
+.news-content .news-cont:hover {
+  transform: translateY(-8px);
+  box-shadow:
+    0 16px 48px rgba(56, 189, 248, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  border-color: rgba(56, 189, 248, 0.3);
+}
+
 .news-content .news-head .news-title {
-  padding-left: 5px;
-  font-size: 22px;
+  position: relative;
+  padding-left: 14px;
+  font-size: 20px;
+  line-height: 24px;
+  height: 24px;
+  color: #F9FAFB;
+  font-weight: 600;
 }
-
-.news-content .news-head .news-title {
-  position: relative;
-  padding-left: 10px;
-  font-size: 18px;
-  line-height: 20px;
-  height: 20px;
-}
-
+
+/* 标题左侧发光装饰条 */
 .news-content .news-head .news-title::before {
   content: '';
-  width: 2px;
-  height: 20px;
+  width: 4px;
+  height: 24px;
   position: absolute;
   left: 0;
   top: 0;
-  background: #38BDF8;
+  background: linear-gradient(180deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
 }
 
-
 .news-content .news-head .news-more {
   font-size: 14px;
-  color: rgba(148, 163, 184, 0.9);
+  color: rgba(148, 163, 184, 0.8);
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .news-content .news-head .news-more a {
   color: inherit;
 }
 
-.news-content .news-head .news-more a:hover {
-  color: #E5E7EB;
+.news-content .news-head .news-more:hover {
+  color: #38BDF8;
 }
-
-.news-content .news-list {
-  margin-top: 15px;
-}
-
-.news-content .news-list .news-item {
-  line-height: 50px;
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px dashed #E6EAED;
-}
-
+
+.news-content .news-head .news-more:hover a {
+  color: #38BDF8;
+}
+
+.news-content .news-list {
+  margin-top: 20px;
+}
+
+.news-content .news-list .news-item {
+  line-height: 50px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
+  transition: all 0.3s ease;
+  padding: 0 5px;
+  border-radius: 8px;
+}
+
+.news-content .news-list .news-item:hover {
+  background: rgba(56, 189, 248, 0.05);
+  border-bottom-color: rgba(56, 189, 248, 0.3);
+}
+
+/* 排名标签优化 - 前三名渐变发光 */
 .news-content .news-cont .news-item:nth-child(1) .number {
-  background: rgba(56, 189, 248, 1);
+  background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
+  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
+  font-weight: 600;
 }
 
 .news-content .news-cont .news-item:nth-child(2) .number {
-  background: rgba(56, 189, 248, 1);
+  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
+  font-weight: 600;
 }
 
 .news-content .news-cont .news-item:nth-child(3) .number {
-  background: rgba(56, 189, 248, 1);
-}
-
+  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
+  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
+  font-weight: 600;
+}
+
 .news-content .news-item .number {
-  margin-right: 10px;
+  margin-right: 12px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 12px;
-  width: 14px;
-  height: 14px;
-  background: rgba(222, 222, 222, 1);
-  border-radius: 3px;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  min-width: 20px;
+  height: 20px;
+  background: rgba(71, 85, 105, 0.5);
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.3s ease;
 }
 
 .news-content .news-item .title {
   font-size: 14px;
-  color: #E5E7EB;
+  color: rgba(226, 232, 240, 0.9);
+  transition: all 0.3s ease;
 }
 
-.news-content .news-item .title:hover {
-  color: rgba(56, 189, 248, 1);
+.news-content .news-item:hover .title {
+  color: #38BDF8;
+  padding-left: 5px;
 }
 
 .news-content .news-item .time {
-  color: rgba(148, 163, 184, 0.9);
-  font-size: 13px;
-  min-width: 100px;
-  text-align: right;
-}
-
-
-.index .footer-link {
-  display: block;
-}
-
-.over-hide {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: 24px;
-}
-
-.over-hide+p {
-  display: flex;
-  flex-wrap: wrap;
-  word-break: break-all;
-}
+  color: rgba(148, 163, 184, 0.7);
+  font-size: 13px;
+  min-width: 100px;
+  text-align: right;
+}
+
+
+.index .footer-link {
+  display: block;
+}
+
+.over-hide {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 24px;
+}
+
+.over-hide+p {
+  display: flex;
+  flex-wrap: wrap;
+  word-break: break-all;
+}
+
+/* ============================================
+   全局动画效果 - 滚动触发动画
+   ============================================ */
+
+/* 淡入向上动画 */
+.animate-on-scroll {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.animate-on-scroll.animated {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 延迟动画 - 用于列表项 */
+.animate-on-scroll.delay-1 {
+  transition-delay: 0.1s;
+}
+
+.animate-on-scroll.delay-2 {
+  transition-delay: 0.2s;
+}
+
+.animate-on-scroll.delay-3 {
+  transition-delay: 0.3s;
+}
+
+.animate-on-scroll.delay-4 {
+  transition-delay: 0.4s;
+}
+
+/* 淡入缩放动画 */
+.scale-on-scroll {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.scale-on-scroll.animated {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* 从左侧滑入 */
+.slide-left {
+  opacity: 0;
+  transform: translateX(-50px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.slide-left.animated {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 从右侧滑入 */
+.slide-right {
+  opacity: 0;
+  transform: translateX(50px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.slide-right.animated {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 页面加载动画 */
+@keyframes pageLoadFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+body {
+  animation: pageLoadFade 0.5s ease-in;
+}
+
+/* 平滑滚动 */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Section标题统一样式优化 */
+.section-title {
+  position: relative;
+  z-index: 1;
+}
+
+.section-title h2 {
+  position: relative;
+  display: inline-block;
+}
+
+/* 为section标题添加底部装饰线 */
+.section-title h2::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
+}
+
+/* 悬停时的微交互 */
+.service-box,
+.resolve-box,
+.practice-box,
+.news-cont {
+  will-change: transform;
+}
+
+/* 性能优化：减少重绘 */
+.banner-cont .swiper-slide::before,
+.banner-cont .swiper-slide::after {
+  will-change: transform, opacity;
+}
+
+/* 禁用不必要的动画以提升性能 */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ============================================
+   响应式优化
+   ============================================ */
+
+/* 大屏幕 1400px+ */
+@media (min-width: 1400px) {
+  .banner-cont .swiper-slide h1 {
+    font-size: 72px;
+  }
+
+  .section-title h2 {
+    font-size: 44px;
+  }
+}
+
+/* 中等屏幕 1200px - 1399px */
+@media (max-width: 1399px) {
+  .banner-cont .swiper-slide {
+    height: 600px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 56px;
+  }
+
+  .service .service-box {
+    min-height: 220px;
+    padding: 28px;
+  }
+}
+
+/* 小屏幕 992px - 1199px */
+@media (max-width: 1199px) {
+  .banner-cont .swiper-slide {
+    height: 550px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 48px;
+  }
+
+  .banner-s .banner-list .banner-item {
+    padding: 30px 40px;
+  }
+
+  .section-title h2 {
+    font-size: 36px;
+  }
+
+  .service .service-box {
+    min-height: 200px;
+    padding: 24px;
+  }
+
+  .resolve-content .resolve-box {
+    max-width: 300px;
+    padding: 30px;
+  }
+
+  .news-content {
+    gap: 60px;
+  }
+}
+
+/* 平板 768px - 991px */
+@media (max-width: 991px) {
+  .banner-cont .swiper-slide {
+    height: 500px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 40px;
+  }
+
+  .banner-cont .banner-desc {
+    font-size: 16px;
+  }
+
+  .banner-s .banner-list {
+    flex-direction: column;
+  }
+
+  .banner-s .banner-list .banner-item {
+    width: 100%;
+    padding: 24px 30px;
+  }
+
+  .banner-s .banner-list .banner-item:not(:last-child)::after {
+    display: none;
+  }
+
+  .section-title h2 {
+    font-size: 32px;
+  }
+
+  .service-content .fboxRow {
+    flex-direction: column;
+  }
+
+  .service .service-box {
+    max-width: 100%;
+  }
+
+  .resolve-content .fboxRow {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .resolve-content .resolve-box {
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .base .base-content h2 {
+    font-size: 48px;
+  }
+
+  .section-base .base img {
+    width: 100%;
+    padding-right: 0;
+    margin-left: 0;
+  }
+
+  .news-content {
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .practice .practice-box {
+    width: 100%;
+    max-width: 500px;
+  }
+}
+
+/* 手机 576px - 767px */
+@media (max-width: 767px) {
+  .banner-cont .swiper-slide {
+    height: 450px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 32px;
+  }
+
+  .banner-cont .banner-desc {
+    font-size: 14px;
+    margin-top: 20px;
+    margin-bottom: 30px;
+  }
+
+  .banner-cont .btn2 {
+    padding: 12px 32px;
+    font-size: 14px;
+  }
+
+  .banner .banner-s {
+    margin-top: -60px;
+  }
+
+  .section-title h2 {
+    font-size: 28px;
+  }
+
+  .section-title .section-desc {
+    font-size: 14px;
+  }
+
+  .section {
+    padding: 50px 0 !important;
+  }
+
+  .service .service-box {
+    padding: 20px;
+    margin: 8px;
+  }
+
+  .service .service-box .service-title {
+    font-size: 20px;
+  }
+
+  .resolve-content .resolve-box {
+    padding: 24px;
+  }
+
+  .resolve-content .resolve-box h4 {
+    font-size: 20px;
+  }
+
+  .base .base-content h2 {
+    font-size: 40px;
+  }
+
+  .base .base-content {
+    margin-bottom: 50px;
+  }
+
+  .practice .practice-box,
+  .practice .brand-box {
+    width: 100%;
+  }
+
+  .cert-list .cert-item {
+    width: 150px;
+  }
+}
+
+/* 小手机 最大575px */
+@media (max-width: 575px) {
+  .banner-cont .swiper-slide {
+    height: 400px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 28px;
+  }
+
+  .banner-cont .banner-desc {
+    font-size: 13px;
+  }
+
+  .banner-s .banner-list .banner-item {
+    padding: 20px 24px;
+  }
+
+  .banner-s .banner-list .banner-item h5 {
+    font-size: 18px;
+  }
+
+  .section-title h2 {
+    font-size: 24px;
+  }
+
+  .section-title h2::after {
+    width: 40px;
+  }
+
+  .service .service-box {
+    min-height: auto;
+  }
+
+  .resolve-content .resolve-box {
+    max-width: 100%;
+  }
+
+  .base .base-content h2 {
+    font-size: 32px;
+  }
+
+  .base .base-content .title-desc {
+    font-size: 13px;
+  }
+
+  .section-base .base {
+    flex-direction: column;
+  }
+
+  .news-content .news-head .news-title {
+    font-size: 18px;
+  }
+}
+
+/* 性能优化提示 */
+@media (max-width: 768px) {
+  /* 在移动设备上禁用一些复杂动画以提升性能 */
+  .banner-cont .swiper-slide::before,
+  .banner-cont .swiper-slide::after,
+  .section.service::before,
+  .practice::before,
+  .section.news::before,
+  .section-base::before {
+    display: none;
+  }
+
+  /* 简化hover效果 */
+  .service .service-box:hover,
+  .resolve-content .resolve-box:hover,
+  .practice .practice-box:hover {
+    transform: none;
+  }
+}
diff --git a/js/index.js b/js/index.js
index c9da4d9..ba852ff 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,4 +1,55 @@
 $(function () {
+  // ============================================
+  // 滚动动画效果 - Intersection Observer
+  // ============================================
+  function initScrollAnimations() {
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animated');
+          // 一次性动画，触发后不再观察
+          observer.unobserve(entry.target);
+        }
+      });
+    }, observerOptions);
+
+    // 为所有section添加滚动动画
+    document.querySelectorAll('.section').forEach((section, index) => {
+      section.classList.add('animate-on-scroll');
+      observer.observe(section);
+    });
+
+    // 为服务卡片添加延迟动画
+    document.querySelectorAll('.service-box').forEach((box, index) => {
+      box.classList.add('animate-on-scroll', `delay-${(index % 3) + 1}`);
+      observer.observe(box);
+    });
+
+    // 为解决方案卡片添加动画
+    document.querySelectorAll('.resolve-box').forEach((box, index) => {
+      box.classList.add('animate-on-scroll', `delay-${(index % 4) + 1}`);
+      observer.observe(box);
+    });
+
+    // 为新闻列表添加动画
+    document.querySelectorAll('.news-cont').forEach(cont => {
+      cont.classList.add('scale-on-scroll');
+      observer.observe(cont);
+    });
+  }
+
+  // 页面加载完成后初始化动画
+  setTimeout(initScrollAnimations, 100);
+
+  // ============================================
+  // 原有功能代码
+  // ============================================
+
   // 获取url地址栏参数函数
   function getUrlParams() {
     const url = window.location.href;
@@ -85,114 +136,114 @@ $(function () {
   }
   // 获取首页数据
   getCommentInfo();
-  var viewer = new Viewer(document.getElementById("viewer"), {
-    button: true,
-    inline: false,
-    zoomable: true,
-    title: true,
-    tooltip: true,
-    minZoomRatio: 0.5,
-    maxZoomRatio: 100,
-    movable: true,
-    interval: 2000,
-    navbar: true,
-    loading: true,
-  });
-
+  var viewer = new Viewer(document.getElementById("viewer"), {
+    button: true,
+    inline: false,
+    zoomable: true,
+    title: true,
+    tooltip: true,
+    minZoomRatio: 0.5,
+    maxZoomRatio: 100,
+    movable: true,
+    interval: 2000,
+    navbar: true,
+    loading: true,
+  });
+
   // 点击显示图片
   $(".cert-item,.practice-box,.brand-box").click(function () {
     // 设置图片
     $("#viewer").attr("src", $(this).find("img").attr("src"));
     viewer.show();
   });
-  function formateTimeFun(time) {
-    const date = new Date(time * 1000);
-    Y = date.getFullYear() + "-";
-    M =
-      (date.getMonth() + 1 < 10
-        ? "0" + (date.getMonth() + 1)
-        : date.getMonth() + 1) + "-";
-    D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-    return Y + M + D;
-  }
+  function formateTimeFun(time) {
+    const date = new Date(time * 1000);
+    Y = date.getFullYear() + "-";
+    M =
+      (date.getMonth() + 1 < 10
+        ? "0" + (date.getMonth() + 1)
+        : date.getMonth() + 1) + "-";
+    D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+    return Y + M + D;
+  }
   // 公告列表
-  function getAnnounceList() {
-    $.ajax({
-      url: "/console/v1/announcement",
-      method: "get",
-      data: {
-        page: 1,
-        limit: 5,
-      },
-      success: function (res) {
-        const announceList = res.data.list;
-        announceList.forEach((item, index) => {
-          $("#announceList").append(`      
-          <div class="news-item">
-          <div class="fboxRow Ycenter">
-            <div class="number">${index + 1}</div>
-            <a href="./announce-details.html?id=${item.id}">
-              <div class="title font-ell1">${item.title}</div>
-            </a>
-          </div>
-          <div class="time">${formateTimeFun(item.create_time)}</div>
-        </div>
-           `);
-        });
-      },
-    });
-  }
-  getAnnounceList();
-  // 新闻列表
-  function getNewsList() {
-    $.ajax({
-      url: "/console/v1/news",
-      method: "get",
-      data: {
-        page: 1,
-        limit: 5,
-      },
-      success: function (res) {
-        const announceList = res.data.list;
-        announceList.forEach((item, index) => {
-          $("#newsList").append(`      
-          <div class="news-item">
-          <div class="fboxRow Ycenter">
-            <div class="number">${index + 1}</div>
-            <a href="./news-details.html?id=${item.id}">
-              <div class="title font-ell1">${item.title}</div>
-            </a>
-          </div>
-          <div class="time">${formateTimeFun(item.create_time)}</div>
-        </div>
-           `);
-        });
-      },
-    });
-  }
-  getNewsList();
-
-  $("#myTabs a").click(function (e) {
-    e.preventDefault();
-    $(this).tab("show");
-  });
-  // 跳转函数
-  function goOtherPage(url) {
-    location.href = url;
-  }
-  $("#cloud-box").click(function () {
-    location.href = "cloud.html";
-  });
-  $("#domain-box").click(function () {
-    location.href = "domain.html";
-  });
-  $("#recomment-box").click(function () {
-    location.href = "/home.htm";
-  });
-  $("#logon-box").click(function () {
-    location.href = "/regist.htm";
-  });
-  $("#cps-box").click(function () {
-    location.href = "partner/cps.html";
-  });
-});
+  function getAnnounceList() {
+    $.ajax({
+      url: "/console/v1/announcement",
+      method: "get",
+      data: {
+        page: 1,
+        limit: 5,
+      },
+      success: function (res) {
+        const announceList = res.data.list;
+        announceList.forEach((item, index) => {
+          $("#announceList").append(`      
+          <div class="news-item">
+          <div class="fboxRow Ycenter">
+            <div class="number">${index + 1}</div>
+            <a href="./announce-details.html?id=${item.id}">
+              <div class="title font-ell1">${item.title}</div>
+            </a>
+          </div>
+          <div class="time">${formateTimeFun(item.create_time)}</div>
+        </div>
+           `);
+        });
+      },
+    });
+  }
+  getAnnounceList();
+  // 新闻列表
+  function getNewsList() {
+    $.ajax({
+      url: "/console/v1/news",
+      method: "get",
+      data: {
+        page: 1,
+        limit: 5,
+      },
+      success: function (res) {
+        const announceList = res.data.list;
+        announceList.forEach((item, index) => {
+          $("#newsList").append(`      
+          <div class="news-item">
+          <div class="fboxRow Ycenter">
+            <div class="number">${index + 1}</div>
+            <a href="./news-details.html?id=${item.id}">
+              <div class="title font-ell1">${item.title}</div>
+            </a>
+          </div>
+          <div class="time">${formateTimeFun(item.create_time)}</div>
+        </div>
+           `);
+        });
+      },
+    });
+  }
+  getNewsList();
+
+  $("#myTabs a").click(function (e) {
+    e.preventDefault();
+    $(this).tab("show");
+  });
+  // 跳转函数
+  function goOtherPage(url) {
+    location.href = url;
+  }
+  $("#cloud-box").click(function () {
+    location.href = "cloud.html";
+  });
+  $("#domain-box").click(function () {
+    location.href = "domain.html";
+  });
+  $("#recomment-box").click(function () {
+    location.href = "/home.htm";
+  });
+  $("#logon-box").click(function () {
+    location.href = "/regist.htm";
+  });
+  $("#cps-box").click(function () {
+    location.href = "partner/cps.html";
+  });
+});