diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue index fbc7ab5d4..0654715b4 100644 --- a/resources/assets/js/pages/manage/components/DialogWrapper.vue +++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue @@ -9,6 +9,7 @@
+
{{msgUnreadOnly}}
@@ -289,7 +290,21 @@ export default { return ['multiple']; } return []; - } + }, + + msgUnreadOnly() { + let num = 0; + this.cacheDialogs.some(dialog => { + num += $A.getDialogUnread(dialog); + }) + if (num <= 0) { + return ''; + } + if (num > 99) { + num = "99+" + } + return String(num); + }, }, watch: { diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss index 3d73223e6..d27b23c28 100644 --- a/resources/assets/sass/pages/components/dialog-wrapper.scss +++ b/resources/assets/sass/pages/components/dialog-wrapper.scss @@ -857,14 +857,32 @@ justify-content: center; } .dialog-back { + padding-right: 6px; right: auto; left: 0; > i { font-size: 26px; } + .back-num { + font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + position: absolute; + top: 50%; + left: 32px; + background: #e6ebf1; + color: $primary-title-color; + transform: translate(0, -50%); + font-weight: 500; + font-size: 14px; + border-radius: 12px; + min-width: 24px; + height: 24px; + line-height: 24px; + text-align: center; + padding: 0 6px; + } } .dialog-block { - margin: 0 52px; + margin: 0 80px; justify-content: center; .dialog-avatar { display: none;