<template>
    <div class="h-full w-full bg-[#F5F5F5] flex flex-col">
        <div class="bg-gradient-to-b from-[#c9e9ea] to-[#f5f5f5] to-100% h-[288rpx] flex justify-between">
            <img src="/images/mine/bg-msg.png" alt="bg-notice" class="w-[410rpx] h-[126rpx] ml-[30rpx] mt-[60rpx]">
            <img src="/images/mine/bg-notice.png" alt="bg-notice-title" class="w-[200rpx] h-[248rpx] mt-[28rpx]">
        </div>

        <ul class="mx-[30rpx] mt-[-60rpx] overflow-y-auto">
            <li v-for="item in noticeList" :key="item.id" class="p-[30rpx] rounded-[20rpx] bg-white mb-[30rpx]">
                <p class="text-[#333] text-[36rpx] font-600">{{ item.title }}</p>
                <p class="mt-[20rpx] text-[#999] text-[32rpx] text-end">{{ item.publishDate }}</p>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { useGetNoticeList } from "@/composables/useNotice";

const { noticeList } = useGetNoticeList()
</script>