1.合并前段时间写的页面

pages/sys/user/message/message.vue

@@ -0,0 +1,164 @@
+<template>
+  <view class="msg-container">
+    <!-- 顶部导航栏 -->
+    <view class="msg-navbar">
+      <image src="/static/ic_msg_01.png" class="msg-navbar-bg" mode="aspectFill" />
+      <image src="/static/ic_back_white.webp" class="msg-back" @click="goBack" />
+      <text class="msg-title">消息中心</text>
+    </view>
+    <!-- 可滚动内容区 -->
+    <view class="msg-scroll-content">
+      <!-- 消息列表 -->
+      <view v-if="msgList.length" class="msg-list">
+        <view class="msg-item" v-for="(item, idx) in msgList" :key="idx">
+          <image :src="item.icon" class="msg-icon" />
+          <view class="msg-content">
+            <view class="msg-row">
+              <text class="msg-main-title">{{ item.title }}</text>
+              <text class="msg-time">{{ item.time }}</text>
+            </view>
+            <view class="msg-desc">{{ item.desc }}</view>
+          </view>
+        </view>
+      </view>
+      <!-- 空状态 -->
+      <view v-else class="msg-empty">
+        <image src="/static/ic_msg_empty.png" class="msg-empty-img" />
+        <text class="msg-empty-text">暂无更多消息</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      msgList: [
+        {
+          icon: '/static/ic_msg_sys.png',
+          title: '系统消息',
+          desc: '欢迎注册！更多好礼等你来....',
+          time: '12:20'
+        },
+        {
+          icon: '/static/ic_msg_feedback.png',
+          title: '反馈进度',
+          desc: '查看更多反馈进度....',
+          time: '12:20'
+        }
+      ]
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.msg-container {
+  height: 100vh;
+  background: #F0F3FF;
+  display: flex;
+  flex-direction: column;
+}
+.msg-navbar {
+  width: 100%;
+  height: 142rpx;
+  position: relative;
+  padding-top: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.msg-navbar-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 142rpx;
+  z-index: 0;
+}
+.msg-back {
+  position: absolute;
+  left: 32rpx;
+  width: 20rpx;
+  height: 36rpx;
+  z-index: 1;
+}
+.msg-title {
+  color: #fff;
+  font-size: 36rpx;
+  z-index: 1;
+}
+.msg-scroll-content {
+  flex: 1;
+  overflow-y: auto;
+}
+.msg-list {
+  background: #fff;
+  margin: 0 0 0 0;
+  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+  padding: 0 0 0 0;
+}
+.msg-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 20rpx;
+  border-bottom: 1px solid #f7f7f7;
+}
+.msg-item:last-child {
+  border-bottom: none;
+}
+.msg-icon {
+  width: 64rpx;
+  height: 64rpx;
+  margin-right: 24rpx;
+  border-radius: 16rpx;
+}
+.msg-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.msg-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.msg-main-title {
+  font-size: 30rpx;
+  color: #333;
+}
+.msg-time {
+  font-size: 24rpx;
+  color: #333;
+}
+.msg-desc {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 12rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.msg-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 120rpx;
+}
+.msg-empty-img {
+  width: 320rpx;
+  height: 220rpx;
+  margin-bottom: 32rpx;
+}
+.msg-empty-text {
+  color: #bbb;
+  font-size: 28rpx;
+}
+</style>