浅念
96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<template>
|
|
<view>
|
|
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000"
|
|
backgroundColor="#fff" :statusBar="true" title="消息通知"></uni-nav-bar>
|
|
<view class="container">
|
|
<!-- 消息通知列表 -->
|
|
<u-list>
|
|
<u-list-item v-for="(item, index) in messages" :key="index">
|
|
<view class="message-item">
|
|
<view class="message-header">
|
|
<view class="message-title">新客户录入</view>
|
|
<view class="message-time">{{ item.time }}</view>
|
|
</view>
|
|
<view class="message-content">
|
|
<text>{{ item.content }}</text>
|
|
<text class="message-link">请点击查看>></text>
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
messages: [{
|
|
time: '2025-01-01 10:15:02',
|
|
content: '亲爱的用户您好，您有新的客户资源录入，此资源为平台分配。'
|
|
},
|
|
{
|
|
time: '2025-01-01 10:15:02',
|
|
content: '亲爱的用户您好，您有新的客户资源录入，此资源为平台分配。'
|
|
},
|
|
{
|
|
time: '2025-01-01 10:15:02',
|
|
content: '亲爱的用户您好，您有新的客户资源录入，此资源为平台分配。'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// 点击消息项
|
|
handleMessageClick(index) {
|
|
uni.showToast({
|
|
title: `点击了第 ${index + 1} 条消息`,
|
|
icon: 'none'
|
|
});
|
|
},
|
|
leftClick(){
|
|
uni.navigateBack({})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 20px;
|
|
|
|
}
|
|
|
|
.message-item {
|
|
background-color: #F6F6F6;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.message-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.message-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
.message-content {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.message-link {
|
|
color: #007aff;
|
|
margin-top: 5px;
|
|
}
|
|
</style> |