<template>
    <view class="page">
        <scroll-view class="content" scroll-y>
            <!-- 有数据时的列表（当前为空） -->
            <view v-if="list.length" class="list">
                <view v-for="(item, index) in list" :key="index" class="list-item">
                    <view class="item-body">
                        <view class="item-title">{{ item.title }}</view>
                        <view class="item-desc">{{ item.desc }}</view>
                        <view class="item-time">{{ item.time }}</view>
                    </view>
                </view>
            </view>

            <!-- 无数据 -->
            <view v-else class="empty-box">
                <image class="empty-icon" src="https://eshangtech.com/cyy_DIB/noNewsIcon.png" />
                <text class="empty-text">暂无通知</text>
                <text class="empty-sub">你当前没有新的消息通知</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [] // 空数据
        };
    }
};
</script>

<style scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f5f6f8;
}

.nav {
    height: 44px;
    padding-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    font-weight: bold;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.nav-title {
    font-size: 16px;
    color: #333;
}

.content {
    flex: 1;
}

/* --- 空状态 --- */
.empty-box {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
}

.empty-icon {
    width: 120rpx;
    height: 120rpx;
    /* background: #e8ecf3; */
    /* border-radius: 12px; */
    margin-bottom: 20px;
}

.empty-text {
    font-size: 16px;
    color: #666;
}

.empty-sub {
    font-size: 14px;
    color: #999;
    margin-top: 6px;
}

/* --- 列表样式（可留着以后用） --- */
.list-item {
    background: #fff;
    margin: 10px 12px;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.item-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

.item-desc {
    font-size: 14px;
    color: #666;
    margin-top: 6px;
}

.item-time {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}
</style>
