From e02d6534d2dba4b8adcbb80e37cc77bf8bddd26c Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 09 三月 2022 16:50:48 +0800
Subject: [PATCH] update#136137: [諮詢度表現] 顧問詳細資訊API 前端調整串接

---
 PAMapp/components/NavBar.vue |   27 +++++++++++++++++++++++++--
 1 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index af197ad..75290c0 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -9,9 +9,12 @@
     <div class="pam-header__action-bar">
       <i
         v-if="isShowNotification"
-        class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
+        class="icon-bell text--dark-blue cursor--pointer"
         @click="$router.push('/notification')"
-      ></i>
+      >
+        <span :class="{'newNotification': isNewNotification}"></span>
+      </i>
+
         <el-dropdown :class="{'is-open':isOpenDropdown}"
           ref="dropdown"
           trigger="click"
@@ -180,6 +183,12 @@
       }
     }
 
+    get isNewNotification() {
+      if (this.currentRole) {
+        return this.notificationList.filter(item => !item.readDate).length;
+      }
+    }
+
   }
 
 </script>
@@ -245,6 +254,7 @@
 
       i {
         padding: 0px 15px;
+        @extend .fix-chrome-click--issue;
 
         @media screen and (max-width: 352px) {
           padding: 0px 10px;
@@ -257,6 +267,19 @@
           margin: 0px 10px;
         }
       }
+
+      .icon-bell {
+        position: relative;
+        .newNotification {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          top: 0;
+          right: 15px;
+          border-radius: 50px;
+          background: $PRIMARY_RED;
+        }
+      }
     }
   }
 

--
Gitblit v1.8.0