diff --git a/css/index-mobile.css b/css/index-mobile.css
new file mode 100644
index 0000000..08816fd
--- /dev/null
+++ b/css/index-mobile.css
@@ -0,0 +1,4455 @@
+/* ============================================
+ 首页移动端专属样式
+ 此文件包含所有首页的移动端响应式调整
+ ============================================ */
+
+@media (max-width: 768px) {
+
+ /* 调整 banner 高度 - 移动端优化 */
+ .banner-cont .swiper-slide {
+ height: 200px !important;
+ /* 强制设置高度 */
+ padding-top: 0 !important;
+ /* 移除顶部内边距，让内容居中 */
+ margin-top: 0;
+
+ /* Mobile Background Optimization */
+ /* Center the image and cover the area */
+ background-position: center bottom !important;
+ background-size: cover !important;
+ /* Force no repeat */
+ background-repeat: no-repeat !important;
+ }
+
+ /* Ensure banner container connects seamlessly - FORCE REMOVE ALL PADDING */
+ .banner-cont {
+ margin-top: 0 !important;
+ padding: 0 !important;
+ /* Override desktop padding: 25px 0 */
+ height: 200px !important;
+ /* 移动端固定高度 */
+ }
+
+ /* 移动端遮罩层更轻 */
+ .banner-cont .swiper-slide::before {
+ background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(224, 242, 254, 0.9) 100%);
+ }
+
+ /* 移动端文字内容居中对齐 - 覆盖桌面端绝对定位 */
+ .banner-cont .swiper-slide .section-content {
+ position: relative !important;
+ /* 覆盖桌面端的 absolute */
+ top: auto !important;
+ left: auto !important;
+ transform: none !important;
+ /* 移除桌面端的 transform */
+ text-align: center;
+ padding: 0 20px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ /* 移动端标题样式 - 白色，增大字号 */
+ .banner-cont .swiper-slide h1 {
+ font-size: 42px;
+ /* Increased from 36px */
+ line-height: 1.1;
+ margin-bottom: 10px;
+ color: #ffffff !important;
+ /* White text */
+ background: none !important;
+ -webkit-text-fill-color: #ffffff !important;
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+ filter: none;
+ }
+
+ /* 移动端标签居中 */
+ .banner-tags {
+ justify-content: center;
+ margin-bottom: 24px;
+ }
+
+ .banner-tag-pill {
+ font-size: 14px;
+ /* Increased from 13px */
+ padding: 7px 18px;
+ /* Larger touch target */
+ color: #ffffff !important;
+ /* White text */
+ }
+
+ /* 移动端描述文字 - 白色，增大字号 */
+ .banner-cont .banner-desc {
+ font-size: 18px;
+ /* Increased from 17px */
+ line-height: 1.4;
+ color: #ffffff !important;
+ /* White text */
+ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+ /* Ensure readability */
+ margin-top: 0;
+ margin-bottom: 20px;
+ max-width: 95%;
+ }
+
+ /* 移动端按钮样式 - 进一步增大 */
+ .banner-cont .btn2 {
+ font-size: 20px;
+ /* Increased from 18px */
+ padding: 12px 40px;
+ /* Adjusted for smaller height */
+ border-radius: 50px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ }
+
+ /* 移动端分页器位置调整 */
+ .banner-cont .swiper-pagination {
+ bottom: 20px !important;
+ }
+
+ .banner-cont .swiper-pagination-bullet {
+ width: 40px !important;
+ height: 4px !important;
+ }
+}
+
+/* Banner下方快速入口卡片 - 独立毛玻璃卡片设计 */
+.banner .banner-s {
+ margin-top: -80px;
+ position: relative;
+ z-index: 10;
+ padding: 20px 0;
+ /* 移除整体背景，让卡片独立显示 */
+ background: transparent;
+}
+
+/* 移动端调整 banner-s 位置，避免遮挡 */
+@media (max-width: 768px) {
+ .banner .banner-s {
+ margin-top: 0 !important;
+ /* 移除负边距 */
+ padding-top: 20px;
+ }
+}
+
+.banner .banner-s .banner-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+ padding: 0 20px;
+}
+
+/* 独立毛玻璃卡片样式 */
+.banner-s .banner-list .banner-item {
+ flex: 0 1 calc(25% - 20px);
+ min-width: 260px;
+ max-width: 320px;
+ cursor: pointer;
+ padding: 24px 28px;
+ position: relative;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+
+ /* 毛玻璃效果 */
+ background: rgba(15, 23, 42, 0.6);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+
+ /* 边框和圆角 */
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 0;
+
+ /* 阴影效果 */
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+ /* 内部发光 */
+ overflow: hidden;
+}
+
+/* banner-item 图标样式 */
+.banner-s .banner-list .banner-item .banner-item-icon {
+ width: 48px;
+ height: 48px;
+ flex-shrink: 0;
+ object-fit: contain;
+ transition: all 0.4s ease;
+ filter: brightness(1.1);
+}
+
+.banner-s .banner-list .banner-item:hover .banner-item-icon {
+ transform: scale(1.05);
+ filter: brightness(1.2);
+}
+
+/* banner-item 文字内容区域 */
+.banner-s .banner-list .banner-item-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+/* 卡片光晕装饰 */
+.banner-s .banner-list .banner-item::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle at center,
+ rgba(56, 189, 248, 0.15) 0%,
+ transparent 50%);
+ opacity: 0;
+ transition: opacity 0.5s ease;
+ pointer-events: none;
+}
+
+/* 悬浮效果 */
+.banner-s .banner-list .banner-item:hover {
+ transform: translateY(-8px);
+ border-color: rgba(56, 189, 248, 0.3);
+ background: rgba(15, 23, 42, 0.75);
+ box-shadow:
+ 0 12px 40px rgba(15, 23, 42, 0.6),
+ inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.banner-s .banner-list .banner-item:hover::before {
+ opacity: 0;
+}
+
+.banner-s .banner-list .banner-item:hover h5 {
+ color: #38BDF8;
+ transform: translateX(3px);
+}
+
+/* 移除分隔线 */
+.banner-s .banner-list .banner-item::after {
+ display: none;
+}
+
+/* ============================================
+ 移动端 Banner-List 卡片优化
+ ============================================ */
+
+@media (max-width: 768px) {
+
+ /* 调整 banner-s 区域 */
+ .banner .banner-s {
+ margin-top: -60px;
+ padding: 16px 0 24px;
+ }
+
+ .banner .banner-s .banner-list {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+ padding: 0 16px;
+ }
+
+ /* 移动端卡片样式 - 轻量白色主题，增加内边距 */
+ .banner-s .banner-list .banner-item {
+ flex: none;
+ min-width: auto;
+ max-width: none;
+ padding: 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+
+ /* 轻量背景 */
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+
+ /* 轻量边框和圆角 */
+ border: 1px solid rgba(226, 232, 240, 0.8);
+ border-radius: 12px;
+
+ /* 轻量阴影 */
+ box-shadow:
+ 0 2px 8px rgba(15, 23, 42, 0.08),
+ inset 0 1px 0 rgba(255, 255, 255, 0.9);
+ }
+
+ /* 移动端卡片图标 */
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 44px;
+ height: 44px;
+ }
+
+ /* 移动端卡片悬停效果 */
+ .banner-s .banner-list .banner-item:hover {
+ transform: translateY(-3px);
+ border-color: rgba(56, 189, 248, 0.3);
+ background: rgba(255, 255, 255, 1);
+ box-shadow:
+ 0 4px 16px rgba(15, 23, 42, 0.12),
+ inset 0 1px 0 rgba(255, 255, 255, 1);
+ }
+
+ /* 移动端标题文字 - 深色，增大字号 */
+ .banner .banner-s .banner-list .banner-item h5 {
+ color: #0f172a;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 1.3;
+ }
+
+ .banner .banner-s .banner-list .banner-item h5 .highlight {
+ color: #0ea5e9;
+ }
+
+ .banner .banner-s .banner-list .banner-item:hover h5 {
+ color: #0ea5e9;
+ }
+
+ /* 移动端描述文字 - 深色，增大字号 */
+ .banner .banner-s .banner-list .banner-item .title-desc {
+ color: #64748b;
+ font-size: 13px;
+ line-height: 1.5;
+ }
+
+ /* 移动端光晕效果调整 */
+ .banner-s .banner-list .banner-item::before {
+ display: none;
+ }
+}
+
+/* ============================================
+ 热销产品展示区域 - 卡片式布局
+ ============================================ */
+
+.hot-products {
+ margin-top: -100px;
+ padding: 40px 0;
+ background:
+ radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
+ rgba(15, 23, 42, 0.6);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ border-top: none;
+ border-radius: 0 0 16px 16px;
+ backdrop-filter: blur(10px);
+ position: relative;
+ z-index: 1;
+}
+
+.hot-products-title {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.hot-products-title h3 {
+ font-size: 28px;
+ font-weight: 600;
+ color: #F9FAFB;
+ margin-bottom: 10px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.hot-products-title .subtitle {
+ font-size: 14px;
+ color: rgba(203, 213, 225, 0.8);
+}
+
+/* 产品网格容器 - 移动优先 */
+.products-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 16px;
+ padding: 0 20px;
+}
+
+/* 平板及以上：2列 */
+@media (min-width: 768px) {
+ .products-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ }
+}
+
+/* 桌面端：3列 */
+@media (min-width: 1200px) {
+ .products-grid {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px;
+ }
+}
+
+/* 超大屏幕：4列 */
+@media (min-width: 1600px) {
+ .products-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+/* 产品卡片 - 适配深色主题的玻璃态设计 */
+.product-card {
+ background: rgba(30, 41, 59, 0.7);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 12px;
+ padding: 20px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ box-shadow:
+ 0 4px 16px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* 隐藏移动端的查看更多按钮 */
+.products-more-btn-wrapper {
+ display: none;
+}
+
+.product-card:hover {
+ transform: translateY(-4px);
+ border-color: rgba(56, 189, 248, 0.4);
+ background: rgba(30, 41, 59, 0.85);
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.6),
+ 0 0 20px rgba(56, 189, 248, 0.15),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* 卡片头部 */
+.product-card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 12px;
+ margin-bottom: 4px;
+}
+
+.product-name {
+ font-size: 18px;
+ font-weight: 600;
+ color: #F9FAFB;
+ margin: 0;
+ flex: 1;
+ line-height: 1.3;
+}
+
+/* 产品徽章容器 */
+.product-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ align-items: flex-start;
+ justify-content: flex-end;
+}
+
+/* 产品徽章 */
+.product-badge {
+ display: inline-block;
+ padding: 3px 8px;
+ font-size: 11px;
+ font-weight: 500;
+ border-radius: 4px;
+ white-space: nowrap;
+ line-height: 1.2;
+}
+
+.badge-hot {
+ background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
+ color: #FFFFFF;
+}
+
+.badge-recommend {
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ color: #FFFFFF;
+}
+
+.badge-promo {
+ background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+ color: #FFFFFF;
+}
+
+/* 产品描述 */
+.product-desc {
+ font-size: 13px;
+ color: rgba(203, 213, 225, 0.85);
+ line-height: 1.6;
+ margin: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ min-height: 38px;
+}
+
+/* 产品规格 */
+.product-specs {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: rgba(148, 163, 184, 0.9);
+ padding: 8px 0;
+ border-top: 1px solid rgba(148, 163, 184, 0.1);
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.spec-item {
+ white-space: nowrap;
+}
+
+.spec-divider {
+ color: rgba(148, 163, 184, 0.4);
+ user-select: none;
+}
+
+/* 产品价格区域 */
+.product-pricing {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ margin: 8px 0;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.price-main {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+}
+
+.price-currency {
+ font-size: 18px;
+ font-weight: 600;
+ color: #EF4444;
+}
+
+.price-value {
+ font-size: 32px;
+ font-weight: 700;
+ color: #EF4444;
+ line-height: 1;
+}
+
+.price-original {
+ font-size: 13px;
+ color: rgba(148, 163, 184, 0.7);
+ text-decoration: line-through;
+ margin-left: 4px;
+}
+
+.price-limit {
+ font-size: 12px;
+ color: rgba(203, 213, 225, 0.7);
+ white-space: nowrap;
+}
+
+/* 购买按钮 */
+.product-buy-btn {
+ display: block;
+ width: 100%;
+ padding: 12px 24px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #FFFFFF;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border: none;
+ border-radius: 8px;
+ text-align: center;
+ text-decoration: none;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-top: 8px;
+ box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
+}
+
+.product-buy-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
+ background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%);
+}
+
+.product-buy-btn:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
+}
+
+/* 移动端优化 */
+@media (max-width: 767px) {
+ .hot-products {
+ padding: 30px 0;
+ }
+
+ .hot-products-title h3 {
+ font-size: 24px;
+ }
+
+ .hot-products-title .subtitle {
+ font-size: 13px;
+ }
+
+ .product-card {
+ padding: 16px;
+ }
+
+ .product-name {
+ font-size: 16px;
+ }
+
+ .price-value {
+ font-size: 28px;
+ }
+
+ .price-currency {
+ font-size: 16px;
+ }
+
+ .product-buy-btn {
+ padding: 10px 20px;
+ font-size: 13px;
+ }
+}
+
+.banner .banner-s .banner-list .banner-item h5 {
+ color: #F9FAFB;
+ font-size: 20px;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ margin-bottom: 0;
+}
+
+/* banner-item 标题中的重点色 */
+.banner .banner-s .banner-list .banner-item h5 .highlight {
+ color: #38BDF8;
+ font-weight: 700;
+}
+
+.banner .banner-s .banner-list .banner-item .title-desc {
+ color: rgba(203, 213, 225, 0.8);
+ font-size: 13px;
+ line-height: 1.6;
+}
+
+
+/* 服务内容 */
+.service-content {
+ display: flex;
+ margin-top: 60px;
+ margin: -12px;
+ margin-top: 50px;
+}
+
+/* 服务模块整体背景：深色科技感基调 + 方格线 */
+.section.service {
+ background:
+ 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:
+ 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;
+ 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(203, 213, 225, 0.85);
+ font-size: 16px;
+}
+
+/* 服务卡片 - 3D悬浮效果 */
+.service .service-box {
+ min-height: 240px;
+ margin: 12px;
+ position: relative;
+ 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 {
+ 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;
+ 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: 18px 0;
+ height: 44px;
+ color: rgba(203, 213, 225, 0.8);
+ line-height: 1.6;
+}
+
+/* 服务标签组 */
+.service .service-tag-group {
+ display: flex;
+ 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: #0F172A url(../assets/img/index/home-bg.png) no-repeat center center;
+ background-size: cover;
+ position: relative;
+}
+
+/* 添加深色遮罩增强对比度 + 方格线 */
+.resolve::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background:
+ linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+ linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
+ background-size: 50px 50px, 50px 50px, 100% 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-new {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ margin-top: 60px;
+ flex-wrap: wrap;
+}
+
+/* 竖向长方形卡片 */
+.resolve-card {
+ width: 150px;
+ height: 500px;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.resolve-card a {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.resolve-card-inner {
+ width: 100%;
+ height: 100%;
+ background: rgba(15, 23, 42, 0.7);
+ backdrop-filter: blur(16px);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 80px;
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 卡片顶部图片 - 撑满宽度 */
+.resolve-card-inner::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 80px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 1;
+}
+
+/* 为不同卡片设置不同图标 */
+.resolve-card:nth-child(1) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(2) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(3) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(4) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(5) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(6) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(7) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+/* 卡片发光边框效果 */
+.resolve-card-inner::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ 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-card-title {
+ color: #F9FAFB;
+ font-size: 24px;
+ font-weight: 700;
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+ letter-spacing: 8px;
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 2;
+ position: relative;
+ margin-top: 140px;
+}
+
+/* 内容区域 - 默认隐藏 */
+.resolve-card-content {
+ position: absolute;
+ top: 80px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 32px 24px;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ z-index: 1;
+}
+
+.resolve-card-desc {
+ color: rgba(203, 213, 225, 0.9);
+ line-height: 1.8;
+ font-size: 14px;
+}
+
+.resolve-card-link {
+ color: rgba(148, 163, 184, 0.9);
+ font-size: 14px;
+ font-weight: 500;
+ display: inline-flex;
+ align-items: center;
+ transition: all 0.3s ease;
+ margin-top: 20px;
+}
+
+.resolve-card-link .icon-arrow-right {
+ margin-left: 5px;
+ transition: transform 0.3s ease;
+}
+
+/* 悬停效果 */
+.resolve-card:hover {
+ width: 320px;
+ z-index: 10;
+}
+
+.resolve-card:hover .resolve-card-inner {
+ background: rgba(15, 23, 42, 0.9);
+ 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);
+ border-radius: 16px;
+}
+
+.resolve-card:hover .resolve-card-inner::before {
+ opacity: 1;
+}
+
+/* 悬停时图片高度展开 */
+.resolve-card:hover .resolve-card-inner::after {
+ width: 100%;
+ height: 140px;
+}
+
+/* 悬停时标题变为横向并移到图片下方 */
+.resolve-card:hover .resolve-card-title {
+ writing-mode: horizontal-tb;
+ text-orientation: mixed;
+ letter-spacing: 2px;
+ position: absolute;
+ top: 160px;
+ left: 24px;
+ right: 24px;
+ margin-top: 0;
+ color: #38BDF8;
+ text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+ text-align: left;
+}
+
+/* 悬停时显示内容 */
+.resolve-card:hover .resolve-card-content {
+ opacity: 1;
+ transform: translateY(0);
+ top: 200px;
+}
+
+.resolve-card:hover .resolve-card-link {
+ color: #38BDF8;
+}
+
+.resolve-card:hover .resolve-card-link .icon-arrow-right {
+ transform: translateX(5px);
+}
+
+/* 解决方案卡片 - 错落悬浮效果 */
+.resolve-content .resolve-box {
+ position: relative;
+ top: 0;
+ max-width: 335px;
+ 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;
+ 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 {
+ 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: #38BDF8;
+ text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+}
+
+.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, #0F172A 0%, #020617 100%);
+ position: relative;
+}
+
+.practice::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: 40px 40px;
+ pointer-events: none;
+}
+
+.practice .section-title h2 {
+ color: #F9FAFB;
+ font-size: 40px;
+ font-weight: 700;
+}
+
+.practice .section-title .section-desc {
+ color: rgba(203, 213, 225, 0.85);
+ font-size: 16px;
+}
+
+.practice .practice-content {
+ margin: -12px;
+ margin-top: 50px;
+ flex-wrap: wrap;
+}
+
+/* 实践卡片优化 */
+.practice .practice-box {
+ margin: 12px;
+ padding: 36px;
+ width: 453px;
+ border-radius: 20px;
+ text-align: center;
+ 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: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 {
+ /* 统一为暗色科技风背景 */
+ background:
+ 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::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(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(203, 213, 225, 0.85);
+ font-size: 16px;
+}
+
+/* ============================================
+ 企业荣誉展示区域 - 精致卡片设计
+ ============================================ */
+
+.honor-section {
+ margin-top: 80px;
+ padding: 60px 0;
+ background: transparent;
+}
+
+.honor-title {
+ text-align: center;
+ margin-bottom: 50px;
+}
+
+.honor-title h3 {
+ font-size: 36px;
+ font-weight: 700;
+ color: #F9FAFB;
+ margin-bottom: 12px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.honor-subtitle {
+ font-size: 16px;
+ color: rgba(148, 163, 184, 0.9);
+ margin: 0;
+}
+
+/* 荣誉列表 - 横向卡片布局 */
+.honor-list {
+ display: flex;
+ justify-content: center;
+ gap: 30px;
+ flex-wrap: wrap;
+ padding: 0 20px;
+}
+
+/* 荣誉卡片 */
+.honor-item {
+ position: relative;
+ width: 280px;
+ padding: 40px 30px;
+ background:
+ radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
+ rgba(15, 23, 42, 0.7);
+ backdrop-filter: blur(16px);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ border-radius: 16px;
+ text-align: center;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ overflow: hidden;
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* 卡片光晕效果 */
+.honor-item::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
+ opacity: 0;
+ transition: opacity 0.5s ease;
+ pointer-events: none;
+}
+
+.honor-item:hover::before {
+ opacity: 1;
+}
+
+/* 荣誉图标容器 */
+.honor-icon {
+ width: 120px;
+ height: 120px;
+ margin: 0 auto 24px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background:
+ linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
+ border: 2px solid rgba(56, 189, 248, 0.2);
+ transition: all 0.4s ease;
+}
+
+.honor-icon::after {
+ content: '';
+ position: absolute;
+ inset: -2px;
+ border-radius: 50%;
+ padding: 2px;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ -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.4s ease;
+}
+
+.honor-item:hover .honor-icon::after {
+ opacity: 1;
+}
+
+.honor-icon img {
+ width: 80px;
+ height: 80px;
+ object-fit: contain;
+ transition: all 0.4s ease;
+ filter: brightness(1.1) drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3));
+}
+
+.honor-item:hover .honor-icon {
+ transform: scale(1.1) rotate(5deg);
+ background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
+}
+
+.honor-item:hover .honor-icon img {
+ transform: scale(1.1);
+ filter: brightness(1.2) drop-shadow(0 6px 20px rgba(56, 189, 248, 0.5));
+}
+
+/* 荣誉名称 */
+.honor-name {
+ font-size: 18px;
+ font-weight: 600;
+ color: #F9FAFB;
+ margin: 0;
+ line-height: 1.4;
+ transition: all 0.3s ease;
+}
+
+.honor-item:hover .honor-name {
+ color: #38BDF8;
+ transform: translateY(-2px);
+}
+
+/* 装饰性边角 */
+.honor-item::after {
+ content: '';
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 40px;
+ height: 40px;
+ background:
+ linear-gradient(to right, transparent 50%, rgba(56, 189, 248, 0.1) 50%),
+ linear-gradient(to bottom, transparent 50%, rgba(56, 189, 248, 0.1) 50%);
+ background-size: 100% 2px, 2px 100%;
+ background-position: 100% 0, 100% 0;
+ background-repeat: no-repeat;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.honor-item:hover::after {
+ opacity: 1;
+}
+
+/* 当荣誉数量为偶数时居中显示 */
+.honor-list:has(.honor-item:nth-child(2):last-child) {
+ justify-content: center;
+}
+
+/* 响应式 */
+@media (max-width: 991px) {
+ .honor-item {
+ width: 240px;
+ padding: 30px 20px;
+ }
+
+ .honor-icon {
+ width: 100px;
+ height: 100px;
+ }
+
+ .honor-icon img {
+ width: 70px;
+ height: 70px;
+ }
+}
+
+@media (max-width: 767px) {
+ .honor-section {
+ margin-top: 40px;
+ padding: 40px 0;
+ }
+
+ .honor-title h3 {
+ font-size: 28px;
+ }
+
+ .honor-list {
+ gap: 20px;
+ }
+
+ .honor-item {
+ width: 100%;
+ max-width: 300px;
+ }
+}
+
+/* 旧样式保留（兼容性） */
+.cert {
+ display: none;
+}
+
+.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:
+ 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:
+ 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: 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(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:
+ 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 {
+ position: relative;
+ padding-left: 14px;
+ font-size: 20px;
+ line-height: 24px;
+ height: 24px;
+ color: #F9FAFB;
+ font-weight: 600;
+}
+
+/* 标题左侧发光装饰条 */
+.news-content .news-head .news-title::before {
+ content: '';
+ width: 4px;
+ height: 24px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ 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.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:hover {
+ color: #38BDF8;
+}
+
+.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: 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: 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: 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: 12px;
+ display: flex;
+ align-items: center;
+ 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: rgba(226, 232, 240, 0.9);
+ transition: all 0.3s ease;
+}
+
+.news-content .news-item:hover .title {
+ color: #38BDF8;
+ padding-left: 5px;
+}
+
+.news-content .news-item .time {
+ 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: 64px;
+ }
+
+ /* 移除 section-content 的 max-width 限制，保持容器系统统一 */
+
+ .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: 52px;
+ }
+
+ .banner-cont .swiper-slide .section-content {
+ max-width: 600px;
+ }
+
+ .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: 44px;
+ }
+
+ /* 小屏幕下保持左对齐布局 */
+ .banner-cont .swiper-slide .section-content>* {
+ max-width: 500px;
+ }
+
+ /* 已废弃：背景图不需要宽度设置
+ .banner-cont .swiper-slide .img {
+ width: 50%;
+ }
+ */
+
+ .banner-s .banner-list {
+ gap: 16px;
+ padding: 0 16px;
+ }
+
+ .banner-s .banner-list .banner-item {
+ flex: 0 1 calc(50% - 16px);
+ padding: 28px 32px;
+ }
+
+ .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: 36px;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 15px;
+ }
+
+ /* 平板尺寸下，调整遮罩透明度，文字居中 */
+ .banner-cont .swiper-slide::before {
+ background: linear-gradient(rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%);
+ }
+
+ .banner-cont .swiper-slide .section-content {
+ text-align: center;
+ }
+
+ .banner-cont .swiper-slide .section-content>* {
+ max-width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .banner-tags {
+ justify-content: center;
+ }
+
+ .banner-s .banner-list {
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .banner-s .banner-list .banner-item {
+ flex: 1 1 100%;
+ width: 100%;
+ max-width: 100%;
+ padding: 24px 28px;
+ }
+
+ .banner-s .banner-list .banner-item:not(:last-child)::after {
+ display: none;
+ }
+
+ /* 热销产品表格在平板上开始使用横向滚动 */
+ .products-table-wrapper {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ .products-table {
+ min-width: 800px;
+ }
+
+ .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) {
+
+ /* ===== 导航栏 - 极简设计 ===== */
+ #index .nav-header {
+ padding: 0 8px;
+ height: 50px !important;
+ display: flex;
+ align-items: stretch;
+ overflow: hidden;
+ }
+
+ #index .nav-header .nav-left {
+ display: flex;
+ align-items: stretch;
+ flex: 1;
+ }
+
+ #index .nav-header .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ height: 100% !important;
+ flex-wrap: nowrap !important;
+ flex-shrink: 0;
+ min-height: 50px;
+ }
+
+ #index .nav-menu {
+ display: none;
+ /* 移动端隐藏主导航 */
+ }
+
+ #index .nav-header .nav-left .nav-icon {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+
+ #index .nav-header .nav-left .nav-icon img {
+ width: 100px;
+ height: 24px;
+ margin-right: 0;
+ }
+
+ #index .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ justify-content: flex-end;
+ gap: 6px;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 50px;
+ }
+
+ #index .nav-right .nav-text-link {
+ display: none;
+ }
+
+ #index .nav-right .nav-divider {
+ display: none;
+ }
+
+ /* 移动端隐藏登录按钮和分隔符，只显示注册按钮 */
+ #index .no-login {
+ display: flex !important;
+ gap: 0 !important;
+ align-items: stretch;
+ height: 100% !important;
+ order: 4;
+ }
+
+ #index .no-login.nav-desktop-link {
+ display: flex !important;
+ }
+
+ #index .no-login .nav-text-link,
+ #index .no-login .nav-divider {
+ display: none !important;
+ }
+
+ #index .no-login .btn.btn-normal#registBtn {
+ padding: 0 10px !important;
+ font-size: 10px !important;
+ min-width: auto !important;
+ height: 100% !important;
+ line-height: 1 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ margin: 0 !important;
+ border: none !important;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important;
+ flex-shrink: 0 !important;
+ box-sizing: border-box !important;
+ }
+
+ #index .no-login .btn.btn-normal#registBtn::before {
+ width: 12px !important;
+ height: 12px !important;
+ }
+
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ #index .mobile-menu-toggle {
+ display: flex !important;
+ gap: 0;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ justify-content: center;
+ align-items: center;
+ margin-right: 0;
+ order: 3;
+ padding: 0;
+ background: none;
+ border: none;
+ }
+
+ #index .mobile-menu-toggle .mobile-menu-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ /* ===== Banner 区域 - 大幅缩小 ===== */
+ .banner-cont .swiper-slide {
+ height: 100vh !important;
+ min-height: 350px;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 24px !important;
+ line-height: 1.3;
+ margin-bottom: 8px;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 12px !important;
+ margin-top: 10px !important;
+ margin-bottom: 20px !important;
+ line-height: 1.5;
+ max-height: 60px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ }
+
+ .banner-tag-pill {
+ padding: 3px 10px;
+ font-size: 10px;
+ }
+
+ .banner-cont .btn2 {
+ padding: 8px 20px !important;
+ font-size: 12px !important;
+ }
+
+ /* 调整进度条位置到底部 */
+ .banner-cont .swiper-pagination {
+ bottom: 12px !important;
+ }
+
+ .banner-cont .swiper-pagination-bullet {
+ width: 45px !important;
+ }
+
+ /* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */
+ .banner .banner-s {
+ margin-top: 12px;
+ padding: 10px 6px;
+ background: transparent;
+ }
+
+ /* 移动端 banner-list 网格布局 */
+ @media (max-width: 768px) {
+ .banner .banner-s .banner-list {
+ gap: 6px !important;
+ display: grid !important;
+ grid-template-columns: repeat(2, 1fr) !important;
+ width: 100% !important;
+ padding: 0 !important;
+ }
+ }
+
+ .banner-s .banner-list .banner-item {
+ padding: 10px 10px !important;
+ gap: 8px !important;
+ flex: none !important;
+ display: flex !important;
+ flex-direction: row !important;
+ align-items: center !important;
+ text-align: left !important;
+ min-height: 85px !important;
+ max-height: none !important;
+ justify-content: flex-start !important;
+ border-radius: 0 !important;
+ width: auto !important;
+ min-width: auto !important;
+ max-width: none !important;
+ background: rgba(15, 23, 42, 0.6) !important;
+ border: 1px solid rgba(148, 163, 184, 0.15) !important;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 30px;
+ height: 30px;
+ margin-bottom: 0;
+ margin-right: 8px;
+ flex-shrink: 0;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+ flex: 1;
+ min-width: 0;
+ }
+
+ .banner-s .banner-list .banner-item h5 {
+ font-size: 11px !important;
+ margin-bottom: 0 !important;
+ line-height: 1.3;
+ color: #E5E7EB;
+ }
+
+ .banner-s .banner-list .banner-item .title-desc {
+ font-size: 9px !important;
+ line-height: 1.3;
+ margin: 0 !important;
+ color: rgba(203, 213, 225, 0.8);
+ }
+
+ /* ===== 热销产品 - 精简卡片 ===== */
+ .hot-products {
+ margin-top: -50px;
+ padding: 20px 0 30px !important;
+ }
+
+ .hot-products-title {
+ margin-bottom: 20px;
+ }
+
+ .hot-products-title h3 {
+ font-size: 20px;
+ margin-bottom: 6px;
+ }
+
+ .hot-products-title .subtitle {
+ font-size: 11px;
+ }
+
+ .products-table-wrapper {
+ padding: 0 12px;
+ }
+
+ /* 表格转卡片 */
+ .products-table,
+ .products-table thead,
+ .products-table tbody,
+ .products-table tr,
+ .products-table td {
+ display: block;
+ }
+
+ .products-table thead {
+ display: none;
+ }
+
+ .products-table tbody tr {
+ margin-bottom: 12px;
+ padding: 14px;
+ border-radius: 8px;
+ }
+
+ .products-table tbody tr:hover {
+ transform: none;
+ }
+
+ .products-table tbody td {
+ padding: 8px 0 8px 90px;
+ font-size: 12px;
+ }
+
+ .products-table tbody td::before {
+ left: 14px;
+ font-size: 11px;
+ }
+
+ .products-table tbody td:nth-child(1)::before {
+ content: "产品";
+ }
+
+ .products-table .product-name {
+ font-size: 13px;
+ }
+
+ .products-table .product-tag {
+ font-size: 10px;
+ padding: 1px 6px;
+ }
+
+ .products-table .product-price {
+ font-size: 16px;
+ }
+
+ .products-table .product-price .unit {
+ font-size: 11px;
+ }
+
+ .products-table .btn-buy {
+ padding: 6px 16px;
+ font-size: 11px;
+ }
+
+ /* ===== Section 通用 - 紧凑间距 ===== */
+ .section {
+ padding: 30px 0 !important;
+ }
+
+ .section-content {
+ padding: 30px 12px !important;
+ }
+
+ .section-title {
+ margin-bottom: 20px;
+ }
+
+ .section-title h2 {
+ font-size: 22px;
+ margin-bottom: 8px;
+ }
+
+ .section-title .section-desc {
+ font-size: 12px;
+ line-height: 1.5;
+ }
+
+ .section-title h2::after {
+ width: 35px;
+ height: 2px;
+ bottom: -6px;
+ }
+
+ /* ===== 解决方案 - 竖向卡片列表 ===== */
+ .solution-wrapper {
+ margin-top: 20px;
+ }
+
+ /* 隐藏按钮导航，改用卡片模式 */
+ .solution-tabs {
+ display: none;
+ }
+
+ .solution-slider {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ min-height: auto;
+ }
+
+ /* 显示所有幻灯片作为普通卡片 */
+ .solution-slide {
+ display: block !important;
+ opacity: 1 !important;
+ }
+
+ .solution-content {
+ min-height: auto;
+ padding: 14px 12px !important;
+ gap: 12px;
+ flex-direction: column;
+ border-radius: 8px;
+ background: rgba(30, 41, 59, 0.6);
+ border: 1px solid rgba(148, 163, 184, 0.1);
+ }
+
+ .solution-content:hover {
+ background: rgba(30, 41, 59, 0.8);
+ border-color: rgba(56, 189, 248, 0.2);
+ }
+
+ .solution-text {
+ padding: 0;
+ }
+
+ .solution-text h3 {
+ font-size: 16px;
+ margin-bottom: 4px;
+ color: #E5E7EB;
+ }
+
+ .solution-subtitle {
+ font-size: 10px;
+ margin-bottom: 8px;
+ color: rgba(148, 163, 184, 0.8);
+ }
+
+ .solution-desc {
+ margin-bottom: 10px;
+ }
+
+ .solution-desc p {
+ font-size: 10px;
+ line-height: 1.5;
+ margin-bottom: 4px;
+ color: rgba(203, 213, 225, 0.8);
+ display: block;
+ }
+
+ .solution-desc p:nth-child(n+2) {
+ display: none;
+ /* 小屏只显示第1段 */
+ }
+
+ .solution-link {
+ padding: 6px 16px;
+ font-size: 10px;
+ align-self: flex-start;
+ }
+
+ .solution-image {
+ width: 100%;
+ height: 120px;
+ object-fit: cover;
+ border-radius: 4px;
+ order: -1;
+ /* 图片移到上方 */
+ }
+
+ /* ===== 基础设施 - 简化显示 ===== */
+ .section-base {
+ padding: 25px 0 !important;
+ }
+
+ .base .base-content {
+ margin-top: 20px;
+ margin-bottom: 30px;
+ }
+
+ .base .base-content .fboxRow {
+ margin-bottom: 12px;
+ }
+
+ .base .base-content h2 {
+ font-size: 32px;
+ }
+
+ .base .base-content .title-desc {
+ font-size: 11px;
+ }
+
+ .section-base .base {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .section-base .base img {
+ width: 90%;
+ max-width: 400px;
+ height: auto;
+ margin: 20px auto 0;
+ padding: 0;
+ }
+
+ /* ===== 荣誉展示 - 紧凑布局 ===== */
+ .honor-section {
+ margin-top: 30px;
+ padding: 25px 0;
+ }
+
+ .honor-title {
+ margin-bottom: 20px;
+ }
+
+ .honor-title h3 {
+ font-size: 20px;
+ margin-bottom: 6px;
+ }
+
+ .honor-subtitle {
+ font-size: 11px;
+ }
+
+ .honor-list {
+ gap: 12px;
+ padding: 0 12px;
+ }
+
+ .honor-item {
+ width: calc(50% - 6px);
+ /* 改为2列布局 */
+ padding: 20px 16px;
+ }
+
+ .honor-icon {
+ width: 80px;
+ height: 80px;
+ margin-bottom: 12px;
+ }
+
+ .honor-icon img {
+ width: 50px;
+ height: 50px;
+ }
+
+ .honor-name {
+ font-size: 13px;
+ }
+
+ /* ===== 新闻区域 - 紧凑 ===== */
+ .section.news {
+ padding: 25px 0 !important;
+ }
+
+ .news-content {
+ margin-top: 20px;
+ gap: 20px;
+ }
+
+ .news-content .news-cont {
+ padding: 16px;
+ }
+
+ .news-content .news-head {
+ margin-bottom: 12px;
+ }
+
+ .news-content .news-head .news-title {
+ font-size: 16px;
+ height: auto;
+ line-height: 1.4;
+ }
+
+ .news-content .news-head .news-title::before {
+ height: 18px;
+ }
+
+ .news-content .news-head .news-more {
+ font-size: 11px;
+ }
+
+ .news-content .news-item {
+ line-height: 36px;
+ padding: 0 4px;
+ }
+
+ .news-content .news-item .number {
+ min-width: 18px;
+ height: 18px;
+ font-size: 11px;
+ margin-right: 8px;
+ }
+
+ .news-content .news-item .title {
+ font-size: 12px;
+ }
+
+ .news-content .news-item .time {
+ font-size: 10px;
+ min-width: 70px;
+ }
+}
+
+/* 小手机 最大575px */
+@media (max-width: 575px) {
+
+ /* ===== 导航栏 - 超紧凑 ===== */
+ #index .nav-header {
+ padding: 0 10px;
+ height: 48px !important;
+ display: flex;
+ align-items: stretch;
+ overflow: hidden;
+ }
+
+ #index .nav-header .nav-left {
+ display: flex;
+ align-items: stretch;
+ flex: 1;
+ }
+
+ #index .nav-header .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 48px;
+ }
+
+ #index .nav-header .nav-left .nav-icon {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+
+ #index .nav-header .nav-left .nav-icon img {
+ width: 90px;
+ height: 22px;
+ }
+
+ #index .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ justify-content: flex-end;
+ gap: 4px;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 48px;
+ }
+
+ #index .nav-right .nav-text-link {
+ display: none;
+ }
+
+ #index .nav-right .nav-divider {
+ display: none;
+ }
+
+ /* 移动端隐藏登录按钮和分隔符，只显示注册按钮 */
+ #index .no-login {
+ display: flex !important;
+ gap: 0 !important;
+ align-items: stretch;
+ height: 100% !important;
+ order: 4;
+ }
+
+ #index .no-login.nav-desktop-link {
+ display: flex !important;
+ }
+
+ #index .no-login .nav-text-link,
+ #index .no-login .nav-divider {
+ display: none !important;
+ }
+
+ /* 调整移动端注册按钮样式 - 长方形无圆角，撑满导航栏高度 */
+ #index .no-login .btn.btn-normal#registBtn {
+ padding: 0 25px !important;
+ font-size: 12px !important;
+ min-width: auto !important;
+ height: 100% !important;
+ line-height: 1 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ margin: 0 !important;
+ border: none !important;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important;
+ flex-shrink: 0 !important;
+ box-sizing: border-box !important;
+ gap: 2px !important;
+ }
+
+ /* 移动端注册按钮图标显示 */
+ #index .no-login .btn.btn-normal#registBtn .regist-icon {
+ display: block;
+ width: 15px;
+ height: 15px;
+ margin-right: 0 !important;
+ }
+
+ /* 移动端注册按钮图标隐藏 - 旧样式移除 */
+ #index .no-login .btn.btn-normal#registBtn::before {
+ display: none;
+ }
+
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ #index .mobile-menu-toggle {
+ display: flex !important;
+ gap: 0;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ justify-content: center;
+ align-items: center;
+ margin-right: 0;
+ order: 3;
+ padding: 0;
+ background: none;
+ border: none;
+ }
+
+ #index .mobile-menu-toggle .mobile-menu-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ /* ===== Banner ===== */
+ .banner-cont .swiper-slide {
+ height: 100vh !important;
+ min-height: 200px;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 20px !important;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 11px !important;
+ margin-top: 8px !important;
+ margin-bottom: 16px !important;
+ -webkit-line-clamp: 2;
+ }
+
+ .banner-tag-pill {
+ font-size: 9px;
+ padding: 2px 8px;
+ }
+
+ .banner-cont .btn2 {
+ padding: 6px 16px !important;
+ font-size: 11px !important;
+ }
+
+ /* 调整进度条位置到底部 */
+ .banner-cont .swiper-pagination {
+ bottom: 12px !important;
+ }
+
+ .banner-cont .swiper-pagination-bullet {
+ width: 40px !important;
+ }
+
+ /* ===== 快速入口 - 精简 ===== */
+ .banner .banner-s {
+ margin-top: 10px;
+ padding: 10px 6px;
+ }
+
+ .banner-s .banner-list .banner-item {
+ padding: 10px 12px !important;
+ min-height: 85px !important;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 30px;
+ height: 30px;
+ }
+
+ .banner-s .banner-list .banner-item h5 {
+ font-size: 11px !important;
+ }
+
+ .banner-s .banner-list .banner-item .title-desc {
+ font-size: 9px !important;
+ }
+
+ /* ===== 热销产品 - 紧凑 ===== */
+ .hot-products {
+ margin-top: -40px;
+ padding: 16px 0 25px !important;
+ }
+
+ .hot-products-title h3 {
+ font-size: 18px;
+ }
+
+ .hot-products-title .subtitle {
+ font-size: 10px;
+ }
+
+ .products-table-wrapper {
+ padding: 0 10px;
+ }
+
+ .products-table tbody tr {
+ margin-bottom: 10px;
+ padding: 12px;
+ }
+
+ .products-table tbody td {
+ padding: 6px 0 6px 75px;
+ font-size: 11px;
+ }
+
+ .products-table tbody td::before {
+ left: 12px;
+ font-size: 10px;
+ }
+
+ .products-table .product-name {
+ font-size: 12px;
+ }
+
+ .products-table .product-price {
+ font-size: 15px;
+ }
+
+ .products-table .btn-buy {
+ padding: 5px 14px;
+ font-size: 10px;
+ }
+
+ /* ===== Section - 极简间距 ===== */
+ .section {
+ padding: 25px 0 !important;
+ }
+
+ .section-content {
+ padding: 25px 10px !important;
+ }
+
+ .section-title h2 {
+ font-size: 19px;
+ }
+
+ .section-title .section-desc {
+ font-size: 11px;
+ }
+
+ .section-title h2::after {
+ width: 30px;
+ }
+
+ /* ===== 解决方案 - 最小化 ===== */
+ .solution-wrapper {
+ margin-top: 16px;
+ }
+
+ .solution-tabs {
+ gap: 5px;
+ flex-wrap: wrap;
+ }
+
+ .solution-tab {
+ padding: 5px 10px;
+ font-size: 10px;
+ flex: 0 1 auto;
+ }
+
+ .solution-content {
+ padding: 14px !important;
+ gap: 16px;
+ }
+
+ .solution-text h3 {
+ font-size: 16px;
+ }
+
+ .solution-subtitle {
+ font-size: 10px;
+ }
+
+ .solution-desc p {
+ font-size: 10px;
+ -webkit-line-clamp: 1;
+ /* 小屏只显示1行 */
+ }
+
+ .solution-link {
+ padding: 7px 16px;
+ font-size: 10px;
+ }
+
+ .solution-image {
+ height: 150px;
+ }
+
+ /* ===== 基础设施 - 极简 ===== */
+ .section-base {
+ padding: 20px 0 !important;
+ }
+
+ .base .base-content {
+ margin-top: 16px;
+ margin-bottom: 25px;
+ }
+
+ .base .base-content .fboxRow {
+ margin-bottom: 10px;
+ }
+
+ .base .base-content h2 {
+ font-size: 28px;
+ }
+
+ .base .base-content .title-desc {
+ font-size: 10px;
+ }
+
+ .section-base .base img {
+ width: 100%;
+ max-width: 350px;
+ margin: 16px auto 0;
+ }
+
+ /* ===== 荣誉 - 简化 ===== */
+ .honor-section {
+ margin-top: 25px;
+ padding: 20px 0;
+ }
+
+ .honor-title h3 {
+ font-size: 18px;
+ }
+
+ .honor-list {
+ gap: 10px;
+ }
+
+ .honor-item {
+ padding: 16px 12px;
+ }
+
+ .honor-icon {
+ width: 70px;
+ height: 70px;
+ margin-bottom: 10px;
+ }
+
+ .honor-icon img {
+ width: 45px;
+ height: 45px;
+ }
+
+ .honor-name {
+ font-size: 12px;
+ }
+
+ /* ===== 新闻 - 紧凑 ===== */
+ .section.news {
+ padding: 20px 0 !important;
+ }
+
+ .news-content {
+ margin-top: 16px;
+ gap: 16px;
+ }
+
+ .news-content .news-cont {
+ padding: 14px;
+ }
+
+ .news-content .news-head .news-title {
+ font-size: 15px;
+ }
+
+ .news-content .news-head .news-more {
+ font-size: 10px;
+ }
+
+ .news-content .news-item {
+ line-height: 32px;
+ }
+
+ .news-content .news-item .number {
+ min-width: 16px;
+ height: 16px;
+ font-size: 10px;
+ margin-right: 6px;
+ }
+
+ .news-content .news-item .title {
+ font-size: 11px;
+ }
+
+ .news-content .news-item .time {
+ font-size: 9px;
+ min-width: 65px;
+ }
+}
+
+/* 小屏手机优化（480px） */
+@media (max-width: 480px) and (min-width: 361px) {
+
+ /* ===== 导航栏 ===== */
+ #index .nav-header {
+ height: 46px !important;
+ }
+
+ #index .nav-header .nav-left .nav-icon img {
+ width: 75px;
+ height: 17px;
+ }
+
+ #index .nav-right .nav-text-link {
+ font-size: 10px;
+ padding: 0 5px;
+ }
+
+ /* ===== Banner ===== */
+ .banner-cont .swiper-slide {
+ height: 220px !important;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 18px !important;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 11px !important;
+ -webkit-line-clamp: 1;
+ }
+
+ /* ===== 快速入口 - 四宫格中等版 ===== */
+ .banner .banner-s {
+ margin-top: 16px;
+ padding: 8px 8px;
+ }
+
+ .banner .banner-s .banner-list {
+ gap: 6px !important;
+ display: grid !important;
+ grid-template-columns: repeat(2, 1fr) !important;
+ width: 100% !important;
+ padding: 0 !important;
+ }
+
+ .banner-s .banner-list .banner-item {
+ padding: 8px 10px !important;
+ flex: none !important;
+ display: flex !important;
+ flex-direction: row !important;
+ align-items: center !important;
+ text-align: left !important;
+ min-height: 70px !important;
+ justify-content: flex-start !important;
+ border-radius: 0 !important;
+ width: auto !important;
+ min-width: auto !important;
+ max-width: none !important;
+ background: rgba(15, 23, 42, 0.6) !important;
+ border: 1px solid rgba(148, 163, 184, 0.15) !important;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 28px;
+ height: 28px;
+ margin-bottom: 0;
+ margin-right: 8px;
+ flex-shrink: 0;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+ flex: 1;
+ min-width: 0;
+ }
+
+ .banner-s .banner-list .banner-item h5 {
+ font-size: 11px !important;
+ margin-bottom: 0 !important;
+ line-height: 1.2;
+ color: #E5E7EB;
+ }
+
+ .banner-s .banner-list .banner-item .title-desc {
+ font-size: 9px !important;
+ line-height: 1.2;
+ margin: 0 !important;
+ color: rgba(203, 213, 225, 0.8);
+ }
+
+ /* ===== 解决方案 ===== */
+ .solution-content {
+ padding: 12px 10px !important;
+ }
+
+ .solution-text h3 {
+ font-size: 15px;
+ }
+
+ .solution-image {
+ height: 110px;
+ }
+}
+
+/* 超小屏适配（320px） */
+@media (max-width: 360px) {
+
+ /* ===== 导航栏 - 极限压缩 ===== */
+ #index .nav-header {
+ padding: 0 8px;
+ height: 44px !important;
+ display: flex;
+ align-items: stretch;
+ overflow: hidden;
+ }
+
+ #index .nav-header .nav-left {
+ display: flex;
+ align-items: stretch;
+ flex: 1;
+ }
+
+ #index .nav-header .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 44px;
+ }
+
+ #index .nav-header .nav-left .nav-icon {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+
+ #index .nav-header .nav-left .nav-icon img {
+ width: 80px;
+ height: 20px;
+ }
+
+ #index .nav-right .nav-text-link {
+ display: none;
+ }
+
+ #index .nav-right .nav-divider {
+ display: none;
+ }
+
+ #index .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ justify-content: flex-end;
+ gap: 4px;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 44px;
+ }
+
+ /* 移动端隐藏登录按钮和分隔符，只显示注册按钮 */
+ #index .no-login {
+ display: flex !important;
+ gap: 0 !important;
+ align-items: stretch;
+ height: 100% !important;
+ order: 4;
+ }
+
+ #index .no-login.nav-desktop-link {
+ display: flex !important;
+ }
+
+ #index .no-login .nav-text-link,
+ #index .no-login .nav-divider {
+ display: none !important;
+ }
+
+ /* 调整移动端注册按钮样式 - 长方形无圆角，撑满导航栏高度 */
+ #index .no-login .btn.btn-normal#registBtn {
+ padding: 0 35px !important;
+ font-size: 9px !important;
+ min-width: auto !important;
+ height: 100% !important;
+ line-height: 1 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ margin: 0 !important;
+ border: none !important;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important;
+ flex-shrink: 0 !important;
+ box-sizing: border-box !important;
+ gap: 2px !important;
+ }
+
+ /* 移动端注册按钮图标显示 */
+ #index .no-login .btn.btn-normal#registBtn .regist-icon {
+ display: block;
+ width: 10px;
+ height: 10px;
+ margin-right: 0 !important;
+ }
+
+ /* 移动端注册按钮图标隐藏 - 旧样式移除 */
+ #index .no-login .btn.btn-normal#registBtn::before {
+ display: none;
+ }
+
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ #index .mobile-menu-toggle {
+ display: flex !important;
+ gap: 0;
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ justify-content: center;
+ align-items: center;
+ margin-right: 0;
+ order: 3;
+ padding: 0;
+ background: none;
+ border: none;
+ }
+
+ #index .mobile-menu-toggle .mobile-menu-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ /* ===== Banner - 极简 ===== */
+ .banner-cont .swiper-slide {
+ height: 100vh !important;
+ min-height: 300px;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 16px !important;
+ line-height: 1.2;
+ margin-bottom: 6px;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 10px !important;
+ margin-top: 6px !important;
+ margin-bottom: 12px !important;
+ -webkit-line-clamp: 1;
+ max-height: 20px;
+ }
+
+ .banner-tag-pill {
+ font-size: 8px;
+ padding: 2px 6px;
+ }
+
+ .banner-cont .btn2 {
+ padding: 5px 14px !important;
+ font-size: 10px !important;
+ }
+
+ .banner-cont .swiper-pagination {
+ bottom: 12px !important;
+ }
+
+ /* ===== 快速入口 - 四宫格极简版 ===== */
+ .banner .banner-s {
+ margin-top: 12px;
+ padding: 8px 6px;
+ }
+
+ .banner .banner-s .banner-list {
+ gap: 6px !important;
+ padding: 0 !important;
+ display: grid !important;
+ grid-template-columns: repeat(2, 1fr) !important;
+ width: 100% !important;
+ }
+
+ .banner-s .banner-list .banner-item {
+ padding: 10px 12px !important;
+ gap: 6px !important;
+ flex: none !important;
+ display: flex !important;
+ flex-direction: row !important;
+ align-items: center !important;
+ text-align: left !important;
+ min-height: 75px !important;
+ justify-content: flex-start !important;
+ border-radius: 0 !important;
+ width: auto !important;
+ min-width: auto !important;
+ max-width: none !important;
+ background: rgba(15, 23, 42, 0.6) !important;
+ border: 1px solid rgba(148, 163, 184, 0.15) !important;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 28px;
+ height: 28px;
+ margin-bottom: 0;
+ margin-right: 8px;
+ flex-shrink: 0;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+ flex: 1;
+ min-width: 0;
+ }
+
+ .banner-s .banner-list .banner-item h5 {
+ font-size: 11px !important;
+ margin-bottom: 0 !important;
+ line-height: 1.2;
+ color: #E5E7EB;
+ }
+
+ .banner-s .banner-list .banner-item .title-desc {
+ font-size: 9px !important;
+ line-height: 1.2;
+ margin: 0 !important;
+ color: rgba(203, 213, 225, 0.8);
+ }
+
+ /* ===== 热销产品 - 紧凑 ===== */
+ .hot-products {
+ margin-top: -20px;
+ padding: 14px 0 20px !important;
+ }
+
+ .hot-products-title h3 {
+ font-size: 16px;
+ margin-bottom: 4px;
+ }
+
+ .hot-products-title .subtitle {
+ font-size: 9px;
+ }
+
+ .products-table-wrapper {
+ padding: 0 8px;
+ }
+
+ .products-table tbody tr {
+ margin-bottom: 8px;
+ padding: 10px;
+ }
+
+ .products-table tbody td {
+ padding: 5px 0 5px 65px;
+ font-size: 10px;
+ }
+
+ .products-table tbody td::before {
+ left: 10px;
+ font-size: 9px;
+ }
+
+ .products-table .product-name {
+ font-size: 11px;
+ }
+
+ .products-table .product-tag {
+ font-size: 8px;
+ padding: 0 4px;
+ }
+
+ .products-table .product-price {
+ font-size: 14px;
+ }
+
+ .products-table .product-price .unit {
+ font-size: 9px;
+ }
+
+ .products-table .btn-buy {
+ padding: 4px 12px;
+ font-size: 9px;
+ }
+
+ /* ===== Section 通用 - 极致压缩 ===== */
+ .section {
+ padding: 20px 0 !important;
+ }
+
+ .section-content {
+ padding: 20px 8px !important;
+ }
+
+ .section-title h2 {
+ font-size: 16px;
+ margin-bottom: 4px;
+ }
+
+ .section-title .section-desc {
+ font-size: 9px;
+ }
+
+ .section-title h2::after {
+ width: 25px;
+ }
+
+ /* ===== 解决方案 - 卡片列表 ===== */
+ .solution-wrapper {
+ margin-top: 12px;
+ }
+
+ .solution-slider {
+ gap: 8px;
+ }
+
+ .solution-content {
+ padding: 10px 8px !important;
+ gap: 8px;
+ }
+
+ .solution-text h3 {
+ font-size: 14px;
+ margin-bottom: 2px;
+ }
+
+ .solution-subtitle {
+ font-size: 9px;
+ margin-bottom: 4px;
+ }
+
+ .solution-desc p {
+ font-size: 9px;
+ }
+
+ .solution-link {
+ padding: 5px 12px;
+ font-size: 9px;
+ }
+
+ .solution-image {
+ height: 100px;
+ }
+
+ /* ===== 基础设施 - 简化 ===== */
+ .section-base {
+ padding: 18px 0 !important;
+ }
+
+ .base .base-content {
+ margin-top: 12px;
+ margin-bottom: 16px;
+ }
+
+ .base .base-content .fboxRow {
+ margin-bottom: 8px;
+ }
+
+ .base .base-content h2 {
+ font-size: 24px;
+ }
+
+ .base .base-content .title-desc {
+ font-size: 9px;
+ }
+
+ .section-base .base img {
+ width: 100%;
+ max-width: 280px;
+ margin: 12px auto 0;
+ }
+
+ /* ===== 荣誉 - 极简 ===== */
+ .honor-section {
+ margin-top: 16px;
+ padding: 16px 0;
+ }
+
+ .honor-title h3 {
+ font-size: 16px;
+ margin-bottom: 4px;
+ }
+
+ .honor-subtitle {
+ font-size: 9px;
+ }
+
+ .honor-list {
+ gap: 8px;
+ padding: 0 8px;
+ }
+
+ .honor-item {
+ width: calc(50% - 4px);
+ padding: 12px 8px;
+ padding-bottom: 8px;
+ }
+
+ .honor-icon {
+ width: 60px;
+ height: 60px;
+ margin-bottom: 6px;
+ }
+
+ .honor-icon img {
+ width: 35px;
+ height: 35px;
+ }
+
+ .honor-name {
+ font-size: 10px;
+ line-height: 1.2;
+ }
+
+ /* ===== 新闻 - 极简 ===== */
+ .section.news {
+ padding: 18px 0 !important;
+ }
+
+ .news-content {
+ margin-top: 12px;
+ gap: 12px;
+ flex-direction: column;
+ }
+
+ .news-content .news-cont {
+ padding: 12px;
+ }
+
+ .news-content .news-head .news-title {
+ font-size: 14px;
+ }
+
+ .news-content .news-head .news-more {
+ font-size: 9px;
+ }
+
+ .news-content .news-item {
+ line-height: 26px;
+ padding: 6px 0;
+ }
+
+ .news-content .news-item .number {
+ min-width: 14px;
+ height: 14px;
+ font-size: 8px;
+ margin-right: 4px;
+ }
+
+ .news-content .news-item .title {
+ font-size: 10px;
+ }
+
+ .news-content .news-item .time {
+ font-size: 8px;
+ min-width: 55px;
+ }
+}
+
+/* 性能优化提示 */
+@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;
+ }
+}
+
+/* ============================================
+ 首页 Footer 深色科技风格
+ ============================================ */
+
+/* Footer 整体优化 */
+#index .section-promise {
+ background:
+ radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+ linear-gradient(180deg, #020617 0%, #0F172A 100%);
+ border-top: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+#index .section-promise .promise-box {
+ color: #E5E7EB;
+ transition: all 0.3s ease;
+}
+
+#index .section-promise .promise-box:hover {
+ color: #38BDF8;
+ transform: translateY(-5px);
+}
+
+/* Footer 主体区域 */
+#index .footer-content {
+ background: transparent;
+}
+
+#index .footer-nav-head {
+ color: #F9FAFB;
+ font-weight: 600;
+ font-size: 16px;
+}
+
+#index .footer-nav-item {
+ color: rgba(203, 213, 225, 0.8);
+}
+
+#index .footer-nav-item a {
+ color: rgba(203, 213, 225, 0.8);
+}
+
+#index .footer-nav-item:hover,
+#index .footer-nav-item a:hover {
+ color: #38BDF8;
+}
+
+/* Footer 底部信息 */
+#index .footer-record {
+ border-top-color: rgba(148, 163, 184, 0.15);
+ color: rgba(148, 163, 184, 0.8);
+}
+
+#index .footer-record a {
+ color: rgba(148, 163, 184, 0.8);
+}
+
+#index .footer-record a:hover {
+ color: #38BDF8;
+}
+
+/* 注册广告优化 */
+#index .register-advert {
+ background: transparent;
+ padding: 0;
+ height: auto;
+}
+
+#index .register-advert a {
+ display: block;
+}
+
+#index .register-advert img {
+ border-radius: 16px;
+ box-shadow: 0 8px 32px rgba(56, 189, 248, 0.2);
+ transition: all 0.3s ease;
+ height: auto;
+ object-fit: contain;
+}
+
+#index .register-advert img:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 48px rgba(56, 189, 248, 0.3);
+}
+
+/* ============================================
+ Section 间距统一优化
+ ============================================ */
+
+/* 统一 section 间距和背景过渡 */
+#index .section {
+ position: relative;
+}
+
+/* 移除可能导致白色闪烁的背景 */
+#index .section-content {
+ background: transparent;
+}
+
+/* 确保所有section背景连贯 */
+#index .section.banner {
+ background: transparent;
+ position: relative;
+ z-index: 0 !important;
+}
+
+/* banner 整体容器也降到最低 */
+#index .banner-cont {
+ z-index: 0 !important;
+}
+
+#index .section.service {
+ padding-top: 120px;
+ /* 为 banner-s 留出空间 */
+}
+
+/* 优化各section之间的过渡 */
+#index .section:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.1), transparent);
+}
+
+/* ============================================
+ 首页登录菜单和侧边栏优化
+ ============================================ */
+
+/* 登录用户信息显示 */
+#index .nav-header .login-in .head-img {
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border-color: rgba(56, 189, 248, 0.3);
+ box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
+}
+
+#index .nav-header .login-in .name {
+ color: #E5E7EB;
+}
+
+#index .nav-header .login-in::after {
+ border-left-color: rgba(148, 163, 184, 0.2);
+}
+
+/* 登录下拉菜单 */
+#index .nav-header .login-in .login-menu {
+ background: rgba(15, 23, 42, 0.95);
+ backdrop-filter: blur(20px);
+ border-color: rgba(148, 163, 184, 0.2);
+ box-shadow: 0 8px 32px rgba(15, 23, 42, 0.5);
+}
+
+#index .nav-header .login-in .login-menu .login-menu-item {
+ color: #E5E7EB;
+}
+
+#index .nav-header .login-in .login-menu .login-menu-item:hover {
+ background: rgba(56, 189, 248, 0.15);
+ color: #38BDF8;
+}
+
+/* 侧边栏工具条优化 */
+#index .aside-tools {
+ background: rgba(15, 23, 42, 0.9);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ border-radius: 12px;
+ box-shadow: 0 8px 32px rgba(15, 23, 42, 0.5);
+}
+
+#index .aside-tools .aside-box {
+ border-bottom-color: rgba(148, 163, 184, 0.15);
+}
+
+#index .aside-tools .aside-box:hover {
+ background: rgba(56, 189, 248, 0.1);
+}
+
+#index .aside-tools .aside-text {
+ color: #E5E7EB;
+}
+
+#index .aside-tools .aside-box:hover .aside-text {
+ color: #38BDF8;
+}
+
+/* 返回顶部按钮 */
+#index .aside-tools .back-top {
+ background: rgba(56, 189, 248, 0.15);
+ transition: all 0.3s ease;
+}
+
+#index .aside-tools .back-top:hover {
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
+}
+
+/* ============================================
+ 细节优化 - 二维码弹窗等
+ ============================================ */
+
+/* 如果有二维码弹窗，也优化为深色 */
+#index .qrcode-popup {
+ background: rgba(15, 23, 42, 0.95);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ box-shadow: 0 16px 48px rgba(15, 23, 42, 0.6);
+}
+
+#index .qrcode-popup .title {
+ color: #F9FAFB;
+}
+
+#index .qrcode-popup .desc {
+ color: rgba(203, 213, 225, 0.8);
+}
+
+/* ============================================
+ 全场景全栈解决方案 - 新设计（上下两层）
+ ============================================ */
+
+/* 解决方案容器 */
+.solution-wrapper {
+ margin-top: 60px;
+ position: relative;
+}
+
+/* 上层：按钮导航 */
+.solution-tabs {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ margin-bottom: 40px;
+ flex-wrap: wrap;
+}
+
+.solution-tab {
+ padding: 12px 32px;
+ font-size: 16px;
+ font-weight: 600;
+ color: rgba(226, 232, 240, 0.8);
+ background: rgba(15, 23, 42, 0.6);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 30px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+/* 按钮光晕效果 */
+.solution-tab::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
+ transform: translate(-50%, -50%);
+ transition: width 0.5s ease, height 0.5s ease;
+}
+
+.solution-tab:hover {
+ color: #38BDF8;
+ border-color: rgba(56, 189, 248, 0.4);
+ background: rgba(15, 23, 42, 0.8);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
+}
+
+.solution-tab:hover::before {
+ width: 200px;
+ height: 200px;
+}
+
+.solution-tab.active {
+ color: #ffffff;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border-color: transparent;
+ box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
+}
+
+.solution-tab.active::before {
+ display: none;
+}
+
+/* 下层：幻灯片容器 */
+.solution-slider {
+ position: relative;
+ min-height: 450px;
+ overflow: hidden;
+}
+
+/* 单个幻灯片 */
+.solution-slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ opacity: 0;
+ transition: opacity 0.6s ease;
+ pointer-events: none;
+ z-index: 1;
+}
+
+/* 激活的幻灯片 */
+.solution-slide.active {
+ position: relative;
+ opacity: 1;
+ pointer-events: auto;
+ z-index: 2;
+}
+
+/* 幻灯片内容区域 */
+.solution-content {
+ display: flex;
+ align-items: stretch;
+ gap: 60px;
+ padding: 0;
+ background: rgba(15, 23, 42, 0.7);
+ backdrop-filter: blur(16px);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ border-radius: 0;
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.5),
+ inset 0 1px 0 rgba(255, 255, 255, 0.05);
+ min-height: 500px;
+}
+
+/* 左侧文字区域 */
+.solution-text {
+ flex: 1;
+ min-width: 0;
+ padding: 40px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.solution-text h3 {
+ font-size: 32px;
+ font-weight: 700;
+ color: #F9FAFB;
+ margin-bottom: 12px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.solution-subtitle {
+ font-size: 16px;
+ color: rgba(148, 163, 184, 0.9);
+ margin-bottom: 24px;
+ font-weight: 500;
+}
+
+.solution-desc {
+ color: rgba(203, 213, 225, 0.85);
+ line-height: 1.8;
+ margin-bottom: 32px;
+}
+
+.solution-desc p {
+ margin-bottom: 12px;
+ font-size: 15px;
+}
+
+.solution-desc p:last-child {
+ margin-bottom: 0;
+}
+
+/* 了解详情链接 */
+.solution-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 32px;
+ font-size: 15px;
+ font-weight: 600;
+ color: #ffffff;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border-radius: 30px;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3);
+ align-self: flex-start;
+}
+
+.solution-link:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5);
+}
+
+.solution-link .icon-arrow-right {
+ transition: transform 0.3s ease;
+}
+
+.solution-link:hover .icon-arrow-right {
+ transform: translateX(5px);
+}
+
+/* 右侧图片区域 */
+.solution-image {
+ flex-shrink: 0;
+ width: 600px;
+ position: relative;
+ overflow: hidden;
+ border-radius: 0;
+ background: rgba(15, 23, 42, 0.5);
+}
+
+.solution-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ filter: brightness(1.1);
+ transition: transform 0.5s ease;
+}
+
+.solution-slide.active .solution-image img {
+ transform: scale(1.05);
+}
+
+/* 图片光晕效果 */
+.solution-image::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
+ opacity: 0;
+ transition: opacity 0.5s ease;
+ pointer-events: none;
+}
+
+.solution-slide.active .solution-image::after {
+ opacity: 1;
+}
+
+/* ============================================
+ 移动端侧边栏首页优化
+ ============================================ */
+
+/* 移动端侧边栏背景优化 */
+#index .mobile-sidebar-content {
+ background: linear-gradient(180deg, #020617 0%, #0F172A 100%);
+}
+
+#index .mobile-sidebar-header {
+ background: rgba(15, 23, 42, 0.95);
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+#index .mobile-nav-link {
+ color: #E5E7EB;
+ transition: all 0.3s ease;
+}
+
+#index .mobile-nav-link:hover {
+ color: #38BDF8;
+}
+
+#index .mobile-user-info {
+ background: rgba(30, 41, 59, 0.6);
+ border: 1px solid rgba(148, 163, 184, 0.1);
+ border-radius: 8px;
+ padding: 12px;
+ margin-bottom: 12px;
+}
+
+#index .mobile-user-avatar {
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
+}
+
+#index .mobile-user-name {
+ color: #E5E7EB;
+}
+
+/* 返回顶部按钮优化 */
+#index .back-top-wrapper {
+ background: rgba(56, 189, 248, 0.15);
+ border: 1px solid rgba(56, 189, 248, 0.3);
+ box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
+ transition: all 0.3s ease;
+}
+
+#index .back-top-wrapper:hover {
+ background: rgba(56, 189, 248, 0.3);
+ box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
+}
+
+/* Mobile Overrides for Index Page */
+/* 注意：移动端 banner 样式已在第 698 行定义，这里不要重复设置 */
+
+/*
+以下样式已被注释，因为与第 698 行的移动端样式冲突
+导致 swiper-slide 高度变成 400px 而不是 200px
+
+@media (max-width: 768px) {
+ .banner-cont .swiper-slide {
+ height: auto !important;
+ min-height: 400px;
+ padding-bottom: 60px;
+ }
+
+ .banner-cont .swiper-slide .section-content {
+ position: relative;
+ top: auto;
+ left: auto;
+ transform: none;
+ padding: 80px 20px 40px;
+ text-align: center;
+ }
+
+ .banner-cont .swiper-slide .section-content .title-wrapper {
+ max-width: 100%;
+ margin-bottom: 20px;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 32px;
+ line-height: 1.3;
+ }
+
+ .banner-tags {
+ justify-content: center;
+ margin-bottom: 12px;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 15px;
+ margin: 0 auto 30px;
+ line-height: 1.6;
+ }
+
+ /* Feature Cards (Banner-S) */
+/* 注意：banner-list 的桌面样式已在第 831 行定义 (flex布局，4列)
+ 移动端样式在第 945 行定义 (grid布局，2列)
+ 这里的重复样式已被移除以避免冲突 */
+
+/* 以下样式已注释，因为会覆盖桌面端的flex布局
+ .banner .banner-s {
+ margin-top: 0;
+ padding-top: 0;
+ padding-bottom: 40px;
+ }
+
+ .banner .banner-s .banner-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 15px;
+ padding: 0 15px;
+ }
+
+ .banner-s .banner-list .banner-item {
+ max-width: 100%;
+ min-width: 0;
+ flex: auto;
+ }
+ */
+
+/* Mobile Overrides Group */
+@media (max-width: 768px) {
+
+ /* Hot Products - Mobile Slider */
+ .hot-products-pagination {
+ position: relative;
+ margin-top: 20px;
+ bottom: 0 !important;
+ }
+
+ .hot-products-pagination .swiper-pagination-bullet {
+ width: 8px;
+ height: 8px;
+ background: #cbd5e1;
+ opacity: 1;
+ }
+
+ .hot-products-pagination .swiper-pagination-bullet-active {
+ background: #3b82f6;
+ width: 20px;
+ border-radius: 4px;
+ }
+
+ /* Hot Products - Mobile Fold & Expand */
+ .products-grid .product-card:nth-child(n+5) {
+ display: none;
+ }
+
+ .products-grid.expanded .product-card:nth-child(n+5) {
+ display: block;
+ animation: fadeIn 0.5s ease;
+ }
+
+ .products-more-btn-wrapper {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+ padding-bottom: 20px;
+ }
+
+ .products-more-btn {
+ background: rgba(30, 41, 59, 0.6);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ color: #cbd5e1;
+ padding: 10px 24px;
+ border-radius: 20px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .products-more-btn:hover {
+ background: rgba(56, 189, 248, 0.2);
+ border-color: rgba(56, 189, 248, 0.4);
+ color: #fff;
+ }
+
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* Hot Products - Card View Override */
+ .products-table thead {
+ display: none;
+ }
+
+ .products-table,
+ .products-table tbody,
+ .products-table tr,
+ .products-table td {
+ display: block;
+ width: 100%;
+ }
+
+ .products-table tr {
+ margin-bottom: 15px;
+ background: rgba(30, 41, 59, 0.4);
+ border: 1px solid rgba(148, 163, 184, 0.1);
+ border-radius: 12px;
+ padding: 15px;
+ }
+
+ .products-table td {
+ text-align: right;
+ padding: 8px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid rgba(148, 163, 184, 0.05);
+ }
+
+ .products-table td:last-child {
+ border-bottom: none;
+ }
+
+ .products-table td::before {
+ content: attr(data-label);
+ float: left;
+ font-weight: 600;
+ color: rgba(148, 163, 184, 0.8);
+ }
+
+ /* Solution Wrapper - Stacked */
+ .solution-wrapper {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .solution-tabs {
+ display: none;
+ /* Hide desktop tabs */
+ }
+}
+
+/* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
+ For now, let's assume we stack them or show a simple list.
+ Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification.
+ Let's style the active one well first, or maybe show all?
+ */
diff --git a/css/index.css b/css/index.css
index 376f86d..fc25e1d 100644
--- a/css/index.css
+++ b/css/index.css
@@ -394,8 +394,6 @@
移动端 Banner 优化
============================================ */
-@media (max-width: 768px) {
-
/* 调整 banner 高度 - 移动端优化 */
.banner-cont .swiper-slide {
height: 200px !important;
@@ -518,122 +516,6 @@
}
/* 移动端调整 banner-s 位置，避免遮挡 */
-@media (max-width: 768px) {
- .banner .banner-s {
- margin-top: 0 !important;
- /* 移除负边距 */
- padding-top: 20px;
- }
-}
-
-.banner .banner-s .banner-list {
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- justify-content: center;
- padding: 0 20px;
-}
-
-/* 独立毛玻璃卡片样式 */
-.banner-s .banner-list .banner-item {
- flex: 0 1 calc(25% - 20px);
- min-width: 260px;
- max-width: 320px;
- cursor: pointer;
- padding: 24px 28px;
- position: relative;
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 16px;
-
- /* 毛玻璃效果 */
- background: rgba(15, 23, 42, 0.6);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
-
- /* 边框和圆角 */
- border: 1px solid rgba(148, 163, 184, 0.2);
- border-radius: 0;
-
- /* 阴影效果 */
- box-shadow:
- 0 8px 32px rgba(15, 23, 42, 0.4),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
-
- /* 内部发光 */
- overflow: hidden;
-}
-
-/* banner-item 图标样式 */
-.banner-s .banner-list .banner-item .banner-item-icon {
- width: 48px;
- height: 48px;
- flex-shrink: 0;
- object-fit: contain;
- transition: all 0.4s ease;
- filter: brightness(1.1);
-}
-
-.banner-s .banner-list .banner-item:hover .banner-item-icon {
- transform: scale(1.05);
- filter: brightness(1.2);
-}
-
-/* banner-item 文字内容区域 */
-.banner-s .banner-list .banner-item-content {
- flex: 1;
- display: flex;
- flex-direction: column;
-}
-
-/* 卡片光晕装饰 */
-.banner-s .banner-list .banner-item::before {
- content: '';
- position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: radial-gradient(circle at center,
- rgba(56, 189, 248, 0.15) 0%,
- transparent 50%);
- opacity: 0;
- transition: opacity 0.5s ease;
- pointer-events: none;
-}
-
-/* 悬浮效果 */
-.banner-s .banner-list .banner-item:hover {
- transform: translateY(-8px);
- border-color: rgba(56, 189, 248, 0.3);
- background: rgba(15, 23, 42, 0.75);
- box-shadow:
- 0 12px 40px rgba(15, 23, 42, 0.6),
- inset 0 1px 0 rgba(255, 255, 255, 0.15);
-}
-
-.banner-s .banner-list .banner-item:hover::before {
- opacity: 0;
-}
-
-.banner-s .banner-list .banner-item:hover h5 {
- color: #38BDF8;
- transform: translateX(3px);
-}
-
-/* 移除分隔线 */
-.banner-s .banner-list .banner-item::after {
- display: none;
-}
-
-/* ============================================
- 移动端 Banner-List 卡片优化
- ============================================ */
-
-@media (max-width: 768px) {
-
/* 调整 banner-s 区域 */
.banner .banner-s {
margin-top: -60px;
@@ -981,1623 +863,6 @@
}
/* 移动端优化 */
-@media (max-width: 767px) {
- .hot-products {
- padding: 30px 0;
- }
-
- .hot-products-title h3 {
- font-size: 24px;
- }
-
- .hot-products-title .subtitle {
- font-size: 13px;
- }
-
- .product-card {
- padding: 16px;
- }
-
- .product-name {
- font-size: 16px;
- }
-
- .price-value {
- font-size: 28px;
- }
-
- .price-currency {
- font-size: 16px;
- }
-
- .product-buy-btn {
- padding: 10px 20px;
- font-size: 13px;
- }
-}
-
-.banner .banner-s .banner-list .banner-item h5 {
- color: #F9FAFB;
- font-size: 20px;
- font-weight: 600;
- transition: all 0.3s ease;
- margin-bottom: 0;
-}
-
-/* banner-item 标题中的重点色 */
-.banner .banner-s .banner-list .banner-item h5 .highlight {
- color: #38BDF8;
- font-weight: 700;
-}
-
-.banner .banner-s .banner-list .banner-item .title-desc {
- color: rgba(203, 213, 225, 0.8);
- font-size: 13px;
- line-height: 1.6;
-}
-
-
-/* 服务内容 */
-.service-content {
- display: flex;
- margin-top: 60px;
- margin: -12px;
- margin-top: 50px;
-}
-
-/* 服务模块整体背景：深色科技感基调 + 方格线 */
-.section.service {
- background:
- 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:
- 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;
- 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(203, 213, 225, 0.85);
- font-size: 16px;
-}
-
-/* 服务卡片 - 3D悬浮效果 */
-.service .service-box {
- min-height: 240px;
- margin: 12px;
- position: relative;
- 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 {
- 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;
- 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: 18px 0;
- height: 44px;
- color: rgba(203, 213, 225, 0.8);
- line-height: 1.6;
-}
-
-/* 服务标签组 */
-.service .service-tag-group {
- display: flex;
- 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: #0F172A url(../assets/img/index/home-bg.png) no-repeat center center;
- background-size: cover;
- position: relative;
-}
-
-/* 添加深色遮罩增强对比度 + 方格线 */
-.resolve::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background:
- linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
- linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
- linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
- background-size: 50px 50px, 50px 50px, 100% 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-new {
- display: flex;
- justify-content: center;
- gap: 16px;
- margin-top: 60px;
- flex-wrap: wrap;
-}
-
-/* 竖向长方形卡片 */
-.resolve-card {
- width: 150px;
- height: 500px;
- position: relative;
- overflow: hidden;
- transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.resolve-card a {
- display: block;
- width: 100%;
- height: 100%;
-}
-
-.resolve-card-inner {
- width: 100%;
- height: 100%;
- background: rgba(15, 23, 42, 0.7);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(148, 163, 184, 0.15);
- position: relative;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-top: 80px;
- transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* 卡片顶部图片 - 撑满宽度 */
-.resolve-card-inner::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 80px;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
- z-index: 1;
-}
-
-/* 为不同卡片设置不同图标 */
-.resolve-card:nth-child(1) .resolve-card-inner::after {
- background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
-}
-
-.resolve-card:nth-child(2) .resolve-card-inner::after {
- background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
-}
-
-.resolve-card:nth-child(3) .resolve-card-inner::after {
- background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
-}
-
-.resolve-card:nth-child(4) .resolve-card-inner::after {
- background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
-}
-
-.resolve-card:nth-child(5) .resolve-card-inner::after {
- background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
-}
-
-.resolve-card:nth-child(6) .resolve-card-inner::after {
- background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
-}
-
-.resolve-card:nth-child(7) .resolve-card-inner::after {
- background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
-}
-
-/* 卡片发光边框效果 */
-.resolve-card-inner::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- 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-card-title {
- color: #F9FAFB;
- font-size: 24px;
- font-weight: 700;
- writing-mode: vertical-rl;
- text-orientation: upright;
- letter-spacing: 8px;
- transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
- z-index: 2;
- position: relative;
- margin-top: 140px;
-}
-
-/* 内容区域 - 默认隐藏 */
-.resolve-card-content {
- position: absolute;
- top: 80px;
- left: 0;
- right: 0;
- bottom: 0;
- padding: 32px 24px;
- opacity: 0;
- transform: translateY(20px);
- transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- z-index: 1;
-}
-
-.resolve-card-desc {
- color: rgba(203, 213, 225, 0.9);
- line-height: 1.8;
- font-size: 14px;
-}
-
-.resolve-card-link {
- color: rgba(148, 163, 184, 0.9);
- font-size: 14px;
- font-weight: 500;
- display: inline-flex;
- align-items: center;
- transition: all 0.3s ease;
- margin-top: 20px;
-}
-
-.resolve-card-link .icon-arrow-right {
- margin-left: 5px;
- transition: transform 0.3s ease;
-}
-
-/* 悬停效果 */
-.resolve-card:hover {
- width: 320px;
- z-index: 10;
-}
-
-.resolve-card:hover .resolve-card-inner {
- background: rgba(15, 23, 42, 0.9);
- 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);
- border-radius: 16px;
-}
-
-.resolve-card:hover .resolve-card-inner::before {
- opacity: 1;
-}
-
-/* 悬停时图片高度展开 */
-.resolve-card:hover .resolve-card-inner::after {
- width: 100%;
- height: 140px;
-}
-
-/* 悬停时标题变为横向并移到图片下方 */
-.resolve-card:hover .resolve-card-title {
- writing-mode: horizontal-tb;
- text-orientation: mixed;
- letter-spacing: 2px;
- position: absolute;
- top: 160px;
- left: 24px;
- right: 24px;
- margin-top: 0;
- color: #38BDF8;
- text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
- text-align: left;
-}
-
-/* 悬停时显示内容 */
-.resolve-card:hover .resolve-card-content {
- opacity: 1;
- transform: translateY(0);
- top: 200px;
-}
-
-.resolve-card:hover .resolve-card-link {
- color: #38BDF8;
-}
-
-.resolve-card:hover .resolve-card-link .icon-arrow-right {
- transform: translateX(5px);
-}
-
-/* 解决方案卡片 - 错落悬浮效果 */
-.resolve-content .resolve-box {
- position: relative;
- top: 0;
- max-width: 335px;
- 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;
- 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 {
- 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: #38BDF8;
- text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
-}
-
-.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, #0F172A 0%, #020617 100%);
- position: relative;
-}
-
-.practice::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: 40px 40px;
- pointer-events: none;
-}
-
-.practice .section-title h2 {
- color: #F9FAFB;
- font-size: 40px;
- font-weight: 700;
-}
-
-.practice .section-title .section-desc {
- color: rgba(203, 213, 225, 0.85);
- font-size: 16px;
-}
-
-.practice .practice-content {
- margin: -12px;
- margin-top: 50px;
- flex-wrap: wrap;
-}
-
-/* 实践卡片优化 */
-.practice .practice-box {
- margin: 12px;
- padding: 36px;
- width: 453px;
- border-radius: 20px;
- text-align: center;
- 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: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 {
- /* 统一为暗色科技风背景 */
- background:
- 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::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(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(203, 213, 225, 0.85);
- font-size: 16px;
-}
-
-/* ============================================
- 企业荣誉展示区域 - 精致卡片设计
- ============================================ */
-
-.honor-section {
- margin-top: 80px;
- padding: 60px 0;
- background: transparent;
-}
-
-.honor-title {
- text-align: center;
- margin-bottom: 50px;
-}
-
-.honor-title h3 {
- font-size: 36px;
- font-weight: 700;
- color: #F9FAFB;
- margin-bottom: 12px;
- background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-.honor-subtitle {
- font-size: 16px;
- color: rgba(148, 163, 184, 0.9);
- margin: 0;
-}
-
-/* 荣誉列表 - 横向卡片布局 */
-.honor-list {
- display: flex;
- justify-content: center;
- gap: 30px;
- flex-wrap: wrap;
- padding: 0 20px;
-}
-
-/* 荣誉卡片 */
-.honor-item {
- position: relative;
- width: 280px;
- padding: 40px 30px;
- background:
- radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
- rgba(15, 23, 42, 0.7);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(148, 163, 184, 0.15);
- border-radius: 16px;
- text-align: center;
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
- cursor: pointer;
- overflow: hidden;
- box-shadow:
- 0 8px 32px rgba(15, 23, 42, 0.4),
- inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-/* 卡片光晕效果 */
-.honor-item::before {
- content: '';
- position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
- opacity: 0;
- transition: opacity 0.5s ease;
- pointer-events: none;
-}
-
-.honor-item:hover::before {
- opacity: 1;
-}
-
-/* 荣誉图标容器 */
-.honor-icon {
- width: 120px;
- height: 120px;
- margin: 0 auto 24px;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- background:
- linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
- border: 2px solid rgba(56, 189, 248, 0.2);
- transition: all 0.4s ease;
-}
-
-.honor-icon::after {
- content: '';
- position: absolute;
- inset: -2px;
- border-radius: 50%;
- padding: 2px;
- background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
- -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.4s ease;
-}
-
-.honor-item:hover .honor-icon::after {
- opacity: 1;
-}
-
-.honor-icon img {
- width: 80px;
- height: 80px;
- object-fit: contain;
- transition: all 0.4s ease;
- filter: brightness(1.1) drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3));
-}
-
-.honor-item:hover .honor-icon {
- transform: scale(1.1) rotate(5deg);
- background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
-}
-
-.honor-item:hover .honor-icon img {
- transform: scale(1.1);
- filter: brightness(1.2) drop-shadow(0 6px 20px rgba(56, 189, 248, 0.5));
-}
-
-/* 荣誉名称 */
-.honor-name {
- font-size: 18px;
- font-weight: 600;
- color: #F9FAFB;
- margin: 0;
- line-height: 1.4;
- transition: all 0.3s ease;
-}
-
-.honor-item:hover .honor-name {
- color: #38BDF8;
- transform: translateY(-2px);
-}
-
-/* 装饰性边角 */
-.honor-item::after {
- content: '';
- position: absolute;
- top: 20px;
- right: 20px;
- width: 40px;
- height: 40px;
- background:
- linear-gradient(to right, transparent 50%, rgba(56, 189, 248, 0.1) 50%),
- linear-gradient(to bottom, transparent 50%, rgba(56, 189, 248, 0.1) 50%);
- background-size: 100% 2px, 2px 100%;
- background-position: 100% 0, 100% 0;
- background-repeat: no-repeat;
- opacity: 0;
- transition: opacity 0.3s ease;
-}
-
-.honor-item:hover::after {
- opacity: 1;
-}
-
-/* 当荣誉数量为偶数时居中显示 */
-.honor-list:has(.honor-item:nth-child(2):last-child) {
- justify-content: center;
-}
-
-/* 响应式 */
-@media (max-width: 991px) {
- .honor-item {
- width: 240px;
- padding: 30px 20px;
- }
-
- .honor-icon {
- width: 100px;
- height: 100px;
- }
-
- .honor-icon img {
- width: 70px;
- height: 70px;
- }
-}
-
-@media (max-width: 767px) {
- .honor-section {
- margin-top: 40px;
- padding: 40px 0;
- }
-
- .honor-title h3 {
- font-size: 28px;
- }
-
- .honor-list {
- gap: 20px;
- }
-
- .honor-item {
- width: 100%;
- max-width: 300px;
- }
-}
-
-/* 旧样式保留（兼容性） */
-.cert {
- display: none;
-}
-
-.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:
- 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:
- 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: 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(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:
- 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 {
- position: relative;
- padding-left: 14px;
- font-size: 20px;
- line-height: 24px;
- height: 24px;
- color: #F9FAFB;
- font-weight: 600;
-}
-
-/* 标题左侧发光装饰条 */
-.news-content .news-head .news-title::before {
- content: '';
- width: 4px;
- height: 24px;
- position: absolute;
- left: 0;
- top: 0;
- 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.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:hover {
- color: #38BDF8;
-}
-
-.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: 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: 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: 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: 12px;
- display: flex;
- align-items: center;
- 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: rgba(226, 232, 240, 0.9);
- transition: all 0.3s ease;
-}
-
-.news-content .news-item:hover .title {
- color: #38BDF8;
- padding-left: 5px;
-}
-
-.news-content .news-item .time {
- 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: 64px;
- }
-
- /* 移除 section-content 的 max-width 限制，保持容器系统统一 */
-
- .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: 52px;
- }
-
- .banner-cont .swiper-slide .section-content {
- max-width: 600px;
- }
-
- .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: 44px;
- }
-
- /* 小屏幕下保持左对齐布局 */
- .banner-cont .swiper-slide .section-content>* {
- max-width: 500px;
- }
-
- /* 已废弃：背景图不需要宽度设置
- .banner-cont .swiper-slide .img {
- width: 50%;
- }
- */
-
- .banner-s .banner-list {
- gap: 16px;
- padding: 0 16px;
- }
-
- .banner-s .banner-list .banner-item {
- flex: 0 1 calc(50% - 16px);
- padding: 28px 32px;
- }
-
- .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: 36px;
- }
-
- .banner-cont .banner-desc {
- font-size: 15px;
- }
-
- /* 平板尺寸下，调整遮罩透明度，文字居中 */
- .banner-cont .swiper-slide::before {
- background: linear-gradient(rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%);
- }
-
- .banner-cont .swiper-slide .section-content {
- text-align: center;
- }
-
- .banner-cont .swiper-slide .section-content>* {
- max-width: 90%;
- margin-left: auto;
- margin-right: auto;
- }
-
- .banner-tags {
- justify-content: center;
- }
-
- .banner-s .banner-list {
- flex-direction: column;
- gap: 12px;
- }
-
- .banner-s .banner-list .banner-item {
- flex: 1 1 100%;
- width: 100%;
- max-width: 100%;
- padding: 24px 28px;
- }
-
- .banner-s .banner-list .banner-item:not(:last-child)::after {
- display: none;
- }
-
- /* 热销产品表格在平板上开始使用横向滚动 */
- .products-table-wrapper {
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- }
-
- .products-table {
- min-width: 800px;
- }
-
- .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) {
-
/* ===== 导航栏 - 极简设计 ===== */
#index .nav-header {
padding: 0 8px;
@@ -2769,400 +1034,6 @@ html {
}
/* 移动端 banner-list 网格布局 */
- @media (max-width: 768px) {
- .banner .banner-s .banner-list {
- gap: 6px !important;
- display: grid !important;
- grid-template-columns: repeat(2, 1fr) !important;
- width: 100% !important;
- padding: 0 !important;
- }
- }
-
- .banner-s .banner-list .banner-item {
- padding: 10px 10px !important;
- gap: 8px !important;
- flex: none !important;
- display: flex !important;
- flex-direction: row !important;
- align-items: center !important;
- text-align: left !important;
- min-height: 85px !important;
- max-height: none !important;
- justify-content: flex-start !important;
- border-radius: 0 !important;
- width: auto !important;
- min-width: auto !important;
- max-width: none !important;
- background: rgba(15, 23, 42, 0.6) !important;
- border: 1px solid rgba(148, 163, 184, 0.15) !important;
- }
-
- .banner-s .banner-list .banner-item .banner-item-icon {
- width: 30px;
- height: 30px;
- margin-bottom: 0;
- margin-right: 8px;
- flex-shrink: 0;
- }
-
- .banner-s .banner-list .banner-item .banner-item-content {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 3px;
- flex: 1;
- min-width: 0;
- }
-
- .banner-s .banner-list .banner-item h5 {
- font-size: 11px !important;
- margin-bottom: 0 !important;
- line-height: 1.3;
- color: #E5E7EB;
- }
-
- .banner-s .banner-list .banner-item .title-desc {
- font-size: 9px !important;
- line-height: 1.3;
- margin: 0 !important;
- color: rgba(203, 213, 225, 0.8);
- }
-
- /* ===== 热销产品 - 精简卡片 ===== */
- .hot-products {
- margin-top: -50px;
- padding: 20px 0 30px !important;
- }
-
- .hot-products-title {
- margin-bottom: 20px;
- }
-
- .hot-products-title h3 {
- font-size: 20px;
- margin-bottom: 6px;
- }
-
- .hot-products-title .subtitle {
- font-size: 11px;
- }
-
- .products-table-wrapper {
- padding: 0 12px;
- }
-
- /* 表格转卡片 */
- .products-table,
- .products-table thead,
- .products-table tbody,
- .products-table tr,
- .products-table td {
- display: block;
- }
-
- .products-table thead {
- display: none;
- }
-
- .products-table tbody tr {
- margin-bottom: 12px;
- padding: 14px;
- border-radius: 8px;
- }
-
- .products-table tbody tr:hover {
- transform: none;
- }
-
- .products-table tbody td {
- padding: 8px 0 8px 90px;
- font-size: 12px;
- }
-
- .products-table tbody td::before {
- left: 14px;
- font-size: 11px;
- }
-
- .products-table tbody td:nth-child(1)::before {
- content: "产品";
- }
-
- .products-table .product-name {
- font-size: 13px;
- }
-
- .products-table .product-tag {
- font-size: 10px;
- padding: 1px 6px;
- }
-
- .products-table .product-price {
- font-size: 16px;
- }
-
- .products-table .product-price .unit {
- font-size: 11px;
- }
-
- .products-table .btn-buy {
- padding: 6px 16px;
- font-size: 11px;
- }
-
- /* ===== Section 通用 - 紧凑间距 ===== */
- .section {
- padding: 30px 0 !important;
- }
-
- .section-content {
- padding: 30px 12px !important;
- }
-
- .section-title {
- margin-bottom: 20px;
- }
-
- .section-title h2 {
- font-size: 22px;
- margin-bottom: 8px;
- }
-
- .section-title .section-desc {
- font-size: 12px;
- line-height: 1.5;
- }
-
- .section-title h2::after {
- width: 35px;
- height: 2px;
- bottom: -6px;
- }
-
- /* ===== 解决方案 - 竖向卡片列表 ===== */
- .solution-wrapper {
- margin-top: 20px;
- }
-
- /* 隐藏按钮导航，改用卡片模式 */
- .solution-tabs {
- display: none;
- }
-
- .solution-slider {
- display: flex;
- flex-direction: column;
- gap: 12px;
- min-height: auto;
- }
-
- /* 显示所有幻灯片作为普通卡片 */
- .solution-slide {
- display: block !important;
- opacity: 1 !important;
- }
-
- .solution-content {
- min-height: auto;
- padding: 14px 12px !important;
- gap: 12px;
- flex-direction: column;
- border-radius: 8px;
- background: rgba(30, 41, 59, 0.6);
- border: 1px solid rgba(148, 163, 184, 0.1);
- }
-
- .solution-content:hover {
- background: rgba(30, 41, 59, 0.8);
- border-color: rgba(56, 189, 248, 0.2);
- }
-
- .solution-text {
- padding: 0;
- }
-
- .solution-text h3 {
- font-size: 16px;
- margin-bottom: 4px;
- color: #E5E7EB;
- }
-
- .solution-subtitle {
- font-size: 10px;
- margin-bottom: 8px;
- color: rgba(148, 163, 184, 0.8);
- }
-
- .solution-desc {
- margin-bottom: 10px;
- }
-
- .solution-desc p {
- font-size: 10px;
- line-height: 1.5;
- margin-bottom: 4px;
- color: rgba(203, 213, 225, 0.8);
- display: block;
- }
-
- .solution-desc p:nth-child(n+2) {
- display: none;
- /* 小屏只显示第1段 */
- }
-
- .solution-link {
- padding: 6px 16px;
- font-size: 10px;
- align-self: flex-start;
- }
-
- .solution-image {
- width: 100%;
- height: 120px;
- object-fit: cover;
- border-radius: 4px;
- order: -1;
- /* 图片移到上方 */
- }
-
- /* ===== 基础设施 - 简化显示 ===== */
- .section-base {
- padding: 25px 0 !important;
- }
-
- .base .base-content {
- margin-top: 20px;
- margin-bottom: 30px;
- }
-
- .base .base-content .fboxRow {
- margin-bottom: 12px;
- }
-
- .base .base-content h2 {
- font-size: 32px;
- }
-
- .base .base-content .title-desc {
- font-size: 11px;
- }
-
- .section-base .base {
- flex-direction: column;
- align-items: center;
- }
-
- .section-base .base img {
- width: 90%;
- max-width: 400px;
- height: auto;
- margin: 20px auto 0;
- padding: 0;
- }
-
- /* ===== 荣誉展示 - 紧凑布局 ===== */
- .honor-section {
- margin-top: 30px;
- padding: 25px 0;
- }
-
- .honor-title {
- margin-bottom: 20px;
- }
-
- .honor-title h3 {
- font-size: 20px;
- margin-bottom: 6px;
- }
-
- .honor-subtitle {
- font-size: 11px;
- }
-
- .honor-list {
- gap: 12px;
- padding: 0 12px;
- }
-
- .honor-item {
- width: calc(50% - 6px);
- /* 改为2列布局 */
- padding: 20px 16px;
- }
-
- .honor-icon {
- width: 80px;
- height: 80px;
- margin-bottom: 12px;
- }
-
- .honor-icon img {
- width: 50px;
- height: 50px;
- }
-
- .honor-name {
- font-size: 13px;
- }
-
- /* ===== 新闻区域 - 紧凑 ===== */
- .section.news {
- padding: 25px 0 !important;
- }
-
- .news-content {
- margin-top: 20px;
- gap: 20px;
- }
-
- .news-content .news-cont {
- padding: 16px;
- }
-
- .news-content .news-head {
- margin-bottom: 12px;
- }
-
- .news-content .news-head .news-title {
- font-size: 16px;
- height: auto;
- line-height: 1.4;
- }
-
- .news-content .news-head .news-title::before {
- height: 18px;
- }
-
- .news-content .news-head .news-more {
- font-size: 11px;
- }
-
- .news-content .news-item {
- line-height: 36px;
- padding: 0 4px;
- }
-
- .news-content .news-item .number {
- min-width: 18px;
- height: 18px;
- font-size: 11px;
- margin-right: 8px;
- }
-
- .news-content .news-item .title {
- font-size: 12px;
- }
-
- .news-content .news-item .time {
- font-size: 10px;
- min-width: 70px;
- }
-}
-
-/* 小手机 最大575px */
-@media (max-width: 575px) {
-
/* ===== 导航栏 - 超紧凑 ===== */
#index .nav-header {
padding: 0 10px;
@@ -3563,8 +1434,6 @@ html {
}
/* 小屏手机优化（480px） */
-@media (max-width: 480px) and (min-width: 361px) {
-
/* ===== 导航栏 ===== */
#index .nav-header {
height: 46px !important;
@@ -3671,8 +1540,6 @@ html {
}
/* 超小屏适配（320px） */
-@media (max-width: 360px) {
-
/* ===== 导航栏 - 极限压缩 ===== */
#index .nav-header {
padding: 0 8px;
@@ -4125,8 +1992,6 @@ html {
}
/* 性能优化提示 */
-@media (max-width: 768px) {
-
/* 在移动设备上禁用一些复杂动画以提升性能 */
.banner-cont .swiper-slide::before,
.banner-cont .swiper-slide::after,
@@ -4650,72 +2515,6 @@ html {
以下样式已被注释，因为与第 698 行的移动端样式冲突
导致 swiper-slide 高度变成 400px 而不是 200px
-@media (max-width: 768px) {
- .banner-cont .swiper-slide {
- height: auto !important;
- min-height: 400px;
- padding-bottom: 60px;
- }
-
- .banner-cont .swiper-slide .section-content {
- position: relative;
- top: auto;
- left: auto;
- transform: none;
- padding: 80px 20px 40px;
- text-align: center;
- }
-
- .banner-cont .swiper-slide .section-content .title-wrapper {
- max-width: 100%;
- margin-bottom: 20px;
- }
-
- .banner-cont .swiper-slide h1 {
- font-size: 32px;
- line-height: 1.3;
- }
-
- .banner-tags {
- justify-content: center;
- margin-bottom: 12px;
- }
-
- .banner-cont .banner-desc {
- font-size: 15px;
- margin: 0 auto 30px;
- line-height: 1.6;
- }
-
- /* Feature Cards (Banner-S) */
-/* 注意：banner-list 的桌面样式已在第 831 行定义 (flex布局，4列)
- 移动端样式在第 945 行定义 (grid布局，2列)
- 这里的重复样式已被移除以避免冲突 */
-
-/* 以下样式已注释，因为会覆盖桌面端的flex布局
- .banner .banner-s {
- margin-top: 0;
- padding-top: 0;
- padding-bottom: 40px;
- }
-
- .banner .banner-s .banner-list {
- display: grid;
- grid-template-columns: 1fr;
- gap: 15px;
- padding: 0 15px;
- }
-
- .banner-s .banner-list .banner-item {
- max-width: 100%;
- min-width: 0;
- flex: auto;
- }
- */
-
-/* Mobile Overrides Group */
-@media (max-width: 768px) {
-
/* Hot Products - Mobile Slider */
.hot-products-pagination {
position: relative;
@@ -4843,4 +2642,4 @@ html {
For now, let's assume we stack them or show a simple list.
Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification.
Let's style the active one well first, or maybe show all?
- */
\ No newline at end of file
+ */
diff --git a/css/index.css.backup b/css/index.css.backup
new file mode 100644
index 0000000..376f86d
--- /dev/null
+++ b/css/index.css.backup
@@ -0,0 +1,4846 @@
+/* ============================================
+ 首页专属样式 - 整体深色科技风格
+ ============================================ */
+
+/* CSS 变量：统一的容器边距 */
+#index {
+ --container-max-width: 1440px;
+ --container-padding-x: 20px;
+}
+
+/* 首页整体背景 - 统一深色，避免白色闪烁 */
+#index {
+ background: linear-gradient(180deg, #020617 0%, #0F172A 50%, #020617 100%);
+ min-height: 100vh;
+}
+
+/* 首页 section-content 统一左右边距 */
+#index .section-content {
+ padding-left: var(--container-padding-x);
+ padding-right: var(--container-padding-x);
+}
+
+/* ============================================
+ Banner 区域
+ ============================================ */
+
+/* banner */
+.banner-cont {
+ position: relative;
+ width: 100%;
+ /* height: 200px; --- 移除固定高度，让内容自适应 --- */
+ overflow: hidden;
+ z-index: 1;
+}
+
+/* banner 轮播容器 */
+.banner-cont .swiper-slide {
+ position: relative;
+ /* 桌面端高度 */
+ height: 650px;
+ width: 100%;
+ /* 深色科技渐变背景 */
+ 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;
+ /* 背景图设置 */
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ /* 多重背景层叠：先渐变遮罩，再背景图 */
+ background-blend-mode: normal, normal, normal;
+ z-index: 1;
+}
+
+/* 深色遮罩层（静态，不移动） */
+.banner-cont .swiper-slide::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ /* 深色渐变遮罩，让文字更清晰 */
+ background: linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.5) 50%, rgba(15, 23, 42, 0.3) 100%);
+ pointer-events: none;
+ z-index: 2;
+}
+
+/* 动态网格背景 - 已禁用（视觉干扰）
+@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);
+ }
+}
+*/
+
+/* 原 img 标签样式已废弃，现使用背景图
+.banner-cont .swiper-slide .img {
+ display: block;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 55%;
+ height: auto;
+ max-height: 85%;
+ object-fit: contain;
+ opacity: 0.95;
+ 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%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ max-width: var(--container-max-width);
+ padding: 0 var(--container-padding-x);
+ box-sizing: border-box;
+ z-index: 3;
+ text-align: left;
+}
+
+/* 轮播切换时的动画效果 */
+.banner-cont .swiper-slide-active .banner-tags {
+ animation: fadeInLeft 0.8s ease-out 0.1s both;
+}
+
+.banner-cont .swiper-slide-active h1 {
+ animation: fadeInLeft 0.8s ease-out 0.2s both;
+}
+
+.banner-cont .swiper-slide-active .banner-desc {
+ animation: fadeInLeft 0.8s ease-out 0.3s both;
+}
+
+.banner-cont .swiper-slide-active .btn2 {
+ animation: fadeInLeft 0.8s ease-out 0.4s both;
+}
+
+/* 非激活状态的slide内容透明 */
+.banner-cont .swiper-slide:not(.swiper-slide-active) .banner-tags,
+.banner-cont .swiper-slide:not(.swiper-slide-active) h1,
+.banner-cont .swiper-slide:not(.swiper-slide-active) .banner-desc,
+.banner-cont .swiper-slide:not(.swiper-slide-active) .btn2 {
+ opacity: 0;
+ transform: translateX(-50px);
+}
+
+/* 文字内容容器，实际的左对齐内容 */
+.banner-cont .swiper-slide .section-content>* {
+ max-width: 650px;
+}
+
+/* 标题和标签的容器 */
+.banner-cont .swiper-slide .section-content .title-wrapper {
+ display: inline-block;
+ max-width: 650px;
+}
+
+.banner-cont .swiper-slide h1 {
+ font-size: 58px;
+ line-height: 1.2;
+ font-weight: 700;
+ color: #FFFFFF;
+ letter-spacing: -1px;
+ margin-bottom: 0;
+ display: inline-block;
+ width: auto;
+ position: relative;
+ background: linear-gradient(120deg,
+ #FFFFFF 0%,
+ #FFFFFF 40%,
+ #E0F2FE 48%,
+ #BFDBFE 50%,
+ #E0F2FE 52%,
+ #FFFFFF 60%,
+ #FFFFFF 100%);
+ background-size: 200% 100%;
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: shine 6s linear infinite;
+ filter: drop-shadow(0 0 20px rgba(191, 219, 254, 0.8));
+}
+
+@keyframes shine {
+ 0% {
+ background-position: -200% 0;
+ }
+
+ 100% {
+ background-position: 200% 0;
+ }
+}
+
+@keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-50px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.banner-cont .banner-desc {
+ font-size: 17px;
+ margin-top: 24px;
+ margin-bottom: 40px;
+ max-width: 580px;
+ color: rgba(226, 232, 240, 0.85);
+ line-height: 1.8;
+}
+
+/* 轮播文案标签（标题上方的平行四边形标签） */
+.banner-tags {
+ margin-bottom: 16px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ justify-content: flex-end;
+}
+
+.banner-tag-pill {
+ display: inline-flex;
+ align-items: center;
+ padding: 6px 16px;
+ font-size: 12px;
+ font-weight: 600;
+ color: #FFFFFF;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border: none;
+ position: relative;
+ white-space: nowrap;
+ transform: skewX(-10deg);
+ box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
+ transition: all 0.3s ease;
+}
+
+.banner-tag-pill span {
+ display: inline-block;
+ transform: skewX(10deg);
+}
+
+/* 标签发光边框 */
+.banner-tag-pill::before {
+ content: '';
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ bottom: -1px;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ z-index: -1;
+ filter: blur(4px);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.banner-tag-pill:hover {
+ transform: skewX(-10deg) translateY(-2px);
+ box-shadow: 0 6px 20px rgba(56, 189, 248, 0.6);
+}
+
+.banner-tag-pill:hover::before {
+ opacity: 0.8;
+}
+
+/* 按钮优化 - 科技感渐变发光效果 */
+.banner-cont .btn2 {
+ 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;
+ display: inline-block;
+}
+
+.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-s 遮挡 */
+.banner-cont .swiper-pagination {
+ position: absolute !important;
+ bottom: 100px !important;
+ left: 50% !important;
+ transform: translateX(-50%) !important;
+ z-index: 100 !important;
+ display: flex !important;
+ gap: 12px !important;
+ width: auto !important;
+ height: auto !important;
+ visibility: visible !important;
+ opacity: 1 !important;
+ pointer-events: auto !important;
+}
+
+/* 分页器优化 - 带播放进度条 */
+.banner-cont .swiper-pagination-bullet {
+ width: 60px !important;
+ height: 4px !important;
+ background: rgba(148, 163, 184, 0.3) !important;
+ opacity: 1 !important;
+ border-radius: 2px !important;
+ transition: all 0.3s ease !important;
+ position: relative !important;
+ overflow: hidden !important;
+ margin: 0 !important;
+ flex-shrink: 0 !important;
+ visibility: visible !important;
+ display: block !important;
+}
+
+.banner-cont .swiper-pagination-bullet-active {
+ background: rgba(148, 163, 184, 0.3) !important;
+ box-shadow: 0 2px 10px rgba(56, 189, 248, 0.6) !important;
+}
+
+/* 进度条填充效果 */
+.banner-cont .swiper-pagination-bullet-active::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 0;
+ background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
+ border-radius: 2px;
+}
+
+/* 播放进度动画 */
+.banner-cont .swiper-pagination-bullet-active.progress-active::before {
+ animation: progressBar 5s linear forwards;
+}
+
+@keyframes progressBar {
+ from {
+ width: 0;
+ }
+
+ to {
+ width: 100%;
+ }
+}
+
+/* ============================================
+ 移动端 Banner 优化
+ ============================================ */
+
+@media (max-width: 768px) {
+
+ /* 调整 banner 高度 - 移动端优化 */
+ .banner-cont .swiper-slide {
+ height: 200px !important;
+ /* 强制设置高度 */
+ padding-top: 0 !important;
+ /* 移除顶部内边距，让内容居中 */
+ margin-top: 0;
+
+ /* Mobile Background Optimization */
+ /* Center the image and cover the area */
+ background-position: center bottom !important;
+ background-size: cover !important;
+ /* Force no repeat */
+ background-repeat: no-repeat !important;
+ }
+
+ /* Ensure banner container connects seamlessly - FORCE REMOVE ALL PADDING */
+ .banner-cont {
+ margin-top: 0 !important;
+ padding: 0 !important;
+ /* Override desktop padding: 25px 0 */
+ height: 200px !important;
+ /* 移动端固定高度 */
+ }
+
+ /* 移动端遮罩层更轻 */
+ .banner-cont .swiper-slide::before {
+ background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(224, 242, 254, 0.9) 100%);
+ }
+
+ /* 移动端文字内容居中对齐 - 覆盖桌面端绝对定位 */
+ .banner-cont .swiper-slide .section-content {
+ position: relative !important;
+ /* 覆盖桌面端的 absolute */
+ top: auto !important;
+ left: auto !important;
+ transform: none !important;
+ /* 移除桌面端的 transform */
+ text-align: center;
+ padding: 0 20px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ /* 移动端标题样式 - 白色，增大字号 */
+ .banner-cont .swiper-slide h1 {
+ font-size: 42px;
+ /* Increased from 36px */
+ line-height: 1.1;
+ margin-bottom: 10px;
+ color: #ffffff !important;
+ /* White text */
+ background: none !important;
+ -webkit-text-fill-color: #ffffff !important;
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+ filter: none;
+ }
+
+ /* 移动端标签居中 */
+ .banner-tags {
+ justify-content: center;
+ margin-bottom: 24px;
+ }
+
+ .banner-tag-pill {
+ font-size: 14px;
+ /* Increased from 13px */
+ padding: 7px 18px;
+ /* Larger touch target */
+ color: #ffffff !important;
+ /* White text */
+ }
+
+ /* 移动端描述文字 - 白色，增大字号 */
+ .banner-cont .banner-desc {
+ font-size: 18px;
+ /* Increased from 17px */
+ line-height: 1.4;
+ color: #ffffff !important;
+ /* White text */
+ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+ /* Ensure readability */
+ margin-top: 0;
+ margin-bottom: 20px;
+ max-width: 95%;
+ }
+
+ /* 移动端按钮样式 - 进一步增大 */
+ .banner-cont .btn2 {
+ font-size: 20px;
+ /* Increased from 18px */
+ padding: 12px 40px;
+ /* Adjusted for smaller height */
+ border-radius: 50px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ }
+
+ /* 移动端分页器位置调整 */
+ .banner-cont .swiper-pagination {
+ bottom: 20px !important;
+ }
+
+ .banner-cont .swiper-pagination-bullet {
+ width: 40px !important;
+ height: 4px !important;
+ }
+}
+
+/* Banner下方快速入口卡片 - 独立毛玻璃卡片设计 */
+.banner .banner-s {
+ margin-top: -80px;
+ position: relative;
+ z-index: 10;
+ padding: 20px 0;
+ /* 移除整体背景，让卡片独立显示 */
+ background: transparent;
+}
+
+/* 移动端调整 banner-s 位置，避免遮挡 */
+@media (max-width: 768px) {
+ .banner .banner-s {
+ margin-top: 0 !important;
+ /* 移除负边距 */
+ padding-top: 20px;
+ }
+}
+
+.banner .banner-s .banner-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+ padding: 0 20px;
+}
+
+/* 独立毛玻璃卡片样式 */
+.banner-s .banner-list .banner-item {
+ flex: 0 1 calc(25% - 20px);
+ min-width: 260px;
+ max-width: 320px;
+ cursor: pointer;
+ padding: 24px 28px;
+ position: relative;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+
+ /* 毛玻璃效果 */
+ background: rgba(15, 23, 42, 0.6);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+
+ /* 边框和圆角 */
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 0;
+
+ /* 阴影效果 */
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+ /* 内部发光 */
+ overflow: hidden;
+}
+
+/* banner-item 图标样式 */
+.banner-s .banner-list .banner-item .banner-item-icon {
+ width: 48px;
+ height: 48px;
+ flex-shrink: 0;
+ object-fit: contain;
+ transition: all 0.4s ease;
+ filter: brightness(1.1);
+}
+
+.banner-s .banner-list .banner-item:hover .banner-item-icon {
+ transform: scale(1.05);
+ filter: brightness(1.2);
+}
+
+/* banner-item 文字内容区域 */
+.banner-s .banner-list .banner-item-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+/* 卡片光晕装饰 */
+.banner-s .banner-list .banner-item::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle at center,
+ rgba(56, 189, 248, 0.15) 0%,
+ transparent 50%);
+ opacity: 0;
+ transition: opacity 0.5s ease;
+ pointer-events: none;
+}
+
+/* 悬浮效果 */
+.banner-s .banner-list .banner-item:hover {
+ transform: translateY(-8px);
+ border-color: rgba(56, 189, 248, 0.3);
+ background: rgba(15, 23, 42, 0.75);
+ box-shadow:
+ 0 12px 40px rgba(15, 23, 42, 0.6),
+ inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.banner-s .banner-list .banner-item:hover::before {
+ opacity: 0;
+}
+
+.banner-s .banner-list .banner-item:hover h5 {
+ color: #38BDF8;
+ transform: translateX(3px);
+}
+
+/* 移除分隔线 */
+.banner-s .banner-list .banner-item::after {
+ display: none;
+}
+
+/* ============================================
+ 移动端 Banner-List 卡片优化
+ ============================================ */
+
+@media (max-width: 768px) {
+
+ /* 调整 banner-s 区域 */
+ .banner .banner-s {
+ margin-top: -60px;
+ padding: 16px 0 24px;
+ }
+
+ .banner .banner-s .banner-list {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+ padding: 0 16px;
+ }
+
+ /* 移动端卡片样式 - 轻量白色主题，增加内边距 */
+ .banner-s .banner-list .banner-item {
+ flex: none;
+ min-width: auto;
+ max-width: none;
+ padding: 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+
+ /* 轻量背景 */
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+
+ /* 轻量边框和圆角 */
+ border: 1px solid rgba(226, 232, 240, 0.8);
+ border-radius: 12px;
+
+ /* 轻量阴影 */
+ box-shadow:
+ 0 2px 8px rgba(15, 23, 42, 0.08),
+ inset 0 1px 0 rgba(255, 255, 255, 0.9);
+ }
+
+ /* 移动端卡片图标 */
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 44px;
+ height: 44px;
+ }
+
+ /* 移动端卡片悬停效果 */
+ .banner-s .banner-list .banner-item:hover {
+ transform: translateY(-3px);
+ border-color: rgba(56, 189, 248, 0.3);
+ background: rgba(255, 255, 255, 1);
+ box-shadow:
+ 0 4px 16px rgba(15, 23, 42, 0.12),
+ inset 0 1px 0 rgba(255, 255, 255, 1);
+ }
+
+ /* 移动端标题文字 - 深色，增大字号 */
+ .banner .banner-s .banner-list .banner-item h5 {
+ color: #0f172a;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 1.3;
+ }
+
+ .banner .banner-s .banner-list .banner-item h5 .highlight {
+ color: #0ea5e9;
+ }
+
+ .banner .banner-s .banner-list .banner-item:hover h5 {
+ color: #0ea5e9;
+ }
+
+ /* 移动端描述文字 - 深色，增大字号 */
+ .banner .banner-s .banner-list .banner-item .title-desc {
+ color: #64748b;
+ font-size: 13px;
+ line-height: 1.5;
+ }
+
+ /* 移动端光晕效果调整 */
+ .banner-s .banner-list .banner-item::before {
+ display: none;
+ }
+}
+
+/* ============================================
+ 热销产品展示区域 - 卡片式布局
+ ============================================ */
+
+.hot-products {
+ margin-top: -100px;
+ padding: 40px 0;
+ background:
+ radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
+ rgba(15, 23, 42, 0.6);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ border-top: none;
+ border-radius: 0 0 16px 16px;
+ backdrop-filter: blur(10px);
+ position: relative;
+ z-index: 1;
+}
+
+.hot-products-title {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.hot-products-title h3 {
+ font-size: 28px;
+ font-weight: 600;
+ color: #F9FAFB;
+ margin-bottom: 10px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.hot-products-title .subtitle {
+ font-size: 14px;
+ color: rgba(203, 213, 225, 0.8);
+}
+
+/* 产品网格容器 - 移动优先 */
+.products-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 16px;
+ padding: 0 20px;
+}
+
+/* 平板及以上：2列 */
+@media (min-width: 768px) {
+ .products-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ }
+}
+
+/* 桌面端：3列 */
+@media (min-width: 1200px) {
+ .products-grid {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px;
+ }
+}
+
+/* 超大屏幕：4列 */
+@media (min-width: 1600px) {
+ .products-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+/* 产品卡片 - 适配深色主题的玻璃态设计 */
+.product-card {
+ background: rgba(30, 41, 59, 0.7);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 12px;
+ padding: 20px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ box-shadow:
+ 0 4px 16px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* 隐藏移动端的查看更多按钮 */
+.products-more-btn-wrapper {
+ display: none;
+}
+
+.product-card:hover {
+ transform: translateY(-4px);
+ border-color: rgba(56, 189, 248, 0.4);
+ background: rgba(30, 41, 59, 0.85);
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.6),
+ 0 0 20px rgba(56, 189, 248, 0.15),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* 卡片头部 */
+.product-card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 12px;
+ margin-bottom: 4px;
+}
+
+.product-name {
+ font-size: 18px;
+ font-weight: 600;
+ color: #F9FAFB;
+ margin: 0;
+ flex: 1;
+ line-height: 1.3;
+}
+
+/* 产品徽章容器 */
+.product-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ align-items: flex-start;
+ justify-content: flex-end;
+}
+
+/* 产品徽章 */
+.product-badge {
+ display: inline-block;
+ padding: 3px 8px;
+ font-size: 11px;
+ font-weight: 500;
+ border-radius: 4px;
+ white-space: nowrap;
+ line-height: 1.2;
+}
+
+.badge-hot {
+ background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
+ color: #FFFFFF;
+}
+
+.badge-recommend {
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ color: #FFFFFF;
+}
+
+.badge-promo {
+ background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+ color: #FFFFFF;
+}
+
+/* 产品描述 */
+.product-desc {
+ font-size: 13px;
+ color: rgba(203, 213, 225, 0.85);
+ line-height: 1.6;
+ margin: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ min-height: 38px;
+}
+
+/* 产品规格 */
+.product-specs {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: rgba(148, 163, 184, 0.9);
+ padding: 8px 0;
+ border-top: 1px solid rgba(148, 163, 184, 0.1);
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.spec-item {
+ white-space: nowrap;
+}
+
+.spec-divider {
+ color: rgba(148, 163, 184, 0.4);
+ user-select: none;
+}
+
+/* 产品价格区域 */
+.product-pricing {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ margin: 8px 0;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.price-main {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+}
+
+.price-currency {
+ font-size: 18px;
+ font-weight: 600;
+ color: #EF4444;
+}
+
+.price-value {
+ font-size: 32px;
+ font-weight: 700;
+ color: #EF4444;
+ line-height: 1;
+}
+
+.price-original {
+ font-size: 13px;
+ color: rgba(148, 163, 184, 0.7);
+ text-decoration: line-through;
+ margin-left: 4px;
+}
+
+.price-limit {
+ font-size: 12px;
+ color: rgba(203, 213, 225, 0.7);
+ white-space: nowrap;
+}
+
+/* 购买按钮 */
+.product-buy-btn {
+ display: block;
+ width: 100%;
+ padding: 12px 24px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #FFFFFF;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border: none;
+ border-radius: 8px;
+ text-align: center;
+ text-decoration: none;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-top: 8px;
+ box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
+}
+
+.product-buy-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
+ background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%);
+}
+
+.product-buy-btn:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
+}
+
+/* 移动端优化 */
+@media (max-width: 767px) {
+ .hot-products {
+ padding: 30px 0;
+ }
+
+ .hot-products-title h3 {
+ font-size: 24px;
+ }
+
+ .hot-products-title .subtitle {
+ font-size: 13px;
+ }
+
+ .product-card {
+ padding: 16px;
+ }
+
+ .product-name {
+ font-size: 16px;
+ }
+
+ .price-value {
+ font-size: 28px;
+ }
+
+ .price-currency {
+ font-size: 16px;
+ }
+
+ .product-buy-btn {
+ padding: 10px 20px;
+ font-size: 13px;
+ }
+}
+
+.banner .banner-s .banner-list .banner-item h5 {
+ color: #F9FAFB;
+ font-size: 20px;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ margin-bottom: 0;
+}
+
+/* banner-item 标题中的重点色 */
+.banner .banner-s .banner-list .banner-item h5 .highlight {
+ color: #38BDF8;
+ font-weight: 700;
+}
+
+.banner .banner-s .banner-list .banner-item .title-desc {
+ color: rgba(203, 213, 225, 0.8);
+ font-size: 13px;
+ line-height: 1.6;
+}
+
+
+/* 服务内容 */
+.service-content {
+ display: flex;
+ margin-top: 60px;
+ margin: -12px;
+ margin-top: 50px;
+}
+
+/* 服务模块整体背景：深色科技感基调 + 方格线 */
+.section.service {
+ background:
+ 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:
+ 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;
+ 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(203, 213, 225, 0.85);
+ font-size: 16px;
+}
+
+/* 服务卡片 - 3D悬浮效果 */
+.service .service-box {
+ min-height: 240px;
+ margin: 12px;
+ position: relative;
+ 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 {
+ 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;
+ 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: 18px 0;
+ height: 44px;
+ color: rgba(203, 213, 225, 0.8);
+ line-height: 1.6;
+}
+
+/* 服务标签组 */
+.service .service-tag-group {
+ display: flex;
+ 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: #0F172A url(../assets/img/index/home-bg.png) no-repeat center center;
+ background-size: cover;
+ position: relative;
+}
+
+/* 添加深色遮罩增强对比度 + 方格线 */
+.resolve::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background:
+ linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+ linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
+ background-size: 50px 50px, 50px 50px, 100% 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-new {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ margin-top: 60px;
+ flex-wrap: wrap;
+}
+
+/* 竖向长方形卡片 */
+.resolve-card {
+ width: 150px;
+ height: 500px;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.resolve-card a {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.resolve-card-inner {
+ width: 100%;
+ height: 100%;
+ background: rgba(15, 23, 42, 0.7);
+ backdrop-filter: blur(16px);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 80px;
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 卡片顶部图片 - 撑满宽度 */
+.resolve-card-inner::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 80px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 1;
+}
+
+/* 为不同卡片设置不同图标 */
+.resolve-card:nth-child(1) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(2) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(3) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(4) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(5) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(6) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(7) .resolve-card-inner::after {
+ background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+/* 卡片发光边框效果 */
+.resolve-card-inner::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ 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-card-title {
+ color: #F9FAFB;
+ font-size: 24px;
+ font-weight: 700;
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+ letter-spacing: 8px;
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 2;
+ position: relative;
+ margin-top: 140px;
+}
+
+/* 内容区域 - 默认隐藏 */
+.resolve-card-content {
+ position: absolute;
+ top: 80px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 32px 24px;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ z-index: 1;
+}
+
+.resolve-card-desc {
+ color: rgba(203, 213, 225, 0.9);
+ line-height: 1.8;
+ font-size: 14px;
+}
+
+.resolve-card-link {
+ color: rgba(148, 163, 184, 0.9);
+ font-size: 14px;
+ font-weight: 500;
+ display: inline-flex;
+ align-items: center;
+ transition: all 0.3s ease;
+ margin-top: 20px;
+}
+
+.resolve-card-link .icon-arrow-right {
+ margin-left: 5px;
+ transition: transform 0.3s ease;
+}
+
+/* 悬停效果 */
+.resolve-card:hover {
+ width: 320px;
+ z-index: 10;
+}
+
+.resolve-card:hover .resolve-card-inner {
+ background: rgba(15, 23, 42, 0.9);
+ 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);
+ border-radius: 16px;
+}
+
+.resolve-card:hover .resolve-card-inner::before {
+ opacity: 1;
+}
+
+/* 悬停时图片高度展开 */
+.resolve-card:hover .resolve-card-inner::after {
+ width: 100%;
+ height: 140px;
+}
+
+/* 悬停时标题变为横向并移到图片下方 */
+.resolve-card:hover .resolve-card-title {
+ writing-mode: horizontal-tb;
+ text-orientation: mixed;
+ letter-spacing: 2px;
+ position: absolute;
+ top: 160px;
+ left: 24px;
+ right: 24px;
+ margin-top: 0;
+ color: #38BDF8;
+ text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+ text-align: left;
+}
+
+/* 悬停时显示内容 */
+.resolve-card:hover .resolve-card-content {
+ opacity: 1;
+ transform: translateY(0);
+ top: 200px;
+}
+
+.resolve-card:hover .resolve-card-link {
+ color: #38BDF8;
+}
+
+.resolve-card:hover .resolve-card-link .icon-arrow-right {
+ transform: translateX(5px);
+}
+
+/* 解决方案卡片 - 错落悬浮效果 */
+.resolve-content .resolve-box {
+ position: relative;
+ top: 0;
+ max-width: 335px;
+ 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;
+ 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 {
+ 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: #38BDF8;
+ text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+}
+
+.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, #0F172A 0%, #020617 100%);
+ position: relative;
+}
+
+.practice::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: 40px 40px;
+ pointer-events: none;
+}
+
+.practice .section-title h2 {
+ color: #F9FAFB;
+ font-size: 40px;
+ font-weight: 700;
+}
+
+.practice .section-title .section-desc {
+ color: rgba(203, 213, 225, 0.85);
+ font-size: 16px;
+}
+
+.practice .practice-content {
+ margin: -12px;
+ margin-top: 50px;
+ flex-wrap: wrap;
+}
+
+/* 实践卡片优化 */
+.practice .practice-box {
+ margin: 12px;
+ padding: 36px;
+ width: 453px;
+ border-radius: 20px;
+ text-align: center;
+ 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: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 {
+ /* 统一为暗色科技风背景 */
+ background:
+ 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::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(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(203, 213, 225, 0.85);
+ font-size: 16px;
+}
+
+/* ============================================
+ 企业荣誉展示区域 - 精致卡片设计
+ ============================================ */
+
+.honor-section {
+ margin-top: 80px;
+ padding: 60px 0;
+ background: transparent;
+}
+
+.honor-title {
+ text-align: center;
+ margin-bottom: 50px;
+}
+
+.honor-title h3 {
+ font-size: 36px;
+ font-weight: 700;
+ color: #F9FAFB;
+ margin-bottom: 12px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.honor-subtitle {
+ font-size: 16px;
+ color: rgba(148, 163, 184, 0.9);
+ margin: 0;
+}
+
+/* 荣誉列表 - 横向卡片布局 */
+.honor-list {
+ display: flex;
+ justify-content: center;
+ gap: 30px;
+ flex-wrap: wrap;
+ padding: 0 20px;
+}
+
+/* 荣誉卡片 */
+.honor-item {
+ position: relative;
+ width: 280px;
+ padding: 40px 30px;
+ background:
+ radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
+ rgba(15, 23, 42, 0.7);
+ backdrop-filter: blur(16px);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ border-radius: 16px;
+ text-align: center;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ overflow: hidden;
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* 卡片光晕效果 */
+.honor-item::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
+ opacity: 0;
+ transition: opacity 0.5s ease;
+ pointer-events: none;
+}
+
+.honor-item:hover::before {
+ opacity: 1;
+}
+
+/* 荣誉图标容器 */
+.honor-icon {
+ width: 120px;
+ height: 120px;
+ margin: 0 auto 24px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background:
+ linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
+ border: 2px solid rgba(56, 189, 248, 0.2);
+ transition: all 0.4s ease;
+}
+
+.honor-icon::after {
+ content: '';
+ position: absolute;
+ inset: -2px;
+ border-radius: 50%;
+ padding: 2px;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ -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.4s ease;
+}
+
+.honor-item:hover .honor-icon::after {
+ opacity: 1;
+}
+
+.honor-icon img {
+ width: 80px;
+ height: 80px;
+ object-fit: contain;
+ transition: all 0.4s ease;
+ filter: brightness(1.1) drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3));
+}
+
+.honor-item:hover .honor-icon {
+ transform: scale(1.1) rotate(5deg);
+ background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
+}
+
+.honor-item:hover .honor-icon img {
+ transform: scale(1.1);
+ filter: brightness(1.2) drop-shadow(0 6px 20px rgba(56, 189, 248, 0.5));
+}
+
+/* 荣誉名称 */
+.honor-name {
+ font-size: 18px;
+ font-weight: 600;
+ color: #F9FAFB;
+ margin: 0;
+ line-height: 1.4;
+ transition: all 0.3s ease;
+}
+
+.honor-item:hover .honor-name {
+ color: #38BDF8;
+ transform: translateY(-2px);
+}
+
+/* 装饰性边角 */
+.honor-item::after {
+ content: '';
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 40px;
+ height: 40px;
+ background:
+ linear-gradient(to right, transparent 50%, rgba(56, 189, 248, 0.1) 50%),
+ linear-gradient(to bottom, transparent 50%, rgba(56, 189, 248, 0.1) 50%);
+ background-size: 100% 2px, 2px 100%;
+ background-position: 100% 0, 100% 0;
+ background-repeat: no-repeat;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.honor-item:hover::after {
+ opacity: 1;
+}
+
+/* 当荣誉数量为偶数时居中显示 */
+.honor-list:has(.honor-item:nth-child(2):last-child) {
+ justify-content: center;
+}
+
+/* 响应式 */
+@media (max-width: 991px) {
+ .honor-item {
+ width: 240px;
+ padding: 30px 20px;
+ }
+
+ .honor-icon {
+ width: 100px;
+ height: 100px;
+ }
+
+ .honor-icon img {
+ width: 70px;
+ height: 70px;
+ }
+}
+
+@media (max-width: 767px) {
+ .honor-section {
+ margin-top: 40px;
+ padding: 40px 0;
+ }
+
+ .honor-title h3 {
+ font-size: 28px;
+ }
+
+ .honor-list {
+ gap: 20px;
+ }
+
+ .honor-item {
+ width: 100%;
+ max-width: 300px;
+ }
+}
+
+/* 旧样式保留（兼容性） */
+.cert {
+ display: none;
+}
+
+.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:
+ 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:
+ 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: 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(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:
+ 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 {
+ position: relative;
+ padding-left: 14px;
+ font-size: 20px;
+ line-height: 24px;
+ height: 24px;
+ color: #F9FAFB;
+ font-weight: 600;
+}
+
+/* 标题左侧发光装饰条 */
+.news-content .news-head .news-title::before {
+ content: '';
+ width: 4px;
+ height: 24px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ 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.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:hover {
+ color: #38BDF8;
+}
+
+.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: 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: 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: 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: 12px;
+ display: flex;
+ align-items: center;
+ 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: rgba(226, 232, 240, 0.9);
+ transition: all 0.3s ease;
+}
+
+.news-content .news-item:hover .title {
+ color: #38BDF8;
+ padding-left: 5px;
+}
+
+.news-content .news-item .time {
+ 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: 64px;
+ }
+
+ /* 移除 section-content 的 max-width 限制，保持容器系统统一 */
+
+ .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: 52px;
+ }
+
+ .banner-cont .swiper-slide .section-content {
+ max-width: 600px;
+ }
+
+ .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: 44px;
+ }
+
+ /* 小屏幕下保持左对齐布局 */
+ .banner-cont .swiper-slide .section-content>* {
+ max-width: 500px;
+ }
+
+ /* 已废弃：背景图不需要宽度设置
+ .banner-cont .swiper-slide .img {
+ width: 50%;
+ }
+ */
+
+ .banner-s .banner-list {
+ gap: 16px;
+ padding: 0 16px;
+ }
+
+ .banner-s .banner-list .banner-item {
+ flex: 0 1 calc(50% - 16px);
+ padding: 28px 32px;
+ }
+
+ .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: 36px;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 15px;
+ }
+
+ /* 平板尺寸下，调整遮罩透明度，文字居中 */
+ .banner-cont .swiper-slide::before {
+ background: linear-gradient(rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%);
+ }
+
+ .banner-cont .swiper-slide .section-content {
+ text-align: center;
+ }
+
+ .banner-cont .swiper-slide .section-content>* {
+ max-width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .banner-tags {
+ justify-content: center;
+ }
+
+ .banner-s .banner-list {
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .banner-s .banner-list .banner-item {
+ flex: 1 1 100%;
+ width: 100%;
+ max-width: 100%;
+ padding: 24px 28px;
+ }
+
+ .banner-s .banner-list .banner-item:not(:last-child)::after {
+ display: none;
+ }
+
+ /* 热销产品表格在平板上开始使用横向滚动 */
+ .products-table-wrapper {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ .products-table {
+ min-width: 800px;
+ }
+
+ .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) {
+
+ /* ===== 导航栏 - 极简设计 ===== */
+ #index .nav-header {
+ padding: 0 8px;
+ height: 50px !important;
+ display: flex;
+ align-items: stretch;
+ overflow: hidden;
+ }
+
+ #index .nav-header .nav-left {
+ display: flex;
+ align-items: stretch;
+ flex: 1;
+ }
+
+ #index .nav-header .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ height: 100% !important;
+ flex-wrap: nowrap !important;
+ flex-shrink: 0;
+ min-height: 50px;
+ }
+
+ #index .nav-menu {
+ display: none;
+ /* 移动端隐藏主导航 */
+ }
+
+ #index .nav-header .nav-left .nav-icon {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+
+ #index .nav-header .nav-left .nav-icon img {
+ width: 100px;
+ height: 24px;
+ margin-right: 0;
+ }
+
+ #index .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ justify-content: flex-end;
+ gap: 6px;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 50px;
+ }
+
+ #index .nav-right .nav-text-link {
+ display: none;
+ }
+
+ #index .nav-right .nav-divider {
+ display: none;
+ }
+
+ /* 移动端隐藏登录按钮和分隔符，只显示注册按钮 */
+ #index .no-login {
+ display: flex !important;
+ gap: 0 !important;
+ align-items: stretch;
+ height: 100% !important;
+ order: 4;
+ }
+
+ #index .no-login.nav-desktop-link {
+ display: flex !important;
+ }
+
+ #index .no-login .nav-text-link,
+ #index .no-login .nav-divider {
+ display: none !important;
+ }
+
+ #index .no-login .btn.btn-normal#registBtn {
+ padding: 0 10px !important;
+ font-size: 10px !important;
+ min-width: auto !important;
+ height: 100% !important;
+ line-height: 1 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ margin: 0 !important;
+ border: none !important;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important;
+ flex-shrink: 0 !important;
+ box-sizing: border-box !important;
+ }
+
+ #index .no-login .btn.btn-normal#registBtn::before {
+ width: 12px !important;
+ height: 12px !important;
+ }
+
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ #index .mobile-menu-toggle {
+ display: flex !important;
+ gap: 0;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ justify-content: center;
+ align-items: center;
+ margin-right: 0;
+ order: 3;
+ padding: 0;
+ background: none;
+ border: none;
+ }
+
+ #index .mobile-menu-toggle .mobile-menu-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ /* ===== Banner 区域 - 大幅缩小 ===== */
+ .banner-cont .swiper-slide {
+ height: 100vh !important;
+ min-height: 350px;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 24px !important;
+ line-height: 1.3;
+ margin-bottom: 8px;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 12px !important;
+ margin-top: 10px !important;
+ margin-bottom: 20px !important;
+ line-height: 1.5;
+ max-height: 60px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ }
+
+ .banner-tag-pill {
+ padding: 3px 10px;
+ font-size: 10px;
+ }
+
+ .banner-cont .btn2 {
+ padding: 8px 20px !important;
+ font-size: 12px !important;
+ }
+
+ /* 调整进度条位置到底部 */
+ .banner-cont .swiper-pagination {
+ bottom: 12px !important;
+ }
+
+ .banner-cont .swiper-pagination-bullet {
+ width: 45px !important;
+ }
+
+ /* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */
+ .banner .banner-s {
+ margin-top: 12px;
+ padding: 10px 6px;
+ background: transparent;
+ }
+
+ /* 移动端 banner-list 网格布局 */
+ @media (max-width: 768px) {
+ .banner .banner-s .banner-list {
+ gap: 6px !important;
+ display: grid !important;
+ grid-template-columns: repeat(2, 1fr) !important;
+ width: 100% !important;
+ padding: 0 !important;
+ }
+ }
+
+ .banner-s .banner-list .banner-item {
+ padding: 10px 10px !important;
+ gap: 8px !important;
+ flex: none !important;
+ display: flex !important;
+ flex-direction: row !important;
+ align-items: center !important;
+ text-align: left !important;
+ min-height: 85px !important;
+ max-height: none !important;
+ justify-content: flex-start !important;
+ border-radius: 0 !important;
+ width: auto !important;
+ min-width: auto !important;
+ max-width: none !important;
+ background: rgba(15, 23, 42, 0.6) !important;
+ border: 1px solid rgba(148, 163, 184, 0.15) !important;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 30px;
+ height: 30px;
+ margin-bottom: 0;
+ margin-right: 8px;
+ flex-shrink: 0;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+ flex: 1;
+ min-width: 0;
+ }
+
+ .banner-s .banner-list .banner-item h5 {
+ font-size: 11px !important;
+ margin-bottom: 0 !important;
+ line-height: 1.3;
+ color: #E5E7EB;
+ }
+
+ .banner-s .banner-list .banner-item .title-desc {
+ font-size: 9px !important;
+ line-height: 1.3;
+ margin: 0 !important;
+ color: rgba(203, 213, 225, 0.8);
+ }
+
+ /* ===== 热销产品 - 精简卡片 ===== */
+ .hot-products {
+ margin-top: -50px;
+ padding: 20px 0 30px !important;
+ }
+
+ .hot-products-title {
+ margin-bottom: 20px;
+ }
+
+ .hot-products-title h3 {
+ font-size: 20px;
+ margin-bottom: 6px;
+ }
+
+ .hot-products-title .subtitle {
+ font-size: 11px;
+ }
+
+ .products-table-wrapper {
+ padding: 0 12px;
+ }
+
+ /* 表格转卡片 */
+ .products-table,
+ .products-table thead,
+ .products-table tbody,
+ .products-table tr,
+ .products-table td {
+ display: block;
+ }
+
+ .products-table thead {
+ display: none;
+ }
+
+ .products-table tbody tr {
+ margin-bottom: 12px;
+ padding: 14px;
+ border-radius: 8px;
+ }
+
+ .products-table tbody tr:hover {
+ transform: none;
+ }
+
+ .products-table tbody td {
+ padding: 8px 0 8px 90px;
+ font-size: 12px;
+ }
+
+ .products-table tbody td::before {
+ left: 14px;
+ font-size: 11px;
+ }
+
+ .products-table tbody td:nth-child(1)::before {
+ content: "产品";
+ }
+
+ .products-table .product-name {
+ font-size: 13px;
+ }
+
+ .products-table .product-tag {
+ font-size: 10px;
+ padding: 1px 6px;
+ }
+
+ .products-table .product-price {
+ font-size: 16px;
+ }
+
+ .products-table .product-price .unit {
+ font-size: 11px;
+ }
+
+ .products-table .btn-buy {
+ padding: 6px 16px;
+ font-size: 11px;
+ }
+
+ /* ===== Section 通用 - 紧凑间距 ===== */
+ .section {
+ padding: 30px 0 !important;
+ }
+
+ .section-content {
+ padding: 30px 12px !important;
+ }
+
+ .section-title {
+ margin-bottom: 20px;
+ }
+
+ .section-title h2 {
+ font-size: 22px;
+ margin-bottom: 8px;
+ }
+
+ .section-title .section-desc {
+ font-size: 12px;
+ line-height: 1.5;
+ }
+
+ .section-title h2::after {
+ width: 35px;
+ height: 2px;
+ bottom: -6px;
+ }
+
+ /* ===== 解决方案 - 竖向卡片列表 ===== */
+ .solution-wrapper {
+ margin-top: 20px;
+ }
+
+ /* 隐藏按钮导航，改用卡片模式 */
+ .solution-tabs {
+ display: none;
+ }
+
+ .solution-slider {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ min-height: auto;
+ }
+
+ /* 显示所有幻灯片作为普通卡片 */
+ .solution-slide {
+ display: block !important;
+ opacity: 1 !important;
+ }
+
+ .solution-content {
+ min-height: auto;
+ padding: 14px 12px !important;
+ gap: 12px;
+ flex-direction: column;
+ border-radius: 8px;
+ background: rgba(30, 41, 59, 0.6);
+ border: 1px solid rgba(148, 163, 184, 0.1);
+ }
+
+ .solution-content:hover {
+ background: rgba(30, 41, 59, 0.8);
+ border-color: rgba(56, 189, 248, 0.2);
+ }
+
+ .solution-text {
+ padding: 0;
+ }
+
+ .solution-text h3 {
+ font-size: 16px;
+ margin-bottom: 4px;
+ color: #E5E7EB;
+ }
+
+ .solution-subtitle {
+ font-size: 10px;
+ margin-bottom: 8px;
+ color: rgba(148, 163, 184, 0.8);
+ }
+
+ .solution-desc {
+ margin-bottom: 10px;
+ }
+
+ .solution-desc p {
+ font-size: 10px;
+ line-height: 1.5;
+ margin-bottom: 4px;
+ color: rgba(203, 213, 225, 0.8);
+ display: block;
+ }
+
+ .solution-desc p:nth-child(n+2) {
+ display: none;
+ /* 小屏只显示第1段 */
+ }
+
+ .solution-link {
+ padding: 6px 16px;
+ font-size: 10px;
+ align-self: flex-start;
+ }
+
+ .solution-image {
+ width: 100%;
+ height: 120px;
+ object-fit: cover;
+ border-radius: 4px;
+ order: -1;
+ /* 图片移到上方 */
+ }
+
+ /* ===== 基础设施 - 简化显示 ===== */
+ .section-base {
+ padding: 25px 0 !important;
+ }
+
+ .base .base-content {
+ margin-top: 20px;
+ margin-bottom: 30px;
+ }
+
+ .base .base-content .fboxRow {
+ margin-bottom: 12px;
+ }
+
+ .base .base-content h2 {
+ font-size: 32px;
+ }
+
+ .base .base-content .title-desc {
+ font-size: 11px;
+ }
+
+ .section-base .base {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .section-base .base img {
+ width: 90%;
+ max-width: 400px;
+ height: auto;
+ margin: 20px auto 0;
+ padding: 0;
+ }
+
+ /* ===== 荣誉展示 - 紧凑布局 ===== */
+ .honor-section {
+ margin-top: 30px;
+ padding: 25px 0;
+ }
+
+ .honor-title {
+ margin-bottom: 20px;
+ }
+
+ .honor-title h3 {
+ font-size: 20px;
+ margin-bottom: 6px;
+ }
+
+ .honor-subtitle {
+ font-size: 11px;
+ }
+
+ .honor-list {
+ gap: 12px;
+ padding: 0 12px;
+ }
+
+ .honor-item {
+ width: calc(50% - 6px);
+ /* 改为2列布局 */
+ padding: 20px 16px;
+ }
+
+ .honor-icon {
+ width: 80px;
+ height: 80px;
+ margin-bottom: 12px;
+ }
+
+ .honor-icon img {
+ width: 50px;
+ height: 50px;
+ }
+
+ .honor-name {
+ font-size: 13px;
+ }
+
+ /* ===== 新闻区域 - 紧凑 ===== */
+ .section.news {
+ padding: 25px 0 !important;
+ }
+
+ .news-content {
+ margin-top: 20px;
+ gap: 20px;
+ }
+
+ .news-content .news-cont {
+ padding: 16px;
+ }
+
+ .news-content .news-head {
+ margin-bottom: 12px;
+ }
+
+ .news-content .news-head .news-title {
+ font-size: 16px;
+ height: auto;
+ line-height: 1.4;
+ }
+
+ .news-content .news-head .news-title::before {
+ height: 18px;
+ }
+
+ .news-content .news-head .news-more {
+ font-size: 11px;
+ }
+
+ .news-content .news-item {
+ line-height: 36px;
+ padding: 0 4px;
+ }
+
+ .news-content .news-item .number {
+ min-width: 18px;
+ height: 18px;
+ font-size: 11px;
+ margin-right: 8px;
+ }
+
+ .news-content .news-item .title {
+ font-size: 12px;
+ }
+
+ .news-content .news-item .time {
+ font-size: 10px;
+ min-width: 70px;
+ }
+}
+
+/* 小手机 最大575px */
+@media (max-width: 575px) {
+
+ /* ===== 导航栏 - 超紧凑 ===== */
+ #index .nav-header {
+ padding: 0 10px;
+ height: 48px !important;
+ display: flex;
+ align-items: stretch;
+ overflow: hidden;
+ }
+
+ #index .nav-header .nav-left {
+ display: flex;
+ align-items: stretch;
+ flex: 1;
+ }
+
+ #index .nav-header .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 48px;
+ }
+
+ #index .nav-header .nav-left .nav-icon {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+
+ #index .nav-header .nav-left .nav-icon img {
+ width: 90px;
+ height: 22px;
+ }
+
+ #index .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ justify-content: flex-end;
+ gap: 4px;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 48px;
+ }
+
+ #index .nav-right .nav-text-link {
+ display: none;
+ }
+
+ #index .nav-right .nav-divider {
+ display: none;
+ }
+
+ /* 移动端隐藏登录按钮和分隔符，只显示注册按钮 */
+ #index .no-login {
+ display: flex !important;
+ gap: 0 !important;
+ align-items: stretch;
+ height: 100% !important;
+ order: 4;
+ }
+
+ #index .no-login.nav-desktop-link {
+ display: flex !important;
+ }
+
+ #index .no-login .nav-text-link,
+ #index .no-login .nav-divider {
+ display: none !important;
+ }
+
+ /* 调整移动端注册按钮样式 - 长方形无圆角，撑满导航栏高度 */
+ #index .no-login .btn.btn-normal#registBtn {
+ padding: 0 25px !important;
+ font-size: 12px !important;
+ min-width: auto !important;
+ height: 100% !important;
+ line-height: 1 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ margin: 0 !important;
+ border: none !important;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important;
+ flex-shrink: 0 !important;
+ box-sizing: border-box !important;
+ gap: 2px !important;
+ }
+
+ /* 移动端注册按钮图标显示 */
+ #index .no-login .btn.btn-normal#registBtn .regist-icon {
+ display: block;
+ width: 15px;
+ height: 15px;
+ margin-right: 0 !important;
+ }
+
+ /* 移动端注册按钮图标隐藏 - 旧样式移除 */
+ #index .no-login .btn.btn-normal#registBtn::before {
+ display: none;
+ }
+
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ #index .mobile-menu-toggle {
+ display: flex !important;
+ gap: 0;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ justify-content: center;
+ align-items: center;
+ margin-right: 0;
+ order: 3;
+ padding: 0;
+ background: none;
+ border: none;
+ }
+
+ #index .mobile-menu-toggle .mobile-menu-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ /* ===== Banner ===== */
+ .banner-cont .swiper-slide {
+ height: 100vh !important;
+ min-height: 200px;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 20px !important;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 11px !important;
+ margin-top: 8px !important;
+ margin-bottom: 16px !important;
+ -webkit-line-clamp: 2;
+ }
+
+ .banner-tag-pill {
+ font-size: 9px;
+ padding: 2px 8px;
+ }
+
+ .banner-cont .btn2 {
+ padding: 6px 16px !important;
+ font-size: 11px !important;
+ }
+
+ /* 调整进度条位置到底部 */
+ .banner-cont .swiper-pagination {
+ bottom: 12px !important;
+ }
+
+ .banner-cont .swiper-pagination-bullet {
+ width: 40px !important;
+ }
+
+ /* ===== 快速入口 - 精简 ===== */
+ .banner .banner-s {
+ margin-top: 10px;
+ padding: 10px 6px;
+ }
+
+ .banner-s .banner-list .banner-item {
+ padding: 10px 12px !important;
+ min-height: 85px !important;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 30px;
+ height: 30px;
+ }
+
+ .banner-s .banner-list .banner-item h5 {
+ font-size: 11px !important;
+ }
+
+ .banner-s .banner-list .banner-item .title-desc {
+ font-size: 9px !important;
+ }
+
+ /* ===== 热销产品 - 紧凑 ===== */
+ .hot-products {
+ margin-top: -40px;
+ padding: 16px 0 25px !important;
+ }
+
+ .hot-products-title h3 {
+ font-size: 18px;
+ }
+
+ .hot-products-title .subtitle {
+ font-size: 10px;
+ }
+
+ .products-table-wrapper {
+ padding: 0 10px;
+ }
+
+ .products-table tbody tr {
+ margin-bottom: 10px;
+ padding: 12px;
+ }
+
+ .products-table tbody td {
+ padding: 6px 0 6px 75px;
+ font-size: 11px;
+ }
+
+ .products-table tbody td::before {
+ left: 12px;
+ font-size: 10px;
+ }
+
+ .products-table .product-name {
+ font-size: 12px;
+ }
+
+ .products-table .product-price {
+ font-size: 15px;
+ }
+
+ .products-table .btn-buy {
+ padding: 5px 14px;
+ font-size: 10px;
+ }
+
+ /* ===== Section - 极简间距 ===== */
+ .section {
+ padding: 25px 0 !important;
+ }
+
+ .section-content {
+ padding: 25px 10px !important;
+ }
+
+ .section-title h2 {
+ font-size: 19px;
+ }
+
+ .section-title .section-desc {
+ font-size: 11px;
+ }
+
+ .section-title h2::after {
+ width: 30px;
+ }
+
+ /* ===== 解决方案 - 最小化 ===== */
+ .solution-wrapper {
+ margin-top: 16px;
+ }
+
+ .solution-tabs {
+ gap: 5px;
+ flex-wrap: wrap;
+ }
+
+ .solution-tab {
+ padding: 5px 10px;
+ font-size: 10px;
+ flex: 0 1 auto;
+ }
+
+ .solution-content {
+ padding: 14px !important;
+ gap: 16px;
+ }
+
+ .solution-text h3 {
+ font-size: 16px;
+ }
+
+ .solution-subtitle {
+ font-size: 10px;
+ }
+
+ .solution-desc p {
+ font-size: 10px;
+ -webkit-line-clamp: 1;
+ /* 小屏只显示1行 */
+ }
+
+ .solution-link {
+ padding: 7px 16px;
+ font-size: 10px;
+ }
+
+ .solution-image {
+ height: 150px;
+ }
+
+ /* ===== 基础设施 - 极简 ===== */
+ .section-base {
+ padding: 20px 0 !important;
+ }
+
+ .base .base-content {
+ margin-top: 16px;
+ margin-bottom: 25px;
+ }
+
+ .base .base-content .fboxRow {
+ margin-bottom: 10px;
+ }
+
+ .base .base-content h2 {
+ font-size: 28px;
+ }
+
+ .base .base-content .title-desc {
+ font-size: 10px;
+ }
+
+ .section-base .base img {
+ width: 100%;
+ max-width: 350px;
+ margin: 16px auto 0;
+ }
+
+ /* ===== 荣誉 - 简化 ===== */
+ .honor-section {
+ margin-top: 25px;
+ padding: 20px 0;
+ }
+
+ .honor-title h3 {
+ font-size: 18px;
+ }
+
+ .honor-list {
+ gap: 10px;
+ }
+
+ .honor-item {
+ padding: 16px 12px;
+ }
+
+ .honor-icon {
+ width: 70px;
+ height: 70px;
+ margin-bottom: 10px;
+ }
+
+ .honor-icon img {
+ width: 45px;
+ height: 45px;
+ }
+
+ .honor-name {
+ font-size: 12px;
+ }
+
+ /* ===== 新闻 - 紧凑 ===== */
+ .section.news {
+ padding: 20px 0 !important;
+ }
+
+ .news-content {
+ margin-top: 16px;
+ gap: 16px;
+ }
+
+ .news-content .news-cont {
+ padding: 14px;
+ }
+
+ .news-content .news-head .news-title {
+ font-size: 15px;
+ }
+
+ .news-content .news-head .news-more {
+ font-size: 10px;
+ }
+
+ .news-content .news-item {
+ line-height: 32px;
+ }
+
+ .news-content .news-item .number {
+ min-width: 16px;
+ height: 16px;
+ font-size: 10px;
+ margin-right: 6px;
+ }
+
+ .news-content .news-item .title {
+ font-size: 11px;
+ }
+
+ .news-content .news-item .time {
+ font-size: 9px;
+ min-width: 65px;
+ }
+}
+
+/* 小屏手机优化（480px） */
+@media (max-width: 480px) and (min-width: 361px) {
+
+ /* ===== 导航栏 ===== */
+ #index .nav-header {
+ height: 46px !important;
+ }
+
+ #index .nav-header .nav-left .nav-icon img {
+ width: 75px;
+ height: 17px;
+ }
+
+ #index .nav-right .nav-text-link {
+ font-size: 10px;
+ padding: 0 5px;
+ }
+
+ /* ===== Banner ===== */
+ .banner-cont .swiper-slide {
+ height: 220px !important;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 18px !important;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 11px !important;
+ -webkit-line-clamp: 1;
+ }
+
+ /* ===== 快速入口 - 四宫格中等版 ===== */
+ .banner .banner-s {
+ margin-top: 16px;
+ padding: 8px 8px;
+ }
+
+ .banner .banner-s .banner-list {
+ gap: 6px !important;
+ display: grid !important;
+ grid-template-columns: repeat(2, 1fr) !important;
+ width: 100% !important;
+ padding: 0 !important;
+ }
+
+ .banner-s .banner-list .banner-item {
+ padding: 8px 10px !important;
+ flex: none !important;
+ display: flex !important;
+ flex-direction: row !important;
+ align-items: center !important;
+ text-align: left !important;
+ min-height: 70px !important;
+ justify-content: flex-start !important;
+ border-radius: 0 !important;
+ width: auto !important;
+ min-width: auto !important;
+ max-width: none !important;
+ background: rgba(15, 23, 42, 0.6) !important;
+ border: 1px solid rgba(148, 163, 184, 0.15) !important;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 28px;
+ height: 28px;
+ margin-bottom: 0;
+ margin-right: 8px;
+ flex-shrink: 0;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+ flex: 1;
+ min-width: 0;
+ }
+
+ .banner-s .banner-list .banner-item h5 {
+ font-size: 11px !important;
+ margin-bottom: 0 !important;
+ line-height: 1.2;
+ color: #E5E7EB;
+ }
+
+ .banner-s .banner-list .banner-item .title-desc {
+ font-size: 9px !important;
+ line-height: 1.2;
+ margin: 0 !important;
+ color: rgba(203, 213, 225, 0.8);
+ }
+
+ /* ===== 解决方案 ===== */
+ .solution-content {
+ padding: 12px 10px !important;
+ }
+
+ .solution-text h3 {
+ font-size: 15px;
+ }
+
+ .solution-image {
+ height: 110px;
+ }
+}
+
+/* 超小屏适配（320px） */
+@media (max-width: 360px) {
+
+ /* ===== 导航栏 - 极限压缩 ===== */
+ #index .nav-header {
+ padding: 0 8px;
+ height: 44px !important;
+ display: flex;
+ align-items: stretch;
+ overflow: hidden;
+ }
+
+ #index .nav-header .nav-left {
+ display: flex;
+ align-items: stretch;
+ flex: 1;
+ }
+
+ #index .nav-header .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 44px;
+ }
+
+ #index .nav-header .nav-left .nav-icon {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+
+ #index .nav-header .nav-left .nav-icon img {
+ width: 80px;
+ height: 20px;
+ }
+
+ #index .nav-right .nav-text-link {
+ display: none;
+ }
+
+ #index .nav-right .nav-divider {
+ display: none;
+ }
+
+ #index .nav-right {
+ display: flex !important;
+ align-items: stretch !important;
+ justify-content: flex-end;
+ gap: 4px;
+ height: 100% !important;
+ flex-shrink: 0;
+ min-height: 44px;
+ }
+
+ /* 移动端隐藏登录按钮和分隔符，只显示注册按钮 */
+ #index .no-login {
+ display: flex !important;
+ gap: 0 !important;
+ align-items: stretch;
+ height: 100% !important;
+ order: 4;
+ }
+
+ #index .no-login.nav-desktop-link {
+ display: flex !important;
+ }
+
+ #index .no-login .nav-text-link,
+ #index .no-login .nav-divider {
+ display: none !important;
+ }
+
+ /* 调整移动端注册按钮样式 - 长方形无圆角，撑满导航栏高度 */
+ #index .no-login .btn.btn-normal#registBtn {
+ padding: 0 35px !important;
+ font-size: 9px !important;
+ min-width: auto !important;
+ height: 100% !important;
+ line-height: 1 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ margin: 0 !important;
+ border: none !important;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important;
+ flex-shrink: 0 !important;
+ box-sizing: border-box !important;
+ gap: 2px !important;
+ }
+
+ /* 移动端注册按钮图标显示 */
+ #index .no-login .btn.btn-normal#registBtn .regist-icon {
+ display: block;
+ width: 10px;
+ height: 10px;
+ margin-right: 0 !important;
+ }
+
+ /* 移动端注册按钮图标隐藏 - 旧样式移除 */
+ #index .no-login .btn.btn-normal#registBtn::before {
+ display: none;
+ }
+
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
+ #index .mobile-menu-toggle {
+ display: flex !important;
+ gap: 0;
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ justify-content: center;
+ align-items: center;
+ margin-right: 0;
+ order: 3;
+ padding: 0;
+ background: none;
+ border: none;
+ }
+
+ #index .mobile-menu-toggle .mobile-menu-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ /* ===== Banner - 极简 ===== */
+ .banner-cont .swiper-slide {
+ height: 100vh !important;
+ min-height: 300px;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 16px !important;
+ line-height: 1.2;
+ margin-bottom: 6px;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 10px !important;
+ margin-top: 6px !important;
+ margin-bottom: 12px !important;
+ -webkit-line-clamp: 1;
+ max-height: 20px;
+ }
+
+ .banner-tag-pill {
+ font-size: 8px;
+ padding: 2px 6px;
+ }
+
+ .banner-cont .btn2 {
+ padding: 5px 14px !important;
+ font-size: 10px !important;
+ }
+
+ .banner-cont .swiper-pagination {
+ bottom: 12px !important;
+ }
+
+ /* ===== 快速入口 - 四宫格极简版 ===== */
+ .banner .banner-s {
+ margin-top: 12px;
+ padding: 8px 6px;
+ }
+
+ .banner .banner-s .banner-list {
+ gap: 6px !important;
+ padding: 0 !important;
+ display: grid !important;
+ grid-template-columns: repeat(2, 1fr) !important;
+ width: 100% !important;
+ }
+
+ .banner-s .banner-list .banner-item {
+ padding: 10px 12px !important;
+ gap: 6px !important;
+ flex: none !important;
+ display: flex !important;
+ flex-direction: row !important;
+ align-items: center !important;
+ text-align: left !important;
+ min-height: 75px !important;
+ justify-content: flex-start !important;
+ border-radius: 0 !important;
+ width: auto !important;
+ min-width: auto !important;
+ max-width: none !important;
+ background: rgba(15, 23, 42, 0.6) !important;
+ border: 1px solid rgba(148, 163, 184, 0.15) !important;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-icon {
+ width: 28px;
+ height: 28px;
+ margin-bottom: 0;
+ margin-right: 8px;
+ flex-shrink: 0;
+ }
+
+ .banner-s .banner-list .banner-item .banner-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+ flex: 1;
+ min-width: 0;
+ }
+
+ .banner-s .banner-list .banner-item h5 {
+ font-size: 11px !important;
+ margin-bottom: 0 !important;
+ line-height: 1.2;
+ color: #E5E7EB;
+ }
+
+ .banner-s .banner-list .banner-item .title-desc {
+ font-size: 9px !important;
+ line-height: 1.2;
+ margin: 0 !important;
+ color: rgba(203, 213, 225, 0.8);
+ }
+
+ /* ===== 热销产品 - 紧凑 ===== */
+ .hot-products {
+ margin-top: -20px;
+ padding: 14px 0 20px !important;
+ }
+
+ .hot-products-title h3 {
+ font-size: 16px;
+ margin-bottom: 4px;
+ }
+
+ .hot-products-title .subtitle {
+ font-size: 9px;
+ }
+
+ .products-table-wrapper {
+ padding: 0 8px;
+ }
+
+ .products-table tbody tr {
+ margin-bottom: 8px;
+ padding: 10px;
+ }
+
+ .products-table tbody td {
+ padding: 5px 0 5px 65px;
+ font-size: 10px;
+ }
+
+ .products-table tbody td::before {
+ left: 10px;
+ font-size: 9px;
+ }
+
+ .products-table .product-name {
+ font-size: 11px;
+ }
+
+ .products-table .product-tag {
+ font-size: 8px;
+ padding: 0 4px;
+ }
+
+ .products-table .product-price {
+ font-size: 14px;
+ }
+
+ .products-table .product-price .unit {
+ font-size: 9px;
+ }
+
+ .products-table .btn-buy {
+ padding: 4px 12px;
+ font-size: 9px;
+ }
+
+ /* ===== Section 通用 - 极致压缩 ===== */
+ .section {
+ padding: 20px 0 !important;
+ }
+
+ .section-content {
+ padding: 20px 8px !important;
+ }
+
+ .section-title h2 {
+ font-size: 16px;
+ margin-bottom: 4px;
+ }
+
+ .section-title .section-desc {
+ font-size: 9px;
+ }
+
+ .section-title h2::after {
+ width: 25px;
+ }
+
+ /* ===== 解决方案 - 卡片列表 ===== */
+ .solution-wrapper {
+ margin-top: 12px;
+ }
+
+ .solution-slider {
+ gap: 8px;
+ }
+
+ .solution-content {
+ padding: 10px 8px !important;
+ gap: 8px;
+ }
+
+ .solution-text h3 {
+ font-size: 14px;
+ margin-bottom: 2px;
+ }
+
+ .solution-subtitle {
+ font-size: 9px;
+ margin-bottom: 4px;
+ }
+
+ .solution-desc p {
+ font-size: 9px;
+ }
+
+ .solution-link {
+ padding: 5px 12px;
+ font-size: 9px;
+ }
+
+ .solution-image {
+ height: 100px;
+ }
+
+ /* ===== 基础设施 - 简化 ===== */
+ .section-base {
+ padding: 18px 0 !important;
+ }
+
+ .base .base-content {
+ margin-top: 12px;
+ margin-bottom: 16px;
+ }
+
+ .base .base-content .fboxRow {
+ margin-bottom: 8px;
+ }
+
+ .base .base-content h2 {
+ font-size: 24px;
+ }
+
+ .base .base-content .title-desc {
+ font-size: 9px;
+ }
+
+ .section-base .base img {
+ width: 100%;
+ max-width: 280px;
+ margin: 12px auto 0;
+ }
+
+ /* ===== 荣誉 - 极简 ===== */
+ .honor-section {
+ margin-top: 16px;
+ padding: 16px 0;
+ }
+
+ .honor-title h3 {
+ font-size: 16px;
+ margin-bottom: 4px;
+ }
+
+ .honor-subtitle {
+ font-size: 9px;
+ }
+
+ .honor-list {
+ gap: 8px;
+ padding: 0 8px;
+ }
+
+ .honor-item {
+ width: calc(50% - 4px);
+ padding: 12px 8px;
+ padding-bottom: 8px;
+ }
+
+ .honor-icon {
+ width: 60px;
+ height: 60px;
+ margin-bottom: 6px;
+ }
+
+ .honor-icon img {
+ width: 35px;
+ height: 35px;
+ }
+
+ .honor-name {
+ font-size: 10px;
+ line-height: 1.2;
+ }
+
+ /* ===== 新闻 - 极简 ===== */
+ .section.news {
+ padding: 18px 0 !important;
+ }
+
+ .news-content {
+ margin-top: 12px;
+ gap: 12px;
+ flex-direction: column;
+ }
+
+ .news-content .news-cont {
+ padding: 12px;
+ }
+
+ .news-content .news-head .news-title {
+ font-size: 14px;
+ }
+
+ .news-content .news-head .news-more {
+ font-size: 9px;
+ }
+
+ .news-content .news-item {
+ line-height: 26px;
+ padding: 6px 0;
+ }
+
+ .news-content .news-item .number {
+ min-width: 14px;
+ height: 14px;
+ font-size: 8px;
+ margin-right: 4px;
+ }
+
+ .news-content .news-item .title {
+ font-size: 10px;
+ }
+
+ .news-content .news-item .time {
+ font-size: 8px;
+ min-width: 55px;
+ }
+}
+
+/* 性能优化提示 */
+@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;
+ }
+}
+
+/* ============================================
+ 首页 Footer 深色科技风格
+ ============================================ */
+
+/* Footer 整体优化 */
+#index .section-promise {
+ background:
+ radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+ linear-gradient(180deg, #020617 0%, #0F172A 100%);
+ border-top: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+#index .section-promise .promise-box {
+ color: #E5E7EB;
+ transition: all 0.3s ease;
+}
+
+#index .section-promise .promise-box:hover {
+ color: #38BDF8;
+ transform: translateY(-5px);
+}
+
+/* Footer 主体区域 */
+#index .footer-content {
+ background: transparent;
+}
+
+#index .footer-nav-head {
+ color: #F9FAFB;
+ font-weight: 600;
+ font-size: 16px;
+}
+
+#index .footer-nav-item {
+ color: rgba(203, 213, 225, 0.8);
+}
+
+#index .footer-nav-item a {
+ color: rgba(203, 213, 225, 0.8);
+}
+
+#index .footer-nav-item:hover,
+#index .footer-nav-item a:hover {
+ color: #38BDF8;
+}
+
+/* Footer 底部信息 */
+#index .footer-record {
+ border-top-color: rgba(148, 163, 184, 0.15);
+ color: rgba(148, 163, 184, 0.8);
+}
+
+#index .footer-record a {
+ color: rgba(148, 163, 184, 0.8);
+}
+
+#index .footer-record a:hover {
+ color: #38BDF8;
+}
+
+/* 注册广告优化 */
+#index .register-advert {
+ background: transparent;
+ padding: 0;
+ height: auto;
+}
+
+#index .register-advert a {
+ display: block;
+}
+
+#index .register-advert img {
+ border-radius: 16px;
+ box-shadow: 0 8px 32px rgba(56, 189, 248, 0.2);
+ transition: all 0.3s ease;
+ height: auto;
+ object-fit: contain;
+}
+
+#index .register-advert img:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 48px rgba(56, 189, 248, 0.3);
+}
+
+/* ============================================
+ Section 间距统一优化
+ ============================================ */
+
+/* 统一 section 间距和背景过渡 */
+#index .section {
+ position: relative;
+}
+
+/* 移除可能导致白色闪烁的背景 */
+#index .section-content {
+ background: transparent;
+}
+
+/* 确保所有section背景连贯 */
+#index .section.banner {
+ background: transparent;
+ position: relative;
+ z-index: 0 !important;
+}
+
+/* banner 整体容器也降到最低 */
+#index .banner-cont {
+ z-index: 0 !important;
+}
+
+#index .section.service {
+ padding-top: 120px;
+ /* 为 banner-s 留出空间 */
+}
+
+/* 优化各section之间的过渡 */
+#index .section:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.1), transparent);
+}
+
+/* ============================================
+ 首页登录菜单和侧边栏优化
+ ============================================ */
+
+/* 登录用户信息显示 */
+#index .nav-header .login-in .head-img {
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border-color: rgba(56, 189, 248, 0.3);
+ box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
+}
+
+#index .nav-header .login-in .name {
+ color: #E5E7EB;
+}
+
+#index .nav-header .login-in::after {
+ border-left-color: rgba(148, 163, 184, 0.2);
+}
+
+/* 登录下拉菜单 */
+#index .nav-header .login-in .login-menu {
+ background: rgba(15, 23, 42, 0.95);
+ backdrop-filter: blur(20px);
+ border-color: rgba(148, 163, 184, 0.2);
+ box-shadow: 0 8px 32px rgba(15, 23, 42, 0.5);
+}
+
+#index .nav-header .login-in .login-menu .login-menu-item {
+ color: #E5E7EB;
+}
+
+#index .nav-header .login-in .login-menu .login-menu-item:hover {
+ background: rgba(56, 189, 248, 0.15);
+ color: #38BDF8;
+}
+
+/* 侧边栏工具条优化 */
+#index .aside-tools {
+ background: rgba(15, 23, 42, 0.9);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ border-radius: 12px;
+ box-shadow: 0 8px 32px rgba(15, 23, 42, 0.5);
+}
+
+#index .aside-tools .aside-box {
+ border-bottom-color: rgba(148, 163, 184, 0.15);
+}
+
+#index .aside-tools .aside-box:hover {
+ background: rgba(56, 189, 248, 0.1);
+}
+
+#index .aside-tools .aside-text {
+ color: #E5E7EB;
+}
+
+#index .aside-tools .aside-box:hover .aside-text {
+ color: #38BDF8;
+}
+
+/* 返回顶部按钮 */
+#index .aside-tools .back-top {
+ background: rgba(56, 189, 248, 0.15);
+ transition: all 0.3s ease;
+}
+
+#index .aside-tools .back-top:hover {
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
+}
+
+/* ============================================
+ 细节优化 - 二维码弹窗等
+ ============================================ */
+
+/* 如果有二维码弹窗，也优化为深色 */
+#index .qrcode-popup {
+ background: rgba(15, 23, 42, 0.95);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ box-shadow: 0 16px 48px rgba(15, 23, 42, 0.6);
+}
+
+#index .qrcode-popup .title {
+ color: #F9FAFB;
+}
+
+#index .qrcode-popup .desc {
+ color: rgba(203, 213, 225, 0.8);
+}
+
+/* ============================================
+ 全场景全栈解决方案 - 新设计（上下两层）
+ ============================================ */
+
+/* 解决方案容器 */
+.solution-wrapper {
+ margin-top: 60px;
+ position: relative;
+}
+
+/* 上层：按钮导航 */
+.solution-tabs {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ margin-bottom: 40px;
+ flex-wrap: wrap;
+}
+
+.solution-tab {
+ padding: 12px 32px;
+ font-size: 16px;
+ font-weight: 600;
+ color: rgba(226, 232, 240, 0.8);
+ background: rgba(15, 23, 42, 0.6);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 30px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+/* 按钮光晕效果 */
+.solution-tab::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
+ transform: translate(-50%, -50%);
+ transition: width 0.5s ease, height 0.5s ease;
+}
+
+.solution-tab:hover {
+ color: #38BDF8;
+ border-color: rgba(56, 189, 248, 0.4);
+ background: rgba(15, 23, 42, 0.8);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
+}
+
+.solution-tab:hover::before {
+ width: 200px;
+ height: 200px;
+}
+
+.solution-tab.active {
+ color: #ffffff;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border-color: transparent;
+ box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
+}
+
+.solution-tab.active::before {
+ display: none;
+}
+
+/* 下层：幻灯片容器 */
+.solution-slider {
+ position: relative;
+ min-height: 450px;
+ overflow: hidden;
+}
+
+/* 单个幻灯片 */
+.solution-slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ opacity: 0;
+ transition: opacity 0.6s ease;
+ pointer-events: none;
+ z-index: 1;
+}
+
+/* 激活的幻灯片 */
+.solution-slide.active {
+ position: relative;
+ opacity: 1;
+ pointer-events: auto;
+ z-index: 2;
+}
+
+/* 幻灯片内容区域 */
+.solution-content {
+ display: flex;
+ align-items: stretch;
+ gap: 60px;
+ padding: 0;
+ background: rgba(15, 23, 42, 0.7);
+ backdrop-filter: blur(16px);
+ border: 1px solid rgba(148, 163, 184, 0.15);
+ border-radius: 0;
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.5),
+ inset 0 1px 0 rgba(255, 255, 255, 0.05);
+ min-height: 500px;
+}
+
+/* 左侧文字区域 */
+.solution-text {
+ flex: 1;
+ min-width: 0;
+ padding: 40px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.solution-text h3 {
+ font-size: 32px;
+ font-weight: 700;
+ color: #F9FAFB;
+ margin-bottom: 12px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.solution-subtitle {
+ font-size: 16px;
+ color: rgba(148, 163, 184, 0.9);
+ margin-bottom: 24px;
+ font-weight: 500;
+}
+
+.solution-desc {
+ color: rgba(203, 213, 225, 0.85);
+ line-height: 1.8;
+ margin-bottom: 32px;
+}
+
+.solution-desc p {
+ margin-bottom: 12px;
+ font-size: 15px;
+}
+
+.solution-desc p:last-child {
+ margin-bottom: 0;
+}
+
+/* 了解详情链接 */
+.solution-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 32px;
+ font-size: 15px;
+ font-weight: 600;
+ color: #ffffff;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border-radius: 30px;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3);
+ align-self: flex-start;
+}
+
+.solution-link:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5);
+}
+
+.solution-link .icon-arrow-right {
+ transition: transform 0.3s ease;
+}
+
+.solution-link:hover .icon-arrow-right {
+ transform: translateX(5px);
+}
+
+/* 右侧图片区域 */
+.solution-image {
+ flex-shrink: 0;
+ width: 600px;
+ position: relative;
+ overflow: hidden;
+ border-radius: 0;
+ background: rgba(15, 23, 42, 0.5);
+}
+
+.solution-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ filter: brightness(1.1);
+ transition: transform 0.5s ease;
+}
+
+.solution-slide.active .solution-image img {
+ transform: scale(1.05);
+}
+
+/* 图片光晕效果 */
+.solution-image::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
+ opacity: 0;
+ transition: opacity 0.5s ease;
+ pointer-events: none;
+}
+
+.solution-slide.active .solution-image::after {
+ opacity: 1;
+}
+
+/* ============================================
+ 移动端侧边栏首页优化
+ ============================================ */
+
+/* 移动端侧边栏背景优化 */
+#index .mobile-sidebar-content {
+ background: linear-gradient(180deg, #020617 0%, #0F172A 100%);
+}
+
+#index .mobile-sidebar-header {
+ background: rgba(15, 23, 42, 0.95);
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+#index .mobile-nav-link {
+ color: #E5E7EB;
+ transition: all 0.3s ease;
+}
+
+#index .mobile-nav-link:hover {
+ color: #38BDF8;
+}
+
+#index .mobile-user-info {
+ background: rgba(30, 41, 59, 0.6);
+ border: 1px solid rgba(148, 163, 184, 0.1);
+ border-radius: 8px;
+ padding: 12px;
+ margin-bottom: 12px;
+}
+
+#index .mobile-user-avatar {
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
+}
+
+#index .mobile-user-name {
+ color: #E5E7EB;
+}
+
+/* 返回顶部按钮优化 */
+#index .back-top-wrapper {
+ background: rgba(56, 189, 248, 0.15);
+ border: 1px solid rgba(56, 189, 248, 0.3);
+ box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
+ transition: all 0.3s ease;
+}
+
+#index .back-top-wrapper:hover {
+ background: rgba(56, 189, 248, 0.3);
+ box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
+}
+
+/* Mobile Overrides for Index Page */
+/* 注意：移动端 banner 样式已在第 698 行定义，这里不要重复设置 */
+
+/*
+以下样式已被注释，因为与第 698 行的移动端样式冲突
+导致 swiper-slide 高度变成 400px 而不是 200px
+
+@media (max-width: 768px) {
+ .banner-cont .swiper-slide {
+ height: auto !important;
+ min-height: 400px;
+ padding-bottom: 60px;
+ }
+
+ .banner-cont .swiper-slide .section-content {
+ position: relative;
+ top: auto;
+ left: auto;
+ transform: none;
+ padding: 80px 20px 40px;
+ text-align: center;
+ }
+
+ .banner-cont .swiper-slide .section-content .title-wrapper {
+ max-width: 100%;
+ margin-bottom: 20px;
+ }
+
+ .banner-cont .swiper-slide h1 {
+ font-size: 32px;
+ line-height: 1.3;
+ }
+
+ .banner-tags {
+ justify-content: center;
+ margin-bottom: 12px;
+ }
+
+ .banner-cont .banner-desc {
+ font-size: 15px;
+ margin: 0 auto 30px;
+ line-height: 1.6;
+ }
+
+ /* Feature Cards (Banner-S) */
+/* 注意：banner-list 的桌面样式已在第 831 行定义 (flex布局，4列)
+ 移动端样式在第 945 行定义 (grid布局，2列)
+ 这里的重复样式已被移除以避免冲突 */
+
+/* 以下样式已注释，因为会覆盖桌面端的flex布局
+ .banner .banner-s {
+ margin-top: 0;
+ padding-top: 0;
+ padding-bottom: 40px;
+ }
+
+ .banner .banner-s .banner-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 15px;
+ padding: 0 15px;
+ }
+
+ .banner-s .banner-list .banner-item {
+ max-width: 100%;
+ min-width: 0;
+ flex: auto;
+ }
+ */
+
+/* Mobile Overrides Group */
+@media (max-width: 768px) {
+
+ /* Hot Products - Mobile Slider */
+ .hot-products-pagination {
+ position: relative;
+ margin-top: 20px;
+ bottom: 0 !important;
+ }
+
+ .hot-products-pagination .swiper-pagination-bullet {
+ width: 8px;
+ height: 8px;
+ background: #cbd5e1;
+ opacity: 1;
+ }
+
+ .hot-products-pagination .swiper-pagination-bullet-active {
+ background: #3b82f6;
+ width: 20px;
+ border-radius: 4px;
+ }
+
+ /* Hot Products - Mobile Fold & Expand */
+ .products-grid .product-card:nth-child(n+5) {
+ display: none;
+ }
+
+ .products-grid.expanded .product-card:nth-child(n+5) {
+ display: block;
+ animation: fadeIn 0.5s ease;
+ }
+
+ .products-more-btn-wrapper {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+ padding-bottom: 20px;
+ }
+
+ .products-more-btn {
+ background: rgba(30, 41, 59, 0.6);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ color: #cbd5e1;
+ padding: 10px 24px;
+ border-radius: 20px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .products-more-btn:hover {
+ background: rgba(56, 189, 248, 0.2);
+ border-color: rgba(56, 189, 248, 0.4);
+ color: #fff;
+ }
+
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* Hot Products - Card View Override */
+ .products-table thead {
+ display: none;
+ }
+
+ .products-table,
+ .products-table tbody,
+ .products-table tr,
+ .products-table td {
+ display: block;
+ width: 100%;
+ }
+
+ .products-table tr {
+ margin-bottom: 15px;
+ background: rgba(30, 41, 59, 0.4);
+ border: 1px solid rgba(148, 163, 184, 0.1);
+ border-radius: 12px;
+ padding: 15px;
+ }
+
+ .products-table td {
+ text-align: right;
+ padding: 8px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid rgba(148, 163, 184, 0.05);
+ }
+
+ .products-table td:last-child {
+ border-bottom: none;
+ }
+
+ .products-table td::before {
+ content: attr(data-label);
+ float: left;
+ font-weight: 600;
+ color: rgba(148, 163, 184, 0.8);
+ }
+
+ /* Solution Wrapper - Stacked */
+ .solution-wrapper {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .solution-tabs {
+ display: none;
+ /* Hide desktop tabs */
+ }
+}
+
+/* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
+ For now, let's assume we stack them or show a simple list.
+ Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification.
+ Let's style the active one well first, or maybe show all?
+ */
\ No newline at end of file
diff --git a/index.html b/index.html
index 0eec0de..0e913b6 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,8 @@
{include file="header"}
+
+