历史记录暂时提交

pages/news/index.vue

@@ -67,7 +67,10 @@
         </view>
         <!-- 右侧时间+角标列 -->
         <view class="item-right">
-          <view class="item-time">{{ item.time }}</view>
+          <view class="item-time">
+            <uni-dateformat :date="item.time" :format="isTodayDate(item.time)?'hh:mm':'yyyy-MM-dd hh:mm:ss'"
+                            :threshold="[60000, 3600000]"></uni-dateformat>
+          </view>
           <view v-if="item.numBadge" class="num-badge">
             <uni-badge :text="item.numBadge" type="error" size="mini" />
           </view>
@@ -85,6 +88,7 @@
 
 <script>
 import UniDividerText from "../../components/uni-divider/uni-divider-text.vue";
+import {isTodayDate} from "../../utils/agri";
 export default {
   components: {
     UniDividerText
@@ -99,9 +103,9 @@ export default {
           imgUrl: 'https://img.xiaoces.com/photos/news/camera_.png', // 对应视频中心
           title: '视频中心',
           desc: '[画面变化] DS-2DE4423DW-D/GLT/XM(FW116231321313123123123132312dgvbdfg7...',
-          time: '11:51',
+          time: Date.now(),
           badge: true,
-          numBadge: '1', // 有值则显示角标
+          numBadge: null, // 有值则显示角标
           width: '60rpx'
         },
         {
@@ -110,9 +114,9 @@ export default {
           // iconBg: '#4285F4',
           title: '设备状态',
           desc: '[设备在线] 十方',
-          time: '26/03/21',
+          time: Date.now()-3200000,
           badge: true,
-          numBadge: '2',
+          numBadge: null,
           width: '60rpx'
         },
         {
@@ -121,9 +125,9 @@ export default {
           iconBg: '#FFA726',
           title: '系统通知',
           desc: '没有新的消息',
-          time: '',
+          time: Date.now()-3900000,
           badge: false,
-          numBadge: null, // 无值则不显示
+          numBadge: 5, // 无值则不显示
           width: '40rpx'
         },
         {
@@ -132,14 +136,16 @@ export default {
           // iconBg: '#FFA726',
           title: '活动中心',
           desc: '没有新的消息',
-          time: '',
+          time: Date.now()-9900000,
           badge: false,
+          numBadge: 25, // 无值则不显示
           width: '100rpx'
         }
       ]
     }
   },
   methods: {
+    isTodayDate,
     navBack() {
       console.log('返回上一页')
     },
@@ -173,11 +179,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* 页面全屏 + 禁止横向滚动 */
 .message-center-page {
   min-height: 100vh;
-  /* 替换为渐变背景 */
+  height: calc(100vh - 180rpx);
+  /* #ifdef MP-WEIXIN */
+  height: calc(100vh - var(--status-bar-height) - 180rpx);
+  /* #endif */
   background: linear-gradient(180deg, #e8f0ff 0%, #f5f7fa 60%, #ffffff 100%);
-  padding-bottom: 120rpx; /* 给底部Tab栏预留位置 */
+  padding-bottom: 120rpx;
+  box-sizing: border-box;
+  overflow-x: hidden; /* 禁止横向滚动条 */
+  width: 100%;
 }
 
 /* 顶部导航栏 */
@@ -187,7 +200,7 @@ export default {
   justify-content: space-between;
   padding: 44rpx 30rpx 20rpx;
   // #ifdef MP-WEIXIN
-  padding-top: var(--status-bar-height);
+  padding-top: calc(80rpx + var(--status-bar-height));
   // #endif
   // #ifdef H5
   padding-top: 44px;
@@ -231,7 +244,6 @@ export default {
   }
 }
 
-
 /* 系统通知提示条 */
 .notice-bar {
   display: flex;
@@ -285,7 +297,7 @@ export default {
   }
 }
 
-/* 消息列表 */
+/* 消息列表 ———— 核心修复：不挤时间 + 不换行 */
 .message-list {
   background-color: #fff;
   border-radius: 12rpx;
@@ -294,9 +306,13 @@ export default {
     align-items: center;
     padding: 30rpx;
     border-bottom: 1rpx solid #f0f0f0;
+    width: 100%;
+    box-sizing: border-box;
+
     .item-icon-wrap {
       position: relative;
       margin-right: 24rpx;
+      flex-shrink: 0; /* 图片不被挤压 */
       .item-icon {
         width: 60rpx;
         height: 60rpx;
@@ -304,11 +320,6 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-
-        .icon-text {
-          font-size: 32rpx;
-          color: #fff;
-        }
       }
       .item-badge {
         position: absolute;
@@ -321,8 +332,11 @@ export default {
         border: 2rpx solid #fff;
       }
     }
+
+    /* 核心：内容区域不挤压时间 */
     .item-content {
       flex: 1;
+      min-width: 0; /* 必须加，防止flex溢出 */
       .item-title {
         font-size: 32rpx;
         color: #333;
@@ -332,18 +346,23 @@ export default {
         font-size: 26rpx;
         color: #999;
         line-height: 1.4;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
     }
 
-    // 新增：右侧时间+角标列
+    /* 右侧时间 + 角标 固定区域 */
     .item-right {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
+      flex-shrink: 0; /* 时间不被挤压 */
+      margin-left: 20rpx;
       .item-time {
         font-size: 26rpx;
         color: #999;
-        margin-bottom: 15rpx;
+        margin-bottom: 8rpx;
       }
     }
   }