118 lines
2.3 KiB
Vue
118 lines
2.3 KiB
Vue
<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>
|