nuxt-showcase / components /ui /FeatureCard.vue
3v324v23's picture
initial commit: Nuxt showcase app with enhanced functionality
ef4ce16
raw
history blame contribute delete
733 Bytes
<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>