zyuas.com/src/view/HomePage.vue

<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">
              <div class="slide-content">
                <h1 class="animate-title">{{ item.title }}</h1>
                <p class="animate-subtitle">{{ item.content }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </div>
        <div class="swiper-button-next">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </div>
      </div>
    </div>

    <!-- 解决方案列表索引 -->
    <div id="solutionsIndex" class="l-container-fluid l-section">
      <div class="container">
        <div class="section-header">
          <div class="section-tag">
            <span class="tag-dot"></span>
            <span>SOLUTIONS</span>
          </div>
          <h2 class="section-title">无人机行业解决方案</h2>
          <p class="section-subtitle">Professional Solutions</p>
        </div>

        <div class="solutions-grid">
          <router-link
            v-for="(item, index) in solutionsList"
            :key="index"
            :to="item.path"
            class="solution-card"
          >
            <div class="solution-image">
              <img :src="item.image" :alt="item.title">
              <div class="solution-overlay">
                <i class="solution-icon glyphicon glyphicon-link"></i>
              </div>
            </div>
            <div class="solution-content">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </router-link>
        </div>

        <div class="text-center">
          <a href="#/solutions" class="btn-view-all">
            查看更多解决方案
            <i class="glyphicon glyphicon-chevron-right"></i>
          </a>
        </div>
      </div>
    </div>

    <!-- DJI Dock -->
    <div id="djiDock" class="l-container-fluid l-section">
      <div class="container">
        <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>自2025年以来,随着人工智能和大语言模型的蓬勃兴起，展域航空为用户开发创造了一系列基于大模型的企业级智能体，专注于为企业提供私有化、安全、可定制的AI产品服务。并在监理行业、测绘行业取得多项成功案例和行业荣誉。</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">50+</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>

    <!-- 您身边的无人机与AI解决方案专家 -->
    <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">
        <div class="glass-card">
          <h1 class="contact-title">上海展域航空技术有限公司</h1>
          <p class="contact-subtitle">您身边的无人机与AI解决方案专家</p>
          <div class="contact-actions">
            <router-link to="/contactus" class="btn-primary">
              <span>联系我们</span>
              <i class="arrow-right"></i>
            </router-link>
            <router-link to="/solutions" class="btn-secondary">
              <span>了解更多</span>
            </router-link>
          </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">
          <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 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>
      </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: '您身边的无人机与AI解决方案专家',
        },
        {
          img: require("@/assets/img/banner-dock-black.jpg"),
          path: "",
          title: '大疆机场 2',
          content: '轻担重任',
        },
        {
          img: require("@/assets/img/banner-m350rtk.jpg"),
          path: "",
          title: '大疆经纬 M350 RTK',
          content: '满载实力，一往无前',
        }
      ],

      // 解决方案列表
      solutionsList: [
        {
          path: '/solutions/surveying',
          title: '基础测绘',
          description: '快速进行大范围二维、三维建模，生成地形数据，降低外业成本',
          image: require('@/assets/img/service1.jpg')
        },
        {
          path: '/solutions/building',
          title: '建筑工程',
          description: '房屋建筑业（房建）和土木工程建筑业（基建）领域应用',
          image: require('@/assets/img/service2.jpg')
        },
        {
          path: '/solutions/safety',
          title: '安全生产',
          description: '提供可见光或红外热成像数据，全天候自动化安全巡检',
          image: require('@/assets/img/service3.jpg')
        },
        {
          path: '/solutions/emergency-rescue',
          title: '应急救援',
          description: '救援队伍使用无人机通过空中视角对灾情进行评估、研判',
          image: require('@/assets/img/service4.jpg')
        }
      ],

      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: 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,
      observeParents: true
    });

    /* wowjs 动画 */
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    })
    wow.init();
  }
};
</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 {
  width: 100%;
  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-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  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 .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 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 {
  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;
  display: flex;
  align-items: center;
  justify-content: center;
}

#swiper .banner-swiper .swiper-button-next:hover,
#swiper .banner-swiper .swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

/* 箭头图标样式 */
#swiper .banner-swiper .swiper-button-next svg,
#swiper .banner-swiper .swiper-button-prev svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: none;
}

#swiper .banner-swiper .swiper-button-next:hover svg,
#swiper .banner-swiper .swiper-button-prev:hover svg {
  stroke: #fff;
}

/* 隐藏 Swiper 默认的 ::after 箭头 */
#swiper .banner-swiper .swiper-button-next::after,
#swiper .banner-swiper .swiper-button-prev::after {
  content: '';
  display: none;
}

/* ===== 解决方案列表索引 ===== */
#solutionsIndex {
  background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
  padding: 80px 0;
}

#solutionsIndex .section-header {
  text-align: center;
  margin-bottom: 60px;
}

#solutionsIndex .section-title {
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 16px 0 8px;
}

#solutionsIndex .section-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: var(--font-weight-regular);
  letter-spacing: 1px;
}

#solutionsIndex .solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

#solutionsIndex .solution-card {
  display: block;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition-bounce);
  text-decoration: none;
  color: inherit;
}

#solutionsIndex .solution-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg), var(--glow-blue);
}

