|
@@ -1,7 +1,9 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
|
|
import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
|
|
|
import { useNotificationMessage } from '@/stores/modules/notificationMessage'
|
|
import { useNotificationMessage } from '@/stores/modules/notificationMessage'
|
|
|
|
|
+import { isMacOS } from '@/utils/tools'
|
|
|
|
|
|
|
|
|
|
+const isMac = isMacOS()
|
|
|
const activeCardTypeName = ref(sessionStorage.getItem('activeCardTypeName') || 'Milestone Update')
|
|
const activeCardTypeName = ref(sessionStorage.getItem('activeCardTypeName') || 'Milestone Update')
|
|
|
|
|
|
|
|
const notificationMsgStore = useNotificationMessage()
|
|
const notificationMsgStore = useNotificationMessage()
|
|
@@ -136,7 +138,11 @@ onMounted(() => {
|
|
|
>
|
|
>
|
|
|
<div v-if="item === activeCardTypeName" class="active-sign"></div>
|
|
<div v-if="item === activeCardTypeName" class="active-sign"></div>
|
|
|
<span>{{ item }}</span>
|
|
<span>{{ item }}</span>
|
|
|
- <div class="count" v-if="handleShowCount(item, index)">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="count"
|
|
|
|
|
+ :style="{ 'padding-top': isMac ? 0 : '1px' }"
|
|
|
|
|
+ v-if="handleShowCount(item, index)"
|
|
|
|
|
+ >
|
|
|
<span>{{ handleShowCount(item, index) }}</span>
|
|
<span>{{ handleShowCount(item, index) }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -150,7 +156,11 @@ onMounted(() => {
|
|
|
>
|
|
>
|
|
|
<div v-if="activeCardTypeName === 'Feature Update'" class="active-sign"></div>
|
|
<div v-if="activeCardTypeName === 'Feature Update'" class="active-sign"></div>
|
|
|
<span>Feature Update</span>
|
|
<span>Feature Update</span>
|
|
|
- <div class="count" v-if="handleShowCount('Feature Update', tabCountList.length - 1)">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="count"
|
|
|
|
|
+ :style="{ 'padding-top': isMac ? 0 : '1px' }"
|
|
|
|
|
+ v-if="handleShowCount('Feature Update', tabCountList.length - 1)"
|
|
|
|
|
+ >
|
|
|
<span>{{ handleShowCount('Feature Update', tabCountList.length - 1) }}</span>
|
|
<span>{{ handleShowCount('Feature Update', tabCountList.length - 1) }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -173,7 +183,11 @@ onMounted(() => {
|
|
|
<el-tab-pane label="Unread" name="Unread">
|
|
<el-tab-pane label="Unread" name="Unread">
|
|
|
<template #label>
|
|
<template #label>
|
|
|
<span style="margin-right: 4px">Unread</span>
|
|
<span style="margin-right: 4px">Unread</span>
|
|
|
- <div class="count" v-if="unreadNotificationList.length">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="count"
|
|
|
|
|
+ :style="{ 'padding-top': isMac ? 0 : '1px' }"
|
|
|
|
|
+ v-if="unreadNotificationList.length"
|
|
|
|
|
+ >
|
|
|
<span>{{ handleCount(unreadNotificationList.length) }}</span>
|
|
<span>{{ handleCount(unreadNotificationList.length) }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -218,8 +232,6 @@ onMounted(() => {
|
|
|
.count {
|
|
.count {
|
|
|
display: inline-flex;
|
|
display: inline-flex;
|
|
|
height: 18px;
|
|
height: 18px;
|
|
|
- min-width: 18px;
|
|
|
|
|
- padding-top: 1px;
|
|
|
|
|
padding-left: 5px;
|
|
padding-left: 5px;
|
|
|
padding-right: 5px;
|
|
padding-right: 5px;
|
|
|
background-color: var(--color-theme);
|
|
background-color: var(--color-theme);
|