components/ui/FeatureCard.vue

<script setup lang="ts">
import type { Component } from 'vue'

/**
 * 特色卡片组件
 * 展示图标、标题和描述
 */
interface Props {
  icon: Component
  title: string
  description: string
}

defineProps<Props>()
</script>

<template>
  <div class="p-8 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
    <div class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center text-primary mb-6">
      <component :is="icon" class="w-6 h-6" />
    </div>
    <h3 class="text-xl font-bold text-gray-900 mb-3">{{ title }}</h3>
    <p class="text-gray-500 leading-relaxed">{{ description }}</p>
  </div>
</template>

<style scoped>
.text-primary {
  color: #1890ff;
}
</style>