|
|
@@ -1,31 +1,247 @@
|
|
|
<template>
|
|
|
<div id="Info">
|
|
|
- <div class="banner container-fuild text-center">公司介绍</div>
|
|
|
- <div class="container">
|
|
|
- <div class="row info-container">
|
|
|
- <div class="container text-center">
|
|
|
- <p>
|
|
|
- 上海展域航空技术有限公司成立于2014年。公司秉承“航空报国、拥抱未来”的核心理念，致力于推进航空领域及数字智能领域的最先进技术应用于人们的生产生活，帮助人们拓展更高更远的视野，开辟更新更广的空间，帮助人们成就飞天的梦想。</p>
|
|
|
+ <!-- Banner -->
|
|
|
+ <div class="banner-wrapper">
|
|
|
+ <div class="banner-bg"></div>
|
|
|
+ <div class="banner-content">
|
|
|
+ <div class="section-tag">
|
|
|
+ <span class="tag-dot"></span>
|
|
|
+ <span>ABOUT US</span>
|
|
|
</div>
|
|
|
- <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
|
|
|
- <img class="img-responsive center-block" src="@/assets/img/general_aviation_img.png"
|
|
|
- style="margin: 0 0 48px 0">
|
|
|
- <p>
|
|
|
- 公司拥有通用航空经营及无人机系统运营的专业资质，具备经专业认证的技术人员和销售团队，为客户提供专业无人系统产品的代理销售和技术支持、面向行业应用场景的无人系统应用解决方案和实施服务、以及为客户应用无人系统所需的认证培训和作业指导。</p>
|
|
|
+ <h1 class="banner-title">公司介绍</h1>
|
|
|
+ <p class="banner-subtitle">Shanghai ZYUAS Aviation Technology Co., Ltd.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 公司简介 -->
|
|
|
+ <div class="l-container">
|
|
|
+ <div class="intro-section">
|
|
|
+ <div class="intro-content wow fadeInUp">
|
|
|
+ <div class="intro-text">
|
|
|
+ <h2 class="section-title">关于展域航空</h2>
|
|
|
+ <p class="lead-text">
|
|
|
+ 上海展域航空技术有限公司成立于 2014 年。公司秉承"航空报国、拥抱未来"的核心理念，致力于推进航空领域及数字智能领域的最先进技术应用于人们的生产生活。
|
|
|
+ </p>
|
|
|
+ <p class="desc-text">
|
|
|
+ 帮助人们拓展更高更远的视野，开辟更新更广的空间，帮助人们成就飞天的梦想。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="intro-stats">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-number">10+</div>
|
|
|
+ <div class="stat-label">行业经验</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-number">50+</div>
|
|
|
+ <div class="stat-label">成功案例</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-number">24/7</div>
|
|
|
+ <div class="stat-label">技术支持</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 核心业务 -->
|
|
|
+ <div class="l-container">
|
|
|
+ <div class="business-section">
|
|
|
+ <div class="section-header text-center wow fadeInUp">
|
|
|
+ <div class="section-tag">
|
|
|
+ <span class="tag-dot"></span>
|
|
|
+ <span>OUR BUSINESS</span>
|
|
|
+ </div>
|
|
|
+ <h2 class="section-title">核心业务</h2>
|
|
|
+ <p class="section-subtitle">Core Business</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="business-grid">
|
|
|
+ <div class="business-card wow fadeInUp" style="animation-delay: 0s">
|
|
|
+ <div class="card-icon">
|
|
|
+ <i class="glyphicon glyphicon-console"></i>
|
|
|
+ </div>
|
|
|
+ <h3 class="card-title">AI 应用定制开发</h3>
|
|
|
+ <p class="card-desc">
|
|
|
+ 提供 RAG 检索增强生成、AI 应用开发等人工智能定制开发服务，助力企业数字化转型。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="business-card wow fadeInUp" style="animation-delay: 0.1s">
|
|
|
+ <div class="card-icon">
|
|
|
+ <i class="glyphicon glyphicon-plane"></i>
|
|
|
+ </div>
|
|
|
+ <h3 class="card-title">通用航空经营</h3>
|
|
|
+ <p class="card-desc">
|
|
|
+ 公司拥有通用航空经营及无人机系统运营的专业资质，提供专业无人系统产品的代理销售和技术支持。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="business-card wow fadeInUp" style="animation-delay: 0.2s">
|
|
|
+ <div class="card-icon">
|
|
|
+ <i class="glyphicon glyphicon-tasks"></i>
|
|
|
+ </div>
|
|
|
+ <h3 class="card-title">解决方案服务</h3>
|
|
|
+ <p class="card-desc">
|
|
|
+ 面向行业应用场景的无人系统应用解决方案和实施服务，满足客户多样化需求。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="business-card wow fadeInUp" style="animation-delay: 0.3s">
|
|
|
+ <div class="card-icon">
|
|
|
+ <i class="glyphicon glyphicon-education"></i>
|
|
|
+ </div>
|
|
|
+ <h3 class="card-title">认证培训</h3>
|
|
|
+ <p class="card-desc">
|
|
|
+ 为客户应用无人系统所需的认证培训和作业指导，培养专业无人机技术人才。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="business-card wow fadeInUp" style="animation-delay: 0.4s">
|
|
|
+ <div class="card-icon">
|
|
|
+ <i class="glyphicon glyphicon-cog"></i>
|
|
|
+ </div>
|
|
|
+ <h3 class="card-title">技术支持</h3>
|
|
|
+ <p class="card-desc">
|
|
|
+ 依托大疆创新等一流企业，提供专业技术支持和定制化行业应用服务。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn" style="margin-bottom: 24px">
|
|
|
- <img class="img-responsive center-block" src="@/assets/img/dji-card.png">
|
|
|
- <p>
|
|
|
- 依托深圳市大疆创新科技有限公司一流的研发团队和齐配的供应链生产系统支持。上海展域航空技术有限公司已经在上海地区开拓了专业级大疆无人机行业应用服务市场。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 发展历程 -->
|
|
|
+ <div class="l-container">
|
|
|
+ <div class="history-section">
|
|
|
+ <div class="section-header text-center wow fadeInUp">
|
|
|
+ <div class="section-tag">
|
|
|
+ <span class="tag-dot"></span>
|
|
|
+ <span>OUR HISTORY</span>
|
|
|
+ </div>
|
|
|
+ <h2 class="section-title">发展历程</h2>
|
|
|
+ <p class="section-subtitle">Our Journey</p>
|
|
|
</div>
|
|
|
- <div class="container text-left">
|
|
|
- <p>
|
|
|
- 多年来，展域航空基于丰富的行业经验和技术能力，努力在青少年航空科普和创客实践、3D打印和桌面数字制造、无人机技术实验和应用等领域默默耕耘，依托中航工业、中国商飞、大疆创新等企业开展技术验证和应用推广，并先后与北航、上海交大、复旦大学等高校以及民航华东管理局、上海航空学会、上海无人机产业协会等机构开展合作，在服务于青年人才创新实践的基础上，帮助大型工业园区、城市基础设施以及化工、建筑、测绘等行业领域应用智能无人系统推进数字化智能化转型升级做出贡献。</p>
|
|
|
+
|
|
|
+ <div class="history-grid">
|
|
|
+ <div class="history-card wow fadeInUp" style="animation-delay: 0s">
|
|
|
+ <div class="history-year">2014</div>
|
|
|
+ <div class="history-content">
|
|
|
+ <h3>公司成立</h3>
|
|
|
+ <p>由北航和复旦校友发起创立，推出飞天网创客空间，成为上海众创空间联盟首批会员单位。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="history-card wow fadeInUp" style="animation-delay: 0.15s">
|
|
|
+ <div class="history-year">2018</div>
|
|
|
+ <div class="history-content">
|
|
|
+ <h3>创客空间</h3>
|
|
|
+ <p>完成对口支援日喀则和果乐地区创客空间示范项目建设，设立创客师资上海培训基地。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="history-card wow fadeInUp" style="animation-delay: 0.3s">
|
|
|
+ <div class="history-year">2020</div>
|
|
|
+ <div class="history-content">
|
|
|
+ <h3>工业园区应用</h3>
|
|
|
+ <p>参与上海宝武吴淞园、上海化工区等大型工业园区无人机应用项目的实验和监管论证。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="history-card wow fadeInUp" style="animation-delay: 0.45s">
|
|
|
+ <div class="history-year">2022</div>
|
|
|
+ <div class="history-content">
|
|
|
+ <h3>智能无人系统</h3>
|
|
|
+ <p>完成上海化工区智能无人系统应用监管研究课题，帮助园区规范开展无人系统应用服务。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="history-card wow fadeInUp" style="animation-delay: 0.6s">
|
|
|
+ <div class="history-year">2023</div>
|
|
|
+ <div class="history-content">
|
|
|
+ <h3>数字化转型</h3>
|
|
|
+ <p>参与上海测绘院及上海建科集团数字化转型发展，推广大疆产品在测绘及工程建设领域的应用。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="history-card wow fadeInUp" style="animation-delay: 0.75s">
|
|
|
+ <div class="history-year">2025</div>
|
|
|
+ <div class="history-content">
|
|
|
+ <h3>AI 应用服务</h3>
|
|
|
+ <p>开展 AI 应用定制开发服务，包括 RAG 检索增强生成、AI 应用开发等，助力企业智能化转型。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 合作伙伴 -->
|
|
|
+ <div class="l-container">
|
|
|
+ <div class="partners-section">
|
|
|
+ <div class="section-header text-center wow fadeInUp">
|
|
|
+ <div class="section-tag">
|
|
|
+ <span class="tag-dot"></span>
|
|
|
+ <span>PARTNERS</span>
|
|
|
+ </div>
|
|
|
+ <h2 class="section-title">合作伙伴</h2>
|
|
|
+ <p class="section-subtitle">Our Partners</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="partners-grid">
|
|
|
+ <div class="partner-card wow zoomIn" style="animation-delay: 0s">
|
|
|
+ <div class="partner-logo">
|
|
|
+ <img src="https://cdn.jsdelivr.net/gh/zyuas-com/assets@main/partners/avic.png" alt="中航工业" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
|
|
+ <i class="glyphicon glyphicon-plane" style="display:none"></i>
|
|
|
+ </div>
|
|
|
+ <h4>中航工业</h4>
|
|
|
+ </div>
|
|
|
+ <div class="partner-card wow zoomIn" style="animation-delay: 0.1s">
|
|
|
+ <div class="partner-logo">
|
|
|
+ <img src="https://cdn.jsdelivr.net/gh/zyuas-com/assets@main/partners/comac.png" alt="中国商飞" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
|
|
+ <i class="glyphicon glyphicon-send" style="display:none"></i>
|
|
|
+ </div>
|
|
|
+ <h4>中国商飞</h4>
|
|
|
+ </div>
|
|
|
+ <div class="partner-card wow zoomIn" style="animation-delay: 0.2s">
|
|
|
+ <div class="partner-logo">
|
|
|
+ <img src="https://cdn.jsdelivr.net/gh/zyuas-com/assets@main/partners/dji.png" alt="大疆创新" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
|
|
+ <i class="glyphicon glyphicon-camera" style="display:none"></i>
|
|
|
+ </div>
|
|
|
+ <h4>大疆创新</h4>
|
|
|
+ </div>
|
|
|
+ <div class="partner-card wow zoomIn" style="animation-delay: 0.3s">
|
|
|
+ <div class="partner-logo">
|
|
|
+ <img src="https://cdn.jsdelivr.net/gh/zyuas-com/assets@main/partners/jianke.png" alt="上海建科咨询集团" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
|
|
+ <i class="glyphicon glyphicon-blackboard" style="display:none"></i>
|
|
|
+ </div>
|
|
|
+ <h4>上海建科咨询集团</h4>
|
|
|
+ </div>
|
|
|
+ <div class="partner-card wow zoomIn" style="animation-delay: 0.4s">
|
|
|
+ <div class="partner-logo">
|
|
|
+ <img src="https://cdn.jsdelivr.net/gh/zyuas-com/assets@main/partners/buaa.png" alt="北航" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
|
|
+ <i class="glyphicon glyphicon-education" style="display:none"></i>
|
|
|
+ </div>
|
|
|
+ <h4>北航</h4>
|
|
|
+ </div>
|
|
|
+ <div class="partner-card wow zoomIn" style="animation-delay: 0.5s">
|
|
|
+ <div class="partner-logo">
|
|
|
+ <img src="https://cdn.jsdelivr.net/gh/zyuas-com/assets@main/partners/sjtu.png" alt="上海交大" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
|
|
+ <i class="glyphicon glyphicon-book" style="display:none"></i>
|
|
|
+ </div>
|
|
|
+ <h4>上海交大</h4>
|
|
|
+ </div>
|
|
|
+ <div class="partner-card wow zoomIn" style="animation-delay: 0.6s">
|
|
|
+ <div class="partner-logo">
|
|
|
+ <img src="https://cdn.jsdelivr.net/gh/zyuas-com/assets@main/partners/fudan.png" alt="复旦大学" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
|
|
+ <i class="glyphicon glyphicon-education" style="display:none"></i>
|
|
|
+ </div>
|
|
|
+ <h4>复旦大学</h4>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import {WOW} from 'wowjs';
|
|
|
|
|
|
@@ -40,42 +256,542 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
<style scoped>
|
|
|
-.banner {
|
|
|
- color: #fff;
|
|
|
- font-size: 30px;
|
|
|
- height: 150px;
|
|
|
- line-height: 150px;
|
|
|
+/* ===== CSS 变量 ===== */
|
|
|
+#Info {
|
|
|
+ --primary-color: #1e73be;
|
|
|
+ --primary-gradient: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
|
|
|
+ --tech-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ --text-primary: #1a1a1a;
|
|
|
+ --text-secondary: #555;
|
|
|
+ --text-muted: #999;
|
|
|
+ --bg-light: #f8f9fa;
|
|
|
+ --card-bg: #ffffff;
|
|
|
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
|
+ --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
|
|
|
+ --radius-md: 12px;
|
|
|
+ --radius-lg: 16px;
|
|
|
+ --transition-base: all 0.3s ease;
|
|
|
+ --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+}
|
|
|
+
|
|
|
+#Info {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: var(--bg-light);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Banner 区域 ===== */
|
|
|
+.banner-wrapper {
|
|
|
+ position: relative;
|
|
|
+ height: 350px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
background-image: url('~@/assets/img/banner1.jpg');
|
|
|
- background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
- background-attachment: scroll;
|
|
|
- background-position: center center;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-bg::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(
|
|
|
+ 135deg,
|
|
|
+ rgba(15, 23, 42, 0.8) 0%,
|
|
|
+ rgba(30, 58, 95, 0.6) 100%
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+.banner-content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-tag {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px 20px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 20px;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-dot {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: blink 2s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes blink {
|
|
|
+ 0%, 100% { opacity: 1; }
|
|
|
+ 50% { opacity: 0.4; }
|
|
|
+}
|
|
|
+
|
|
|
+.section-tag span {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-title {
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0 0 16px;
|
|
|
+ letter-spacing: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-subtitle {
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ margin: 0;
|
|
|
+ letter-spacing: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 通用容器 ===== */
|
|
|
+.l-container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 80px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-header {
|
|
|
+ margin-bottom: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--text-primary);
|
|
|
+ margin: 16px 0 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-subtitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 公司简介区域 ===== */
|
|
|
+.intro-section {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.intro-content {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 60px;
|
|
|
+ align-items: start;
|
|
|
+ background: var(--card-bg);
|
|
|
+ padding: 50px;
|
|
|
+ border-radius: var(--radius-lg);
|
|
|
+ box-shadow: var(--shadow-md);
|
|
|
+}
|
|
|
+
|
|
|
+.intro-text .section-title {
|
|
|
+ font-size: 32px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.intro-text .section-title::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: -8px;
|
|
|
+ left: 0;
|
|
|
+ width: 60px;
|
|
|
+ height: 3px;
|
|
|
+ background: var(--primary-gradient);
|
|
|
+}
|
|
|
+
|
|
|
+.lead-text {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 2;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.desc-text {
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 1.8;
|
|
|
+ color: var(--text-muted);
|
|
|
+}
|
|
|
+
|
|
|
+.intro-stats {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ text-align: center;
|
|
|
+ padding: 24px;
|
|
|
+ background: linear-gradient(135deg, rgba(30, 115, 190, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
|
|
|
+ border-radius: var(--radius-md);
|
|
|
+ border: 1px solid rgba(30, 115, 190, 0.1);
|
|
|
+ transition: var(--transition-base);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: var(--shadow-md);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-number {
|
|
|
+ font-size: 42px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: var(--primary-gradient);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 核心业务区域 ===== */
|
|
|
+.business-section {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.business-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
|
+ gap: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.business-card {
|
|
|
+ background: var(--card-bg);
|
|
|
+ padding: 40px 30px;
|
|
|
+ border-radius: var(--radius-lg);
|
|
|
+ box-shadow: var(--shadow-md);
|
|
|
+ transition: var(--transition-bounce);
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.row {
|
|
|
- margin-right: 0;
|
|
|
- margin-left: 0;
|
|
|
+.business-card::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 4px;
|
|
|
+ background: var(--primary-gradient);
|
|
|
+ transform: scaleX(0);
|
|
|
+ transition: var(--transition-base);
|
|
|
}
|
|
|
|
|
|
-.info-container {
|
|
|
- padding: 40px 0;
|
|
|
+.business-card:hover::before {
|
|
|
+ transform: scaleX(1);
|
|
|
}
|
|
|
|
|
|
-.info-container > div > p {
|
|
|
- margin: 20px 12px;
|
|
|
- font-family: var(--font-family-base);
|
|
|
- font-weight: var(--font-weight-light);
|
|
|
- font-size: 13px;
|
|
|
- color: #2f2f2f;
|
|
|
- line-height: 2.2rem;
|
|
|
+.business-card:hover {
|
|
|
+ transform: translateY(-8px);
|
|
|
+ box-shadow: var(--shadow-lg);
|
|
|
}
|
|
|
|
|
|
-@media screen and (max-width: 997px) {
|
|
|
- .info-container {
|
|
|
- padding: 10px 0;
|
|
|
- //color: #808080;
|
|
|
+.card-icon {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ margin: 0 auto 24px;
|
|
|
+ background: linear-gradient(135deg, rgba(30, 115, 190, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
|
|
|
+ border-radius: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: var(--transition-base);
|
|
|
+}
|
|
|
+
|
|
|
+.business-card:hover .card-icon {
|
|
|
+ background: var(--primary-gradient);
|
|
|
+ transform: scale(1.1) rotate(5deg);
|
|
|
+}
|
|
|
+
|
|
|
+.card-icon i {
|
|
|
+ color: var(--primary-color);
|
|
|
+ font-size: 28px;
|
|
|
+ transition: var(--transition-base);
|
|
|
+}
|
|
|
+
|
|
|
+.business-card:hover .card-icon i {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-primary);
|
|
|
+ margin: 0 0 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.8;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 发展历程区域 ===== */
|
|
|
+.history-section {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.history-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
+ gap: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-card {
|
|
|
+ background: var(--card-bg);
|
|
|
+ border-radius: var(--radius-lg);
|
|
|
+ padding: 30px;
|
|
|
+ box-shadow: var(--shadow-md);
|
|
|
+ transition: var(--transition-bounce);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.history-card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: var(--shadow-lg);
|
|
|
+}
|
|
|
+
|
|
|
+.history-year {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background: var(--primary-gradient);
|
|
|
+ border-radius: var(--radius-md);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ box-shadow: 0 4px 12px rgba(30, 115, 190, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.history-content h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-primary);
|
|
|
+ margin: 0 0 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-content p {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.7;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 合作伙伴区域 ===== */
|
|
|
+.partners-section {
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(180deg, var(--bg-light) 0%, #fff 100%);
|
|
|
+ padding: 80px 20px;
|
|
|
+ border-radius: var(--radius-lg);
|
|
|
+ margin-bottom: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.partners-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
|
+ gap: 24px;
|
|
|
+ max-width: 1000px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.partner-card {
|
|
|
+ background: var(--card-bg);
|
|
|
+ padding: 30px 20px;
|
|
|
+ border-radius: var(--radius-md);
|
|
|
+ box-shadow: var(--shadow-sm);
|
|
|
+ transition: var(--transition-bounce);
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.partner-card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: var(--shadow-md);
|
|
|
+ border-color: rgba(30, 115, 190, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.partner-logo {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin: 0 auto 16px;
|
|
|
+ background: linear-gradient(135deg, rgba(30, 115, 190, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
|
|
|
+ border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.partner-logo img {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ object-fit: contain;
|
|
|
+}
|
|
|
+
|
|
|
+.partner-logo i {
|
|
|
+ color: var(--primary-color);
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.partner-card h4 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-primary);
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 响应式设计 ===== */
|
|
|
+@media screen and (max-width: 996px) {
|
|
|
+ .banner-wrapper {
|
|
|
+ height: 280px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-title {
|
|
|
+ font-size: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-subtitle {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l-container {
|
|
|
+ padding: 60px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-content {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 40px;
|
|
|
+ padding: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-stats {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-item {
|
|
|
+ flex: 1;
|
|
|
+ max-width: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-grid,
|
|
|
+ .history-grid {
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .banner-wrapper {
|
|
|
+ height: 240px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-title {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-subtitle {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-tag {
|
|
|
+ padding: 6px 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-tag span {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l-container {
|
|
|
+ padding: 40px 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-content {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-text .section-title {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-stats {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-item {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-grid,
|
|
|
+ .history-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-card {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-year {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .partners-grid {
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ }
|
|
|
+
|
|
|
+ .partners-section {
|
|
|
+ padding: 40px 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
