From 0f9f96c59632e073aae3aebbaa7e4b8d6dd69fd9 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Sat, 22 Nov 2025 22:35:44 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9A=84=E6=92=92=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 154 +++++---------------------------- index.html | 121 +++++++++++--------------- js/index.js | 229 ++++++++++++++++++-------------------------------- 3 files changed, 153 insertions(+), 351 deletions(-) diff --git a/css/index.css b/css/index.css index 186cb3a..2a3992d 100644 --- a/css/index.css +++ b/css/index.css @@ -1,135 +1,47 @@ /* banner */ .banner-cont { - position: relative; width: 100%; - overflow: hidden; - /* 确保 3D 地球在竖直方向不会被裁剪，预留更大展示区域 */ - min-height: 520px; -} - -/* banner 区背景：改为暗色科技感渐变，左侧适合文案，右侧衬托地球与飞行轨迹 */ -.section.banner { - background: - radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22) 0%, transparent 40%), - radial-gradient(circle at 80% 20%, rgba(129, 140, 248, 0.35) 0%, transparent 55%), - linear-gradient(135deg, #020617 0%, #020617 40%, #0B1120 60%, #020617 100%); } .banner-cont .swiper-slide { + height: 500px; width: 100%; background: linear-gradient(0, #f7f9fa, #f9fafb); } .banner-cont .swiper-slide .img { - /* 图片撑开高度，避免被裁切 */ - display: block; - width: 100%; - height: auto; + /* position: absolute; */ + z-index: -1; + max-height: 100%; max-width: 100%; -} - -/* 文案层：覆盖在轮播上，使用 section-content 控制左右宽度 */ -.banner-cont .banner-text { - position: absolute; - left: 0; - top: 0; width: 100%; - height: 100%; - /* 需要盖在 swiper-slide 之上，swiper 本身 z-index: 1，这里抬高一层 */ - z-index: 10; - pointer-events: none; + /* object-fit: fill; */ } -.banner-cont .banner-text .section-content { - /* 相对定位，便于内部文案块绝对居中定位 */ - position: relative; - height: 100%; - padding: 0 20px; /* 左右 20px 内边距，与全站一致 */ - margin: 0 auto; /* 保持与其他 section-content 一致的水平布局 */ -} -.banner-copy { - max-width: 560px; - text-align: left; - /* 绝对定位：在整块 banner 内垂直居中，水平方向与下方卡片文案左侧对齐 */ - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - /* 与下方 .banner-item 内的文案左对齐（section-content padding 20px + item padding 60px） */ - padding-left: 80px; -} - -.banner-copy #bannerTitle { - font-size: 44px; - line-height: 1.2; - color: #F9FAFB; -} - -.banner-copy .banner-desc { +.banner-cont .banner-desc { font-size: 16px; - margin-top: 16px; - margin-bottom: 32px; + margin-top: 30px; + margin-bottom: 80px; max-width: 550px; - color: rgba(148, 163, 184, 0.95); + } -.banner-copy #bannerButton { - pointer-events: auto; - /* 首页主按钮稍大一些，突出主召唤操作 */ - font-size: 16px; - padding: 12px 48px; +.banner-cont .swiper-pagination-bullet { + width: 36px; + height: 4px; + background: #D7DCE4; + opacity: 1; + border-radius: 3px; } -/* 轮播文案标签 */ -.banner-tags { - margin-bottom: 12px; -} - -.banner-tag-pill { - display: inline-block; - margin-right: 8px; - padding: 4px 12px; - font-size: 14px; - border-radius: 999px; - background: rgba(15, 23, 42, 0.8); - color: #E0F2FE; -} - -/* 3D 地球容器：与 section-content 右对齐（和下方卡片区域右边保持一致） */ -.banner-globe { - position: absolute; - top: 0; - left: 0; - /* 画布充满整个 banner 文案区域，让粒子可以从整个区域四面八方飞入 */ - width: 100%; - height: 100%; - z-index: 5; /* 保持在文案层之下 */ - pointer-events: none; /* 不影响轮播图滑动与点击 */ -} - -/* 中等屏幕下稍微缩小地球，避免挡住文案 */ -@media (max-width: 1400px) { - .banner-globe { - width: 100%; - height: 100%; - } -} - -/* 小屏幕（如窄笔记本）下隐藏 3D 地球，保持可用性 */ -@media (max-width: 1100px) { - .banner-globe { - display: none; - } +.banner-cont .swiper-pagination-bullet-active { + background: rgba(255, 103, 57, 1); } .banner .banner-s { - /* 首页下半部分 banner 卡片采用毛玻璃 + 阴影效果 */ - background: rgba(15, 23, 42, 0.8); - border-radius: 16px; - box-shadow: 0 24px 80px rgba(15, 23, 42, 0.85); - border: 1px solid rgba(148, 163, 184, 0.45); - backdrop-filter: blur(20px); + box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); + border-radius: 3px; } .banner .banner-s .banner-list { @@ -143,43 +55,23 @@ cursor: pointer; width: 335px; padding: 30px 60px; - color: #E5E7EB; } .banner-s .banner-list .banner-item:hover { - background: rgba(15, 23, 42, 0.75); + background: rgba(247, 248, 249, 1); } .banner-s .banner-list .banner-item:hover h5 { - color: #F9FAFB; + color: #FF6739; } .banner-list .banner-item .banner-tag { font-size: 12px; - color: #E0F2FE; - border: 1px solid rgba(148, 163, 184, 0.55); + color: #FF6739; + border: 1px solid #FF6739; padding: 5px 8px; border-radius: 3px; } - -/* 首页专属 header 科技风样式（仅在 body#\index 上生效，避免影响其他页面） */ -body#index .nav-shadow { - background: - linear-gradient(90deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.96) 60%, rgba(8, 47, 73, 0.96) 100%); - box-shadow: 0 1px 0 rgba(15, 23, 42, 0.8); -} - -body#index .nav-menu .nav-item { - color: #E5E7EB; -} - -body#index .nav-menu .nav-item:hover { - border-bottom-color: #38BDF8; -} - -body#index .nav-right .control { - color: #E5E7EB; -} /* 服务内容 */ .service-content { diff --git a/index.html b/index.html index 4c2dd42..f0a13c2 100644 --- a/index.html +++ b/index.html @@ -1,83 +1,58 @@ -{include file="header"} - - - - - +{include file="header"} + + + + - - - - - - - - - - - + + + +
{include file="public/header"}
- +