yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 完全重构 About 页面
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- Hero: 降高度、加 ABOUT US badge、横排数据统计
- 关于: 左文右 2x2 SVG 图标卡片
- 核心优势: 合并原 2 个 section → 3x2 序号网格
- 里程碑: 去掉 jQuery SuperSlide → 纯 CSS 竖版时间轴
- 荣誉/客户: 保留后台数据渲染，样式现代化
- CTA: 简化为渐变卡片 + 按钮
- 全面移动端适配
This commit is contained in:
yiqiu
2026-03-18 19:27:04 +08:00
parent d2633ea9ad
commit bbb561012b
2 changed files with 849 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
about.html
View File

@@ -1,272 +1,250 @@
{include file="header"}
<link rel="stylesheet" href="/web/BlackFruit-web/css/extend.css">
<link rel="stylesheet" href="/web/BlackFruit-web/css/about.css">
<link rel="stylesheet" href="/web/BlackFruit-web/css/time.css">
<link rel="stylesheet" href="/web/BlackFruit-web/css/viewer.min.css">
<script src="/web/BlackFruit-web/vender/swiper/jquery.SuperSlide2.1.2.js"></script>
<script src="/web/BlackFruit-web/js/viewer.min.js"></script>
<script src="/web/BlackFruit-web/js/about.js"></script>
</head>
<body id="about" class="about">
<header>{include file="public/header"}</header>
<section class="section server-banner2 about">
<div class="section-content">
<!-- ===== 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="server-banner-desc">助力中小企业数智化转型升级</p>
<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>
<section class="section about-details">
<div class="section-content ">
<h2 class="mb-40">关于主题云</h2>
<div class="fboxWrap Xbetween about-details-box">
<div class="about-details-left">
<p> 主题云，隶属于xxxx科技有限公司，专业的全球云产品服务供应商，提供公有云、私有云、专属云、混合云的全栈式云产品服务矩阵，融合数智化前沿科技，为电商、金融、医疗、教育、文旅等行业领域提供丰富的数字化解决方案。
</p>
<p> 主题云深耕基础云计算领域，始终秉持高性价比、高定制化、高性能的产品服务理念，保持中立服务立场，伴随着基础设施的加速投入与深入布局，主题云将为广大用户提供更优质的云产品与服务体验，为各行各业的云上业务保驾护航。
</p>
<!-- ===== 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-details-right">
<div class="about-details-item">
<h2>10年</h2>
<p>行业经验</p>
<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="about-details-item">
<h2>10W+</h2>
<p>会员用户</p>
<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="about-details-item">
<h2>50K</h2>
<p>部署服务器</p>
<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="about-details-item">
<h2>800G</h2>
<p>全球带宽容量</p>
<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>
<section class="section about-reason about-why">
<div class="section-content ">
<!-- ===== 3. 核心优势 ===== -->
<section class="section about-advantages">
<div class="section-content">
<div class="section-title">
<h2>为什么选择我们</h2>
<h2>为什么选择主题云</h2>
<p class="section-subtitle">我们以客户为中心，以创新为驱动，为您提供值得信赖的云服务</p>
</div>
<div class="fboxRow reason ">
<div class="reason-box reason-item-1">
<div class="advantages-grid">
<div class="advantage-item">
<div class="advantage-num">01</div>
<h4>安全可信</h4>
<p class="mt-40 font16">主题云全力打造“五位一
体”的安全监管体系，基础
设施符合国际严格标准认
证，电力、网络可用性达
99.99%，有效保证所有设
备稳定运行。</p>
<p>"五位一体"安全监管体系，基础设施符合国际严格标准认证，电力、网络可用性达 99.99%，有效保证所有设备稳定运行。</p>
</div>
<div class="reason-box reason-item-2">
<div class="advantage-item">
<div class="advantage-num">02</div>
<h4>高效服务</h4>
<p class="mt-40 font16">7x24小时全天候服务保障，
通过多元服务渠道为您提供
上云业务全生命周期的无忧
服务，为您的云上业务全程
护航。</p>
<p>7×24 小时全天候服务保障，通过多元服务渠道为您提供上云业务全生命周期的无忧服务，为您的云上业务全程护航。</p>
</div>
<div class="reason-box reason-item-3">
<div class="advantage-item">
<div class="advantage-num">03</div>
<h4>自主研发</h4>
<p class="mt-40 font16">主题云坚持自主研发，产品
体系完善，为各行各业提供
高性能、高可用、高弹性、
高性价比的云计算框架与服
务。</p>
<p>坚持自主研发，产品体系完善，为各行各业提供高性能、高可用、高弹性、高性价比的云计算框架与服务。</p>
</div>
<div class="reason-box reason-item-4">
<div class="advantage-item">
<div class="advantage-num">04</div>
<h4>定制服务</h4>
<p class="mt-40 font16">主题云资深售前架构师，拥
有丰富的行业经验及多项专
业资质，可为每位客户提供
超预期的业务上云方案。</p>
<p>资深售前架构师，拥有丰富的行业经验及多项专业资质，可为每位客户提供超预期的业务上云方案。</p>
</div>
<div class="reason-box reason-item-5">
<h4>丰富场景</h4>
<p class="mt-40 font16">主题云拥有高性能的计算、网络、存储服务，满足不同业务场景的灵活调度，为所有客户提供全栈解决方案。</p>
</div>
</div>
</div>
</section>
<section class="section about-reason about-together">
<div class="section-content ">
<div class="section-title">
<h2>携手千行百业，共建蓬勃云生态</h2>
</div>
<div class="fboxRow reason ">
<div class="reason-box">
<h4>体验为王</h4>
<p class="mt-40 font16">我们关注每一位客户的使用体验，及时响应客户需求、快速解决客户问题并提供超出客户预期的产品与服务，保证高效极致的使用体验。
</p>
</div>
<div class="reason-box">
<div class="advantage-item">
<div class="advantage-num">05</div>
<h4>勇于创新</h4>
<p class="mt-40 font16">我们不满足现状、不盲从权威、不固步自封，通过不断地行业实践与技术打磨，持续创新升级全栈云产品与解决方案，持续推动客户业务快速发展。
</p>
<p>不满足现状、不固步自封，通过不断的行业实践与技术打磨，持续创新升级全栈云产品与解决方案。</p>
</div>
<div class="reason-box">
<h4>互赢共进</h4>
<p class="mt-40 font16">以敬业务实的工匠精神，精心打磨每一件产品，为客户提供业内领先的产品与服务，助力客户成功，携手共赢。
</p>
<div class="advantage-item">
<div class="advantage-num">06</div>
<h4>丰富场景</h4>
<p>高性能的计算、网络、存储服务，满足不同业务场景的灵活调度，为所有客户提供全栈解决方案。</p>
</div>
</div>
</div>
</section>
<!-- 里程碑 -->
<section class="section section-bg about-time">
<div class="section-content ">
<!-- ===== 4. 里程碑（纯 CSS 竖版时间轴） ===== -->
<section class="section about-timeline">
<div class="section-content">
<div class="section-title">
<h2>里程碑</h2>
<h2>发展历程</h2>
</div>
<div class="time-line">
<div class="event_box">
<div class="space_div">
<p class="left_space"></p>
<p class="right_space"></p>
<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 class="parHd clearfix">
<ul>
<li>
<div class="time-box">
<div class="line"></div>
<h5 class="font26 mb-10">2022.12</h5>
<p>主题云注册用户突破10W</p>
</div>
</li>
<li>
<div class="time-box">
<div class="line"></div>
<h5 class="font26 mb-10">2021.05</h5>
<p>云服务器迭代升级，上线KVM系列产品</p>
</div>
</li>
<li>
<div class="time-box">
<div class="line"></div>
<h5 class="font26 mb-10">2020.10</h5>
<p>主题云宣布出海计划，与全球合作伙伴共建生态</p>
</div>
</li>
<li>
<div class="time-box">
<div class="line"></div>
<h5 class="font26 mb-10">2019.06</h5>
<p>更名为主题云，并正式上线云服务器相关业务</p>
</div>
</li>
<li>
<div class="time-box">
<div class="line"></div>
<h5 class="font26 mb-10">2018.11</h5>
<p>公司网站正式上线，当月注册用户超5k人</p>
</div>
</li>
<li>
<div class="time-box">
<div class="line"></div>
<h5 class="font26 mb-10">2017.08</h5>
<p>公司成立，组建核心技术团队</p>
</div>
</li>
</ul>
<a class="sPrev"><img src="/web/BlackFruit-web/assets/img/index/left_ico.png" alt="" title=""></a>
<a class="sNext"><img src="/web/BlackFruit-web/assets/img/index/right_ico.png" alt="" title=""></a>
</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>
<!-- 荣誉资质 -->
<section class="section about-box">
<div class="section-content ">
<!-- ===== 5. 荣誉资质 ===== -->
<section class="section about-honors">
<div class="section-content">
<div class="section-title">
<h2>荣誉资质</h2>
</div>
{if ( isset($data.honor) ) }
<div class="box-list">
<div class="honors-grid">
{foreach $data.honor as $key=>$value}
<div class="box-item">
<div class="honor-item">
<img src={$value.img} alt="">
<p class="font-16 mt-20">{$value.name}</p>
<p>{$value.name}</p>
</div>
{/foreach}
</div>
{else /}
<div class="box-list" id="honor-box">
<div class="honors-grid" id="honor-box">
</div>
{/if}
</div>
</section>
<!-- 精选客户案例 -->
<section class="section about-box about-example">
<div class="section-content ">
<!-- ===== 6. 精选客户案例 ===== -->
<section class="section about-cases">
<div class="section-content">
<div class="section-title">
<h2>精选客户案例</h2>
</div>
{if ( isset($data.partner) ) }
<div class="box-list">
<div class="cases-grid">
{foreach $data.partner as $key=>$value}
<div class="box-item">
<div class="case-item">
<img src="{$value.img}" alt="">
<h4 class="mt-30">{$value.name}</h4>
<p class="mt-20">{$value.description}</p>
<h4>{$value.name}</h4>
<p>{$value.description}</p>
</div>
{/foreach}
</div>
{else /}
<div class="box-list" id="partner-box">
<div class="cases-grid" id="partner-box">
</div>
{/if}
</div>
</section>
<!-- 联系我们 -->
<section class="section about-custom">
<div class="section-content ">
<div class="section-title">
<h2>定制云上解决方案，即享数智化转型升级</h2>
</div>
<div class="fboxWrap Xaround custom">
<div class="custom-box">
<div class="custom-icon"></div>
<p>更优惠的产品信息</p>
</div>
<div class="custom-box">
<div class="custom-icon"></div>
<p>更专业的选购建议</p>
</div>
<div class="custom-box">
<div class="custom-icon"></div>
<p>定制专属上云方案</p>
</div>
</div>
<div class="fboxRow Xcenter btn-contact">
<div class="btn btn-orgin">
<a href="/contact.html" class="cps-link">立即联系</a>
<!-- ===== 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>
@@ -275,11 +253,4 @@
<img id="viewer" alt="" style="display: none;">
</div>
<script>
jQuery(".event_box").slide({ titCell: ".parHd li", mainCell: ".parBd", defaultPlay: false, titOnClassName: "act", prevCell: ".sPrev", nextCell: ".sNext", pnLoop: false })
jQuery(".parHd").slide({ mainCell: " ul", vis: 5, effect: "left", defaultPlay: false, prevCell: ".sPrev", nextCell: ".sNext", pnLoop: false, autoPage: true })
</script>
{include file="footer"}

1047
css/about.css
View File

File diff suppressed because it is too large Load Diff