diff --git a/src/forge/Head/Header.js b/src/forge/Head/Header.js index 1dcfdbeae..9197f6915 100644 --- a/src/forge/Head/Header.js +++ b/src/forge/Head/Header.js @@ -13,6 +13,8 @@ import '../../modules/tpm/TPMIndex.css'; import CheckProfile from '../Component/ProfileModal/Profile'; import './header.scss'; +import '../SecuritySetting/notice/myNotice/Index.scss' +import NoticeContent from './NoticeContent'; const $ = window.$ // TODO 这部分脚本从公共脚本中直接调用 const { Search } = Input; @@ -47,6 +49,7 @@ class NewHeader extends Component { settings: null, visiblemyss: false, openSearch:false, + noticeType:"0", } } componentDidMount() { @@ -256,20 +259,38 @@ class NewHeader extends Component { ) } + click = (e) =>{ + this.setState({ + noticeType: e.key, + }) + } + messageList=()=>{ + let { noticeType } = this.state; return(
- - 系统通知 - 私信 - @我 - -
- aaa +
+ + 系统通知 + 私信 + @我 +
-
+
+ + + + + + + + + + +
+
全部消息 - 标记为已读 + 所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读
) @@ -457,14 +478,14 @@ class NewHeader extends Component { {/* {current_user && current_user.login && notice_url ? */} {current_user && current_user.login ? - - - - - - - - :"" + + + + + + + + : "" }
{!user || (user && !user.login) ? diff --git a/src/forge/Head/NoticeContent.jsx b/src/forge/Head/NoticeContent.jsx new file mode 100644 index 000000000..ab637f96e --- /dev/null +++ b/src/forge/Head/NoticeContent.jsx @@ -0,0 +1,19 @@ +import React, { useEffect, useState } from 'react'; +import { Badge} from 'antd'; +import './header.scss'; + +function NoticeContent(props) { + const noticeType = props.noticeType; + return( +
+ + {noticeType === "0" ? : ""} +
+ 蒋宇航： + 最好的OpenStack控制台，对标Open社区项目Horizon，在易... + 4分钟前 +
+
+ ) +} +export default NoticeContent; diff --git a/src/forge/Head/header.scss b/src/forge/Head/header.scss index 7831788c8..48de6c2ac 100644 --- a/src/forge/Head/header.scss +++ b/src/forge/Head/header.scss @@ -27,21 +27,6 @@ margin-left: 15px; } -.messageHoverDiv{ - padding: 20px 17px 13px; - width: 386px; - min-height: 294px; - background: #FFFFFF; - box-shadow: 0px 4px 8px 2px rgba(212,212,212,0.5); - border-radius: 4px; - border: 1px solid red; - - .buttom{ - display: flex; - justify-content: space-between; - } -} - .currentMenu{ width: 120px; text-align: center; @@ -142,4 +127,80 @@ width: 110px; text-align: right; } -} \ No newline at end of file +} + +//popover小尖尖 +.ant-popover-arrow{ + display: none; +} + +//popover框 +.ant-popover-inner-content { + width: 386px; + height: 446px; + box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5); + border-radius: 4px; + margin-top: -10px; +} +.hoverNotice-head>.ant-menu-horizontal { + border-bottom: 1px solid #e8e8e8 !important; +} + +.hoverNotice-head .ant-badge{ + font-size: 14px !important; +} + +.hoverNotice-body{ + height: 342px; + overflow-y: scroll; +} + +.hoverNotice-buttom{ + display: flex; + justify-content: space-between; + margin-top: 12px; + + a{ + color: #466AFF; + } +} + +.noticeCont{ + display: flex; + padding:12px 10px 10px 0; + + i{ + font-size: 16px !important; + margin-right: 5px; + } + + .text{ + position: relative; + max-height: 48px; + color:#333333; + .boldSpan{ + font-weight: 600; + } + + .timeSpan{ + position: absolute; + right: 0px; + font-size: 12px; + color: #666666; + } + } +} + +::-webkit-scrollbar { + width: 5px; /*对垂直流动条有效*/ +} +/*定义滑块颜色、内阴影及圆角*/ +::-webkit-scrollbar-thumb { + border-radius: 6px; + box-shadow: inset 0 0 6px #FFF; + background-color: #D4D4D4; +} +::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px #fff; + background-color: #FFF; +} diff --git a/src/forge/SecuritySetting/Index.jsx b/src/forge/SecuritySetting/Index.jsx index edbd763f3..ab50dc720 100644 --- a/src/forge/SecuritySetting/Index.jsx +++ b/src/forge/SecuritySetting/Index.jsx @@ -36,6 +36,12 @@ const SSHIndex = Loadable({ loader: () => import("./sub/SSH"), loading: Loading, }); + +const PrivateLetter = Loadable({ + loader: () => import("./notice/privateLetter/Index"), + loading: Loading, +}); + function Index(props){ const { current_user } = props; const { pathname } = props.location; @@ -49,15 +55,15 @@ function Index(props){ {current_user && current_user.username}
- -