From 745668a2bc48d9071381f84c3a8e7ba92ce626e9 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Mon, 5 Jan 2026 17:18:21 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E4=BA=8E=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- about.html | 5 +- css/about.css | 588 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 591 insertions(+), 2 deletions(-) create mode 100644 css/about.css diff --git a/about.html b/about.html index ac97186..c739871 100644 --- a/about.html +++ b/about.html @@ -1,6 +1,7 @@ {include file="header"} + @@ -10,7 +11,7 @@ - +
{include file="public/header"}
@@ -281,4 +282,4 @@ - {include file="footer"} + {include file="footer"} \ No newline at end of file diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..946cb08 --- /dev/null +++ b/css/about.css @@ -0,0 +1,588 @@ +/* ============================================ + About 页面专属样式 - 深色科技风格 + 与 index.html 保持一致的设计语言 + ============================================ */ + +/* CSS 变量：统一的容器边距 */ +#about { + --container-max-width: 1440px; + --container-padding-x: 20px; +} + +/* About 页面整体背景 - 统一深色，与首页一致 */ +#about { + background: linear-gradient(180deg, #020617 0%, #0F172A 50%, #020617 100%); + min-height: 100vh; +} + +/* About 页面 section-content 统一左右边距 */ +#about .section-content { + padding-left: var(--container-padding-x); + padding-right: var(--container-padding-x); +} + +/* ============================================ + Banner 区域 - 深色科技风格 + ============================================ */ + +.about .server-banner2 { + position: relative; + height: 400px; + 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; + display: flex; + align-items: center; + justify-content: center; +} + +/* 深色遮罩层 */ +.about .server-banner2::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.3) 100%); + pointer-events: none; + z-index: 1; +} + +.about .server-banner2 .section-content { + position: relative; + z-index: 2; + text-align: center; +} + +.about .server-banner2 h1 { + font-size: 56px; + line-height: 1.2; + font-weight: 700; + color: #FFFFFF; + margin-bottom: 20px; + 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; + 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; + } +} + +.about .server-banner2 .server-banner-desc { + font-size: 18px; + color: rgba(226, 232, 240, 0.85); + line-height: 1.8; +} + +/* ============================================ + 关于主题云区域 + ============================================ */ + +.about-details { + background: transparent; + padding: 80px 0; +} + +.about-details h2 { + font-size: 36px; + font-weight: 600; + color: #F9FAFB; + margin-bottom: 40px; + text-align: center; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.about-details .about-details-box { + gap: 60px; +} + +.about-details .about-details-left { + flex: 1; + background: rgba(30, 41, 59, 0.6); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(148, 163, 184, 0.2); + border-radius: 16px; + padding: 40px; + box-shadow: + 0 8px 32px rgba(15, 23, 42, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.about-details .about-details-left p { + font-size: 16px; + text-indent: 32px; + line-height: 32px; + color: rgba(226, 232, 240, 0.9); + margin-bottom: 20px; +} + +.about-details .about-details-right { + display: flex; + flex-wrap: wrap; + gap: 20px; + max-width: 500px; +} + +.about-details .about-details-right .about-details-item { + flex: 0 1 calc(50% - 10px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 20px; + background: rgba(30, 41, 59, 0.7); + backdrop-filter: blur(20px); + border: 1px solid rgba(148, 163, 184, 0.2); + border-radius: 12px; + transition: all 0.3s ease; + box-shadow: + 0 4px 16px rgba(15, 23, 42, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.about-details .about-details-right .about-details-item:hover { + transform: translateY(-5px); + border-color: rgba(56, 189, 248, 0.4); + box-shadow: + 0 8px 32px rgba(56, 189, 248, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.about-details .about-details-right .about-details-item h2 { + font-size: 48px; + font-weight: 700; + color: #38BDF8; + margin-bottom: 10px; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about-details .about-details-right .about-details-item p { + font-size: 14px; + color: rgba(203, 213, 225, 0.8); + margin-top: 10px; +} + +/* ============================================ + 为什么选择我们 / 价值观区域 + ============================================ */ + +.about-reason { + padding: 80px 0; + background: transparent; +} + +.about-why { + background: transparent; +} + +.about-reason .section-title h2 { + font-size: 36px; + font-weight: 600; + color: #F9FAFB; + text-align: center; + margin-bottom: 60px; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.about-reason .reason { + margin: 0; + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; +} + +.about-reason .reason-box { + flex: 0 1 calc(33.333% - 20px); + min-width: 280px; + max-width: 400px; + padding: 40px 30px; + height: auto; + min-height: 280px; + 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; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 8px 32px rgba(15, 23, 42, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + position: relative; + overflow: hidden; +} + +.about-reason .reason-box::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; +} + +.about-reason .reason-box:hover { + transform: translateY(-8px); + border-color: rgba(56, 189, 248, 0.4); + box-shadow: + 0 12px 40px rgba(56, 189, 248, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.about-reason .reason-box:hover::before { + opacity: 1; +} + +.about-reason .reason-box h4 { + font-size: 22px; + font-weight: 600; + color: #38BDF8; + margin-bottom: 20px; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about-reason .reason-box p { + font-size: 16px; + line-height: 28px; + color: rgba(226, 232, 240, 0.85); +} + +/* 携手千行百业区域样式 */ +.about-together { + background: transparent; +} + +.about-together .reason-box { + background: rgba(30, 41, 59, 0.8); + border: 1px solid rgba(56, 189, 248, 0.3); +} + +.about-together .reason-box h4 { + color: #FFFFFF; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about-together .reason-box p { + color: rgba(226, 232, 240, 0.9); +} + +/* ============================================ + 里程碑区域（保持原有深色风格） + ============================================ */ + +.about-time { + background: rgba(15, 23, 42, 0.8); + padding: 80px 0; +} + +.about-time .section-title h2 { + font-size: 36px; + font-weight: 600; + color: #F9FAFB; + text-align: center; + margin-bottom: 60px; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* ============================================ + 荣誉资质、精选客户案例 + ============================================ */ + +.about-box { + padding: 80px 0; + background: transparent; +} + +.about-box .section-title h2 { + font-size: 36px; + font-weight: 600; + color: #F9FAFB; + text-align: center; + margin-bottom: 60px; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.about-box .box-list { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + margin: 0; +} + +.about-box .box-list .box-item { + flex: 0 1 calc(33.333% - 20px); + min-width: 300px; + max-width: 400px; + padding: 40px; + height: auto; + min-height: 260px; + text-align: center; + 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; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 8px 32px rgba(15, 23, 42, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + cursor: pointer; +} + +.about-box .box-list .box-item:hover { + transform: translateY(-8px); + border-color: rgba(56, 189, 248, 0.4); + box-shadow: + 0 12px 40px rgba(56, 189, 248, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.about-box .box-list .box-item img { + width: 100%; + max-width: 248px; + height: auto; + border-radius: 8px; + background: rgba(15, 23, 42, 0.3); +} + +.about-box .box-list .box-item p, +.about-box .box-list .box-item h4 { + color: rgba(226, 232, 240, 0.9); + margin-top: 20px; +} + +.about-box .box-list .box-item h4 { + font-size: 18px; + font-weight: 600; + color: #38BDF8; +} + +/* 精选客户案例样式 */ +.about-example { + background: transparent; +} + +.about-example .box-list .box-item { + min-height: 280px; +} + +/* ============================================ + 联系我们区域 + ============================================ */ + +.about-custom { + padding: 80px 0; + background: transparent; +} + +.about-custom .section-title h2 { + font-size: 36px; + font-weight: 600; + color: #F9FAFB; + text-align: center; + margin-bottom: 60px; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.about-custom .custom { + margin-top: 40px; + gap: 40px; +} + +.about-custom .custom-box { + display: flex; + align-items: center; + gap: 20px; + padding: 30px; + background: rgba(30, 41, 59, 0.7); + backdrop-filter: blur(20px); + border: 1px solid rgba(148, 163, 184, 0.2); + border-radius: 12px; + transition: all 0.3s ease; + box-shadow: + 0 4px 16px rgba(15, 23, 42, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.about-custom .custom-box:hover { + transform: translateY(-5px); + border-color: rgba(56, 189, 248, 0.4); + box-shadow: + 0 8px 32px rgba(56, 189, 248, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.about-custom .custom-box p { + font-size: 16px; + color: rgba(226, 232, 240, 0.9); +} + +.about-custom .btn-contact { + margin-top: 40px; +} + +.about-custom .btn-contact .btn { + position: relative; + overflow: hidden; + font-size: 16px; + font-weight: 600; + padding: 14px 48px; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border: none; + box-shadow: 0 12px 40px rgba(56, 189, 248, 0.4); + transition: all 0.3s ease; +} + +.about-custom .btn-contact .btn::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; +} + +.about-custom .btn-contact .btn:hover::before { + left: 100%; +} + +.about-custom .btn-contact .btn:hover { + transform: translateY(-2px); + box-shadow: 0 16px 48px rgba(56, 189, 248, 0.6); +} + +.about-custom .btn-contact .btn a { + color: #FFFFFF; + text-decoration: none; +} + +/* ============================================ + 移动端适配 + ============================================ */ + +@media (max-width: 768px) { + + .about .server-banner2 { + height: 300px; + } + + .about .server-banner2 h1 { + font-size: 36px; + } + + .about .server-banner2 .server-banner-desc { + font-size: 16px; + } + + .about-details { + padding: 60px 0; + } + + .about-details .about-details-box { + flex-direction: column; + gap: 30px; + } + + .about-details .about-details-right { + max-width: 100%; + } + + .about-details .about-details-right .about-details-item { + flex: 0 1 calc(50% - 10px); + } + + .about-reason { + padding: 60px 0; + } + + .about-reason .reason-box { + flex: 0 1 100%; + min-width: auto; + } + + .about-time { + padding: 60px 0; + } + + .about-box { + padding: 60px 0; + } + + .about-box .box-list .box-item { + flex: 0 1 100%; + min-width: auto; + } + + .about-custom { + padding: 60px 0; + } + + .about-custom .custom { + flex-direction: column; + gap: 20px; + } +} \ No newline at end of file