fix: set fixed banner height and center navigation

Header:
- Center navigation vertically (align-items: center)
- Set nav wrapper height to 80px

Banner:
- Set fixed height: 500px (desktop), 400px (tablet), 300px (mobile)
- Add object-fit: cover for images
- Remove margin/padding to prevent gaps
- Prevents white space above banner

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/view/HomePage.vue

@@ -1,489 +1,497 @@
-<template>
-  <div id="HomePage">
-    <!-- 轮播图 -->
-    <div id="swiper" class="container-fuild">
-      <div class="swiper-container banner-swiper">
-        <div class="swiper-wrapper">
-          <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
-            <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>
-          </div>
-        </div>
-        <!-- 如果需要分页器 -->
-        <div class="swiper-pagination"></div>
-        <!-- 如果需要导航按钮 -->
-        <div class="swiper-button-prev"></div>
-        <div class="swiper-button-next"></div>
-      </div>
-    </div>
-
-    <!-- DJI Dock -->
-    <div id="djiDock" class="container-fuild">
-      <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>
-      </div>
-    </div>
-    <!-- 您身边的无人机解决方案专家 -->
-    <div id="contactUs" class="container-fuild text-center">
-      <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>
-    </div>
-    <!-- 为什么选择我们 -->
-    <div id="whyChooseUs" class="conatiner-fuild">
-      <div class="container">
-        <div class="whyChooseUs-title text-center">
-          <p>为什么选择我们的服务</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>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Swiper from "swiper";
-import {WOW} from 'wowjs';
-
-export default {
-  name: "HomePage",
-  data() {
-    return {
-      swiperList: [
-        {
-          img: require("@/assets/img/banner-home.jpg"),
-          path: "",
-          title: '上海展域航空技术有限公司',
-          content: '您身边的无人机解决方案专家',
-        },
-        {
-          img: require("@/assets/img/banner-dock-black.jpg"),
-          path: "",
-          title: '大疆机场2',
-          content: '轻担重任',
-        },
-        {
-          img: require("@/assets/img/banner-m350rtk.jpg"),
-          // video: require("@/assets/video/m350rtk.webm"),
-          path: "",
-          title: '大疆经纬 M350 RTK',
-          content: '满载实力，一往无前',
-        }
-      ],
-
-      serverList: [
-        {
-          logo: require("@/assets/img/tel.png"),
-          title: "售前服务",
-          content: "<p>由专业客服提供工作日全天人工服务负责疑难问题和故障受理</p>"
-        },
-        {
-          logo: require("@/assets/img/computer.png"),
-          title: "售后响应",
-          content: "<p>利用远程工具，故障产生后2小时内线上响应协助客户进行调试、解决故障</p>"
-        },
-        {
-          logo: require("@/assets/img/skill.png"),
-          title: "研发优势",
-          content: "<p>专业的技术工程师，负责提供解决方案和受理及定制化开发服务</p>"
-        }
-      ]
-    };
-  },
-  mounted() {
-    /* banner-swiper */
-    new Swiper(".banner-swiper", {
-      loop: true, // 循环模式选项
-      effect: 'fade',
-      //自动播放
-      autoplay: {
-        delay: 3000,
-        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
-    });
-
-    /* wowjs动画 */
-    var wow = new WOW({
-      boxClass: 'wow',
-      animateClass: 'animated',
-      offset: 0,
-      mobile: true,
-      live: true
-    })
-    wow.init();
-  }
-};
-</script>
-<style scoped>
-/* 整体盒子 */
-#HomePage {
-  width: 100%;
-}
-
-/* 轮播图 */
-#swiper {
-
-}
-
-#swiper .banner-swiper {
-  width: 100%;
-  height: auto;
-}
-
-#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;
-  width: 100%;
-  height: 100%;
-  color: #fff;
-  background: rgba(51, 51, 51, 0.534);
-  text-align: center;
-  line-height: 80px;
-}
-
-#swiper .banner-swiper .swiper-slide-title > h1 {
-  font-size: 36px;
-  margin-top: 12%;
-}
-
-#swiper .banner-swiper .swiper-slide-title > p {
-  font-size: 18px;
-  margin-top: 1%;
-  font-weight: 700;
-}
-
-/* Dji */
-#djiDock {
-  margin: 20px 0 30px;
-  transition: all ease 0.6s;
-  box-sizing: border-box;
-}
-
-#djiDock .djiDock-title {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ccc;
-}
-
-#djiDock p {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 360;
-  font-size: 14px;
-  //color: #333; color: #2f2f2f; line-height: 2.2rem;
-}
-
-/* 联系我们 */
-#contactUs {
-  color: #fff;
-  height: 280px;
-  background: url("../assets/img/contact_us_bg.jpg") 0 0 no-repeat;
-  background-size: 100% 100%;
-  transition: all ease 0.6s;
-}
-
-#contactUs .contactUs-container {
-  padding-top: 50px;
-}
-
-#contactUs .contactUs-container button {
-  width: 300px;
-  height: 50px;
-  margin-top: 40px;
-}
-
-/* 为什么选择我们 */
-#whyChooseUs {
-  padding: 40px;
-}
-
-#whyChooseUs .whyChooseUs-title {
-  margin-bottom: 40px;
-}
-
-#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
-  font-size: 24px;
-  font-weight: 500;
-}
-
-#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
-  font-size: 14px;
-}
-
-#whyChooseUs .server-block {
-  padding: 50px 20px;
-  border: 1px solid #ccc;
-  border-bottom: 5px solid #ccc;
-}
-
-#whyChooseUs .server-block img {
-  width: 48px;
-  height: 48px;
-}
-
-#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-block > div {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 360;
-  font-size: 14px;
-  line-height: 2.2rem;
-  color: #ccc;
-}
-
-/* 媒体查询（手机） */
-@media screen and (max-width: 768px) {
-  #swiper {
-    height: auto;
-  }
-
-  #swiper .banner-swiper .swiper-slide-title > h1 {
-    font-size: 18px;
-    margin-top: 6%;
-  }
-
-  #swiper .banner-swiper .swiper-slide-title > p {
-    font-size: 13px;
-    //margin-top: 1%; font-weight: 700;
-  }
-
-  #djiDock {
-    padding: 20px;
-  }
-
-  #djiDock .djiDock-title {
-    font-size: 20px;
-  }
-
-  #djiDock p {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 360;
-    font-size: 13px;
-    color: #2f2f2f;
-    line-height: 2.2rem;
-  }
-
-
-  #contactUs {
-    height: 160px;
-    transition: all ease 0.6s;
-  }
-
-  #contactUs .contactUs-container {
-    padding-top: 0;
-  }
-
-  #contactUs .contactUs-container h1 {
-    font-size: 24px;
-  }
-
-  #contactUs .contactUs-container h3 {
-    font-size: 18px;
-  }
-
-  #contactUs .contactUs-container button {
-    width: 200px;
-    height: 30px;
-    margin-top: 30px;
-  }
-
-  #contactUs .contactUs-container .contactUs-contactWay span {
-    display: inline-block;
-    width: 28px;
-    height: 28px;
-    margin: 10px;
-  }
-
-  #whyChooseUs {
-    padding: 20px 0;
-    transition: all ease 0.6s;
-  }
-
-  #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
-    font-size: 20px;
-    font-weight: 700;
-  }
-
-  #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
-    font-size: 12px;
-  }
-
-  #whyChooseUs .server-block {
-    padding: 50px 0;
-    border: 1px solid #ccc;
-    border-bottom: 5px solid #ccc;
-  }
-
-  #whyChooseUs .server-block img {
-    width: 48px;
-    height: 48px;
-  }
-
-  #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-block > div {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 360;
-    font-size: 14px;
-    line-height: 2.2rem;
-    color: #ccc;
-  }
-}
-
-/* 媒体查询（平板） */
-@media screen and (min-width: 768px) and (max-width: 996px) {
-  #swiper {
-    height: auto;
-  }
-
-  #swiper .banner-swiper .swiper-slide-title > h1 {
-    font-size: 24px;
-    margin-top: 10%;
-  }
-
-  #swiper .banner-swiper .swiper-slide-title > p {
-    font-size: 13px;
-    //margin-top: 0; font-weight: 700;
-  }
-
-  #djiDock {
-    padding: 20px;
-  }
-
-  #djiDock .djiDock-title {
-    font-size: 30px;
-  }
-
-  #djiDock p {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 360;
-    font-size: 14px;
-    color: #2f2f2f;
-    line-height: 2.2rem;
-  }
-
-  #djiDock .djiDock-device {
-    font-size: 30px;
-    margin: 30px 0 15px;
-  }
-
-  #contactUs {
-    height: 300px;
-  }
-
-  #contactUs .contactUs-container {
-    padding-top: 50px;
-  }
-
-  #contactUs .contactUs-container h1 {
-    font-size: 30px;
-  }
-
-  #contactUs .contactUs-container h3 {
-    font-size: 20px;
-  }
-
-  #contactUs .contactUs-container button {
-    width: 300px;
-    height: 50px;
-    margin-top: 30px;
-  }
-
-  #contactUs .contactUs-container .contactUs-contactWay span {
-    display: inline-block;
-    width: 32px;
-    height: 32px;
-    margin: 15px;
-  }
-
-  #whyChooseUs {
-    padding: 20px 0;
-  }
-}
-</style>
+<template>
+  <div id="HomePage">
+    <!-- 轮播图 -->
+    <div id="swiper" class="container-fuild">
+      <div class="swiper-container banner-swiper">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
+            <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>
+          </div>
+        </div>
+        <!-- 如果需要分页器 -->
+        <div class="swiper-pagination"></div>
+        <!-- 如果需要导航按钮 -->
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+      </div>
+    </div>
+
+    <!-- DJI Dock -->
+    <div id="djiDock" class="container-fuild">
+      <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>
+      </div>
+    </div>
+    <!-- 您身边的无人机解决方案专家 -->
+    <div id="contactUs" class="container-fuild text-center">
+      <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>
+    </div>
+    <!-- 为什么选择我们 -->
+    <div id="whyChooseUs" class="conatiner-fuild">
+      <div class="container">
+        <div class="whyChooseUs-title text-center">
+          <p>为什么选择我们的服务</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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Swiper from "swiper";
+import {WOW} from 'wowjs';
+
+export default {
+  name: "HomePage",
+  data() {
+    return {
+      swiperList: [
+        {
+          img: require("@/assets/img/banner-home.jpg"),
+          path: "",
+          title: '上海展域航空技术有限公司',
+          content: '您身边的无人机解决方案专家',
+        },
+        {
+          img: require("@/assets/img/banner-dock-black.jpg"),
+          path: "",
+          title: '大疆机场2',
+          content: '轻担重任',
+        },
+        {
+          img: require("@/assets/img/banner-m350rtk.jpg"),
+          // video: require("@/assets/video/m350rtk.webm"),
+          path: "",
+          title: '大疆经纬 M350 RTK',
+          content: '满载实力，一往无前',
+        }
+      ],
+
+      serverList: [
+        {
+          logo: require("@/assets/img/tel.png"),
+          title: "售前服务",
+          content: "<p>由专业客服提供工作日全天人工服务负责疑难问题和故障受理</p>"
+        },
+        {
+          logo: require("@/assets/img/computer.png"),
+          title: "售后响应",
+          content: "<p>利用远程工具，故障产生后2小时内线上响应协助客户进行调试、解决故障</p>"
+        },
+        {
+          logo: require("@/assets/img/skill.png"),
+          title: "研发优势",
+          content: "<p>专业的技术工程师，负责提供解决方案和受理及定制化开发服务</p>"
+        }
+      ]
+    };
+  },
+  mounted() {
+    /* banner-swiper */
+    new Swiper(".banner-swiper", {
+      loop: true, // 循环模式选项
+      effect: 'fade',
+      //自动播放
+      autoplay: {
+        delay: 3000,
+        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
+    });
+
+    /* wowjs动画 */
+    var wow = new WOW({
+      boxClass: 'wow',
+      animateClass: 'animated',
+      offset: 0,
+      mobile: true,
+      live: true
+    })
+    wow.init();
+  }
+};
+</script>
+<style scoped>
+/* 整体盒子 */
+#HomePage {
+  width: 100%;
+}
+
+/* 轮播图 */
+#swiper {
+  width: 100%;
+  height: 500px;
+  margin: 0;
+  padding: 0;
+}
+
+#swiper .banner-swiper {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#swiper .banner-swiper .swiper-slide {
+  width: 100%;
+  height: 100%;
+}
+
+#swiper .banner-swiper .swiper-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-size: cover;
+}
+
+#swiper .banner-swiper .swiper-slide-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999999999;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background: rgba(51, 51, 51, 0.534);
+  text-align: center;
+  line-height: 80px;
+}
+
+#swiper .banner-swiper .swiper-slide-title > h1 {
+  font-size: 36px;
+  margin-top: 12%;
+}
+
+#swiper .banner-swiper .swiper-slide-title > p {
+  font-size: 18px;
+  margin-top: 1%;
+  font-weight: 700;
+}
+
+/* Dji */
+#djiDock {
+  margin: 20px 0 30px;
+  transition: all ease 0.6s;
+  box-sizing: border-box;
+}
+
+#djiDock .djiDock-title {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ccc;
+}
+
+#djiDock p {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 360;
+  font-size: 14px;
+  //color: #333; color: #2f2f2f; line-height: 2.2rem;
+}
+
+/* 联系我们 */
+#contactUs {
+  color: #fff;
+  height: 280px;
+  background: url("../assets/img/contact_us_bg.jpg") 0 0 no-repeat;
+  background-size: 100% 100%;
+  transition: all ease 0.6s;
+}
+
+#contactUs .contactUs-container {
+  padding-top: 50px;
+}
+
+#contactUs .contactUs-container button {
+  width: 300px;
+  height: 50px;
+  margin-top: 40px;
+}
+
+/* 为什么选择我们 */
+#whyChooseUs {
+  padding: 40px;
+}
+
+#whyChooseUs .whyChooseUs-title {
+  margin-bottom: 40px;
+}
+
+#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
+  font-size: 14px;
+}
+
+#whyChooseUs .server-block {
+  padding: 50px 20px;
+  border: 1px solid #ccc;
+  border-bottom: 5px solid #ccc;
+}
+
+#whyChooseUs .server-block img {
+  width: 48px;
+  height: 48px;
+}
+
+#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-block > div {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 360;
+  font-size: 14px;
+  line-height: 2.2rem;
+  color: #ccc;
+}
+
+/* 媒体查询（手机） */
+@media screen and (max-width: 768px) {
+  #swiper {
+    height: 300px;
+  }
+
+  #swiper .banner-swiper .swiper-slide-title > h1 {
+    font-size: 18px;
+    margin-top: 6%;
+  }
+
+  #swiper .banner-swiper .swiper-slide-title > p {
+    font-size: 13px;
+    //margin-top: 1%; font-weight: 700;
+  }
+
+  #djiDock {
+    padding: 20px;
+  }
+
+  #djiDock .djiDock-title {
+    font-size: 20px;
+  }
+
+  #djiDock p {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 360;
+    font-size: 13px;
+    color: #2f2f2f;
+    line-height: 2.2rem;
+  }
+
+
+  #contactUs {
+    height: 160px;
+    transition: all ease 0.6s;
+  }
+
+  #contactUs .contactUs-container {
+    padding-top: 0;
+  }
+
+  #contactUs .contactUs-container h1 {
+    font-size: 24px;
+  }
+
+  #contactUs .contactUs-container h3 {
+    font-size: 18px;
+  }
+
+  #contactUs .contactUs-container button {
+    width: 200px;
+    height: 30px;
+    margin-top: 30px;
+  }
+
+  #contactUs .contactUs-container .contactUs-contactWay span {
+    display: inline-block;
+    width: 28px;
+    height: 28px;
+    margin: 10px;
+  }
+
+  #whyChooseUs {
+    padding: 20px 0;
+    transition: all ease 0.6s;
+  }
+
+  #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
+    font-size: 12px;
+  }
+
+  #whyChooseUs .server-block {
+    padding: 50px 0;
+    border: 1px solid #ccc;
+    border-bottom: 5px solid #ccc;
+  }
+
+  #whyChooseUs .server-block img {
+    width: 48px;
+    height: 48px;
+  }
+
+  #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-block > div {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 360;
+    font-size: 14px;
+    line-height: 2.2rem;
+    color: #ccc;
+  }
+}
+
+/* 媒体查询（平板） */
+@media screen and (min-width: 768px) and (max-width: 996px) {
+  #swiper {
+    height: 400px;
+  }
+
+  #swiper .banner-swiper .swiper-slide-title > h1 {
+    font-size: 24px;
+    margin-top: 10%;
+  }
+
+  #swiper .banner-swiper .swiper-slide-title > p {
+    font-size: 13px;
+    //margin-top: 0; font-weight: 700;
+  }
+
+  #djiDock {
+    padding: 20px;
+  }
+
+  #djiDock .djiDock-title {
+    font-size: 30px;
+  }
+
+  #djiDock p {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 360;
+    font-size: 14px;
+    color: #2f2f2f;
+    line-height: 2.2rem;
+  }
+
+  #djiDock .djiDock-device {
+    font-size: 30px;
+    margin: 30px 0 15px;
+  }
+
+  #contactUs {
+    height: 300px;
+  }
+
+  #contactUs .contactUs-container {
+    padding-top: 50px;
+  }
+
+  #contactUs .contactUs-container h1 {
+    font-size: 30px;
+  }
+
+  #contactUs .contactUs-container h3 {
+    font-size: 20px;
+  }
+
+  #contactUs .contactUs-container button {
+    width: 300px;
+    height: 50px;
+    margin-top: 30px;
+  }
+
+  #contactUs .contactUs-container .contactUs-contactWay span {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin: 15px;
+  }
+
+  #whyChooseUs {
+    padding: 20px 0;
+  }
+}
+</style>