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">
|
<body id="about" class="about">
|
||||||
<header>{include file="public/header"}</header>
|
<header>{include file="public/header"}</header>
|
||||||
|
|
||||||
<!-- ===== 1. Hero Banner ===== -->
|
<!-- ===== Hero ===== -->
|
||||||
<section class="about-hero">
|
<section class="about-hero">
|
||||||
<div class="about-hero-bg"></div>
|
<div class="about-hero-bg"></div>
|
||||||
<div class="section-content about-hero-content">
|
<div class="section-content about-hero-content">
|
||||||
<div class="about-hero-badge">ABOUT US</div>
|
<div class="about-hero-badge">ABOUT US</div>
|
||||||
<h1>主题云</h1>
|
<h1>主题云</h1>
|
||||||
<p class="about-hero-desc">助力中小企业数智化转型升级</p>
|
<p class="about-hero-desc">专业的全球云产品服务供应商，助力中小企业数智化转型升级</p>
|
||||||
<div class="about-hero-stats">
|
<div class="about-hero-stats">
|
||||||
<div class="stat-item">
|
<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>
|
<span class="stat-label">行业经验</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-divider"></div>
|
<div class="stat-divider"></div>
|
||||||
@@ -35,119 +35,58 @@
|
|||||||
<div class="stat-divider"></div>
|
<div class="stat-divider"></div>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<span class="stat-num">800G</span>
|
<span class="stat-num">800G</span>
|
||||||
<span class="stat-label">全球带宽容量</span>
|
<span class="stat-label">全球带宽</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ===== 2. 关于我们 ===== -->
|
<!-- ===== 核心优势 — 简洁 3 列 ===== -->
|
||||||
<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">
|
<section class="section about-advantages">
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<div class="section-title">
|
<div class="advantages-grid compact">
|
||||||
<h2>为什么选择主题云</h2>
|
|
||||||
<p class="section-subtitle">我们以客户为中心，以创新为驱动，为您提供值得信赖的云服务</p>
|
|
||||||
</div>
|
|
||||||
<div class="advantages-grid">
|
|
||||||
<div class="advantage-item">
|
<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>
|
<h4>安全可信</h4>
|
||||||
<p>"五位一体"安全监管体系，基础设施符合国际严格标准认证，电力、网络可用性达 99.99%，有效保证所有设备稳定运行。</p>
|
<p>国际标准认证，99.99% 可用性</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="advantage-item">
|
<div class="advantage-item">
|
||||||
<div class="advantage-num">02</div>
|
<div class="advantage-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>7×24 小时全天候服务保障，通过多元服务渠道为您提供上云业务全生命周期的无忧服务，为您的云上业务全程护航。</p>
|
</div>
|
||||||
|
<h4>全球覆盖</h4>
|
||||||
|
<p>20+ 地区，60+ 可用区</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="advantage-item">
|
<div class="advantage-item">
|
||||||
<div class="advantage-num">03</div>
|
<div class="advantage-icon">
|
||||||
<h4>自主研发</h4>
|
<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>
|
||||||
<p>坚持自主研发，产品体系完善，为各行各业提供高性能、高可用、高弹性、高性价比的云计算框架与服务。</p>
|
</div>
|
||||||
</div>
|
<h4>7×24 服务</h4>
|
||||||
<div class="advantage-item">
|
<p>全天候专业技术支持</p>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ===== 4. 里程碑（纯 CSS 竖版时间轴） ===== -->
|
<!-- ===== 发展历程 ===== -->
|
||||||
<section class="section about-timeline">
|
<section class="section about-timeline">
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<div class="section-title">
|
<div class="section-title"><h2>发展历程</h2></div>
|
||||||
<h2>发展历程</h2>
|
|
||||||
</div>
|
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<div class="timeline-item">
|
<div class="timeline-item">
|
||||||
<div class="timeline-date">2022.12</div>
|
<div class="timeline-date">2022.12</div>
|
||||||
<div class="timeline-dot"></div>
|
<div class="timeline-dot"></div>
|
||||||
<div class="timeline-content">
|
<div class="timeline-content">
|
||||||
<h4>注册用户突破10万</h4>
|
<h4>用户突破 10 万</h4>
|
||||||
<p>主题云注册用户累计突破 10W，产品体系日趋成熟。</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline-item">
|
<div class="timeline-item">
|
||||||
<div class="timeline-date">2021.05</div>
|
<div class="timeline-date">2021.05</div>
|
||||||
<div class="timeline-dot"></div>
|
<div class="timeline-dot"></div>
|
||||||
<div class="timeline-content">
|
<div class="timeline-content">
|
||||||
<h4>KVM系列产品上线</h4>
|
<h4>KVM 系列产品上线</h4>
|
||||||
<p>云服务器迭代升级，正式上线 KVM 系列虚拟化产品。</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline-item">
|
<div class="timeline-item">
|
||||||
@@ -155,23 +94,13 @@
|
|||||||
<div class="timeline-dot"></div>
|
<div class="timeline-dot"></div>
|
||||||
<div class="timeline-content">
|
<div class="timeline-content">
|
||||||
<h4>宣布出海计划</h4>
|
<h4>宣布出海计划</h4>
|
||||||
<p>与全球合作伙伴共建生态，开启国际化征程。</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline-item">
|
<div class="timeline-item">
|
||||||
<div class="timeline-date">2019.06</div>
|
<div class="timeline-date">2019.06</div>
|
||||||
<div class="timeline-dot"></div>
|
<div class="timeline-dot"></div>
|
||||||
<div class="timeline-content">
|
<div class="timeline-content">
|
||||||
<h4>品牌升级</h4>
|
<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>
|
</div>
|
||||||
<div class="timeline-item">
|
<div class="timeline-item">
|
||||||
@@ -179,19 +108,16 @@
|
|||||||
<div class="timeline-dot"></div>
|
<div class="timeline-dot"></div>
|
||||||
<div class="timeline-content">
|
<div class="timeline-content">
|
||||||
<h4>公司成立</h4>
|
<h4>公司成立</h4>
|
||||||
<p>公司正式成立，组建核心技术团队。</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ===== 5. 荣誉资质 ===== -->
|
<!-- ===== 荣誉资质 ===== -->
|
||||||
<section class="section about-honors">
|
<section class="section about-honors">
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<div class="section-title">
|
<div class="section-title"><h2>荣誉资质</h2></div>
|
||||||
<h2>荣誉资质</h2>
|
|
||||||
</div>
|
|
||||||
{if ( isset($data.honor) ) }
|
{if ( isset($data.honor) ) }
|
||||||
<div class="honors-grid">
|
<div class="honors-grid">
|
||||||
{foreach $data.honor as $key=>$value}
|
{foreach $data.honor as $key=>$value}
|
||||||
@@ -202,48 +128,17 @@
|
|||||||
{/foreach}
|
{/foreach}
|
||||||
</div>
|
</div>
|
||||||
{else /}
|
{else /}
|
||||||
<div class="honors-grid" id="honor-box">
|
<div class="honors-grid" id="honor-box"></div>
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ===== 6. 精选客户案例 ===== -->
|
<!-- ===== CTA ===== -->
|
||||||
<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">
|
<section class="section about-cta">
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<div class="cta-inner">
|
<div class="cta-inner">
|
||||||
<h2>定制云上解决方案</h2>
|
<h2>开启您的云上之旅</h2>
|
||||||
<p>即享数智化转型升级</p>
|
<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>
|
<a href="/contact.html" class="cta-btn">立即联系</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
535
css/about.css
535
css/about.css
@@ -1,5 +1,5 @@
|
|||||||
/* ============================================
|
/* ============================================
|
||||||
About 页面 - 全新设计
|
About 页面 - 精简版
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|
||||||
/* ---- 整体 ---- */
|
/* ---- 整体 ---- */
|
||||||
@@ -8,16 +8,6 @@
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 覆盖 common/extend 中的旧白色主题 */
|
|
||||||
#about .section-content {
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about .section-title .section-desc {
|
|
||||||
color: rgba(148, 163, 184, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
#about .section {
|
#about .section {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
@@ -27,7 +17,7 @@
|
|||||||
============================================ */
|
============================================ */
|
||||||
.about-hero {
|
.about-hero {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 320px;
|
height: 360px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -41,32 +31,30 @@
|
|||||||
radial-gradient(ellipse at 25% 40%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
|
radial-gradient(ellipse at 25% 40%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
|
||||||
radial-gradient(ellipse at 75% 60%, rgba(56, 189, 248, 0.14) 0%, transparent 55%),
|
radial-gradient(ellipse at 75% 60%, rgba(56, 189, 248, 0.14) 0%, transparent 55%),
|
||||||
linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
|
linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-hero-content {
|
.about-hero-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-hero-badge {
|
.about-hero-badge {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 16px;
|
padding: 4px 18px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2.5px;
|
||||||
color: #38BDF8;
|
color: #38BDF8;
|
||||||
border: 1px solid rgba(56, 189, 248, 0.3);
|
border: 1px solid rgba(56, 189, 248, 0.3);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-hero h1 {
|
.about-hero h1 {
|
||||||
font-size: 52px;
|
font-size: 52px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
background: linear-gradient(135deg, #fff 30%, #38BDF8 100%);
|
background: linear-gradient(135deg, #fff 30%, #38BDF8 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
@@ -75,9 +63,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.about-hero-desc {
|
.about-hero-desc {
|
||||||
font-size: 17px;
|
font-size: 16px;
|
||||||
color: rgba(203, 213, 225, 0.8);
|
color: rgba(203, 213, 225, 0.75);
|
||||||
margin-bottom: 36px;
|
margin-bottom: 40px;
|
||||||
|
max-width: 500px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 数据统计横排 */
|
/* 数据统计横排 */
|
||||||
@@ -85,18 +76,17 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 32px;
|
padding: 0 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-num {
|
.stat-num {
|
||||||
font-size: 28px;
|
font-size: 30px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #38BDF8;
|
color: #38BDF8;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
@@ -104,13 +94,13 @@
|
|||||||
|
|
||||||
.stat-unit {
|
.stat-unit {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
color: #38BDF8;
|
color: #38BDF8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: rgba(148, 163, 184, 0.7);
|
color: rgba(148, 163, 184, 0.6);
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
@@ -118,195 +108,85 @@
|
|||||||
.stat-divider {
|
.stat-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background: rgba(148, 163, 184, 0.15);
|
background: rgba(148, 163, 184, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
2. 关于我们 — 左文右卡片
|
2. 核心优势 — 简洁 3 列
|
||||||
============================================ */
|
|
||||||
.about-intro {
|
|
||||||
padding: 90px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-intro-grid {
|
|
||||||
display: flex;
|
|
||||||
gap: 60px;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-intro-text {
|
|
||||||
flex: 1.1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-intro-text h2 {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #F1F5F9;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-accent {
|
|
||||||
width: 48px;
|
|
||||||
height: 3px;
|
|
||||||
background: linear-gradient(90deg, #38BDF8, #6366F1);
|
|
||||||
border-radius: 2px;
|
|
||||||
margin-bottom: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-intro-text p {
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.85;
|
|
||||||
color: rgba(203, 213, 225, 0.82);
|
|
||||||
margin-bottom: 16px;
|
|
||||||
text-indent: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧 2x2 小卡片 */
|
|
||||||
.about-intro-visual {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 16px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 380px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-card {
|
|
||||||
padding: 24px 20px;
|
|
||||||
background: rgba(30, 41, 59, 0.55);
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-card:hover {
|
|
||||||
border-color: rgba(56, 189, 248, 0.25);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-card-icon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
margin: 0 auto 12px;
|
|
||||||
color: #38BDF8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-card-icon svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-card h4 {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #E2E8F0;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-card p {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(148, 163, 184, 0.7);
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================
|
|
||||||
3. 核心优势 — 序号 + 标题 + 描述
|
|
||||||
============================================ */
|
============================================ */
|
||||||
.about-advantages {
|
.about-advantages {
|
||||||
padding: 90px 0;
|
padding: 80px 0 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-advantages .section-title {
|
.advantages-grid.compact {
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-advantages .section-title h2 {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #F1F5F9;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-subtitle {
|
|
||||||
font-size: 15px;
|
|
||||||
color: rgba(148, 163, 184, 0.7);
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantages-grid {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 20px;
|
gap: 24px;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantage-item {
|
.advantage-item {
|
||||||
padding: 36px 28px;
|
text-align: center;
|
||||||
background: rgba(30, 41, 59, 0.5);
|
padding: 40px 28px;
|
||||||
border: 1px solid rgba(148, 163, 184, 0.08);
|
background: rgba(30, 41, 59, 0.4);
|
||||||
border-radius: 14px;
|
border: 1px solid rgba(148, 163, 184, 0.06);
|
||||||
transition: all 0.3s ease;
|
border-radius: 16px;
|
||||||
position: relative;
|
transition: all 0.35s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantage-item:hover {
|
.advantage-item:hover {
|
||||||
border-color: rgba(56, 189, 248, 0.2);
|
border-color: rgba(56, 189, 248, 0.15);
|
||||||
transform: translateY(-4px);
|
transform: translateY(-6px);
|
||||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantage-num {
|
.advantage-icon {
|
||||||
font-size: 36px;
|
width: 44px;
|
||||||
font-weight: 800;
|
height: 44px;
|
||||||
color: rgba(56, 189, 248, 0.12);
|
margin: 0 auto 20px;
|
||||||
line-height: 1;
|
color: #38BDF8;
|
||||||
margin-bottom: 16px;
|
opacity: 0.8;
|
||||||
font-family: 'Inter', sans-serif;
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantage-item:hover .advantage-num {
|
.advantage-item:hover .advantage-icon {
|
||||||
color: rgba(56, 189, 248, 0.25);
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-icon svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantage-item h4 {
|
.advantage-item h4 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #E2E8F0;
|
color: #E2E8F0;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantage-item p {
|
.advantage-item p {
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
line-height: 1.75;
|
color: rgba(148, 163, 184, 0.7);
|
||||||
color: rgba(203, 213, 225, 0.7);
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
4. 时间轴 — 纯 CSS 竖版
|
3. 时间轴
|
||||||
============================================ */
|
============================================ */
|
||||||
.about-timeline {
|
.about-timeline {
|
||||||
padding: 90px 0;
|
padding: 70px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-timeline .section-title {
|
.about-timeline .section-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 56px;
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-timeline .section-title h2 {
|
.about-timeline .section-title h2 {
|
||||||
font-size: 32px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #F1F5F9;
|
|
||||||
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
@@ -315,12 +195,11 @@
|
|||||||
|
|
||||||
.timeline {
|
.timeline {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 720px;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 竖线 */
|
|
||||||
.timeline::before {
|
.timeline::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -328,21 +207,23 @@
|
|||||||
top: 4px;
|
top: 4px;
|
||||||
bottom: 4px;
|
bottom: 4px;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
background: linear-gradient(180deg, #38BDF8, rgba(99, 102, 241, 0.4), transparent);
|
background: linear-gradient(180deg, #38BDF8, rgba(99, 102, 241, 0.3), transparent);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-item {
|
.timeline-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 32px;
|
||||||
padding-left: 32px;
|
padding-left: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-item:last-child {
|
.timeline-item:last-child {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 圆点 */
|
|
||||||
.timeline-dot {
|
.timeline-dot {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -40px;
|
left: -40px;
|
||||||
@@ -352,13 +233,14 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #0F172A;
|
background: #0F172A;
|
||||||
border: 2px solid #38BDF8;
|
border: 2px solid #38BDF8;
|
||||||
box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
|
box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-item:hover .timeline-dot {
|
.timeline-item:hover .timeline-dot {
|
||||||
background: #38BDF8;
|
background: #38BDF8;
|
||||||
box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
|
box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-date {
|
.timeline-date {
|
||||||
@@ -366,38 +248,31 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #38BDF8;
|
color: #38BDF8;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
margin-bottom: 8px;
|
flex-shrink: 0;
|
||||||
|
width: 68px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-content h4 {
|
.timeline-content h4 {
|
||||||
font-size: 17px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: #E2E8F0;
|
color: rgba(226, 232, 240, 0.85);
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-content p {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: rgba(148, 163, 184, 0.75);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
5. 荣誉资质
|
4. 荣誉资质
|
||||||
============================================ */
|
============================================ */
|
||||||
.about-honors {
|
.about-honors {
|
||||||
padding: 90px 0;
|
padding: 70px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-honors .section-title {
|
.about-honors .section-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 48px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-honors .section-title h2 {
|
.about-honors .section-title h2 {
|
||||||
font-size: 32px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #F1F5F9;
|
|
||||||
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
@@ -407,131 +282,62 @@
|
|||||||
.honors-grid {
|
.honors-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 20px;
|
gap: 16px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.honor-item {
|
.honor-item {
|
||||||
flex: 0 1 calc(25% - 15px);
|
flex: 0 1 calc(25% - 12px);
|
||||||
min-width: 200px;
|
min-width: 160px;
|
||||||
max-width: 280px;
|
max-width: 240px;
|
||||||
padding: 28px 20px;
|
padding: 24px 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: rgba(30, 41, 59, 0.5);
|
background: rgba(30, 41, 59, 0.35);
|
||||||
border: 1px solid rgba(148, 163, 184, 0.08);
|
border: 1px solid rgba(148, 163, 184, 0.06);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.honor-item:hover {
|
.honor-item:hover {
|
||||||
border-color: rgba(56, 189, 248, 0.2);
|
border-color: rgba(56, 189, 248, 0.15);
|
||||||
transform: translateY(-4px);
|
transform: translateY(-3px);
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.honor-item img {
|
.honor-item img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 180px;
|
max-width: 160px;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.honor-item p {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(203, 213, 225, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================
|
|
||||||
6. 精选客户案例
|
|
||||||
============================================ */
|
|
||||||
.about-cases {
|
|
||||||
padding: 90px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-cases .section-title {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-cases .section-title h2 {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #F1F5F9;
|
|
||||||
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cases-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-item {
|
|
||||||
flex: 0 1 calc(33.333% - 14px);
|
|
||||||
min-width: 280px;
|
|
||||||
max-width: 400px;
|
|
||||||
padding: 32px;
|
|
||||||
text-align: center;
|
|
||||||
background: rgba(30, 41, 59, 0.5);
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-item:hover {
|
|
||||||
border-color: rgba(56, 189, 248, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-item img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 220px;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-item h4 {
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #38BDF8;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.case-item p {
|
.honor-item p {
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
color: rgba(203, 213, 225, 0.75);
|
color: rgba(203, 213, 225, 0.7);
|
||||||
line-height: 1.6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
7. CTA 联系我们
|
5. CTA
|
||||||
============================================ */
|
============================================ */
|
||||||
.about-cta {
|
.about-cta {
|
||||||
padding: 80px 0 100px;
|
padding: 60px 0 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-inner {
|
.cta-inner {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 60px 40px;
|
padding: 56px 40px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse at 30% 50%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
|
radial-gradient(ellipse at 30% 50%, rgba(56, 189, 248, 0.07) 0%, transparent 60%),
|
||||||
radial-gradient(ellipse at 70% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 60%),
|
radial-gradient(ellipse at 70% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 60%),
|
||||||
rgba(30, 41, 59, 0.4);
|
rgba(30, 41, 59, 0.3);
|
||||||
border: 1px solid rgba(148, 163, 184, 0.08);
|
border: 1px solid rgba(148, 163, 184, 0.06);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-inner h2 {
|
.cta-inner h2 {
|
||||||
font-size: 30px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #F1F5F9;
|
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
@@ -540,32 +346,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cta-inner > p {
|
.cta-inner > p {
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
color: rgba(148, 163, 184, 0.7);
|
color: rgba(148, 163, 184, 0.6);
|
||||||
margin-bottom: 28px;
|
margin-bottom: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-features {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-features span {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(203, 213, 225, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-dot {
|
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(148, 163, 184, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn {
|
.cta-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 12px 40px;
|
padding: 12px 40px;
|
||||||
@@ -576,21 +361,20 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25);
|
box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-btn:hover {
|
.cta-btn:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 12px 32px rgba(56, 189, 248, 0.4);
|
box-shadow: 0 12px 32px rgba(56, 189, 248, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
移动端适配
|
移动端
|
||||||
============================================ */
|
============================================ */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
.about-hero {
|
.about-hero {
|
||||||
height: 260px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-hero h1 {
|
.about-hero h1 {
|
||||||
@@ -599,12 +383,11 @@
|
|||||||
|
|
||||||
.about-hero-desc {
|
.about-hero-desc {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-hero-stats {
|
.about-hero-stats {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 12px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
@@ -619,125 +402,39 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 关于 */
|
.advantages-grid.compact {
|
||||||
.about-intro {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-intro-grid {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-intro-visual {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-intro-text h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 优势 */
|
|
||||||
.about-advantages {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantages-grid {
|
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 16px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-advantages .section-title h2 {
|
.about-advantages {
|
||||||
font-size: 24px;
|
padding: 60px 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 时间轴 */
|
.about-timeline,
|
||||||
.about-timeline {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-timeline .section-title h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline {
|
|
||||||
padding-left: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item {
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 荣誉 */
|
|
||||||
.about-honors {
|
.about-honors {
|
||||||
padding: 60px 0;
|
padding: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-timeline .section-title h2,
|
||||||
|
.about-honors .section-title h2 {
|
||||||
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.honor-item {
|
.honor-item {
|
||||||
flex: 0 1 calc(50% - 10px);
|
flex: 0 1 calc(50% - 8px);
|
||||||
min-width: 140px;
|
min-width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-honors .section-title h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 客户案例 */
|
|
||||||
.about-cases {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-item {
|
|
||||||
flex: 0 1 100%;
|
|
||||||
min-width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-cases .section-title h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CTA */
|
|
||||||
.about-cta {
|
.about-cta {
|
||||||
padding: 40px 0 60px;
|
padding: 30px 0 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-inner {
|
.cta-inner {
|
||||||
padding: 40px 20px;
|
padding: 36px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-inner h2 {
|
.cta-inner h2 {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-features {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-dot {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.about-hero {
|
|
||||||
height: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-hero h1 {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-intro-visual {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-card {
|
|
||||||
padding: 16px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-item {
|
|
||||||
padding: 24px 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: height 0.25s ease-out;
|
transition: height 0.25s ease-out;
|
||||||
height: 0;
|
height: 0;
|
||||||
/* 不设背景，由 inner 负责 */
|
pointer-events: none; /* 左右空白区域不拦截鼠标 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── 下拉内层 —— 居中收窄面板 ── */
|
/* ── 下拉内层 —— 居中收窄面板 ── */
|
||||||
@@ -38,6 +38,7 @@
|
|||||||
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55),
|
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55),
|
||||||
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
|
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
|
||||||
padding: 20px 0 12px;
|
padding: 20px 0 12px;
|
||||||
|
pointer-events: auto; /* 只有实际内容区域可交互 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-cont-menu.nav-cont-empty {
|
.nav-cont-menu.nav-cont-empty {
|
||||||
|
|||||||
Reference in New Issue
Block a user