<script setup lang="ts">
    import MenuHeader from '@/components/Layout/MenuHeader.vue'

    const options = ['全部消息', '应急响应', '预警信号', '临灾警报', '服务材料', '重要天气']

    const value = ref<string>('全部消息')

    onMounted(() => {})
</script>

<template>
    <view class="bg-#fff">
        <!-- 头部 -->
        <!-- <Header title="消息" /> -->
        <!-- tab -->
        <view class="bg-#fff box-shadow-bottom pt-3.5 pl-3.2 pb-2.5">
            <fui-data-tag
                :modelValue="value"
                :options="options"
                background="#F9FAFD"
                activeColor="#fff"
                defaultBorderColor="#1890FF"
                activeBgColor="linear-gradient(94deg, #1890FF 0%, #377ED9 100%)"
                width="216"
                gap="25"
            />
        </view>
        <!-- 内容 -->
        <view class="bg-#fff p-3.5 pt-0 mt-3">
            <MenuHeader title="全部消息" :otherTitleVis="false">
                <template #content>
                    <text class="font-500 text-28 text-#1890FF">
                        <FuiIcon custom-prefix="font_family" name="icon-read" size="36" color="#1890FF" />
                        全部阅毕
                    </text>
                </template>
            </MenuHeader>
            <view v-for="item in 6" :key="item" class="flex-center pt-3 pb-2 b-#EEEEEE b-solid b-0 b-b-2">
                <view class="pr-5 text-left">
                    <text class="text-28 font-550 text-#333333"> 湖南省长沙市启动洪涝灾害 II 级 应急响应 </text>
                    <view class="lh-10">
                        <text class="b-rd-20 p-1 pl-2 pr-2 bg-#1890FF1A text-#1890FFFF text-24">未阅</text>
                        <text class="text-#999999FF text-24 ml-2">2023/05/23 14:00</text>
                    </view>
                </view>
                <view>
                    <image src="/static/images/message/fireHazard.png" class="w-204 h-154" />
                </view>
            </view>
        </view>
    </view>
</template>
