From 3e07a383d5b4eeed1977ba6c155f82fa3a84bb11 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Wed, 18 Mar 2026 19:46:06 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20About=20=E9=A1=B5=E9=9D=A2=E6=9E=81?= =?UTF-8?q?=E7=AE=80=E5=8C=96=20=E2=80=94=20=E4=BB=BF=20Akile.io=20?= =?UTF-8?q?=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 一屏搞定：大标题 + 两行简介 + 4 格数据 - 去掉时间轴、优势列表、CTA - 荣誉资质条件渲染（有数据才显示） - 居中单栏 720px 布局 --- about.html | 152 ++++----------- css/about.css | 518 +++++++++++++------------------------------------- 2 files changed, 170 insertions(+), 500 deletions(-) diff --git a/about.html b/about.html index 4e2f6a8..097ff24 100644 --- a/about.html +++ b/about.html @@ -10,137 +10,51 @@
{include file="public/header"}
- -
-
-
-
ABOUT US
-

主题云

-

专业的全球云产品服务供应商，助力中小企业数智化转型升级

-
-
- 10年+ - 行业经验 -
-
-
- 10W+ - 注册用户 -
-
-
- 50K - 部署服务器 -
-
-
- 800G - 全球带宽 -
-
-
-
+ +
+
- -
-
-
-
-
- -
-

安全可信

-

国际标准认证，99.99% 可用性

-
-
-
- -
-

全球覆盖

-

20+ 地区，60+ 可用区

-
-
-
- -
-

7×24 服务

-

全天候专业技术支持

-
-
-
-
+
ABOUT
+

主题云

+

+ 专业的全球云产品服务供应商，提供公有云、私有云、混合云全栈式服务矩阵。
+ 深耕基础云计算领域，助力中小企业数智化转型升级。 +

- -
-
-

发展历程

-
-
-
2022.12
-
-
-

用户突破 10 万

-
+
+
+
10年+
+
行业经验
-
-
2021.05
-
-
-

KVM 系列产品上线

-
+
+
10W+
+
注册用户
-
-
2020.10
-
-
-

宣布出海计划

-
+
+
60+
+
全球可用区
-
-
2019.06
-
-
-

品牌升级，云服务上线

-
-
-
-
2017.08
-
-
-

公司成立

-
+
+
99.99%
+
服务可用性
-
-
- -
-
-

荣誉资质

- {if ( isset($data.honor) ) } -
- {foreach $data.honor as $key=>$value} -
- -

{$value.name}

+ + {if ( isset($data.honor) && !empty($data.honor) ) } +
+

资质认证

+
+ {foreach $data.honor as $key=>$value} +
+ + {$value.name} +
+ {/foreach}
- {/foreach}
- {else /} -
{/if} -
-
- -
-
-
-

开启您的云上之旅

-

专业方案 · 极致体验 · 全程护航

