From c5c4a3d129de2b20ca24727519aad5e80bebf03f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 14 十一月 2024 22:39:26 +0800
Subject: [PATCH] 2024-11-14
---
src/components/header/sysmessage/icon.jsx | 7 ++-
src/components/header/sysmessage/index.scss | 55 ++++++++++++++++-----------
src/components/header/sysmessage/msg.png | 0
src/components/header/sysmessage/index.jsx | 10 +++-
4 files changed, 45 insertions(+), 27 deletions(-)
diff --git a/src/components/header/sysmessage/icon.jsx b/src/components/header/sysmessage/icon.jsx
index 71e4820..fd813a8 100644
--- a/src/components/header/sysmessage/icon.jsx
+++ b/src/components/header/sysmessage/icon.jsx
@@ -1,10 +1,10 @@
import React, { Component } from 'react'
import { notification } from 'antd'
-import { MessageFilled } from '@ant-design/icons'
import moment from 'moment'
import Api from '@/api'
import MKEmitter from '@/utils/events.js'
+import url from './msg.png'
class SysIcon extends Component {
state = {
@@ -118,7 +118,10 @@
if (!notices) return null
return (
- <MessageFilled className="mk-msg-icon" data-title={notices.length ? notices.length : ''} onClick={this.open} />
+ <span className="mk-msg-icon" onClick={this.open}>
+ <img src={url} alt=""/>
+ <span>{notices.length ? notices.length : ''}</span>
+ </span>
)
}
}
diff --git a/src/components/header/sysmessage/index.jsx b/src/components/header/sysmessage/index.jsx
index f9e6965..8c52e0a 100644
--- a/src/components/header/sysmessage/index.jsx
+++ b/src/components/header/sysmessage/index.jsx
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { CloseOutlined } from '@ant-design/icons'
+import { CloseOutlined, SoundOutlined } from '@ant-design/icons'
import MKEmitter from '@/utils/events.js'
@@ -26,6 +26,10 @@
sysMessageChange = (notices) => {
this.setState({ notices })
+
+ if (notices.length === 0) {
+ this.setState({ visible: false })
+ }
}
sysMessageOpen = () => {
@@ -59,11 +63,11 @@
return (
<div className={'mk-msg-wrap' + (visible ? ' visible' : '')}>
<div className="title">
- 娑堟伅鐩掑瓙
+ <SoundOutlined />
<CloseOutlined onClick={this.close}/>
</div>
<div className="msg-list">{notices.map((item, index) => {
- return <div className="msg-item" key={index} onClick={this.toMenu}>
+ return <div className={'msg-item ' + (item.urgent_type === 'Y' ? 'red' : '')} key={index} onClick={this.toMenu}>
<span>{item.createstaff}</span><span className="time">{item.time}</span>
<span>{item.title}</span>
</div>
diff --git a/src/components/header/sysmessage/index.scss b/src/components/header/sysmessage/index.scss
index 9d71cb6..c35aef7 100644
--- a/src/components/header/sysmessage/index.scss
+++ b/src/components/header/sysmessage/index.scss
@@ -1,37 +1,42 @@
.mk-msg-icon {
+ display: inline-block;
+ position: relative;
font-size: 16px;
- margin-top: 17px;
+ margin-top: 12px;
margin-right: 20px;
margin-left: 0px;
color: #1CD66C;
cursor: pointer;
-}
-.mk-msg-icon[data-title] {
- position: relative;
- &::before {
- content: " ";
- position: absolute;
- top: 6px;
- left: 2px;
- z-index: -1;
- width: 12px;
- height: 3px;
- display: block;
- background: #fff;
+ img {
+ width: 22px;
+ height: 22px;
}
- &::after {
+ span {
position: absolute;
- top: -10px;
- left: 15px;
+ top: -6px;
+ left: 19px;
color: #f5222d;
font-size: 12px;
- line-height: 16px;
white-space: nowrap;
font-weight: 600;
- content: attr(data-title);
}
}
+// .mk-msg-icon[data-title] {
+// position: relative;
+
+// &::after {
+// position: absolute;
+// top: -10px;
+// left: 15px;
+// color: #f5222d;
+// font-size: 12px;
+// line-height: 16px;
+// white-space: nowrap;
+// font-weight: 600;
+// content: attr(data-title);
+// }
+// }
.mk-msg-wrap {
position: fixed;
width: 300px;
@@ -39,7 +44,7 @@
right: 120px;
z-index: -1;
opacity: 0;
- padding: 10px 10px 30px;
+ padding: 7px 10px 24px;
font-size: 13px;
background-color: #000000;
background-clip: padding-box;
@@ -55,12 +60,12 @@
position: relative;
text-align: left;
font-size: 14px;
- height: 20px;
color: #ffffff;
.anticon-close {
position: absolute;
right: 5px;
+ top: 1px;
color: #ffffff;
cursor: pointer;
transition: color 0.2s;
@@ -80,6 +85,12 @@
display: block;
}
}
+ .msg-item:first-child {
+ margin-top: 7px;
+ }
+ .msg-item.red {
+ color: #C32539;
+ }
.time {
position: absolute;
top: 5px;
@@ -91,7 +102,7 @@
.jump {
position: absolute;
right: 15px;
- bottom: 12px;
+ bottom: 7px;
font-size: 14px;
cursor: pointer;
color: var(--mk-sys-color1);
diff --git a/src/components/header/sysmessage/msg.png b/src/components/header/sysmessage/msg.png
new file mode 100644
index 0000000..1f1b658
--- /dev/null
+++ b/src/components/header/sysmessage/msg.png
Binary files differ
--
Gitblit v1.8.0