no message

src/components/layout/Notifications.vue

+<template>
+    <q-card flat class="bg-white q-pa-none q-pb-sm" style="width: 375px; shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)">
+        <div class="Notifications-bg">
+            <div class="q-pa-lg row items-center">
+                <span class="text-white text-weight-bold text-h6 q-mr-sm  q-pl-sm">{{$t('Notifications.title')}}</span>
+                <div class="f12 text-grey-1 f12 q-pl-sm">24 {{$t('Notifications.subtitle')}}</div>
+            </div>
+        </div>
+        <div class="Notifications-height q-pt-sm">
+            <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="full-height">
+                <q-list class="q-px-md text-subtitle2">
+                    <q-item clickable v-ripple v-for="(item,index) in menus" class="rounded-borders">
+                        <q-item-section>
+                            <div class="row items-center">
+                                <div class="rounded-borders Notifications-item q-mr-md"
+                                :class="{
+                                    'bg-blue-1':index==0,'bg-red-1':index==1,'bg-yellow-1':index==2,'bg-green-1':index==3,
+                                    'activeOne':index==0,'activeTwo':index==1,'activeThree':index==2,'activeFour':index==3,}">
+                                    <svg-icon :icon="item.icon" :size="16" color="nav"></svg-icon>
+                                </div>
+                                <div class="col column">
+                                    <span class="Notifications-overflow Notifications-title cursor-pointer text-weight-bold text-h4 text-subtitle1 q-mr-md text-subtitle1">标题</span>
+                                    <div class="Notifications-overflow Notifications-text text-grey-6 f12">副标题</div>
+                                </div>
+                                <div class="rounded-borders bg-blue-grey-1 q-px-xs q-ml-lg text-grey-6 f12" style="color: var(--kt-light-inverse);">1小时</div>
+                            </div>
+                        </q-item-section>
+                    </q-item>
+              </q-list>
+            </q-scroll-area>
+        </div>
+        <q-separator color="grey-3" class="q-my-sm" />
+        <q-list class="q-px-md text-subtitle2">
+            <q-item clickable v-ripple class="rounded-borders Notifications-demo text-grey-7">
+                <q-item-section class="row items-center justify-content">
+                    <div class="row items-center justify-content">
+                        {{ $t('Notifications.more') }}
+                    </div>
+                </q-item-section>
+            </q-item>
+        </q-list>
+    </q-card>
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent, ref, reactive, toRefs, provide, onMounted } from 'vue'
+  import { useMenus, Menu } from '../../utils/menus'
+  import { getLangs } from "../../utils/tools";
+  import { SitLang } from '../../@types';
+  import { useI18n } from 'vue-i18n'
+  import { dispatchAction } from '../../store/utils';
+  import { UserActionsType } from '../../store/modules/user/actions';
+  import useScrollModule from '../../module/scrollbar/scrollModule'
+  import svgIcon from '../global/svg-icon.vue'
+  export default defineComponent({
+    components: { svgIcon },
+    name: 'user-info',
+    props: {
+      user: {
+        type: Object,
+        require: true
+      }
+    },
+    setup(props) {
+      const {locale,t } = useI18n();
+      const data=reactive({
+          currentLang: {} as SitLang,
+          langs:[] as SitLang[],
+          menus: [] as Menu[],
+          scrollStyle: {} as any,
+      })
+      data.scrollStyle = useScrollModule().scrollStyle
+      data.menus = useMenus.getMenus()
+      data.langs=getLangs()
+      if(data.langs && data.langs.length>0){
+        data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {};
+      }
+      
+      // 切换语言
+      const methods = {
+          getLanguage (val:SitLang) {
+              locale.value = val.langLocale??''
+              data.currentLang=val
+              localStorage.setItem('lanuage', val.langLocale??'')
+              window.location.reload()
+          },
+          signOut(){
+              dispatchAction<UserActionsType>('user', 'setUserSignout', null)
+              window.location.reload()
+          }
+      }
+      onMounted(()=>{
+        
+      })
+      return {...toRefs(data),...methods}
+    }
+  })
+  </script>
+  
+<style>
+    .Notifications-height{
+        width: 100%;
+        height: 325px;
+    }
+    .Notifications-bg{
+        background:url('../../assets/images/menu-header-bg.jpg')no-repeat;
+        background-size:100% 100%;
+    }
+    .Notifications-item{
+        cursor: default;
+        display: flex;
+        height: 35px;
+        width: 35px;
+        align-items: center;
+        justify-content: center;
+    }
+    .Notifications-item svg g{
+        cursor: default;
+        padding: 4px;
+    }
+    .Notifications-item.activeOne svg g [fill]{
+        fill: var(--q-primary) !important;
+    }
+    .Notifications-item.activeTwo svg g [fill]{
+        fill: var(--q-negative) !important;
+    }
+    .Notifications-item.activeThree svg g [fill]{
+        fill: var(--q-warning) !important;
+    }
+    .Notifications-item.activeFour svg g [fill]{
+        fill: var(--q-positive) !important;
+    }
+    .Notifications-overflow{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .Notifications-title:hover{
+        color: var(--q-primary) !important;
+    }
+    .Notifications-title,.Notifications-text{
+        width: 100%;
+    }
+    .Notifications-demo:hover .q-item__section{
+        color:var(--q-primary) !important;
+    }
+</style>
+  
\ No newline at end of file

src/i18n/zh-SW/index.ts

@@ -14,6 +14,11 @@ export default {
 	daterange:'请选择检索日期',
 	morequery:'更多筛选项',
 	query:'检索',
+	Notifications:{
+		title:'通知',
+		subtitle:'小时通知',
+		more:'更多'
+	},
 	hotel:{
 		pageTitle:"酒店检索",
 		area:"检索区域",

src/layouts/MainLayout.vue

@@ -17,6 +17,9 @@
             <div v-if="isDadge" class="header-badge bg-green-4"></div>
             <svg-icon color="grey" icon="Communication/Chat6.svg" :size="25" :tips="$t('sysmsg')">
             </svg-icon>
+            <q-popup-proxy :offset="[0,15]" class="no-shadow">
+              <Notifications :user="userInfo"></Notifications>
+            </q-popup-proxy>
           </div>
           <q-avatar size="40px" rounded class="bg-blue-2 cursor-pointer">
             <img :src="userInfo.photo" v-if="userInfo.photo" />
@@ -63,9 +66,10 @@ import svgIcon from '../components/global/svg-icon.vue'
 import useScrollModule from '../module/scrollbar/scrollModule'
 import Navs from '../components/layout/navs.vue'
 import userInfo from "../components/layout/userInfo.vue";
+import Notifications from "../components/layout/Notifications.vue";
 import { DirtionmaryHelper } from '../config/dictionary'
 export default {
-  components: { svgIcon, Navs,userInfo },
+  components: { svgIcon, Navs,userInfo,Notifications },
   setup() {
     const leftDrawerOpen = ref(false)
     const data = reactive({