bbb561012b
All checks were successful
continuous-integration/drone/push Build is passing
- Hero: 降高度、加 ABOUT US badge、横排数据统计 - 关于: 左文右 2x2 SVG 图标卡片 - 核心优势: 合并原 2 个 section → 3x2 序号网格 - 里程碑: 去掉 jQuery SuperSlide → 纯 CSS 竖版时间轴 - 荣誉/客户: 保留后台数据渲染，样式现代化 - CTA: 简化为渐变卡片 + 按钮 - 全面移动端适配
256 lines
10 KiB
HTML
256 lines
10 KiB
HTML
{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>
|
||
|
||
<!-- ===== 1. Hero Banner ===== -->
|
||
<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>
|
||
|
||
<!-- ===== 2. 关于我们 ===== -->
|
||
<section class="section about-intro">
|
||
<div class="section-content">
|
||
<div class="about-intro-grid">
|
||
<div class="about-intro-text">
|
||
<h2>关于主题云</h2>
|
||
<div class="intro-accent"></div>
|
||
<p>主题云，隶属于xxxx科技有限公司，专业的全球云产品服务供应商，提供公有云、私有云、专属云、混合云的全栈式云产品服务矩阵，融合数智化前沿科技，为电商、金融、医疗、教育、文旅等行业领域提供丰富的数字化解决方案。</p>
|
||
<p>主题云深耕基础云计算领域，始终秉持高性价比、高定制化、高性能的产品服务理念，保持中立服务立场，伴随着基础设施的加速投入与深入布局，主题云将为广大用户提供更优质的云产品与服务体验，为各行各业的云上业务保驾护航。</p>
|
||
</div>
|
||
<div class="about-intro-visual">
|
||
<div class="intro-card">
|
||
<div class="intro-card-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
||
</div>
|
||
<h4>全栈云服务</h4>
|
||
<p>公有云 · 私有云 · 混合云</p>
|
||
</div>
|
||
<div class="intro-card">
|
||
<div class="intro-card-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="intro-card">
|
||
<div class="intro-card-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>T级防御 · 99.99% 可用性</p>
|
||
</div>
|
||
<div class="intro-card">
|
||
<div class="intro-card-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>专属服务</h4>
|
||
<p>7×24 小时全天候支持</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 3. 核心优势 ===== -->
|
||
<section class="section about-advantages">
|
||
<div class="section-content">
|
||
<div class="section-title">
|
||
<h2>为什么选择主题云</h2>
|
||
<p class="section-subtitle">我们以客户为中心，以创新为驱动，为您提供值得信赖的云服务</p>
|
||
</div>
|
||
<div class="advantages-grid">
|
||
<div class="advantage-item">
|
||
<div class="advantage-num">01</div>
|
||
<h4>安全可信</h4>
|
||
<p>"五位一体"安全监管体系，基础设施符合国际严格标准认证，电力、网络可用性达 99.99%，有效保证所有设备稳定运行。</p>
|
||
</div>
|
||
<div class="advantage-item">
|
||
<div class="advantage-num">02</div>
|
||
<h4>高效服务</h4>
|
||
<p>7×24 小时全天候服务保障，通过多元服务渠道为您提供上云业务全生命周期的无忧服务，为您的云上业务全程护航。</p>
|
||
</div>
|
||
<div class="advantage-item">
|
||
<div class="advantage-num">03</div>
|
||
<h4>自主研发</h4>
|
||
<p>坚持自主研发，产品体系完善，为各行各业提供高性能、高可用、高弹性、高性价比的云计算框架与服务。</p>
|
||
</div>
|
||
<div class="advantage-item">
|
||
<div class="advantage-num">04</div>
|
||
<h4>定制服务</h4>
|
||
<p>资深售前架构师，拥有丰富的行业经验及多项专业资质，可为每位客户提供超预期的业务上云方案。</p>
|
||
</div>
|
||
<div class="advantage-item">
|
||
<div class="advantage-num">05</div>
|
||
<h4>勇于创新</h4>
|
||
<p>不满足现状、不固步自封，通过不断的行业实践与技术打磨，持续创新升级全栈云产品与解决方案。</p>
|
||
</div>
|
||
<div class="advantage-item">
|
||
<div class="advantage-num">06</div>
|
||
<h4>丰富场景</h4>
|
||
<p>高性能的计算、网络、存储服务，满足不同业务场景的灵活调度，为所有客户提供全栈解决方案。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 4. 里程碑（纯 CSS 竖版时间轴） ===== -->
|
||
<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>
|
||
<p>主题云注册用户累计突破 10W，产品体系日趋成熟。</p>
|
||
</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>
|
||
<p>云服务器迭代升级，正式上线 KVM 系列虚拟化产品。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">2020.10</div>
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<h4>宣布出海计划</h4>
|
||
<p>与全球合作伙伴共建生态，开启国际化征程。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">2019.06</div>
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<h4>品牌升级</h4>
|
||
<p>正式更名为主题云，上线云服务器相关业务。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">2018.11</div>
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<h4>网站正式上线</h4>
|
||
<p>公司网站正式上线，当月注册用户超过 5000 人。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">2017.08</div>
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<h4>公司成立</h4>
|
||
<p>公司正式成立，组建核心技术团队。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 5. 荣誉资质 ===== -->
|
||
<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>
|
||
|
||
<!-- ===== 6. 精选客户案例 ===== -->
|
||
<section class="section about-cases">
|
||
<div class="section-content">
|
||
<div class="section-title">
|
||
<h2>精选客户案例</h2>
|
||
</div>
|
||
{if ( isset($data.partner) ) }
|
||
<div class="cases-grid">
|
||
{foreach $data.partner as $key=>$value}
|
||
<div class="case-item">
|
||
<img src="{$value.img}" alt="">
|
||
<h4>{$value.name}</h4>
|
||
<p>{$value.description}</p>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
{else /}
|
||
<div class="cases-grid" id="partner-box">
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 7. CTA 联系我们 ===== -->
|
||
<section class="section about-cta">
|
||
<div class="section-content">
|
||
<div class="cta-inner">
|
||
<h2>定制云上解决方案</h2>
|
||
<p>即享数智化转型升级</p>
|
||
<div class="cta-features">
|
||
<span>更优惠的产品信息</span>
|
||
<span class="cta-dot"></span>
|
||
<span>更专业的选购建议</span>
|
||
<span class="cta-dot"></span>
|
||
<span>定制专属上云方案</span>
|
||
</div>
|
||
<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"} |