#solutionsIndex .solution-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

#solutionsIndex .solution-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

#solutionsIndex .solution-card:hover .solution-image img {
  transform: scale(1.1);
}

#solutionsIndex .solution-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 115, 190, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#solutionsIndex .solution-card:hover .solution-overlay {
  opacity: 1;
}

#solutionsIndex .solution-icon {
  color: #fff;
  font-size: 32px;
}

#solutionsIndex .solution-content {
  padding: 25px;
}

#solutionsIndex .solution-content h3 {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 12px;
}

#solutionsIndex .solution-content p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-tertiary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#solutionsIndex .btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-base);
  margin-top: 20px;
  box-shadow: var(--shadow-sm);
}

#solutionsIndex .btn-view-all:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

#solutionsIndex .btn-view-all i {
  font-size: 12px;
}

/* ===== DJI Dock - 现代化布局 ===== */
#djiDock {
  padding: 100px 0;
  background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
}

#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 .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: 16px;
  color: #666;
  margin-top: 12px;
  font-weight: 400;
}

#djiDock .dock-desc p {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 20px;
}

#djiDock .dock-stats {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #e0e0e0;
}

#djiDock .stat-item {
  text-align: center;
}

#djiDock .stat-number {
  font-size: 32px;
  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;
}

#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;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#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);
  color: #1e3c72;
}

#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);
  color: #fff;
}

/* ===== 为什么选择我们 - 玻璃拟态卡片 ===== */
#whyChooseUs {
  padding: 100px 0;
  background: #fafbfc;
}

#whyChooseUs .whyChooseUs-title {
  margin-bottom: 60px;
}

#whyChooseUs .main-title {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 16px 0 8px;
}

#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-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-card:hover .card-icon {
  background: var(--primary-gradient);
  transform: scale(1.1) rotate(5deg);
}

#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-card:hover .card-icon img {
  filter: brightness(0) saturate(100%) invert(100%);
}

#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: 1.8;
  color: #666;
  text-align: center;
  margin-bottom: 20px;
}

#whyChooseUs .server-card .card-desc p {
  margin: 0;
}

#whyChooseUs .server-card .card-arrow {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

#whyChooseUs .server-card .card-arrow i {
  color: var(--primary-color);
  font-size: 18px;
}

#whyChooseUs .server-card:hover .card-arrow {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 技术优势区域 ===== */
#techAdvantages {
  position: relative;
  overflow: hidden;
  background: #0f172a;
}

#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;
}

#techAdvantages .main-title,
#techAdvantages .section-tag span {
  color: #fff;
}

#techAdvantages .sub-title {
  color: rgba(255, 255, 255, 0.5);
}

#techAdvantages .tech-grid {
  position: relative;
  z-index: 10;
}

#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;
}

#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);
}

#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;
}

#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) {
  #solutionsIndex {
    padding: 60px 0;
  }

  #solutionsIndex .section-title {
    font-size: 28px;
  }

  #solutionsIndex .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  #djiDock .dock-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  #djiDock .dock-image {
    text-align: center;
  }

  #djiDock .dock-title {
    font-size: 28px;
  }

  #contactUs .glass-card {
    padding: 40px 50px;
  }

  #contactUs .contact-title {
    font-size: 28px;
  }

  #contactUs .contact-actions {
    flex-direction: column;
    gap: 12px;
  }

  #whyChooseUs .server-card {
    margin: 10px;
  }
}

/* 手机端 */
@media screen and (max-width: 768px) {
  #solutionsIndex {
    padding: 40px 0;
  }

  #solutionsIndex .section-title {
    font-size: 24px;
  }

  #solutionsIndex .section-subtitle {
    font-size: 14px;
  }

  #solutionsIndex .solutions-grid {
    grid-template-columns: 1fr;
  }

  #solutionsIndex .btn-view-all {
    padding: 12px 24px;
    font-size: 14px;
  }

  #swiper .banner-swiper .swiper-slide-title .slide-content {
    padding: 20px;
    margin: 0 20px;
  }

  #swiper .banner-swiper .swiper-slide-title h1 {
    font-size: 20px;
  }

  #swiper .banner-swiper .swiper-slide-title p {
    font-size: 14px;
  }

  #djiDock {
    padding: 60px 20px;
  }

  #djiDock .dock-title {
    font-size: 24px;
  }

  #djiDock .dock-desc p {
    font-size: 14px;
  }

  #djiDock .dock-stats {
    flex-wrap: wrap;
    justify-content: center;
  }

  #contactUs {
    padding: 80px 20px;
  }

  #contactUs .glass-card {
    padding: 30px;
    width: 100%;
  }

  #contactUs .contact-title {
    font-size: 22px;
  }

  #contactUs .contact-subtitle {
    font-size: 14px;
  }

  #whyChooseUs,
  #techAdvantages {
    padding: 60px 20px;
  }

  #whyChooseUs .main-title,
  #techAdvantages .main-title {
    font-size: 26px;
  }

  #whyChooseUs .server-card,
  #techAdvantages .tech-card {
    margin: 10px 0;
  }
}
</style>