From a18136def5a44d92ffad6a1b3c375f96e51544b4 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Sat, 22 Nov 2025 18:22:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=AA=E7=83=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/common.css | 198 +++++++++++++++++++++++----------------------- common/theme.css | 127 +++++++++++++++-------------- css/index.css | 150 +++++++++++++++++++++-------------- 3 files changed, 256 insertions(+), 219 deletions(-) diff --git a/common/common.css b/common/common.css index 9af1d97..0d0e53d 100644 --- a/common/common.css +++ b/common/common.css @@ -58,21 +58,24 @@ max-width: unset; } -#header { - position: sticky; - top: 0; - background: #fff; - z-index: 888; - - -} - +#header { + position: sticky; + top: 0; + background: #fff; + z-index: 888; +} + .nav-shadow { top: 0; box-shadow: 0px 0px 8px rgba(52, 52, 52, 0.08); - /* header 背景:轻微蓝白渐变,既保持整体浅色,又和地球的浅蓝色调统一 */ - background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 255, 0.98) 40%, rgba(227, 237, 255, 0.98) 100%); -} + /* 默认 header 背景保持浅色,首页会在 css/index.css 中做单独科技风覆盖 */ + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.98) 0%, + rgba(245, 247, 255, 0.98) 40%, + rgba(227, 237, 255, 0.98) 100% + ); +} .nav-header { display: flex; @@ -98,20 +101,20 @@ display: flex; } -.nav-menu .nav-item { - color: #333; - display: flex; +.nav-menu .nav-item { + color: #333; + display: flex; align-items: center; height: 72px; padding: 0 20px; - font-size: 16px; - cursor: pointer; - border-bottom: 2px solid transparent; -} - + font-size: 16px; + cursor: pointer; + border-bottom: 2px solid transparent; +} + .nav-menu .nav-item:hover { - border-bottom: 2px solid #1D4ED8; -} + border-bottom: 2px solid #38BDF8; +} .nav-right { @@ -172,20 +175,20 @@ display: none !important; } -.nav-item-box { - min-width: 335px; - height: 96px; - padding: 24px 20px; - border-radius: 3px; +.nav-item-box { + min-width: 335px; + height: 96px; + padding: 24px 20px; + border-radius: 3px; background: #fff; display: flex; - cursor: pointer; - box-shadow: 0px 0px 8px rgba(52, 52, 52, 0.08); -} - + cursor: pointer; + box-shadow: 0px 0px 8px rgba(52, 52, 52, 0.08); +} + .nav-item-box:hover .title { - color: rgba(29, 78, 216, 1); -} + color: rgba(56, 189, 248, 1); +} .nav-item-box img { width: 48px; @@ -265,32 +268,32 @@ border-radius: 3px; } -.nav-header .login-in .login-menu .login-menu-item { - cursor: pointer; - height: 40px; - padding: 10px 12px; -} - +.nav-header .login-in .login-menu .login-menu-item { + cursor: pointer; + height: 40px; + padding: 10px 12px; +} + .nav-header .login-in .login-menu .login-menu-item:hover { - background: rgba(29, 78, 216, 0.08); - color: rgba(29, 78, 216, 1); + background: rgba(56, 189, 248, 0.08); + color: rgba(56, 189, 248, 1); } .nav-header .login-in .login-menu .login-menu-item .real-name { display: inline-block; text-align: center; - border: 1px solid #1D4ED8; - color: rgba(29, 78, 216, 1); + border: 1px solid #38BDF8; + color: rgba(56, 189, 248, 1); font-size: 12px; width: 44px; height: 18px; border-radius: 3px; } -.nav-header .login-in .login-menu .login-menu-item .no-real-name { - border: 1px solid #E34D59; - color: rgba(227, 77, 89, 1); -} +.nav-header .login-in .login-menu .login-menu-item .no-real-name { + border: 1px solid #E34D59; + color: rgba(227, 77, 89, 1); +} /* 底部导航栏 */ @@ -406,23 +409,23 @@ } -.footer .link-hover { - color: rgba(255, 255, 255, 0.50); -} - +.footer .link-hover { + color: rgba(255, 255, 255, 0.50); +} + .footer .link-hover:hover { - color: rgba(29, 78, 216, 1); -} - -.footer .footer-link a { - margin-right: 10px; - color: rgba(255, 255, 255, 0.50); -} + color: rgba(56, 189, 248, 1); +} +.footer .footer-link a { + margin-right: 10px; + color: rgba(255, 255, 255, 0.50); +} + .footer .footer-link a:hover { margin-right: 10px; - color: rgba(29, 78, 216, 1); -} + color: rgba(56, 189, 248, 1); +} .footer .footer-record { display: flex; @@ -446,23 +449,23 @@ margin-left: 20px; } -.jr-tabs .title { - color: #666; - font-size: 18px; - width: auto !important; - padding: 10px 40px; - cursor: pointer; - margin-right: 0 !important; -} - +.jr-tabs .title { + color: #666; + font-size: 18px; + width: auto !important; + padding: 10px 40px; + cursor: pointer; + margin-right: 0 !important; +} + .jr-tabs .title.swiper-slide-thumb-active { - color: rgba(29, 78, 216, 1); - border-bottom: 2px solid #1D4ED8; + color: rgba(56, 189, 248, 1); + border-bottom: 2px solid #38BDF8; } .jr-tabs .title:hover { - color: rgba(29, 78, 216, 1); - border-bottom: 2px solid #1D4ED8; + color: rgba(56, 189, 248, 1); + border-bottom: 2px solid #38BDF8; } @@ -580,14 +583,14 @@ } .input-search input { - padding-left: 15px; - font-size: 20px; + padding-left: 15px; + font-size: 20px; margin-top: 30px; - margin-bottom: 20px; - width: 30%; - height: 56px; + margin-bottom: 20px; + width: 30%; + height: 56px; background: #FFFFFF; - border: 1px solid #1D4ED8; + border: 1px solid #38BDF8; } .trademark-box .input-search input { @@ -604,28 +607,28 @@ margin-top: 30px; margin-bottom: 20px; padding: 18px 32px; - background: rgba(29, 78, 216, 1); + background: rgba(56, 189, 248, 1); } .input-search .input-search-select { - cursor: pointer; + cursor: pointer; text-align: center; line-height: 56px; width: 124px; height: 56px; margin-top: 30px; - margin-bottom: 20px; + margin-bottom: 20px; background: #fff; - border: 1px solid #1D4ED8; - border-left: none; -} - + border: 1px solid #38BDF8; + border-left: none; +} + .input-search .input-search-left-select { - border: 1px solid #1D4ED8; - border-right: none; + border: 1px solid #38BDF8; + border-right: none; } .input-search .input-search-s { @@ -690,8 +693,8 @@ } .input-search .input-search-select .select-box-item:hover { - border: 1px solid #1D4ED8; - color: #1D4ED8; + border: 1px solid #38BDF8; + color: #38BDF8; } .input-search .input-search-select .iconfont { @@ -717,18 +720,18 @@ .link-search-group .price { margin-left: 5px; - color: rgba(29, 78, 216, 1); -} + color: rgba(56, 189, 248, 1); +} /* 分页 */ .jr-page .pagination .page-number.active { color: #fff; - border: 1px solid rgba(29, 78, 216, 1); - background: rgba(29, 78, 216, 1); + border: 1px solid rgba(56, 189, 248, 1); + background: rgba(56, 189, 248, 1); } .jr-page .pagination .page-number:hover { - background: rgba(29, 78, 216, 1); + background: rgba(56, 189, 248, 1); color: #fff !important; } @@ -875,9 +878,8 @@ } .aside-tools .tools-list .tools-item .tools-box .button:hover { - border: 1px solid #1D4ED8; - ; -} + border: 1px solid #38BDF8; +} .flex-none { diff --git a/common/theme.css b/common/theme.css index 4fc6ce5..52bc410 100644 --- a/common/theme.css +++ b/common/theme.css @@ -15,13 +15,14 @@ h4 { font-size: 22px; } -h5 { - font-size: 20px; -} - +h5 { + font-size: 20px; +} + .font-theme { - color: #1D4ED8; -} + /* 全站主色:亮蓝偏青,科技感更强,和首页地球/轨迹保持一致 */ + color: #38BDF8; +} textarea { resize: none; @@ -53,24 +54,24 @@ input { -a { - color: #666; - cursor: pointer; - text-decoration: none; -} - +a { + color: #666; + cursor: pointer; + text-decoration: none; +} + a:hover { - color: rgba(29, 78, 216, 1) !important; - text-decoration: none !important; -} - -.link-hover { - cursor: pointer; -} - + color: rgba(56, 189, 248, 1) !important; + text-decoration: none !important; +} + +.link-hover { + cursor: pointer; +} + .link-hover:hover { - color: rgba(29, 78, 216, 1) !important; -} + color: rgba(56, 189, 248, 1) !important; +} .title-desc { color: rgba(0, 0, 0, 0.9); @@ -97,71 +98,75 @@ a:hover { -/* 按钮 */ -.btn { - padding: 8px 20px; - opacity: 1; - border-radius: 3px; - cursor: pointer; -} - +/* 按钮:统一改为无圆角,更贴近偏硬朗的科技风 */ +.btn { + padding: 8px 20px; + opacity: 1; + border-radius: 0; + cursor: pointer; +} + .btn2 { padding: 10px 40px; opacity: 1; - border-radius: 3px; + border-radius: 0; cursor: pointer; -} - - -.btn-s { - padding: 8px 32px; -} - +} + +.btn-s { + padding: 8px 32px; +} + .btn-normal { color: #fff; - background: #1D4ED8; + /* 主按钮使用轻微渐变与阴影,突出主召唤操作 */ + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border: none; + box-shadow: 0 10px 30px rgba(56, 189, 248, 0.45); } .btn-normal:active { - background: #1840b3; + background: linear-gradient(135deg, #0EA5E9 0%, #4F46E5 100%); + box-shadow: 0 6px 20px rgba(15, 23, 42, 0.45); } .btn-normal:hover { color: #fff; - background: #2563eb; -} + background: linear-gradient(135deg, #0EA5E9 0%, #4F46E5 100%); + box-shadow: 0 14px 36px rgba(56, 189, 248, 0.6); +} .btn-normal:disabled { opacity: 0.4; } -.btn-normal-light { - color: rgba(0, 0, 0, 0.90); - background: #FEFFFF; - border: 1px solid #E6EAED; -} - +.btn-normal-light { + color: rgba(15, 23, 42, 0.9); + background: rgba(255, 255, 255, 0.95); + border: 1px solid #E6EAED; +} + .btn-normal-light:hover { - border: 1px solid #1D4ED8; - color: #1D4ED8; -} - -.btn-dark { - color: #fff; - background: rgba(65, 65, 65, 1); -} - + border: 1px solid #38BDF8; + color: #38BDF8; +} + +.btn-dark { + color: #fff; + background: rgba(15, 23, 42, 1); +} + .btn-dark:hover { color: #fff; - background: #2563eb; + background: #0F172A; } - + .btn-orgin { color: rgba(255, 255, 255, 0.9); - background: #1D4ED8; + background: #38BDF8; } .btn-orgin:hover { color: #fff; - background: #2563eb; + background: #0EA5E9; } diff --git a/css/index.css b/css/index.css index 73c8834..2b43c4b 100644 --- a/css/index.css +++ b/css/index.css @@ -7,9 +7,12 @@ min-height: 520px; } -/* banner 区背景:左侧保持接近白色以保证文案可读,右侧渐变为浅蓝,衬托透明地球 */ +/* banner 区背景:改为暗色科技感渐变,左侧适合文案,右侧衬托地球与飞行轨迹 */ .section.banner { - background: linear-gradient(90deg, #ffffff 0%, #f5f7ff 40%, #e3edff 100%); + 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 { @@ -60,7 +63,7 @@ .banner-copy #bannerTitle { font-size: 44px; line-height: 1.2; - color: #111827; + color: #F9FAFB; } .banner-copy .banner-desc { @@ -68,7 +71,7 @@ margin-top: 16px; margin-bottom: 32px; max-width: 550px; - color: rgba(0, 0, 0, 0.65); + color: rgba(148, 163, 184, 0.95); } .banner-copy #bannerButton { @@ -89,8 +92,8 @@ padding: 4px 12px; font-size: 14px; border-radius: 999px; - background: rgba(29, 78, 216, 0.08); - color: #1D4ED8; + background: rgba(15, 23, 42, 0.8); + color: #E0F2FE; } /* 3D 地球容器:与 section-content 右对齐(和下方卡片区域右边保持一致) */ @@ -123,8 +126,12 @@ } .banner .banner-s { - box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); - border-radius: 3px; + /* 首页下半部分 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); } .banner .banner-s .banner-list { @@ -138,23 +145,43 @@ cursor: pointer; width: 335px; padding: 30px 60px; + color: #E5E7EB; } .banner-s .banner-list .banner-item:hover { - background: rgba(247, 248, 249, 1); + background: rgba(15, 23, 42, 0.75); } .banner-s .banner-list .banner-item:hover h5 { - color: #1D4ED8; + color: #F9FAFB; } .banner-list .banner-item .banner-tag { font-size: 12px; - color: #1D4ED8; - border: 1px solid #1D4ED8; + color: #E0F2FE; + border: 1px solid rgba(148, 163, 184, 0.55); 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 { @@ -164,18 +191,21 @@ margin-top: 50px; } -.service .service-box { - min-height: 191px; - margin: 10px; - position: relative; - padding: 30px; - border: 1px solid #E6EAED; - border-radius: 3px; -} - -.service .service-box:hover { - box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); -} +.service .service-box { + min-height: 191px; + margin: 10px; + position: relative; + padding: 30px; + border: 1px solid rgba(226, 232, 240, 1); + border-radius: 10px; + background: rgba(255, 255, 255, 0.96); + box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06); +} + +.service .service-box:hover { + box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12); + border-color: rgba(56, 189, 248, 0.6); +} .service .service-box .service-title { color: #333; @@ -183,7 +213,7 @@ } .service .service-box:hover h4 { - color: #1D4ED8; + color: #38BDF8; } .service .service-hot::before { @@ -234,20 +264,20 @@ margin-top: 60px; } -.resolve-content .resolve-box { - position: relative; - top: 0; - max-width: 335px; - padding: 30px; - margin: 10px; - background: #F7F8F9; - box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); - opacity: 1; - border-radius: 3px; - transition: .5s all; - cursor: pointer; - background-size: cover; - background-repeat: no-repeat; +.resolve-content .resolve-box { + position: relative; + top: 0; + max-width: 335px; + padding: 30px; + margin: 10px; + background: #F7F8F9; + box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); + opacity: 1; + border-radius: 10px; + transition: .5s all; + cursor: pointer; + background-size: cover; + background-repeat: no-repeat; } .resolve-content .resolve-box:nth-child(1) { @@ -284,14 +314,14 @@ } -.resolve-content .resolve-box:hover { - top: -10px; -} - +.resolve-content .resolve-box:hover { + top: -10px; +} + .resolve-content .resolve-box:hover h4, .resolve-content .resolve-box:hover .resolve-link { - color: rgba(29, 78, 216, 1); -} + color: rgba(56, 189, 248, 1); +} .resolve-content .resolve-box h4 { color: rgba(0, 0, 0, 0.9); @@ -316,13 +346,13 @@ flex-wrap: wrap; } -.practice .practice-box { - margin: 10px; - padding: 30px; - width: 453px; - border: 1px solid #E6EAED; - text-align: center; - border-radius: 3px; +.practice .practice-box { + margin: 10px; + padding: 30px; + width: 453px; + border: 1px solid #E6EAED; + text-align: center; + border-radius: 10px; flex-shrink: 0; } @@ -447,14 +477,14 @@ height: 20px; } -.news-content .news-head .news-title::before { - content: ''; - width: 2px; +.news-content .news-head .news-title::before { + content: ''; + width: 2px; height: 20px; position: absolute; left: 0; top: 0; - background: #1D4ED8; + background: #38BDF8; } @@ -475,15 +505,15 @@ } .news-content .news-cont .news-item:nth-child(1) .number { - background: rgba(29, 78, 216, 1); + background: rgba(56, 189, 248, 1); } .news-content .news-cont .news-item:nth-child(2) .number { - background: rgba(29, 78, 216, 1); + background: rgba(56, 189, 248, 1); } .news-content .news-cont .news-item:nth-child(3) .number { - background: rgba(29, 78, 216, 1); + background: rgba(56, 189, 248, 1); } .news-content .news-item .number { @@ -505,7 +535,7 @@ } .news-content .news-item .title:hover { - color: rgba(29, 78, 216, 1); + color: rgba(56, 189, 248, 1); } .news-content .news-item .time {