fabu

src/layout/components/TopMenu/TopMenu.vue

@@ -30,7 +30,7 @@
     </div>
     <div class="user">
       <div class="AIBot hand" v-if="false">
-        <img src="@/assets/images/newIndex/bot.png"  alt="">
+        <img src="@/assets/images/newIndex/bot.png" alt="" />
         <span>智聚AI</span>
       </div>
       <img
@@ -45,12 +45,15 @@
         class="hand"
         alt=""
       />
-      <img
-        src="@/assets/images/newIndex/clock.png"
-        @click="openTab('会话消息', '/chat')"
-        class="hand"
-        alt=""
-      />
+      <div class="clockBox">
+        <img
+          src="@/assets/images/newIndex/clock.png"
+          @click="openTab('会话消息', '/chat')"
+          class="hand"
+          alt=""
+        />
+        <span class="yuandian" v-if="hasNewMessage"></span>
+      </div>
       <img
         v-if="hasRole"
         src="@/assets/images/newIndex/setting.png"
@@ -182,6 +185,7 @@ const scannerFiles = ref([]); //选择的扫描仪的文件
 const openScanMove = ref(false);
 const openScan = ref(false); //控制扫描文档显示
 const scanFileArr = ref([]); //认领的扫描文件数组
+const hasNewMessage = ref(false)
 const emit = defineEmits(["openMaxmin", "goIndex"]);
 // 鼠标移入 显示更多菜单
 const showMoreMenu = () => {
@@ -234,13 +238,13 @@ function logout() {
       });
     })
     .catch(() => {});
-      var el=document.querySelector('.is-message-box');
-      
-      if(el){ 
-        el.style.zIndex = "888888"
-        // console.log('el',el);
-        // console.log('el',el.style.zIndex);
-      }
+  var el = document.querySelector(".is-message-box");
+
+  if (el) {
+    el.style.zIndex = "888888";
+    // console.log('el',el);
+    // console.log('el',el.style.zIndex);
+  }
 }
 //获取扫描仪列表
 const scannerFile = async () => {
@@ -370,27 +374,39 @@ onMounted(() => {
   position: relative;
   display: flex;
   justify-content: space-around;
-  .AIBot{
+  .clockBox {
+    position: relative;
+    .yuandian {
+      width: 8px;
+      height: 8px;
+      position: absolute;
+      right: 20px;
+      top: 6px;
+      background: #fa5151;
+      border-radius: 4px;
+    }
+  }
+  .AIBot {
     width: 105px;
     height: 44px;
     margin-right: 12px;
     padding: 10px;
-    background: linear-gradient( 96deg, #BDDCFF 0%, #D2F7FF 100%);
+    background: linear-gradient(96deg, #bddcff 0%, #d2f7ff 100%);
     border-radius: 8px 8px 8px 8px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    img{
+    img {
       width: 24px;
       height: 24px;
     }
-    span{
+    span {
       font-size: 16px;
       font-weight: 500;
-      color: #464DF8; 
+      color: #464df8;
     }
   }
-  img{
+  img {
     margin-right: 12px;
   }
   .userInfo {
@@ -459,10 +475,10 @@ onMounted(() => {
   display: flex;
   align-items: center;
 }
-.hand{
+.hand {
   cursor: pointer;
 }
-:deep(.el-overlay){
+:deep(.el-overlay) {
   z-index: 99999999 !important;
 }
 // 底部标签样式