Files
BlackFruit-UI/about.html
yiqiu 8c0f42b90e
All checks were successful
continuous-integration/drone/push Build is passing
fix+refactor: 下拉面板左右收起 + About 页面大幅精简
下拉面板修复:
- .nav-cont 加 pointer-events:none 让全宽空白区不拦截鼠标
- .nav-cont-menu 加 pointer-events:auto 只有内容区可交互
- 加 .nav-shadow mouseleave 监听兜底

About 精简:
- 7 section → 5 section (去掉关于我们长文、客户案例)
- 核心优势 6 项 → 3 项 SVG 图标卡片
- 时间轴去掉段落描述只保留标题
- CTA 精简为一行描述 + 按钮
2026-03-18 19:41:58 +08:00

151 lines
5.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{include file="header"}
<link rel="stylesheet" href="/web/BlackFruit-web/css/about.css">
<link rel="stylesheet" href="/web/BlackFruit-web/css/viewer.min.css">
<script src="/web/BlackFruit-web/js/viewer.min.js"></script>
</head>
<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>
<!-- ===== 核心优势 — 简洁 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>
<!-- ===== 发展历程 ===== -->
<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>
<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>
<div class="timeline-item">
<div class="timeline-date">2020.10</div>
<div class="timeline-dot"></div>
<div class="timeline-content">
<h4>宣布出海计划</h4>
</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>
</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>
</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>
<div style="height: 0;">
<img id="viewer" alt="" style="display: none;">
</div>
{include file="footer"}