<template> <view class="container"> <VNavigationBar background-color="#fff" title-color="#333" title="消息中心"></VNavigationBar> <view class="body"> <view class="messageList"> <view v-for="(item, index) in messageList" :key="index" class="messageItem"> <image class="messageIcon" src="../../static/icons/message-icon1.png" mode="aspectFit"></image> <view class="messageContent"> <view class="messageTitle">系统通知</view> <view class="messageContent_content">节日快乐!在这美好的时刻,送上我最真挚的祝福:愿你的每一天都充满阳光和欢笑,每一步都走向成功和辉煌。</view> </view> </view> </view> </view> </view> </template> <script> import VNavigationBar from '@/components/VNavigationBar.vue' export default { components: { VNavigationBar, }, data() { return { messageList: [{}, {}] }; } } </script> <style lang="less" scoped> .container { height: 100%; display: flex; flex-direction: column; .body { flex: 1; height: 0; overflow: auto; } .messageList { padding: 0 32rpx; } .messageItem { padding: 30rpx 0; display: flex; align-items: center; column-gap: 20rpx; border-bottom: 1rpx solid #EEEEEE; .messageIcon { width: 80rpx; height: 80rpx; } .messageContent { flex: 1; width: 0; } .messageTitle { font-weight: bold; font-size: 32rpx; color: #333333; } .messageContent_content { font-weight: 500; font-size: 28rpx; color: #858BA0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } } </style>