diff --git a/src/assets/images/pop-message.png b/src/assets/images/pop-message.png new file mode 100644 index 0000000..48afdec Binary files /dev/null and b/src/assets/images/pop-message.png differ diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss index 988df85..39e6147 100644 --- a/src/assets/styles/yxk-admin.scss +++ b/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); + } +} \ No newline at end of file diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 1549064..e1c30d9 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -21,6 +21,33 @@ --> + + + + +
+ + 6 +
+ +
+ 全部标记为已读 + + 去查看 +
+
+ + +

这是一条系统通知系统通知这是一条系统通知系统通知

+ 2022-5-23 13:30 + +
+
+
+
+
@@ -40,7 +67,7 @@ 个人中心 - + 退出登录 @@ -48,6 +75,21 @@
+ + + + + +
+
+

确定注销并退出系统吗?

+
+ +
+
@@ -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() } } } -