baby-app/src/pages/myUser/component/messageCenter.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<!-- 消息 -->
<template>
  <view class="message-center">
    <headerTitle :title="'消息中心'"></headerTitle>
    <view class="message-container">
      <view class="message-group">
        <view class="message-time">13:00</view>
        <view class="message-card">
          <view class="message-title">新增关注</view>
          <view class="message-text">
            老天爷爷等 (+86 13648597563) 关注宝宝了！老天爷爷等 (+86 13648597563) 关注宝宝了！
            老天爷爷等 (+86 13648597563) 关注宝宝了！老天爷爷等 (+86 13648597563) 关注宝宝了！
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import headerTitle from './headerTitle.vue'
</script>

<style scoped>
  .message-center {
    min-height: 100vh;
    font-family: 'PingFang SC';
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
    background-color: #f2f2f2;
  }

  .message-container {
    padding: 32rpx 24rpx;
  }

  .message-time {
    margin-bottom: 24rpx;
    text-align: center;
    font-size: 24rpx;
  }

  .message-card {
    padding: 24rpx 24rpx;
    background-color: white;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  }

  .message-title {
    display: flex;
    align-items: center;
    min-height: 70rpx;
    border-bottom: 2rpx solid #f2f2f2;
    font-weight: 600;
  }

  .message-text {
    display: flex;
    align-items: center;
    min-height: 70rpx;
  }
</style>