Mini-Program/pages/message-list/index.wxml

<view class="container">
  <view class="message-header">
    <text class="message-title">消息列表</text>
  </view>
  
  <view class="message-list">
    <view class="message-item" bindtap="onMessageTap">
      <view class="avatar">
        <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
      </view>
      <view class="message-info">
        <view class="message-name-time">
          <text class="message-name">系统通知</text>
          <text class="message-time">刚刚</text>
        </view>
        <text class="message-content">您有一条新的系统通知</text>
      </view>
      <view class="unread-badge">1</view>
    </view>
    
    <view class="message-item" bindtap="onMessageTap">
      <view class="avatar">
        <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
      </view>
      <view class="message-info">
        <view class="message-name-time">
          <text class="message-name">客服中心</text>
          <text class="message-time">5分钟前</text>
        </view>
        <text class="message-content">您好，请问有什么可以帮助您的？</text>
      </view>
    </view>
  </view>
</view>