右上角消息中心

src/assets/styles/yxk-admin.scss

@@ -1001,9 +1001,10 @@ input[type='number'] {
   margin-bottom: -15px;
 }
 
-.el-select-dropdown{
+.el-select-dropdown,
+.el-dropdown-menu{
   box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset;
-  background: rgb(2, 37, 95);
+  background: #02255F;
   border: none;
 }
 .el-select-dropdown__item{
@@ -1034,6 +1035,20 @@ input[type='number'] {
   content: '';
   border: none;
 }
+.el-dropdown-menu .el-dropdown-menu__item{
+  color: #fff;
+}
+.el-dropdown-menu .el-dropdown-menu__item:hover{
+  background-color: #13439E;
+  color: #fff;
+}
+.el-dropdown-menu__item--divided{
+  border-top-color: #13439E;
+  margin-top: 0 !important;
+}
+.el-dropdown-menu .el-dropdown-menu__item--divided:before{
+  background-color: transparent !important;
+}
 
 //vue-treeselect
 .vue-treeselect__multi-value-item{
@@ -1049,3 +1064,65 @@ input[type='number'] {
 .vue-treeselect__value-remove > svg{
   color: #fff;
 }
+
+// 消息中心 pop
+.message-icon{
+  position: relative;
+  .icon-xiaoxi{
+    font-size: 26px;
+    color: #339CFF;
+  }
+  .message-num{
+    position: absolute;
+    top: 0;
+    right: -8px;
+    display: block;
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 50%;
+    background-color: #F91832;
+    color: #fff;
+  }
+}
+.el-dropdown-menu--small .el-dropdown-menu__item.message-list-item{
+  padding: 0;
+}
+.message-list-item a{
+  display: flex; 
+  justify-content: space-between; 
+  padding: 0 20px; 
+  height: 40px; 
+  font-size: 14px; 
+  border-bottom: 1px solid #113D72;
+  p, span, i{
+    line-height: 40px; 
+  }
+  p{
+    width: 230px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+  span{
+    display: block;
+  }
+  i.el-icon-arrow-right:before{
+    font-size: 16px;
+    color: #339CFF;
+  }
+}
+.message-dropdown.el-popper[x-placement^=bottom]{
+  .popper__arrow{
+    width: 89px;
+    height: 20px;
+    top: -8px;
+    background:  url('~@/assets/images/pop-message.png') no-repeat !important;
+    border: none;
+    transform: rotate(0);
+  }
+}

src/layout/components/Navbar.vue

@@ -21,6 +21,33 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
       </template> -->
+      <!-- <div class="message-center">
+        <span class="iconfont icon-xiaoxi" />
+      </div> -->
+
+      <!-- 消息中心 -->
+      <el-dropdown class="message-center right-menu-item hover-effect" trigger="click">
+        <div class="message-icon">
+          <span class="iconfont icon-xiaoxi" />
+          <i class="message-num">6</i>
+        </div>
+        <el-dropdown-menu slot="dropdown" class="message-dropdown" style="width: 420px;">
+          <div style="display: flex; justify-content: flex-end; padding: 0 20px; height: 40px; line-height: 40px; color: #339CFF; font-size: 14px; border-bottom: 1px solid #339CFF;">
+            <span style="cursor: pointer;">全部标记为已读</span>
+            <!-- 消息中心router -->
+            <router-link to="/system/messageCenter" style="color:#fff; margin-left: 10px;">去查看</router-link>
+          </div>
+          <div style="max-height: 450px; overflow: hidden; overflow-y: scroll;">
+            <el-dropdown-item v-for="(item,index) in 12" :key="index" class="message-list-item">
+              <router-link to="/system/messageCenter">
+                <p>这是一条系统通知系统通知这是一条系统通知系统通知</p>
+                <span>2022-5-23 13:30</span>
+                <i class="el-icon-arrow-right" />
+              </router-link>
+            </el-dropdown-item>
+          </div>
+        </el-dropdown-menu>
+      </el-dropdown>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
@@ -40,7 +67,7 @@
               个人中心
             </el-dropdown-item>
           </router-link>
-          <span style="display:block;" @click="open">
+          <span style="display:block;" @click="logoutVisible=true">
             <el-dropdown-item divided>
               退出登录
             </el-dropdown-item>
@@ -48,6 +75,21 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+
+    <!-- 退出登录 -->
+    <el-dialog title="退出登录" :modal-append-to-body="false" :close-on-click-modal="false" :visible.sync="logoutVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dialog-delt">
+          <p><span>确定注销并退出系统吗？</span></p>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="logoutVisible = false">取消</el-button>
+          <el-button type="primary" @click="logout">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -76,7 +118,7 @@ export default {
     return {
       Avatar: Avatar,
       defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
-      dialogVisible: false
+      logoutVisible: false
     }
   },
   computed: {
@@ -108,24 +150,26 @@ export default {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
-    open() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.logout()
-      })
-    },
+    // open() {
+    //   this.$confirm('确定注销并退出系统吗？', '提示', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning'
+    //   }).then(() => {
+    //     this.logout()
+    //   })
+    // },
     logout() {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()
       })
+    },
+    handleClose(done) {
+      done()
     }
   }
 }
 </script>
-
 <style lang="scss" scoped>
 .navbar {
   display: flex;
@@ -158,6 +202,7 @@ export default {
 
   .right-menu {
     // height: 100%;
+    display: flex;
     padding-top: 25px;
     line-height: 50px;
 
@@ -182,10 +227,12 @@ export default {
         }
       }
     }
-
+    .message-center{
+      margin-right: 26px;
+      margin-top: 4px;
+    }
     .avatar-container {
       margin-right: 60px;
-
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
@@ -199,7 +246,6 @@ export default {
           height: 40px;
           border-radius: 10px;
         }
-
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;

src/views/system/messageCenter/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    消息中心页面
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MessageCenter',
+  data() {
+    return {
+
+    }
+  },
+  created() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+</style>