- 立即联系 -
diff --git a/css/about.css b/css/about.css index e0883e3..f3265fd 100644 --- a/css/about.css +++ b/css/about.css @@ -1,440 +1,196 @@ /* ============================================ - About 页面 - 精简版 + About 页面 — 极简风格 ============================================ */ -/* ---- 整体 ---- */ #about { - background: linear-gradient(180deg, #020617 0%, #0F172A 50%, #020617 100%); + background: #020617; min-height: 100vh; } -#about .section { - background: transparent; -} - -/* ============================================ - 1. Hero Banner - ============================================ */ -.about-hero { - position: relative; - height: 360px; +.about-main { display: flex; - align-items: center; justify-content: center; - overflow: hidden; + align-items: center; + min-height: calc(100vh - 72px); + padding: 80px 0 60px; } -.about-hero-bg { - position: absolute; - inset: 0; - background: - radial-gradient(ellipse at 25% 40%, rgba(99, 102, 241, 0.18) 0%, transparent 55%), - radial-gradient(ellipse at 75% 60%, rgba(56, 189, 248, 0.14) 0%, transparent 55%), - linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%); -} - -.about-hero-content { - position: relative; - z-index: 1; +.about-container { + max-width: 720px; + margin: 0 auto; + padding: 0 24px; text-align: center; - padding: 0 20px; } -.about-hero-badge { +/* Badge */ +.about-badge { display: inline-block; - padding: 4px 18px; + padding: 4px 16px; font-size: 11px; font-weight: 600; - letter-spacing: 2.5px; - color: #38BDF8; - border: 1px solid rgba(56, 189, 248, 0.3); + letter-spacing: 3px; + color: rgba(56, 189, 248, 0.8); + border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 20px; - margin-bottom: 20px; + margin-bottom: 28px; } -.about-hero h1 { - font-size: 52px; +/* 标题 */ +.about-title { + font-size: 56px; font-weight: 700; - margin-bottom: 12px; - background: linear-gradient(135deg, #fff 30%, #38BDF8 100%); + margin-bottom: 24px; + background: linear-gradient(135deg, #fff 20%, #38BDF8 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + line-height: 1.15; } -.about-hero-desc { +/* 简介 */ +.about-desc { font-size: 16px; - color: rgba(203, 213, 225, 0.75); - margin-bottom: 40px; - max-width: 500px; + line-height: 1.8; + color: rgba(148, 163, 184, 0.75); + margin-bottom: 64px; + max-width: 560px; margin-left: auto; margin-right: auto; } -/* 数据统计横排 */ -.about-hero-stats { - display: flex; - justify-content: center; - align-items: center; +/* ---- 数据统计 ---- */ +.about-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + margin-bottom: 80px; } -.stat-item { +.about-stat { + padding: 28px 12px; + background: rgba(30, 41, 59, 0.35); + border: 1px solid rgba(148, 163, 184, 0.06); + border-radius: 14px; + transition: all 0.3s ease; +} + +.about-stat:hover { + border-color: rgba(56, 189, 248, 0.12); + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); +} + +.about-stat-num { + font-size: 34px; + font-weight: 700; + color: #F1F5F9; + line-height: 1.1; + margin-bottom: 6px; +} + +.about-stat-num span { + font-size: 18px; + font-weight: 500; + color: #38BDF8; +} + +.about-stat-label { + font-size: 12px; + color: rgba(148, 163, 184, 0.5); + letter-spacing: 0.5px; +} + +/* ---- 荣誉资质 ---- */ +.about-honors-section { + border-top: 1px solid rgba(148, 163, 184, 0.06); + padding-top: 48px; +} + +.about-section-title { + font-size: 16px; + font-weight: 500; + color: rgba(226, 232, 240, 0.6); + margin-bottom: 28px; + letter-spacing: 1px; +} + +.about-honors { + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: center; +} + +.about-honor-item { display: flex; flex-direction: column; align-items: center; - padding: 0 36px; -} - -.stat-num { - font-size: 30px; - font-weight: 700; - color: #38BDF8; - line-height: 1.1; -} - -.stat-unit { - font-size: 16px; - font-weight: 600; - color: #38BDF8; -} - -.stat-label { - font-size: 12px; - color: rgba(148, 163, 184, 0.6); - margin-top: 4px; - letter-spacing: 0.5px; -} - -.stat-divider { - width: 1px; - height: 32px; - background: rgba(148, 163, 184, 0.12); -} - -/* ============================================ - 2. 核心优势 — 简洁 3 列 - ============================================ */ -.about-advantages { - padding: 80px 0 60px; -} - -.advantages-grid.compact { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px; - max-width: 900px; - margin: 0 auto; -} - -.advantage-item { - text-align: center; - padding: 40px 28px; - background: rgba(30, 41, 59, 0.4); - border: 1px solid rgba(148, 163, 184, 0.06); - border-radius: 16px; - transition: all 0.35s ease; -} - -.advantage-item:hover { - border-color: rgba(56, 189, 248, 0.15); - transform: translateY(-6px); - box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); -} - -.advantage-icon { - width: 44px; - height: 44px; - margin: 0 auto 20px; - color: #38BDF8; - opacity: 0.8; - transition: opacity 0.3s ease; -} - -.advantage-item:hover .advantage-icon { - opacity: 1; -} - -.advantage-icon svg { - width: 100%; - height: 100%; -} - -.advantage-item h4 { - font-size: 18px; - font-weight: 600; - color: #E2E8F0; - margin-bottom: 8px; -} - -.advantage-item p { - font-size: 13px; - color: rgba(148, 163, 184, 0.7); - line-height: 1.5; -} - -/* ============================================ - 3. 时间轴 - ============================================ */ -.about-timeline { - padding: 70px 0; -} - -.about-timeline .section-title { - text-align: center; - margin-bottom: 48px; -} - -.about-timeline .section-title h2 { - font-size: 28px; - font-weight: 700; - background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.timeline { - position: relative; - max-width: 600px; - margin: 0 auto; - padding-left: 40px; -} - -.timeline::before { - content: ''; - position: absolute; - left: 7px; - top: 4px; - bottom: 4px; - width: 2px; - background: linear-gradient(180deg, #38BDF8, rgba(99, 102, 241, 0.3), transparent); - border-radius: 2px; -} - -.timeline-item { - position: relative; - padding-bottom: 32px; - padding-left: 28px; - display: flex; - align-items: baseline; - gap: 16px; -} - -.timeline-item:last-child { - padding-bottom: 0; -} - -.timeline-dot { - position: absolute; - left: -40px; - top: 4px; - width: 16px; - height: 16px; - border-radius: 50%; - background: #0F172A; - border: 2px solid #38BDF8; - box-shadow: 0 0 10px rgba(56, 189, 248, 0.25); - z-index: 1; - transition: all 0.3s ease; -} - -.timeline-item:hover .timeline-dot { - background: #38BDF8; - box-shadow: 0 0 16px rgba(56, 189, 248, 0.5); -} - -.timeline-date { - font-size: 13px; - font-weight: 600; - color: #38BDF8; - letter-spacing: 0.5px; - flex-shrink: 0; - width: 68px; -} - -.timeline-content h4 { - font-size: 15px; - font-weight: 500; - color: rgba(226, 232, 240, 0.85); -} - -/* ============================================ - 4. 荣誉资质 - ============================================ */ -.about-honors { - padding: 70px 0; -} - -.about-honors .section-title { - text-align: center; - margin-bottom: 40px; -} - -.about-honors .section-title h2 { - font-size: 28px; - font-weight: 700; - background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.honors-grid { - display: flex; - flex-wrap: wrap; - gap: 16px; - justify-content: center; -} - -.honor-item { - flex: 0 1 calc(25% - 12px); - min-width: 160px; - max-width: 240px; - padding: 24px 16px; - text-align: center; - background: rgba(30, 41, 59, 0.35); - border: 1px solid rgba(148, 163, 184, 0.06); - border-radius: 12px; - transition: all 0.3s ease; -} - -.honor-item:hover { - border-color: rgba(56, 189, 248, 0.15); - transform: translateY(-3px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); -} - -.honor-item img { - width: 100%; - max-width: 160px; - height: auto; - border-radius: 6px; - margin-bottom: 10px; -} - -.honor-item p { - font-size: 12px; - color: rgba(203, 213, 225, 0.7); -} - -/* ============================================ - 5. CTA - ============================================ */ -.about-cta { - padding: 60px 0 90px; -} - -.cta-inner { - text-align: center; - padding: 56px 40px; - background: - radial-gradient(ellipse at 30% 50%, rgba(56, 189, 248, 0.07) 0%, transparent 60%), - radial-gradient(ellipse at 70% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 60%), - rgba(30, 41, 59, 0.3); - border: 1px solid rgba(148, 163, 184, 0.06); - border-radius: 20px; -} - -.cta-inner h2 { - font-size: 28px; - font-weight: 700; - margin-bottom: 8px; - background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.cta-inner > p { - font-size: 15px; - color: rgba(148, 163, 184, 0.6); - margin-bottom: 28px; -} - -.cta-btn { - display: inline-block; - padding: 12px 40px; - font-size: 15px; - font-weight: 600; - color: #fff; - background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + gap: 8px; + padding: 16px 14px; + min-width: 100px; + max-width: 140px; + background: rgba(30, 41, 59, 0.25); + border: 1px solid rgba(148, 163, 184, 0.04); border-radius: 10px; - text-decoration: none; transition: all 0.3s ease; - box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2); } -.cta-btn:hover { +.about-honor-item:hover { + border-color: rgba(56, 189, 248, 0.1); transform: translateY(-2px); - box-shadow: 0 12px 32px rgba(56, 189, 248, 0.35); } -/* ============================================ - 移动端 - ============================================ */ +.about-honor-item img { + width: 80px; + height: auto; + border-radius: 4px; + opacity: 0.85; +} + +.about-honor-item span { + font-size: 11px; + color: rgba(148, 163, 184, 0.5); + text-align: center; + line-height: 1.3; +} + +/* ---- 移动端 ---- */ @media (max-width: 768px) { - .about-hero { - height: 300px; - } - - .about-hero h1 { - font-size: 32px; - } - - .about-hero-desc { - font-size: 14px; - } - - .about-hero-stats { - flex-wrap: wrap; - gap: 8px; - } - - .stat-item { - padding: 0 16px; - } - - .stat-num { - font-size: 22px; - } - - .stat-divider { - display: none; - } - - .advantages-grid.compact { - grid-template-columns: 1fr; - max-width: 400px; - } - - .about-advantages { + .about-main { padding: 60px 0 40px; + min-height: auto; } - .about-timeline, - .about-honors { - padding: 50px 0; + .about-title { + font-size: 36px; } - .about-timeline .section-title h2, - .about-honors .section-title h2 { - font-size: 22px; + .about-desc { + font-size: 14px; + margin-bottom: 40px; } - .honor-item { - flex: 0 1 calc(50% - 8px); - min-width: 120px; + .about-stats { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + margin-bottom: 48px; } - .about-cta { - padding: 30px 0 60px; + .about-stat-num { + font-size: 28px; } - .cta-inner { - padding: 36px 20px; + .about-honor-item { + min-width: 80px; + } +} + +@media (max-width: 480px) { + .about-title { + font-size: 28px; } - .cta-inner h2 { - font-size: 22px; + .about-stats { + grid-template-columns: repeat(2, 1fr); } } \ No newline at end of file