pendulum/web/src/views/Home/index.vue

<script setup lang="ts">
import { ref } from 'vue'
import Section from '@/components/Section/index.vue'
import ProductCard from '@/components/ProductCard/index.vue'

const supportedProducts = ref([
  { name: 'DJI Dock 3', image: '//devcn.djicdn.com/img/74c76dc.png' },
  { name: 'Matrice 4D/4TD', image: '//devcn.djicdn.com/img/df96c61.png' },
  { name: 'DJI Dock 2', image: '//devcn.djicdn.com/img/85b4ea2.png' },
  { name: 'Matrice 3D/3TD', image: '//devcn.djicdn.com/img/e5bc389.png' },
  { name: 'DJI Dock', image: '//devcn.djicdn.com/img/ae989b7.png' },
  { name: 'Matrice 4E/4T', image: '//devcn.djicdn.com/img/6d906ff.png' },
  { name: 'Matrice 300 RTK', image: '//devcn.djicdn.com/img/fb310a2.png' },
  { name: 'Matrice 30 Series', image: '//devcn.djicdn.com/img/d1a58e8.png' },
  { name: 'DJI Mavic 3 Enterprise Series', image: '//devcn.djicdn.com/img/0d698cc.png' },
  { name: 'Matrice 350 RTK', image: '//devcn.djicdn.com/img/e75bd33.jpg' },
])
</script>

<template>
  <main>
    <div class="api-overview-page">
      <!-- 头部区域 -->
      <Section
        heroSection
        dark
        centered
        bgImage="//devcn.djicdn.com/img/6997ab1.png"
        title="低门槛接入三方云平台"
        subtitle="无需重复开发APP，即可让无人机通过DJI Pilot2或大疆机场快速接入三方云平台"
      />

      <!-- 核心理念 -->
      <Section
        title="核心理念"
        subtitle="上云API基于业界标准的MQTT、HTTPS、Websocket协议，对无人机业务功能集充分抽象，隔离了复杂的无人机底层业务逻辑，让开发者聚焦在场景业务实现上。同时，上云API可以连接到任意网络，只要DJI Pilot2或大疆机场可以访问三方云平台即可工作"
      >
        <img src="//devcn.djicdn.com/img/046ccbe.png" class="section-img" alt="Core Concept">
      </Section>

      <!-- 方案架构 -->
      <Section title="方案架构">
        <img src="//devcn.djicdn.com/img/baca5bf.jpg" class="section-img" alt="Solution Architecture">
      </Section>

      <!-- 支持的产品 -->
      <Section title="支持的DJI产品">
        <div class="supported-products">
          <ProductCard
            v-for="product in supportedProducts"
            :key="product.name"
            :title="product.name"
            :image="product.image"
            class="product-item"
          />
        </div>
      </Section>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.api-overview-page {
  .section-img {
    max-width: 100%;
    height: auto;
  }

  .supported-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;

    .product-item {
      :deep(.product-card) {
        flex-direction: column;
        text-align: center;

        img {
          width: 100%;
          height: auto;
          margin-bottom: 10px;
        }

        .product-info {
          h4 {
            font-size: 0.9rem;
          }
        }
      }
    }
  }
}
</style>