-
-
-
-
-
-
-
-
-
-
-
-
- {include file="public/header"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- 里程碑
-
-
-
-
-
-
-
-
-
-
-
-
- 
- 
-
-
- -
-
-
- - -- -
2022.12
-主题云注册用户突破10W
-
- -
- - -- -
2021.05
-云服务器迭代升级，上线KVM系列产品
-
- -
- - --
2020.10
-主题云宣布出海计划，与全球合作伙伴共建生态
-
- -
- - -- -
2019.06
-更名为主题云，并正式上线云服务器相关业务
-
- -
- - -- -
2018.11
-公司网站正式上线，当月注册用户超5k人
-
- -
- - -- -
2017.08
-公司成立，组建核心技术团队
-
-
-
-
-
-
-
- {if ( isset($data.honor) ) }
- 荣誉资质
-
- {foreach $data.honor as $key=>$value}
-
- {else /}
-
- 
-
- {/foreach}
- {$value.name}
-
-
- {/if}
-
-
-
-
- {if ( isset($data.partner) ) }
- 精选客户案例
-
- {foreach $data.partner as $key=>$value}
-
- {else /}
-
-
-
- {/foreach}
- {$value.name}
-{$value.description}
-
-
- {/if}
-
-
-
-
-
-
+{include file="header"}
+
+
+
+
+
+
+
+
+
+
+
+ ABOUT US
+ 主题云
+助力中小企业数智化转型升级
+
+
+
+ 10年
+ 行业经验
+
+
+
+ 10W+
+ 注册用户
+
+
+
+ 50K
+ 部署服务器
+
+
+
+ 800G
+ 全球带宽容量
+
+
+
+
+
+
+
+ 关于主题云
+ +主题云，隶属于xxxx科技有限公司，专业的全球云产品服务供应商，提供公有云、私有云、专属云、混合云的全栈式云产品服务矩阵，融合数智化前沿科技，为电商、金融、医疗、教育、文旅等行业领域提供丰富的数字化解决方案。
+主题云深耕基础云计算领域，始终秉持高性价比、高定制化、高性能的产品服务理念，保持中立服务立场，伴随着基础设施的加速投入与深入布局，主题云将为广大用户提供更优质的云产品与服务体验，为各行各业的云上业务保驾护航。
+
+
+
+
+
+ 全栈云服务
+公有云 · 私有云 · 混合云
+
+
+
+ 全球覆盖
+20+ 地区 · 60+ 可用区
+
+
+
+ 安全可信
+T级防御 · 99.99% 可用性
+
+
+
+ 专属服务
+7×24 小时全天候支持
+
+
+
+
+ 为什么选择主题云
+我们以客户为中心，以创新为驱动，为您提供值得信赖的云服务
+
+
+
+
+ 01
+ 安全可信
+"五位一体"安全监管体系，基础设施符合国际严格标准认证，电力、网络可用性达 99.99%，有效保证所有设备稳定运行。
+
+
+ 02
+ 高效服务
+7×24 小时全天候服务保障，通过多元服务渠道为您提供上云业务全生命周期的无忧服务，为您的云上业务全程护航。
+
+
+ 03
+ 自主研发
+坚持自主研发，产品体系完善，为各行各业提供高性能、高可用、高弹性、高性价比的云计算框架与服务。
+
+
+ 04
+ 定制服务
+资深售前架构师，拥有丰富的行业经验及多项专业资质，可为每位客户提供超预期的业务上云方案。
+
+
+ 05
+ 勇于创新
+不满足现状、不固步自封，通过不断的行业实践与技术打磨，持续创新升级全栈云产品与解决方案。
+
+
+ 06
+ 丰富场景
+高性能的计算、网络、存储服务，满足不同业务场景的灵活调度，为所有客户提供全栈解决方案。
+
+
+
+
+ 发展历程
+
+
+
+
+ 2022.12
+
+
+
+ 注册用户突破10万
+主题云注册用户累计突破 10W，产品体系日趋成熟。
+
+
+ 2021.05
+
+
+
+ KVM系列产品上线
+云服务器迭代升级，正式上线 KVM 系列虚拟化产品。
+
+
+ 2020.10
+
+
+
+ 宣布出海计划
+与全球合作伙伴共建生态，开启国际化征程。
+
+
+ 2019.06
+
+
+
+ 品牌升级
+正式更名为主题云，上线云服务器相关业务。
+
+
+ 2018.11
+
+
+
+ 网站正式上线
+公司网站正式上线，当月注册用户超过 5000 人。
+
+
+ 2017.08
+
+
+
+ 公司成立
+公司正式成立，组建核心技术团队。
+
+
+
+
+ {if ( isset($data.honor) ) }
+ 荣誉资质
+
+ {foreach $data.honor as $key=>$value}
+
+ {else /}
+
+
+
+ {/foreach}
+ {$value.name}
+
+
+ {/if}
+
+
+
+
+ {if ( isset($data.partner) ) }
+ 精选客户案例
+
+ {foreach $data.partner as $key=>$value}
+
+ {else /}
+
+
+
+ {/foreach}
+ {$value.name}
+{$value.description}
+
+
+ {/if}
+
+
+
+
+
+
+
{include file="footer"}
\ No newline at end of file
diff --git a/css/about.css b/css/about.css
index 946cb08..60c36f3 100644
--- a/css/about.css
+++ b/css/about.css
@@ -1,588 +1,729 @@
/* ============================================
- About 页面专属样式 - 深色科技风格
- 与 index.html 保持一致的设计语言
+ About 页面 - 全新设计
============================================ */
-/* CSS 变量：统一的容器边距 */
+/* ---- 整体 ---- */
#about {
- --container-max-width: 1440px;
- --container-padding-x: 20px;
-}
-
-/* About 页面整体背景 - 统一深色，与首页一致 */
-#about {
- background: linear-gradient(180deg, #020617 0%, #0F172A 50%, #020617 100%);
- min-height: 100vh;
-}
-
-/* About 页面 section-content 统一左右边距 */
-#about .section-content {
- padding-left: var(--container-padding-x);
- padding-right: var(--container-padding-x);
+ background: linear-gradient(180deg, #020617 0%, #0F172A 50%, #020617 100%);
+ min-height: 100vh;
}
/* ============================================
- Banner 区域 - 深色科技风格
+ 1. Hero Banner
============================================ */
-
-.about .server-banner2 {
- position: relative;
- height: 400px;
- width: 100%;
- /* 深色科技渐变背景 */
- background:
- radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
- radial-gradient(ellipse at 80% 70%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
- linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
- overflow: hidden;
- display: flex;
- align-items: center;
- justify-content: center;
+.about-hero {
+ position: relative;
+ height: 320px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
}
-/* 深色遮罩层 */
-.about .server-banner2::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(90deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.3) 100%);
- pointer-events: none;
- z-index: 1;
+.about-hero-bg {
+ position: absolute;
+ inset: 0;
+ background:
+ 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%),
+ linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
+ z-index: 0;
}
-.about .server-banner2 .section-content {
- position: relative;
- z-index: 2;
- text-align: center;
+.about-hero-content {
+ position: relative;
+ z-index: 1;
+ text-align: center;
}
-.about .server-banner2 h1 {
- font-size: 56px;
- line-height: 1.2;
- font-weight: 700;
- color: #FFFFFF;
- margin-bottom: 20px;
- background: linear-gradient(120deg,
- #FFFFFF 0%,
- #FFFFFF 40%,
- #E0F2FE 48%,
- #BFDBFE 50%,
- #E0F2FE 52%,
- #FFFFFF 60%,
- #FFFFFF 100%);
- background-size: 200% 100%;
- -webkit-background-clip: text;
- background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- animation: shine 6s linear infinite;
- filter: drop-shadow(0 0 20px rgba(191, 219, 254, 0.8));
+.about-hero-badge {
+ display: inline-block;
+ padding: 4px 16px;
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 2px;
+ color: #38BDF8;
+ border: 1px solid rgba(56, 189, 248, 0.3);
+ border-radius: 20px;
+ margin-bottom: 20px;
+ text-transform: uppercase;
}
-@keyframes shine {
- 0% {
- background-position: -200% 0;
- }
-
- 100% {
- background-position: 200% 0;
- }
+.about-hero h1 {
+ font-size: 52px;
+ font-weight: 700;
+ color: #fff;
+ margin-bottom: 12px;
+ background: linear-gradient(135deg, #fff 30%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
-.about .server-banner2 .server-banner-desc {
- font-size: 18px;
- color: rgba(226, 232, 240, 0.85);
- line-height: 1.8;
+.about-hero-desc {
+ font-size: 17px;
+ color: rgba(203, 213, 225, 0.8);
+ margin-bottom: 36px;
+}
+
+/* 数据统计横排 */
+.about-hero-stats {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0;
+}
+
+.stat-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0 32px;
+}
+
+.stat-num {
+ font-size: 28px;
+ font-weight: 700;
+ color: #38BDF8;
+ line-height: 1.1;
+}
+
+.stat-unit {
+ font-size: 16px;
+ font-weight: 500;
+ color: #38BDF8;
+}
+
+.stat-label {
+ font-size: 12px;
+ color: rgba(148, 163, 184, 0.7);
+ margin-top: 4px;
+ letter-spacing: 0.5px;
+}
+
+.stat-divider {
+ width: 1px;
+ height: 32px;
+ background: rgba(148, 163, 184, 0.15);
}
/* ============================================
- 关于主题云区域
+ 2. 关于我们 — 左文右卡片
============================================ */
-
-.about-details {
- background: transparent;
- padding: 80px 0;
+.about-intro {
+ padding: 90px 0;
}
-.about-details h2 {
- font-size: 36px;
- font-weight: 600;
- color: #F9FAFB;
- margin-bottom: 40px;
- text-align: center;
- background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+.about-intro-grid {
+ display: flex;
+ gap: 60px;
+ align-items: stretch;
}
-.about-details .about-details-box {
- gap: 60px;
+.about-intro-text {
+ flex: 1.1;
+ min-width: 0;
}
-.about-details .about-details-left {
- flex: 1;
- background: rgba(30, 41, 59, 0.6);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(148, 163, 184, 0.2);
- border-radius: 16px;
- padding: 40px;
- box-shadow:
- 0 8px 32px rgba(15, 23, 42, 0.4),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
+.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;
}
-.about-details .about-details-left p {
- font-size: 16px;
- text-indent: 32px;
- line-height: 32px;
- color: rgba(226, 232, 240, 0.9);
- margin-bottom: 20px;
+.intro-accent {
+ width: 48px;
+ height: 3px;
+ background: linear-gradient(90deg, #38BDF8, #6366F1);
+ border-radius: 2px;
+ margin-bottom: 28px;
}
-.about-details .about-details-right {
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- max-width: 500px;
+.about-intro-text p {
+ font-size: 15px;
+ line-height: 1.85;
+ color: rgba(203, 213, 225, 0.82);
+ margin-bottom: 16px;
+ text-indent: 2em;
}
-.about-details .about-details-right .about-details-item {
- flex: 0 1 calc(50% - 10px);
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 30px 20px;
- background: rgba(30, 41, 59, 0.7);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(148, 163, 184, 0.2);
- border-radius: 12px;
- transition: all 0.3s ease;
- box-shadow:
- 0 4px 16px rgba(15, 23, 42, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
+/* 右侧 2x2 小卡片 */
+.about-intro-visual {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ flex-shrink: 0;
+ width: 380px;
}
-.about-details .about-details-right .about-details-item:hover {
- transform: translateY(-5px);
- border-color: rgba(56, 189, 248, 0.4);
- box-shadow:
- 0 8px 32px rgba(56, 189, 248, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.15);
+.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;
}
-.about-details .about-details-right .about-details-item h2 {
- font-size: 48px;
- font-weight: 700;
- color: #38BDF8;
- margin-bottom: 10px;
- background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
+.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);
}
-.about-details .about-details-right .about-details-item p {
- font-size: 14px;
- color: rgba(203, 213, 225, 0.8);
- margin-top: 10px;
+.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-reason {
- padding: 80px 0;
- background: transparent;
+.about-advantages {
+ padding: 90px 0;
}
-.about-why {
- background: transparent;
+.about-advantages .section-title {
+ text-align: center;
+ margin-bottom: 56px;
}
-.about-reason .section-title h2 {
- font-size: 36px;
- font-weight: 600;
- color: #F9FAFB;
- text-align: center;
- margin-bottom: 60px;
- background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+.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;
}
-.about-reason .reason {
- margin: 0;
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- justify-content: center;
+.section-subtitle {
+ font-size: 15px;
+ color: rgba(148, 163, 184, 0.7);
+ margin-top: 8px;
}
-.about-reason .reason-box {
- flex: 0 1 calc(33.333% - 20px);
- min-width: 280px;
- max-width: 400px;
- padding: 40px 30px;
- height: auto;
- min-height: 280px;
- background: rgba(30, 41, 59, 0.7);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(148, 163, 184, 0.2);
- border-radius: 12px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow:
- 0 8px 32px rgba(15, 23, 42, 0.4),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
- position: relative;
- overflow: hidden;
+.advantages-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
}
-.about-reason .reason-box::before {
- content: '';
- position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: radial-gradient(circle at center,
- rgba(56, 189, 248, 0.15) 0%,
- transparent 50%);
- opacity: 0;
- transition: opacity 0.5s ease;
- pointer-events: none;
+.advantage-item {
+ padding: 36px 28px;
+ background: rgba(30, 41, 59, 0.5);
+ border: 1px solid rgba(148, 163, 184, 0.08);
+ border-radius: 14px;
+ transition: all 0.3s ease;
+ position: relative;
}
-.about-reason .reason-box:hover {
- transform: translateY(-8px);
- border-color: rgba(56, 189, 248, 0.4);
- box-shadow:
- 0 12px 40px rgba(56, 189, 248, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.15);
+.advantage-item:hover {
+ border-color: rgba(56, 189, 248, 0.2);
+ transform: translateY(-4px);
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
-.about-reason .reason-box:hover::before {
- opacity: 1;
+.advantage-num {
+ font-size: 36px;
+ font-weight: 800;
+ color: rgba(56, 189, 248, 0.12);
+ line-height: 1;
+ margin-bottom: 16px;
+ font-family: 'Inter', sans-serif;
}
-.about-reason .reason-box h4 {
- font-size: 22px;
- font-weight: 600;
- color: #38BDF8;
- margin-bottom: 20px;
- background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
+.advantage-item:hover .advantage-num {
+ color: rgba(56, 189, 248, 0.25);
}
-.about-reason .reason-box p {
- font-size: 16px;
- line-height: 28px;
- color: rgba(226, 232, 240, 0.85);
+.advantage-item h4 {
+ font-size: 18px;
+ font-weight: 600;
+ color: #E2E8F0;
+ margin-bottom: 12px;
}
-/* 携手千行百业区域样式 */
-.about-together {
- background: transparent;
-}
-
-.about-together .reason-box {
- background: rgba(30, 41, 59, 0.8);
- border: 1px solid rgba(56, 189, 248, 0.3);
-}
-
-.about-together .reason-box h4 {
- color: #FFFFFF;
- background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
-}
-
-.about-together .reason-box p {
- color: rgba(226, 232, 240, 0.9);
+.advantage-item p {
+ font-size: 14px;
+ line-height: 1.75;
+ color: rgba(203, 213, 225, 0.7);
}
/* ============================================
- 里程碑区域（保持原有深色风格）
+ 4. 时间轴 — 纯 CSS 竖版
============================================ */
-
-.about-time {
- background: rgba(15, 23, 42, 0.8);
- padding: 80px 0;
+.about-timeline {
+ padding: 90px 0;
}
-.about-time .section-title h2 {
- font-size: 36px;
- font-weight: 600;
- color: #F9FAFB;
- text-align: center;
- margin-bottom: 60px;
- background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+.about-timeline .section-title {
+ text-align: center;
+ margin-bottom: 56px;
+}
+
+.about-timeline .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;
+}
+
+.timeline {
+ position: relative;
+ max-width: 720px;
+ margin: 0 auto;
+ padding-left: 40px;
+}
+
+/* 竖线 */
+.timeline::before {
+ content: '';
+ position: absolute;
+ left: 7px;
+ top: 4px;
+ bottom: 4px;
+ width: 2px;
+ background: linear-gradient(180deg, #38BDF8, rgba(99, 102, 241, 0.4), transparent);
+ border-radius: 2px;
+}
+
+.timeline-item {
+ position: relative;
+ padding-bottom: 40px;
+ padding-left: 32px;
+}
+
+.timeline-item:last-child {
+ padding-bottom: 0;
+}
+
+/* 圆点 */
+.timeline-dot {
+ position: absolute;
+ left: -40px;
+ top: 4px;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: #0F172A;
+ border: 2px solid #38BDF8;
+ box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
+ z-index: 1;
+}
+
+.timeline-item:hover .timeline-dot {
+ background: #38BDF8;
+ box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+}
+
+.timeline-date {
+ font-size: 13px;
+ font-weight: 600;
+ color: #38BDF8;
+ letter-spacing: 0.5px;
+ margin-bottom: 8px;
+}
+
+.timeline-content h4 {
+ font-size: 17px;
+ font-weight: 600;
+ color: #E2E8F0;
+ margin-bottom: 6px;
+}
+
+.timeline-content p {
+ font-size: 14px;
+ line-height: 1.6;
+ color: rgba(148, 163, 184, 0.75);
}
/* ============================================
- 荣誉资质、精选客户案例
+ 5. 荣誉资质
============================================ */
-
-.about-box {
- padding: 80px 0;
- background: transparent;
+.about-honors {
+ padding: 90px 0;
}
-.about-box .section-title h2 {
- font-size: 36px;
- font-weight: 600;
- color: #F9FAFB;
- text-align: center;
- margin-bottom: 60px;
- background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+.about-honors .section-title {
+ text-align: center;
+ margin-bottom: 48px;
}
-.about-box .box-list {
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- justify-content: center;
- margin: 0;
+.about-honors .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;
}
-.about-box .box-list .box-item {
- flex: 0 1 calc(33.333% - 20px);
- min-width: 300px;
- max-width: 400px;
- padding: 40px;
- height: auto;
- min-height: 260px;
- text-align: center;
- background: rgba(30, 41, 59, 0.7);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(148, 163, 184, 0.2);
- border-radius: 12px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow:
- 0 8px 32px rgba(15, 23, 42, 0.4),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
- cursor: pointer;
+.honors-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
}
-.about-box .box-list .box-item:hover {
- transform: translateY(-8px);
- border-color: rgba(56, 189, 248, 0.4);
- box-shadow:
- 0 12px 40px rgba(56, 189, 248, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.15);
+.honor-item {
+ flex: 0 1 calc(25% - 15px);
+ min-width: 200px;
+ max-width: 280px;
+ padding: 28px 20px;
+ text-align: center;
+ background: rgba(30, 41, 59, 0.5);
+ border: 1px solid rgba(148, 163, 184, 0.08);
+ border-radius: 12px;
+ transition: all 0.3s ease;
}
-.about-box .box-list .box-item img {
- width: 100%;
- max-width: 248px;
- height: auto;
- border-radius: 8px;
- background: rgba(15, 23, 42, 0.3);
+.honor-item:hover {
+ border-color: rgba(56, 189, 248, 0.2);
+ transform: translateY(-4px);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
-.about-box .box-list .box-item p,
-.about-box .box-list .box-item h4 {
- color: rgba(226, 232, 240, 0.9);
- margin-top: 20px;
+.honor-item img {
+ width: 100%;
+ max-width: 180px;
+ height: auto;
+ border-radius: 6px;
+ margin-bottom: 12px;
}
-.about-box .box-list .box-item h4 {
- font-size: 18px;
- font-weight: 600;
- color: #38BDF8;
-}
-
-/* 精选客户案例样式 */
-.about-example {
- background: transparent;
-}
-
-.about-example .box-list .box-item {
- min-height: 280px;
+.honor-item p {
+ font-size: 13px;
+ color: rgba(203, 213, 225, 0.8);
}
/* ============================================
- 联系我们区域
+ 6. 精选客户案例
============================================ */
-
-.about-custom {
- padding: 80px 0;
- background: transparent;
+.about-cases {
+ padding: 90px 0;
}
-.about-custom .section-title h2 {
- font-size: 36px;
- font-weight: 600;
- color: #F9FAFB;
- text-align: center;
- margin-bottom: 60px;
- background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+.about-cases .section-title {
+ text-align: center;
+ margin-bottom: 48px;
}
-.about-custom .custom {
- margin-top: 40px;
- gap: 40px;
+.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;
}
-.about-custom .custom-box {
- display: flex;
- align-items: center;
- gap: 20px;
- padding: 30px;
- background: rgba(30, 41, 59, 0.7);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(148, 163, 184, 0.2);
- border-radius: 12px;
- transition: all 0.3s ease;
- box-shadow:
- 0 4px 16px rgba(15, 23, 42, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
+.cases-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
}
-.about-custom .custom-box:hover {
- transform: translateY(-5px);
- border-color: rgba(56, 189, 248, 0.4);
- box-shadow:
- 0 8px 32px rgba(56, 189, 248, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.15);
+.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;
}
-.about-custom .custom-box p {
- font-size: 16px;
- color: rgba(226, 232, 240, 0.9);
+.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);
}
-.about-custom .btn-contact {
- margin-top: 40px;
+.case-item img {
+ width: 100%;
+ max-width: 220px;
+ height: auto;
+ border-radius: 8px;
+ margin-bottom: 16px;
}
-.about-custom .btn-contact .btn {
- position: relative;
- overflow: hidden;
- font-size: 16px;
- font-weight: 600;
- padding: 14px 48px;
- background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
- border: none;
- box-shadow: 0 12px 40px rgba(56, 189, 248, 0.4);
- transition: all 0.3s ease;
+.case-item h4 {
+ font-size: 17px;
+ font-weight: 600;
+ color: #38BDF8;
+ margin-bottom: 10px;
}
-.about-custom .btn-contact .btn::before {
- content: '';
- position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transform: rotate(45deg);
- transition: all 0.6s ease;
+.case-item p {
+ font-size: 14px;
+ color: rgba(203, 213, 225, 0.75);
+ line-height: 1.6;
}
-.about-custom .btn-contact .btn:hover::before {
- left: 100%;
+/* ============================================
+ 7. CTA 联系我们
+ ============================================ */
+.about-cta {
+ padding: 80px 0 100px;
}
-.about-custom .btn-contact .btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 16px 48px rgba(56, 189, 248, 0.6);
+.cta-inner {
+ text-align: center;
+ padding: 60px 40px;
+ background:
+ radial-gradient(ellipse at 30% 50%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
+ radial-gradient(ellipse at 70% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 60%),
+ rgba(30, 41, 59, 0.4);
+ border: 1px solid rgba(148, 163, 184, 0.08);
+ border-radius: 20px;
}
-.about-custom .btn-contact .btn a {
- color: #FFFFFF;
- text-decoration: none;
+.cta-inner h2 {
+ font-size: 30px;
+ font-weight: 700;
+ color: #F1F5F9;
+ margin-bottom: 8px;
+ background: linear-gradient(135deg, #F1F5F9 30%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.cta-inner > p {
+ font-size: 16px;
+ color: rgba(148, 163, 184, 0.7);
+ 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 {
+ display: inline-block;
+ padding: 12px 40px;
+ font-size: 15px;
+ font-weight: 600;
+ color: #fff;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border-radius: 10px;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25);
+}
+
+.cta-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 12px 32px rgba(56, 189, 248, 0.4);
}
/* ============================================
移动端适配
============================================ */
-
@media (max-width: 768px) {
- .about .server-banner2 {
- height: 300px;
- }
+ .about-hero {
+ height: 260px;
+ }
- .about .server-banner2 h1 {
- font-size: 36px;
- }
+ .about-hero h1 {
+ font-size: 32px;
+ }
- .about .server-banner2 .server-banner-desc {
- font-size: 16px;
- }
+ .about-hero-desc {
+ font-size: 14px;
+ margin-bottom: 24px;
+ }
- .about-details {
- padding: 60px 0;
- }
+ .about-hero-stats {
+ flex-wrap: wrap;
+ gap: 12px;
+ }
- .about-details .about-details-box {
- flex-direction: column;
- gap: 30px;
- }
+ .stat-item {
+ padding: 0 16px;
+ }
- .about-details .about-details-right {
- max-width: 100%;
- }
+ .stat-num {
+ font-size: 22px;
+ }
- .about-details .about-details-right .about-details-item {
- flex: 0 1 calc(50% - 10px);
- }
+ .stat-divider {
+ display: none;
+ }
- .about-reason {
- padding: 60px 0;
- }
+ /* 关于 */
+ .about-intro {
+ padding: 60px 0;
+ }
- .about-reason .reason-box {
- flex: 0 1 100%;
- min-width: auto;
- }
+ .about-intro-grid {
+ flex-direction: column;
+ gap: 32px;
+ }
- .about-time {
- padding: 60px 0;
- }
+ .about-intro-visual {
+ width: 100%;
+ }
- .about-box {
- padding: 60px 0;
- }
+ .about-intro-text h2 {
+ font-size: 24px;
+ }
- .about-box .box-list .box-item {
- flex: 0 1 100%;
- min-width: auto;
- }
+ /* 优势 */
+ .about-advantages {
+ padding: 60px 0;
+ }
- .about-custom {
- padding: 60px 0;
- }
+ .advantages-grid {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ }
- .about-custom .custom {
- flex-direction: column;
- gap: 20px;
- }
+ .about-advantages .section-title h2 {
+ font-size: 24px;
+ }
+
+ /* 时间轴 */
+ .about-timeline {
+ padding: 60px 0;
+ }
+
+ .about-timeline .section-title h2 {
+ font-size: 24px;
+ }
+
+ .timeline {
+ padding-left: 32px;
+ }
+
+ .timeline-item {
+ padding-left: 24px;
+ }
+
+ /* 荣誉 */
+ .about-honors {
+ padding: 60px 0;
+ }
+
+ .honor-item {
+ flex: 0 1 calc(50% - 10px);
+ min-width: 140px;
+ }
+
+ .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 {
+ padding: 40px 0 60px;
+ }
+
+ .cta-inner {
+ padding: 40px 20px;
+ }
+
+ .cta-inner h2 {
+ 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;
+ }
}
\ No newline at end of file