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

539
about.html
View File

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

1047
css/about.css
View File

File diff suppressed because it is too large Load Diff