skytek_xinliang
56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<template>
|
|
<v-card class="rounded-lg" elevation="2" v-bind="$attrs">
|
|
<v-card-title class="d-flex align-center py-4 px-4 border-b">
|
|
<span class="font-weight-bold">{{ title }}</span>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" density="compact" variant="text" @click="$emit('view-more')">
|
|
{{ viewMoreText }}
|
|
</v-btn>
|
|
</v-card-title>
|
|
<v-list class="pa-0" lines="two">
|
|
<v-list-item
|
|
v-for="(item, index) in announcements"
|
|
:key="index"
|
|
class="border-b"
|
|
@click="$emit('item-click', item)"
|
|
>
|
|
<template #prepend>
|
|
<v-avatar :color="item.avatarColor || 'primary'" size="40" variant="tonal">
|
|
<span v-if="!item.avatarSrc" class="text-h6">{{ item.author[0] }}</span>
|
|
<v-img v-else :src="item.avatarSrc"></v-img>
|
|
</v-avatar>
|
|
</template>
|
|
|
|
<v-list-item-title class="font-weight-medium mb-1">
|
|
{{ item.title }}
|
|
</v-list-item-title>
|
|
|
|
<v-list-item-subtitle>
|
|
<span class="text-caption text-grey mr-2">{{ item.author }}</span>
|
|
<span class="text-caption text-grey">{{ item.time }}</span>
|
|
</v-list-item-subtitle>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
announcements: Array<{
|
|
title: string
|
|
author: string
|
|
time: string
|
|
avatarSrc?: string | null
|
|
avatarColor?: string
|
|
}>
|
|
viewMoreText?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
viewMoreText: '更多',
|
|
})
|
|
|
|
defineEmits(['view-more', 'item-click'])
|
|
</script>
|