fix+refactor: 下拉面板左右收起 + About 页面大幅精简
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
下拉面板修复: - .nav-cont 加 pointer-events:none 让全宽空白区不拦截鼠标 - .nav-cont-menu 加 pointer-events:auto 只有内容区可交互 - 加 .nav-shadow mouseleave 监听兜底 About 精简: - 7 section → 5 section (去掉关于我们长文、客户案例) - 核心优势 6 项 → 3 项 SVG 图标卡片 - 时间轴去掉段落描述只保留标题 - CTA 精简为一行描述 + 按钮
This commit is contained in:
yiqiu
167
about.html
167
about.html
@@ -10,16 +10,16 @@
|
||||
<body id="about" class="about">
|
||||
<header>{include file="public/header"}</header>
|
||||
|
||||
<!-- ===== 1. Hero Banner ===== -->
|
||||
<!-- ===== 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>
|
||||
<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-num">10</span><span class="stat-unit">年+</span>
|
||||
<span class="stat-label">行业经验</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
@@ -35,119 +35,58 @@
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-num">800G</span>
|
||||
<span class="stat-label">全球带宽容量</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. 核心优势 ===== -->
|
||||
<!-- ===== 核心优势 — 简洁 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="advantages-grid compact">
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-num">01</div>
|
||||
<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>
|
||||
<p>国际标准认证，99.99% 可用性</p>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-num">02</div>
|
||||
<h4>高效服务</h4>
|
||||
<p>7×24 小时全天候服务保障，通过多元服务渠道为您提供上云业务全生命周期的无忧服务，为您的云上业务全程护航。</p>
|
||||
<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-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 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>
|
||||
|
||||
<!-- ===== 4. 里程碑（纯 CSS 竖版时间轴） ===== -->
|
||||
<!-- ===== 发展历程 ===== -->
|
||||
<section class="section about-timeline">
|
||||
<div class="section-content">
|
||||
<div class="section-title">
|
||||
<h2>发展历程</h2>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<p>云服务器迭代升级，正式上线 KVM 系列虚拟化产品。</p>
|
||||
<h4>KVM 系列产品上线</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
@@ -155,23 +94,13 @@
|
||||
<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>
|
||||
<h4>品牌升级，云服务上线</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
@@ -179,19 +108,16 @@
|
||||
<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>
|
||||
<div class="section-title"><h2>荣誉资质</h2></div>
|
||||
{if ( isset($data.honor) ) }
|
||||
<div class="honors-grid">
|
||||
{foreach $data.honor as $key=>$value}
|
||||
@@ -202,48 +128,17 @@
|
||||
{/foreach}
|
||||
</div>
|
||||
{else /}
|
||||
<div class="honors-grid" id="honor-box">
|
||||
</div>
|
||||
<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 联系我们 ===== -->
|
||||
<!-- ===== 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>
|
||||
<h2>开启您的云上之旅</h2>
|
||||
<p>专业方案 · 极致体验 · 全程护航</p>
|
||||
<a href="/contact.html" class="cta-btn">立即联系</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user