refactor: About 页面极简化 — 仿 Akile.io 风格
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- 一屏搞定：大标题 + 两行简介 + 4 格数据 - 去掉时间轴、优势列表、CTA - 荣誉资质条件渲染（有数据才显示） - 居中单栏 720px 布局
This commit is contained in:
yiqiu
152
about.html
152
about.html
@@ -10,137 +10,51 @@
|
||||
<body id="about" class="about">
|
||||
<header>{include file="public/header"}</header>
|
||||
|
||||
<!-- ===== Hero ===== -->
|
||||
<section class="about-hero">
|
||||
<div class="about-hero-bg"></div>
|
||||
<div class="section-content about-hero-content">
|
||||
<div class="about-hero-badge">ABOUT US</div>
|
||||
<h1>主题云</h1>
|
||||
<p class="about-hero-desc">专业的全球云产品服务供应商，助力中小企业数智化转型升级</p>
|
||||
<div class="about-hero-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-num">10</span><span class="stat-unit">年+</span>
|
||||
<span class="stat-label">行业经验</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-num">10W+</span>
|
||||
<span class="stat-label">注册用户</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-num">50K</span>
|
||||
<span class="stat-label">部署服务器</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-num">800G</span>
|
||||
<span class="stat-label">全球带宽</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 极简 About -->
|
||||
<section class="about-main">
|
||||
<div class="about-container">
|
||||
|
||||
<!-- ===== 核心优势 — 简洁 3 列 ===== -->
|
||||
<section class="section about-advantages">
|
||||
<div class="section-content">
|
||||
<div class="advantages-grid compact">
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
</div>
|
||||
<h4>安全可信</h4>
|
||||
<p>国际标准认证，99.99% 可用性</p>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||
</div>
|
||||
<h4>全球覆盖</h4>
|
||||
<p>20+ 地区，60+ 可用区</p>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
</div>
|
||||
<h4>7×24 服务</h4>
|
||||
<p>全天候专业技术支持</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="about-badge">ABOUT</div>
|
||||
<h1 class="about-title">主题云</h1>
|
||||
<p class="about-desc">
|
||||
专业的全球云产品服务供应商，提供公有云、私有云、混合云全栈式服务矩阵。<br>
|
||||
深耕基础云计算领域，助力中小企业数智化转型升级。
|
||||
</p>
|
||||
|
||||
<!-- ===== 发展历程 ===== -->
|
||||
<section class="section about-timeline">
|
||||
<div class="section-content">
|
||||
<div class="section-title"><h2>发展历程</h2></div>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2022.12</div>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>用户突破 10 万</h4>
|
||||
</div>
|
||||
<div class="about-stats">
|
||||
<div class="about-stat">
|
||||
<div class="about-stat-num">10<span>年+</span></div>
|
||||
<div class="about-stat-label">行业经验</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2021.05</div>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>KVM 系列产品上线</h4>
|
||||
</div>
|
||||
<div class="about-stat">
|
||||
<div class="about-stat-num">10W<span>+</span></div>
|
||||
<div class="about-stat-label">注册用户</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2020.10</div>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>宣布出海计划</h4>
|
||||
</div>
|
||||
<div class="about-stat">
|
||||
<div class="about-stat-num">60<span>+</span></div>
|
||||
<div class="about-stat-label">全球可用区</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2019.06</div>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>品牌升级，云服务上线</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2017.08</div>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>公司成立</h4>
|
||||
</div>
|
||||
<div class="about-stat">
|
||||
<div class="about-stat-num">99.99<span>%</span></div>
|
||||
<div class="about-stat-label">服务可用性</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 荣誉资质 ===== -->
|
||||
<section class="section about-honors">
|
||||
<div class="section-content">
|
||||
<div class="section-title"><h2>荣誉资质</h2></div>
|
||||
{if ( isset($data.honor) ) }
|
||||
<div class="honors-grid">
|
||||
{foreach $data.honor as $key=>$value}
|
||||
<div class="honor-item">
|
||||
<img src={$value.img} alt="">
|
||||
<p>{$value.name}</p>
|
||||
<!-- 荣誉资质（如果有则显示） -->
|
||||
{if ( isset($data.honor) && !empty($data.honor) ) }
|
||||
<div class="about-honors-section">
|
||||
<h3 class="about-section-title">资质认证</h3>
|
||||
<div class="about-honors">
|
||||
{foreach $data.honor as $key=>$value}
|
||||
<div class="about-honor-item">
|
||||
<img src={$value.img} alt="">
|
||||
<span>{$value.name}</span>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{else /}
|
||||
<div class="honors-grid" id="honor-box"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CTA ===== -->
|
||||
<section class="section about-cta">
|
||||
<div class="section-content">
|
||||
<div class="cta-inner">
|
||||
<h2>开启您的云上之旅</h2>
|
||||
<p>专业方案 · 极致体验 · 全程护航</p>
|
||||
<a href="/contact.html" class="cta-btn">立即联系</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user