历史记录暂时提交暂时提交

pages/news/index.vue

@@ -7,7 +7,11 @@
         <text class="arrow">▶</text>
       </view>
       <view class="nav-right">
-        <text class="nav-btn" @click="clearUnread">清除未读</text>
+        <!-- 把文字 + 图标放在同一个 nav-btn 内 -->
+        <view class="nav-btn" @click="clearUnread">
+          <text>清除未读</text>
+          <uni-icons type="trash" size="24" color="#666" />
+        </view>
         <text class="divider">  |  </text>
         <text class="nav-btn" @click="openSetting">通知设置</text>
       </view>
@@ -16,7 +20,7 @@
     <!-- 系统通知提示条 -->
     <view class="notice-bar" @click="goToOpen">
       <view class="notice-left">
-        <text class="notice-icon">✕</text>
+        <uni-icons style="margin-right: 12rpx" type="closeempty" color="#FF6D00" size="15"/>
         <text class="notice-text">系统通知未开启，报警消息无法通知</text>
       </view>
       <view class="notice-btn">去开启</view>
@@ -25,12 +29,18 @@
     <!-- 功能入口区 -->
     <view class="func-wrap">
       <view class="func-item" @click="goToSubscribe">
-        <view class="func-icon">🗨️</view>
+        <view class="func-icon">
+          <image style="width: 40rpx; height: 30rpx; "
+                 src="https://img.xiaoces.com/photos/news/new2.png"/>
+        </view>
         <view class="func-title">消息订阅</view>
         <view class="func-desc">成员收不到设备/应用消息?</view>
       </view>
       <view class="func-item" @click="goToAI">
-        <view class="func-icon">🤖</view>
+        <view class="func-icon">
+          <image style="width: 40rpx; height: 30rpx; "
+                 src="https://img.xiaoces.com/photos/news/ai1.png"/>
+        </view>
         <view class="func-title">AI识别</view>
         <view class="func-desc">AI识别精准过滤无效报警</view>
       </view>
@@ -46,7 +56,8 @@
       >
         <view class="item-icon-wrap">
           <view class="item-icon" :style="{ backgroundColor: item.iconBg }">
-            <text class="icon-text">{{ item.icon }}</text>
+            <image mode="aspectFit" :style="{width: item.width,
+            height: '70rpx' }" :src="item.imgUrl" />
           </view>
           <view v-if="item.badge" class="item-badge"></view>
         </view>
@@ -76,28 +87,43 @@ export default {
     return {
       messageList: [
         {
-          icon: '🎬',
+          // video111 / camera_
-          iconBg: '#4285F4',
+          imgUrl: 'https://img.xiaoces.com/photos/news/camera_.png', // 对应视频中心
           title: '视频中心',
           desc: '[画面变化] DS-2DE4423DW-D/GLT/XM(FW1167...',
           time: '11:51',
-          badge: true
+          badge: true,
+          width: '100rpx'
         },
         {
-          icon: '🖥️',
+          // device imei1 device_status3
-          iconBg: '#4285F4',
+          imgUrl: 'https://img.xiaoces.com/photos/news/device_status3.png', // 对应设备状态
+          // iconBg: '#4285F4',
           title: '设备状态',
           desc: '[设备在线] 十方',
           time: '26/03/21',
-          badge: true
+          badge: true,
+          width: '100rpx'
         },
         {
-          icon: '🔔',
+          // notice_1 notice_2  notice_
+          imgUrl: 'https://img.xiaoces.com/photos/news/notice_.png', // 对应系统通知
           iconBg: '#FFA726',
           title: '系统通知',
           desc: '没有新的消息',
           time: '',
-          badge: false
+          badge: false,
+          width: '40rpx'
+        },
+        {
+          // play1 play
+          imgUrl: 'https://img.xiaoces.com/photos/news/play1.png',
+          // iconBg: '#FFA726',
+          title: '活动中心',
+          desc: '没有新的消息',
+          time: '',
+          badge: false,
+          width: '100rpx'
         }
       ]
     }
@@ -135,7 +161,8 @@ export default {
 <style lang="scss" scoped>
 .message-center-page {
   min-height: 100vh;
-  background-color: #f5f7fa;
+  /* 替换为渐变背景 */
+  background: linear-gradient(180deg, #e8f0ff 0%, #f5f7fa 60%, #ffffff 100%);
   padding-bottom: 120rpx; /* 给底部Tab栏预留位置 */
 }
 
@@ -151,36 +178,39 @@ export default {
   // #ifdef H5
   padding-top: 44px;
   // #endif
-  background-color: #fff;
+
   .nav-left {
     display: flex;
     align-items: center;
-    .nav-title {
+    .nav-title { font-size: 36rpx; font-weight: 500; color: #333; }
-      font-size: 36rpx;
+    .arrow { font-size: 24rpx; color: #666; margin-left: 8rpx; }
-      font-weight: 500;
-      color: #333;
-    }
-    .arrow {
-      font-size: 24rpx;
-      color: #666;
-      margin-left: 8rpx;
-    }
   }
+
   .nav-right {
     display: flex;
     align-items: center;
+
+    /* 核心：文字+图标同行+居中 */
     .nav-btn {
+      display: flex;
+      align-items: center;
       font-size: 28rpx;
       color: #666;
-      padding: 0 12rpx;
+
+      uni-icons {
+        margin-left: 8rpx;
       }
+    }
+
     .divider {
+      margin: 0 20rpx;
+      color: #c5c3c3;
       font-size: 28rpx;
-      color: #e5e5e5;
     }
   }
 }
 
+
 /* 系统通知提示条 */
 .notice-bar {
   display: flex;
@@ -193,11 +223,6 @@ export default {
   .notice-left {
     display: flex;
     align-items: center;
-    .notice-icon {
-      font-size: 24rpx;
-      color: #FF6D00;
-      margin-right: 12rpx;
-    }
     .notice-text {
       font-size: 28rpx;
       color: #E65100;
@@ -223,7 +248,6 @@ export default {
     background-color: #fff;
     border-radius: 12rpx;
     .func-icon {
-      font-size: 32rpx;
       margin-bottom: 12rpx;
     }
     .func-title {
@@ -243,6 +267,7 @@ export default {
 /* 消息列表 */
 .message-list {
   background-color: #fff;
+  border-radius: 12rpx;
   .message-item {
     display: flex;
     align-items: center;
@@ -258,6 +283,7 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
+
         .icon-text {
           font-size: 32rpx;
           color: #fff;
@@ -293,6 +319,4 @@ export default {
     }
   }
 }
-
-
 </style>