|
|
@@ -8,8 +8,10 @@
|
|
|
<img class="swiper-lazy" :data-src="item.img">
|
|
|
<div class="swiper-lazy-preloader"></div>
|
|
|
<div class="swiper-slide-title">
|
|
|
- <h1>{{ item.title }}</h1>
|
|
|
- <p>{{ item.content }}</p>
|
|
|
+ <div class="slide-content">
|
|
|
+ <h1 class="animate-title">{{ item.title }}</h1>
|
|
|
+ <p class="animate-subtitle">{{ item.content }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -24,61 +26,145 @@
|
|
|
<!-- DJI Dock -->
|
|
|
<div id="djiDock" class="l-container-fluid l-section">
|
|
|
<div class="container">
|
|
|
- <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
|
|
|
- <img class="img-responsive" src="@/assets/img/dji-dock2.png" alt="大疆行业应用无人机">
|
|
|
- </div>
|
|
|
- <div class="col-xs-12 col-sm-12 col-md-6">
|
|
|
- <h2 class="djiDock-title">
|
|
|
- 关于我们
|
|
|
- <small>大疆行业应用代理商</small>
|
|
|
- </h2>
|
|
|
- <p>
|
|
|
- 依托深圳市大疆创新科技有限公司一流的研发团队和齐配的供应链生产系统支持。上海展域航空技术有限公司已经在上海地区开拓了专业级大疆无人机行业应用服务市场。</p>
|
|
|
- <p>
|
|
|
- 我们为专业客户提供定制化的行业解决方案服务，多家行业领先的无人机公司已经采用我们的解决方案与技术服务。
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 致力于推进航空领域及数字智能领域的最先进技术应用于人们的生产生活，帮助人们拓展更高更远的视野，开辟更新更广的空间，帮助人们成就飞天的梦想。
|
|
|
- </p>
|
|
|
+ <div class="dock-grid">
|
|
|
+ <div class="dock-image wow zoomIn">
|
|
|
+ <div class="image-glow"></div>
|
|
|
+ <img class="img-responsive" src="@/assets/img/dji-dock2.png" alt="大疆行业应用无人机">
|
|
|
+ </div>
|
|
|
+ <div class="dock-content wow fadeInRight">
|
|
|
+ <div class="section-tag">
|
|
|
+ <span class="tag-dot"></span>
|
|
|
+ <span>ABOUT US</span>
|
|
|
+ </div>
|
|
|
+ <h2 class="dock-title">
|
|
|
+ 关于我们
|
|
|
+ <small>大疆行业应用代理商</small>
|
|
|
+ </h2>
|
|
|
+ <div class="dock-desc">
|
|
|
+ <p>依托深圳市大疆创新科技有限公司一流的研发团队和齐配的供应链生产系统支持。上海展域航空技术有限公司已经在上海地区开拓了专业级大疆无人机行业应用服务市场。</p>
|
|
|
+ <p>我们为专业客户提供定制化的行业解决方案服务，多家行业领先的无人机公司已经采用我们的解决方案与技术服务。</p>
|
|
|
+ <p>致力于推进航空领域及数字智能领域的最先进技术应用于人们的生产生活，帮助人们拓展更高更远的视野，开辟更新更广的空间，帮助人们成就飞天的梦想。</p>
|
|
|
+ </div>
|
|
|
+ <div class="dock-stats">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-number">10+</div>
|
|
|
+ <div class="stat-label">行业经验</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-divider"></div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-number">500+</div>
|
|
|
+ <div class="stat-label">成功案例</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-divider"></div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-number">24/7</div>
|
|
|
+ <div class="stat-label">技术支持</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 您身边的无人机解决方案专家 -->
|
|
|
<div id="contactUs" class="container-fuild text-center">
|
|
|
+ <div class="gradient-orb orb-1"></div>
|
|
|
+ <div class="gradient-orb orb-2"></div>
|
|
|
<div class="container contactUs-container wow slideInUp">
|
|
|
- <h1>上海展域航空技术有限公司</h1>
|
|
|
- <button
|
|
|
- class="btn btn-default btn-sm"
|
|
|
- onmouseleave="this.style.borderColor='#fff'; this.style.backgroundColor='#fff'; this.style.color='#3f3f3f';"
|
|
|
- onmouseenter="this.style.backgroundColor='transparent'; this.style.borderColor='#fff'; this.style.color='#fff';"
|
|
|
- >您身边的无人机解决方案专家
|
|
|
- </button>
|
|
|
+ <div class="glass-card">
|
|
|
+ <h1 class="contact-title">上海展域航空技术有限公司</h1>
|
|
|
+ <p class="contact-subtitle">您身边的无人机解决方案专家</p>
|
|
|
+ <div class="contact-actions">
|
|
|
+ <button class="btn-primary">
|
|
|
+ <span>联系我们</span>
|
|
|
+ <i class="arrow-right"></i>
|
|
|
+ </button>
|
|
|
+ <button class="btn-secondary">
|
|
|
+ <span>了解更多</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 为什么选择我们 -->
|
|
|
<div id="whyChooseUs" class="l-container">
|
|
|
+ <div class="whyChooseUs-title text-center">
|
|
|
+ <div class="section-tag">
|
|
|
+ <span class="tag-dot"></span>
|
|
|
+ <span>SERVICES</span>
|
|
|
+ </div>
|
|
|
+ <p class="main-title">为什么选择我们的服务</p>
|
|
|
+ <p class="sub-title">Professional Service Advantages</p>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div
|
|
|
+ class="col-xs-12 col-sm-6 col-md-4"
|
|
|
+ v-for="(item,index) in serverList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="server-card wow fadeInUp" :style="{animationDelay: index * 0.15 + 's'}">
|
|
|
+ <div class="card-glow"></div>
|
|
|
+ <div class="card-icon">
|
|
|
+ <img :src="item.logo" alt="logo">
|
|
|
+ </div>
|
|
|
+ <h3 class="card-title">{{ item.title }}</h3>
|
|
|
+ <div class="card-desc" v-html="item.content"></div>
|
|
|
+ <div class="card-arrow">
|
|
|
+ <i class="glyphicon glyphicon-chevron-right"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增：技术优势展示区 -->
|
|
|
+ <div id="techAdvantages" class="l-container-fluid l-section tech-section">
|
|
|
+ <div class="gradient-bg"></div>
|
|
|
+ <div class="container">
|
|
|
<div class="whyChooseUs-title text-center">
|
|
|
- <p>为什么选择我们的服务</p>
|
|
|
+ <div class="section-tag">
|
|
|
+ <span class="tag-dot"></span>
|
|
|
+ <span>ADVANTAGES</span>
|
|
|
+ </div>
|
|
|
+ <p class="main-title">技术优势</p>
|
|
|
+ <p class="sub-title">Technical Advantages</p>
|
|
|
</div>
|
|
|
- <div class="row">
|
|
|
- <div
|
|
|
- class="col-xs-12 col-sm-6 col-md-4 server-wrapper"
|
|
|
- v-for="(item,index) in serverList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="server-block wow slideInUp"
|
|
|
- onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'"
|
|
|
- onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'"
|
|
|
- >
|
|
|
- <img class="center-block" :src="item.logo" alt="logo">
|
|
|
- <p class="text-center">{{ item.title }}</p>
|
|
|
- <div
|
|
|
- class="text-center"
|
|
|
- v-html="item.content"
|
|
|
- onmouseenter="this.style.color='#28f'"
|
|
|
- onmouseleave="this.style.color='#ccc'"
|
|
|
- ></div>
|
|
|
+ <div class="row tech-grid">
|
|
|
+ <div class="col-xs-12 col-sm-6 col-md-3">
|
|
|
+ <div class="tech-card wow zoomIn">
|
|
|
+ <div class="tech-icon">
|
|
|
+ <i class="glyphicon glyphicon-leaf"></i>
|
|
|
+ </div>
|
|
|
+ <h4>绿色环保</h4>
|
|
|
+ <p>无人机作业零排放，符合可持续发展理念</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-xs-12 col-sm-6 col-md-3">
|
|
|
+ <div class="tech-card wow zoomIn" style="animation-delay: 0.1s">
|
|
|
+ <div class="tech-icon">
|
|
|
+ <i class="glyphicon glyphicon-dashboard"></i>
|
|
|
+ </div>
|
|
|
+ <h4>高效作业</h4>
|
|
|
+ <p>效率是传统人工方式的 5 至 10 倍</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-xs-12 col-sm-6 col-md-3">
|
|
|
+ <div class="tech-card wow zoomIn" style="animation-delay: 0.2s">
|
|
|
+ <div class="tech-icon">
|
|
|
+ <i class="glyphicon glyphicon-screenshot"></i>
|
|
|
+ </div>
|
|
|
+ <h4>精准测绘</h4>
|
|
|
+ <p>实现 1:500 免像控高精度测绘</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-xs-12 col-sm-6 col-md-3">
|
|
|
+ <div class="tech-card wow zoomIn" style="animation-delay: 0.3s">
|
|
|
+ <div class="tech-icon">
|
|
|
+ <i class="glyphicon glyphicon-cloud"></i>
|
|
|
+ </div>
|
|
|
+ <h4>智能处理</h4>
|
|
|
+ <p>AI 驱动的数据处理与分析</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -86,6 +172,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import Swiper from "swiper";
|
|
|
import {WOW} from 'wowjs';
|
|
|
@@ -104,12 +191,11 @@ export default {
|
|
|
{
|
|
|
img: require("@/assets/img/banner-dock-black.jpg"),
|
|
|
path: "",
|
|
|
- title: '大疆机场2',
|
|
|
+ title: '大疆机场 2',
|
|
|
content: '轻担重任',
|
|
|
},
|
|
|
{
|
|
|
img: require("@/assets/img/banner-m350rtk.jpg"),
|
|
|
- // video: require("@/assets/video/m350rtk.webm"),
|
|
|
path: "",
|
|
|
title: '大疆经纬 M350 RTK',
|
|
|
content: '满载实力，一往无前',
|
|
|
@@ -125,7 +211,7 @@ export default {
|
|
|
{
|
|
|
logo: require("@/assets/img/computer.png"),
|
|
|
title: "售后响应",
|
|
|
- content: "<p>利用远程工具，故障产生后2小时内线上响应协助客户进行调试、解决故障</p>"
|
|
|
+ content: "<p>利用远程工具，故障产生后 2 小时内线上响应协助客户进行调试、解决故障</p>"
|
|
|
},
|
|
|
{
|
|
|
logo: require("@/assets/img/skill.png"),
|
|
|
@@ -138,33 +224,29 @@ export default {
|
|
|
mounted() {
|
|
|
/* banner-swiper */
|
|
|
new Swiper(".banner-swiper", {
|
|
|
- loop: true, // 循环模式选项
|
|
|
+ loop: true,
|
|
|
effect: 'fade',
|
|
|
- //自动播放
|
|
|
autoplay: {
|
|
|
- delay: 3000,
|
|
|
+ delay: 4000,
|
|
|
stopOnLastSlide: false,
|
|
|
disableOnInteraction: false
|
|
|
},
|
|
|
- // 如果需要分页器
|
|
|
pagination: {
|
|
|
el: ".swiper-pagination",
|
|
|
clickable: true
|
|
|
},
|
|
|
- // 如果需要前进后退按钮
|
|
|
navigation: {
|
|
|
nextEl: ".swiper-button-next",
|
|
|
prevEl: ".swiper-button-prev"
|
|
|
},
|
|
|
- // 延迟加载
|
|
|
lazy: {
|
|
|
loadPrevNext: true
|
|
|
},
|
|
|
- observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
|
|
- observeParents: true //修改swiper的父元素时，自动初始化swiper
|
|
|
+ observer: true,
|
|
|
+ observeParents: true
|
|
|
});
|
|
|
|
|
|
- /* wowjs动画 */
|
|
|
+ /* wowjs 动画 */
|
|
|
var wow = new WOW({
|
|
|
boxClass: 'wow',
|
|
|
animateClass: 'animated',
|
|
|
@@ -176,15 +258,32 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style scoped>
|
|
|
+/* ===== CSS 变量 ===== */
|
|
|
+#HomePage {
|
|
|
+ --primary-color: #1e73be;
|
|
|
+ --primary-gradient: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
|
|
|
+ --tech-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ --dark-bg: #0f172a;
|
|
|
+ --card-bg: rgba(255, 255, 255, 0.8);
|
|
|
+ --glass-bg: rgba(255, 255, 255, 0.1);
|
|
|
+ --glass-border: rgba(255, 255, 255, 0.2);
|
|
|
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
|
+ --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
|
|
|
+ --glow-blue: 0 0 40px rgba(30, 115, 190, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
/* 整体盒子 */
|
|
|
#HomePage {
|
|
|
width: 100%;
|
|
|
+ background: #fafbfc;
|
|
|
}
|
|
|
|
|
|
-/* 轮播图 */
|
|
|
+/* ===== 轮播图 - 玻璃拟态风格 ===== */
|
|
|
#swiper {
|
|
|
-
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
#swiper .banner-swiper {
|
|
|
@@ -192,343 +291,668 @@ export default {
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
+#swiper .banner-swiper .swiper-slide {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
#swiper .banner-swiper .swiper-slide img {
|
|
|
max-width: 100%;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
|
|
|
-#swiper .banner-swiper .swiper-slide {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
#swiper .banner-swiper .swiper-slide-title {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- z-index: 999999999;
|
|
|
+ z-index: 10;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- color: #fff;
|
|
|
- background: rgba(51, 51, 51, 0.534);
|
|
|
- text-align: center;
|
|
|
- line-height: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: linear-gradient(
|
|
|
+ 135deg,
|
|
|
+ rgba(15, 23, 42, 0.7) 0%,
|
|
|
+ rgba(15, 23, 42, 0.4) 100%
|
|
|
+ );
|
|
|
+ backdrop-filter: blur(3px);
|
|
|
}
|
|
|
|
|
|
-#swiper .banner-swiper .swiper-slide-title > h1 {
|
|
|
- font-size: 36px;
|
|
|
- margin-top: 12%;
|
|
|
+#swiper .banner-swiper .swiper-slide-title .slide-content {
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px;
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 20px;
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
|
+ max-width: 800px;
|
|
|
}
|
|
|
|
|
|
-#swiper .banner-swiper .swiper-slide-title > p {
|
|
|
- font-size: 18px;
|
|
|
- margin-top: 1%;
|
|
|
+#swiper .banner-swiper .swiper-slide-title h1 {
|
|
|
+ font-size: 42px;
|
|
|
font-weight: 700;
|
|
|
+ margin: 0 0 20px;
|
|
|
+ background: linear-gradient(90deg, #fff 0%, #e0e7ff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
|
+ letter-spacing: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+#swiper .banner-swiper .swiper-slide-title p {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ margin: 0;
|
|
|
+ letter-spacing: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 分页器样式优化 */
|
|
|
+#swiper .banner-swiper .swiper-pagination-bullet {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ opacity: 1;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+#swiper .banner-swiper .swiper-pagination-bullet-active {
|
|
|
+ background: #fff;
|
|
|
+ width: 28px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 导航按钮样式 */
|
|
|
+#swiper .banner-swiper .swiper-button-next,
|
|
|
+#swiper .banner-swiper .swiper-button-prev {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 50%;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+#swiper .banner-swiper .swiper-button-next:hover,
|
|
|
+#swiper .banner-swiper .swiper-button-prev:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ color: #fff;
|
|
|
+ transform: scale(1.1);
|
|
|
}
|
|
|
|
|
|
-/* Dji */
|
|
|
+/* ===== DJI Dock - 现代化布局 ===== */
|
|
|
#djiDock {
|
|
|
- padding: 80px 0;
|
|
|
- transition: all ease 0.6s;
|
|
|
- box-sizing: border-box;
|
|
|
+ padding: 100px 0;
|
|
|
+ background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
|
|
|
}
|
|
|
|
|
|
-#djiDock .djiDock-title {
|
|
|
- padding-bottom: 15px;
|
|
|
- border-bottom: 1px solid #e0e0e0;
|
|
|
+#djiDock .dock-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 60px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .dock-image {
|
|
|
+ position: relative;
|
|
|
+ padding: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .dock-image .image-glow {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 80%;
|
|
|
+ height: 80%;
|
|
|
+ background: radial-gradient(circle, rgba(30, 115, 190, 0.3) 0%, transparent 70%);
|
|
|
+ filter: blur(40px);
|
|
|
+ z-index: 0;
|
|
|
+ animation: pulse 3s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes pulse {
|
|
|
+ 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
|
|
|
+ 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .dock-image img {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
|
|
|
+ transition: transform 0.5s ease;
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .dock-image:hover img {
|
|
|
+ transform: translateY(-10px);
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .dock-content {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .section-tag {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: rgba(30, 115, 190, 0.1);
|
|
|
+ border-radius: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-#djiDock .djiDock-title small {
|
|
|
+#djiDock .tag-dot {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: var(--primary-color);
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: blink 2s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes blink {
|
|
|
+ 0%, 100% { opacity: 1; }
|
|
|
+ 50% { opacity: 0.4; }
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .section-tag span {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--primary-color);
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .dock-title {
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1a1a1a;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ line-height: 1.3;
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .dock-title small {
|
|
|
display: block;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 16px;
|
|
|
color: #666;
|
|
|
- margin-top: 8px;
|
|
|
+ margin-top: 12px;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
-#djiDock p {
|
|
|
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
- font-weight: 360;
|
|
|
- font-size: 15px;
|
|
|
+#djiDock .dock-desc p {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 2;
|
|
|
color: #555;
|
|
|
- line-height: 2rem;
|
|
|
- margin-bottom: 15px;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-/* 联系我们 */
|
|
|
-#contactUs {
|
|
|
- color: #fff;
|
|
|
- height: 320px;
|
|
|
- background: url("../assets/img/contact_us_bg.jpg") center center no-repeat;
|
|
|
- background-size: cover;
|
|
|
- transition: all ease 0.6s;
|
|
|
+#djiDock .dock-stats {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ gap: 30px;
|
|
|
+ margin-top: 40px;
|
|
|
+ padding-top: 40px;
|
|
|
+ border-top: 1px solid #e0e0e0;
|
|
|
}
|
|
|
|
|
|
-#contactUs .contactUs-container {
|
|
|
+#djiDock .stat-item {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
-#contactUs .contactUs-container h1 {
|
|
|
+#djiDock .stat-number {
|
|
|
font-size: 32px;
|
|
|
- font-weight: 600;
|
|
|
+ font-weight: 700;
|
|
|
+ background: var(--primary-gradient);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .stat-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+#djiDock .stat-divider {
|
|
|
+ width: 1px;
|
|
|
+ height: 40px;
|
|
|
+ background: #e0e0e0;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 联系我们 - 玻璃拟态卡片 ===== */
|
|
|
+#contactUs {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 120px 0;
|
|
|
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #764ba2 100%);
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .gradient-orb {
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 50%;
|
|
|
+ filter: blur(80px);
|
|
|
+ opacity: 0.5;
|
|
|
+ animation: float 6s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .orb-1 {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.6) 0%, transparent 70%);
|
|
|
+ top: -100px;
|
|
|
+ left: -100px;
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .orb-2 {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, transparent 70%);
|
|
|
+ bottom: -50px;
|
|
|
+ right: -50px;
|
|
|
+ animation-delay: 2s;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes float {
|
|
|
+ 0%, 100% { transform: translate(0, 0); }
|
|
|
+ 50% { transform: translate(30px, 30px); }
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .contactUs-container {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .glass-card {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 60px 80px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 24px;
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .contact-title {
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0 0 16px;
|
|
|
letter-spacing: 2px;
|
|
|
- margin-bottom: 30px;
|
|
|
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
-#contactUs .contactUs-container button {
|
|
|
- width: 320px;
|
|
|
- height: 50px;
|
|
|
- font-size: 15px;
|
|
|
+#contactUs .contact-subtitle {
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ margin: 0 0 40px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .contact-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .btn-primary,
|
|
|
+#contactUs .btn-secondary {
|
|
|
+ position: relative;
|
|
|
+ padding: 16px 40px;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
- letter-spacing: 1px;
|
|
|
- border: 2px solid #fff;
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
+ border-radius: 12px;
|
|
|
+ cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-#contactUs .contactUs-container button:hover {
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
|
+#contactUs .btn-primary {
|
|
|
+ background: #fff;
|
|
|
+ color: #1e3c72;
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
-/* 为什么选择我们 */
|
|
|
+#contactUs .btn-primary:hover {
|
|
|
+ transform: translateY(-3px);
|
|
|
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .btn-primary .arrow-right {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 6px solid transparent;
|
|
|
+ border-bottom: 6px solid transparent;
|
|
|
+ border-left: 8px solid #1e3c72;
|
|
|
+ margin-left: 10px;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .btn-primary:hover .arrow-right {
|
|
|
+ transform: translateX(5px);
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .btn-secondary {
|
|
|
+ background: transparent;
|
|
|
+ color: #fff;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+#contactUs .btn-secondary:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border-color: #fff;
|
|
|
+ transform: translateY(-3px);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 为什么选择我们 - 玻璃拟态卡片 ===== */
|
|
|
#whyChooseUs {
|
|
|
- padding: 0;
|
|
|
+ padding: 100px 0;
|
|
|
+ background: #fafbfc;
|
|
|
}
|
|
|
|
|
|
#whyChooseUs .whyChooseUs-title {
|
|
|
- margin-bottom: 50px;
|
|
|
- text-align: center;
|
|
|
+ margin-bottom: 60px;
|
|
|
}
|
|
|
|
|
|
-#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
+#whyChooseUs .main-title {
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1a1a1a;
|
|
|
+ margin: 16px 0 8px;
|
|
|
}
|
|
|
|
|
|
-#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
|
|
|
- font-size: 15px;
|
|
|
- color: #666;
|
|
|
- margin-top: 10px;
|
|
|
+#whyChooseUs .sub-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+#whyChooseUs .server-card {
|
|
|
+ position: relative;
|
|
|
+ padding: 40px 30px;
|
|
|
+ margin: 20px;
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
+ border-radius: 20px;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ box-shadow: var(--shadow-md);
|
|
|
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-#whyChooseUs .server-block {
|
|
|
- padding: 40px 25px;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- border-bottom: 3px solid #e0e0e0;
|
|
|
+#whyChooseUs .server-card .card-glow {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(30, 115, 190, 0.1), transparent);
|
|
|
+ transition: left 0.6s ease;
|
|
|
+}
|
|
|
+
|
|
|
+#whyChooseUs .server-card:hover .card-glow {
|
|
|
+ left: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+#whyChooseUs .server-card:hover {
|
|
|
+ transform: translateY(-10px);
|
|
|
+ box-shadow: var(--shadow-lg), var(--glow-blue);
|
|
|
+ border-color: rgba(30, 115, 190, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+#whyChooseUs .server-card .card-icon {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ margin: 0 auto 24px;
|
|
|
+ background: linear-gradient(135deg, rgba(30, 115, 190, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
-#whyChooseUs .server-block:hover {
|
|
|
- border-color: #1e73be;
|
|
|
- border-bottom-width: 3px;
|
|
|
- transform: translateY(-5px);
|
|
|
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
|
+#whyChooseUs .server-card:hover .card-icon {
|
|
|
+ background: var(--primary-gradient);
|
|
|
+ transform: scale(1.1) rotate(5deg);
|
|
|
}
|
|
|
|
|
|
-#whyChooseUs .server-block img {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
+#whyChooseUs .server-card .card-icon img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ filter: brightness(0) saturate(100%) invert(41%) sepia(96%) saturate(1752%) hue-rotate(190deg) brightness(94%) contrast(96%);
|
|
|
+ transition: filter 0.3s ease;
|
|
|
}
|
|
|
|
|
|
-#whyChooseUs .server-block > p {
|
|
|
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
- font-weight: 360;
|
|
|
- font-size: 14px;
|
|
|
- color: #2f2f2f;
|
|
|
- line-height: 2.2rem;
|
|
|
- margin: 30px 0;
|
|
|
+#whyChooseUs .server-card:hover .card-icon img {
|
|
|
+ filter: brightness(0) saturate(100%) invert(100%);
|
|
|
}
|
|
|
|
|
|
-#whyChooseUs .server-block > div {
|
|
|
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
- font-weight: 360;
|
|
|
+#whyChooseUs .server-card .card-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1a1a1a;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 0 16px;
|
|
|
+}
|
|
|
+
|
|
|
+#whyChooseUs .server-card .card-desc {
|
|
|
font-size: 14px;
|
|
|
- line-height: 2.2rem;
|
|
|
- color: #ccc;
|
|
|
+ line-height: 1.8;
|
|
|
+ color: #666;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-/* 媒体查询（手机） */
|
|
|
-@media screen and (max-width: 768px) {
|
|
|
- #swiper {
|
|
|
- height: auto;
|
|
|
- }
|
|
|
+#whyChooseUs .server-card .card-desc p {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
|
|
|
- #swiper .banner-swiper .swiper-slide-title > h1 {
|
|
|
- font-size: 18px;
|
|
|
- margin-top: 6%;
|
|
|
- }
|
|
|
+#whyChooseUs .server-card .card-arrow {
|
|
|
+ text-align: center;
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(10px);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
|
|
|
- #swiper .banner-swiper .swiper-slide-title > p {
|
|
|
- font-size: 13px;
|
|
|
- //margin-top: 1%; font-weight: 700;
|
|
|
- }
|
|
|
+#whyChooseUs .server-card .card-arrow i {
|
|
|
+ color: var(--primary-color);
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
|
|
|
- #djiDock {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
+#whyChooseUs .server-card:hover .card-arrow {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
|
|
|
- #djiDock .djiDock-title {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
+/* ===== 技术优势区域 ===== */
|
|
|
+#techAdvantages {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #0f172a;
|
|
|
+}
|
|
|
|
|
|
- #djiDock p {
|
|
|
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
- font-weight: 360;
|
|
|
- font-size: 13px;
|
|
|
- color: #2f2f2f;
|
|
|
- line-height: 2.2rem;
|
|
|
- }
|
|
|
+#techAdvantages .gradient-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background:
|
|
|
+ radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
|
|
|
+ radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
|
|
|
+}
|
|
|
|
|
|
+#techAdvantages .whyChooseUs-title {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
|
|
|
- #contactUs {
|
|
|
- height: 160px;
|
|
|
- transition: all ease 0.6s;
|
|
|
- }
|
|
|
+#techAdvantages .main-title,
|
|
|
+#techAdvantages .section-tag span {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
|
|
|
- #contactUs .contactUs-container {
|
|
|
- padding-top: 0;
|
|
|
- }
|
|
|
+#techAdvantages .sub-title {
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+}
|
|
|
|
|
|
- #contactUs .contactUs-container h1 {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
+#techAdvantages .tech-grid {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
|
|
|
- #contactUs .contactUs-container h3 {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
+#techAdvantages .tech-card {
|
|
|
+ padding: 40px 30px;
|
|
|
+ margin: 20px;
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 20px;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.4s ease;
|
|
|
+}
|
|
|
|
|
|
- #contactUs .contactUs-container button {
|
|
|
- width: 200px;
|
|
|
- height: 30px;
|
|
|
- margin-top: 30px;
|
|
|
- }
|
|
|
+#techAdvantages .tech-card:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ transform: translateY(-8px);
|
|
|
+ border-color: rgba(30, 115, 190, 0.5);
|
|
|
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
|
|
|
- #contactUs .contactUs-container .contactUs-contactWay span {
|
|
|
- display: inline-block;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- margin: 10px;
|
|
|
- }
|
|
|
+#techAdvantages .tech-icon {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ margin: 0 auto 24px;
|
|
|
+ background: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
|
|
|
+ border-radius: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 8px 20px rgba(30, 115, 190, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+#techAdvantages .tech-icon i {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+#techAdvantages .tech-card h4 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0 0 12px;
|
|
|
+}
|
|
|
|
|
|
- #whyChooseUs {
|
|
|
- padding: 20px 0;
|
|
|
- transition: all ease 0.6s;
|
|
|
+#techAdvantages .tech-card p {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.6;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 响应式设计 ===== */
|
|
|
+
|
|
|
+/* 平板端 */
|
|
|
+@media screen and (max-width: 996px) {
|
|
|
+ #djiDock .dock-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 40px;
|
|
|
}
|
|
|
|
|
|
- #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 700;
|
|
|
+ #djiDock .dock-image {
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
- #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
|
|
|
- font-size: 12px;
|
|
|
+ #djiDock .dock-title {
|
|
|
+ font-size: 28px;
|
|
|
}
|
|
|
|
|
|
- #whyChooseUs .server-block {
|
|
|
- padding: 50px 0;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-bottom: 5px solid #ccc;
|
|
|
+ #contactUs .glass-card {
|
|
|
+ padding: 40px 50px;
|
|
|
}
|
|
|
|
|
|
- #whyChooseUs .server-block img {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
+ #contactUs .contact-title {
|
|
|
+ font-size: 28px;
|
|
|
}
|
|
|
|
|
|
- #whyChooseUs .server-block > p {
|
|
|
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
- font-weight: 360;
|
|
|
- font-size: 14px;
|
|
|
- color: #2f2f2f;
|
|
|
- line-height: 2.2rem;
|
|
|
- margin: 30px 0;
|
|
|
+ #contactUs .contact-actions {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
}
|
|
|
|
|
|
- #whyChooseUs .server-block > div {
|
|
|
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
- font-weight: 360;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 2.2rem;
|
|
|
- color: #ccc;
|
|
|
+ #whyChooseUs .server-card {
|
|
|
+ margin: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/* 媒体查询（平板） */
|
|
|
-@media screen and (min-width: 768px) and (max-width: 996px) {
|
|
|
- #swiper {
|
|
|
- height: auto;
|
|
|
+/* 手机端 */
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ #swiper .banner-swiper .swiper-slide-title .slide-content {
|
|
|
+ padding: 20px;
|
|
|
+ margin: 0 20px;
|
|
|
}
|
|
|
|
|
|
- #swiper .banner-swiper .swiper-slide-title > h1 {
|
|
|
- font-size: 24px;
|
|
|
- margin-top: 10%;
|
|
|
+ #swiper .banner-swiper .swiper-slide-title h1 {
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
|
|
|
- #swiper .banner-swiper .swiper-slide-title > p {
|
|
|
- font-size: 13px;
|
|
|
- //margin-top: 0; font-weight: 700;
|
|
|
+ #swiper .banner-swiper .swiper-slide-title p {
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
#djiDock {
|
|
|
- padding: 20px;
|
|
|
+ padding: 60px 20px;
|
|
|
}
|
|
|
|
|
|
- #djiDock .djiDock-title {
|
|
|
- font-size: 30px;
|
|
|
+ #djiDock .dock-title {
|
|
|
+ font-size: 24px;
|
|
|
}
|
|
|
|
|
|
- #djiDock p {
|
|
|
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
- font-weight: 360;
|
|
|
+ #djiDock .dock-desc p {
|
|
|
font-size: 14px;
|
|
|
- color: #2f2f2f;
|
|
|
- line-height: 2.2rem;
|
|
|
}
|
|
|
|
|
|
- #djiDock .djiDock-device {
|
|
|
- font-size: 30px;
|
|
|
- margin: 30px 0 15px;
|
|
|
+ #djiDock .dock-stats {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
#contactUs {
|
|
|
- height: 300px;
|
|
|
+ padding: 80px 20px;
|
|
|
}
|
|
|
|
|
|
- #contactUs .contactUs-container {
|
|
|
- padding-top: 50px;
|
|
|
+ #contactUs .glass-card {
|
|
|
+ padding: 30px;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
- #contactUs .contactUs-container h1 {
|
|
|
- font-size: 30px;
|
|
|
+ #contactUs .contact-title {
|
|
|
+ font-size: 22px;
|
|
|
}
|
|
|
|
|
|
- #contactUs .contactUs-container h3 {
|
|
|
- font-size: 20px;
|
|
|
+ #contactUs .contact-subtitle {
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
- #contactUs .contactUs-container button {
|
|
|
- width: 300px;
|
|
|
- height: 50px;
|
|
|
- margin-top: 30px;
|
|
|
+ #whyChooseUs,
|
|
|
+ #techAdvantages {
|
|
|
+ padding: 60px 20px;
|
|
|
}
|
|
|
|
|
|
- #contactUs .contactUs-container .contactUs-contactWay span {
|
|
|
- display: inline-block;
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- margin: 15px;
|
|
|
+ #whyChooseUs .main-title,
|
|
|
+ #techAdvantages .main-title {
|
|
|
+ font-size: 26px;
|
|
|
}
|
|
|
|
|
|
- #whyChooseUs {
|
|
|
- padding: 20px 0;
|
|
|
+ #whyChooseUs .server-card,
|
|
|
+ #techAdvantages .tech-card {
|
|
|
+ margin: 10px 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
