调整消息推送

pages/index/message1.vue

@@ -11,14 +11,9 @@
                 />
                 <!-- 角标 -->
                 <view class="badge-container">
-                    <span
-                        v-for="(item, index) in items"
-                        :key="index"
-                        class="badge"
-                        :style="{ left: getBadgeRightPosition(index) }"
-                        v-if="badgeCounts[index] > 0"
-                    >
-                        {{ badgeCounts[index] > 99 ? '99+' : badgeCounts[index] }}
+                    <span v-for="(item, index) in items" :key="index" class="badge">
+                        <uni-badge :text="badgeCounts[index] > 99 ? '99+' : badgeCounts[index]" />
+                        <!-- {{ badgeCounts[index] > 99 ? '99+' : badgeCounts[index] }} -->
                     </span>
                 </view>
                 <!-- 筛选条件 -->
@@ -74,7 +69,7 @@ export default {
     props: {},
     data() {
         return {
-            items: ['暂态事件', '稳态事件', '运行告警', '运行事件'],
+            items: ['暂态事件', '稳态事件'], //'运行告警', '运行事件'
             badgeCounts: [0, 0, 0, 0],
             current: 0,
             colorIndex: 0,
@@ -123,7 +118,7 @@ export default {
         const params = uni.getStorageSync('messageParams')
         this.getDevCount()
         this.$nextTick(() => {
-            if (params.type != '') {
+            if (params.type !== '') {
                 this.current = params.type - 0
             }
             if (params.name != '') {
@@ -236,7 +231,11 @@ export default {
 
         // 根据索引动态计算右侧偏移位置，使徽章对准每个标签的右上角
         getBadgeRightPosition(index) {
-            return (index + 1) * (this.width / 4) + 'px'
+            if (this.items == 4) {
+                return (index + 1) * (this.width / 4) + 'px'
+            } else {
+                return (index + 0) * (this.width / 2) + 'px'
+            }
         },
     },
 
@@ -282,25 +281,36 @@ export default {
     }
     .badge-container {
         position: absolute;
-        top: 10rpx; /* 徽章向上偏移，与控件重叠 */
+        top: -10rpx; /* 徽章向上偏移，与控件重叠 */
+        display: flex;
+        justify-content: space-around;
         right: 0;
         width: 100%;
         height: 0;
         pointer-events: none; /* 确保徽章不干扰点击事件 */
     }
+    /deep/ .uni-badge--error {
+        background-color: #ff3b30;
+    }
 
     .badge {
-        position: absolute;
+        flex: 1;
+        // position: absolute;
         // min-width: 18px;
-        height: 16px;
-        padding: 0 4px;
-        background-color: #ff3b30; /* 红色徽章 */
-        color: white;
-        font-size: 22rpx;
-        line-height: 16px;
+        // height: 16px;
+        // padding: 0 4px;
+        // background-color: #ff3b30; /* 红色徽章 */
+        // color: white;
+        // font-size: 22rpx;
+        // line-height: 16px;
+        // text-align: center;
+        // border-radius: 9px;
+        //
         text-align: center;
-        border-radius: 9px;
-        transform: translateX(-150%); /* 使徽章中心对齐右上角 */
+        // transform: translateX(-110%); /* 使徽章中心对齐右上角 */
+        .uni-badge--x {
+            left: 70rpx;
+        }
     }
 }
 </style>