36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import type { Article } from '@/types/article'
|
|
import { View, Text, Image } from '@tarojs/components'
|
|
import './index.less'
|
|
|
|
interface ImageGridCardProps {
|
|
article: Article
|
|
}
|
|
|
|
export default function ImageGridCard({ article }: ImageGridCardProps) {
|
|
const images = article.images.slice(0, 3)
|
|
|
|
return (
|
|
<View className='article-card image-grid-card'>
|
|
<View className='card-title'>{article.title}</View>
|
|
<View className='card-images'>
|
|
{images.map((img, index) => (
|
|
<Image
|
|
key={index}
|
|
className='grid-image'
|
|
src={img}
|
|
mode='aspectFill'
|
|
/>
|
|
))}
|
|
</View>
|
|
<View className='card-meta'>
|
|
<Text className='meta-source'>{article.source}</Text>
|
|
<Text className='meta-time'>{article.time}</Text>
|
|
<Text className='meta-read'>{article.readCount}阅读</Text>
|
|
{typeof article.commentCount === 'number' && (
|
|
<Text className='meta-comment'>💬 {article.commentCount}</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|