From 6724b1cafd0459b7d16749469f008a670e814e3a Mon Sep 17 00:00:00 2001 From: yiqiu Date: Sat, 22 Nov 2025 23:35:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A3=AB=E5=A4=A7=E5=A4=AB=E6=84=9F=E5=88=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 301 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 296 insertions(+), 5 deletions(-) diff --git a/css/index.css b/css/index.css index c72818d..5cdcde6 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,86 @@ +/* ============================================ + 首页专属样式 - 整体深色科技风格 + ============================================ */ + +/* 首页整体背景 - 统一深色,避免白色闪烁 */ +#index { + background: linear-gradient(180deg, #020617 0%, #0F172A 50%, #020617 100%); + min-height: 100vh; +} + +/* 首页 Header 深色玻璃态覆盖 */ +#index #header { + background: transparent; +} + +#index .nav-shadow { + background: rgba(15, 23, 42, 0.8) !important; + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(148, 163, 184, 0.15); + box-shadow: 0 4px 24px rgba(15, 23, 42, 0.4); +} + +/* 首页导航文字颜色 */ +#index .nav-menu .nav-item { + color: #E5E7EB; + border-bottom-color: transparent; +} + +#index .nav-menu .nav-item:hover { + color: #38BDF8; + border-bottom-color: #38BDF8; +} + +#index .nav-right .control { + color: #E5E7EB; +} + +#index .nav-right .control:hover { + color: #38BDF8; +} + +/* 首页登录按钮优化 */ +#index .btn-normal-light { + color: #E5E7EB; + background: rgba(15, 23, 42, 0.6); + border-color: rgba(148, 163, 184, 0.2); +} + +#index .btn-normal-light:hover { + border-color: #38BDF8; + color: #38BDF8; + background: rgba(56, 189, 248, 0.1); +} + +/* 首页下拉菜单优化 */ +#index .nav-cont { + background: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(148, 163, 184, 0.15); +} + +#index .nav-item-box { + background: rgba(30, 41, 59, 0.8); + border: 1px solid rgba(148, 163, 184, 0.15); +} + +#index .nav-item-box:hover { + background: rgba(30, 41, 59, 1); + border-color: rgba(56, 189, 248, 0.3); +} + +#index .nav-item-box .title { + color: #E5E7EB; +} + +#index .nav-item-box .desc { + color: rgba(148, 163, 184, 0.8); +} + +/* ============================================ + Banner 区域 + ============================================ */ + /* banner */ .banner-cont { position: relative; @@ -193,16 +276,21 @@ box-shadow: 0 2px 10px rgba(56, 189, 248, 0.6); } -/* Banner下方快速入口卡片 - 玻璃态设计 */ +/* Banner下方快速入口卡片 - 统一深色玻璃态设计 */ .banner .banner-s { margin-top: -80px; position: relative; z-index: 20; backdrop-filter: blur(20px); - background: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.18); - box-shadow: 0 8px 32px rgba(15, 23, 42, 0.37); - border-radius: 16px; + /* 统一深色玻璃态,与上下背景融合 */ + background: + radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%), + rgba(15, 23, 42, 0.85); + border: 1px solid rgba(148, 163, 184, 0.2); + box-shadow: + 0 8px 32px rgba(15, 23, 42, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + border-radius: 20px; } .banner .banner-s .banner-list { @@ -1498,3 +1586,206 @@ html { 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: 40px 0; +} + +#index .register-advert img { + border-radius: 16px; + box-shadow: 0 8px 32px rgba(56, 189, 248, 0.2); + transition: all 0.3s ease; +} + +#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; +} + +#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); +}