50 lines
2.0 KiB
Vue
50 lines
2.0 KiB
Vue
<template>
|
|
<div class="space-y-3">
|
|
<el-scrollbar max-height="320px">
|
|
<div class="space-y-2 pr-1">
|
|
<div
|
|
v-for="(item, index) in notices"
|
|
:key="index"
|
|
class="group rounded-lg border border-black/10 bg-white/70 p-3 transition-all duration-200 hover:-translate-y-0.5 hover:border-black/20 hover:shadow-sm dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-white/20"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<span class="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full" :class="item.dotClass" />
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<span class="rounded-md px-2 py-0.5 text-[11px] font-semibold leading-4" :class="item.tagClass">
|
|
{{ item.typeTitle }}
|
|
</span>
|
|
<span class="shrink-0 text-[11px] text-muted-foreground">{{ item.time }}</span>
|
|
</div>
|
|
<el-tooltip effect="light" :content="item.title" placement="top">
|
|
<p class="mt-1.5 line-clamp-2 text-sm text-base-text">
|
|
{{ item.title }}
|
|
</p>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import { getInfoList } from '@/modules/announcement/api/info'
|
|
const notices = ref([])
|
|
onMounted(async () => {
|
|
const response = await getInfoList({ page: 1, pageSize: 8, status: 1 })
|
|
if (response.code !== 0) return
|
|
notices.value = (response.data?.list || []).map((item) => ({
|
|
typeTitle: item.type === 2 ? '公告' : '通知',
|
|
time: item.CreatedAt ? new Date(item.CreatedAt).toLocaleDateString('zh-CN') : '',
|
|
title: item.title,
|
|
dotClass: 'bg-cyan-500',
|
|
tagClass: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/40 dark:text-cyan-200'
|
|
}))
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|