diff --git a/src/forge/Component/NoticeModal/Index.scss b/src/forge/Component/NoticeModal/Index.scss
new file mode 100644
index 000000000..32611b37f
--- /dev/null
+++ b/src/forge/Component/NoticeModal/Index.scss
@@ -0,0 +1,91 @@
+.systemBox{
+ .ant-modal-body{
+ padding:1px 0px 0px 0px;
+ .sysBox{
+ background-image: url('./bg.png');
+ background-repeat: no-repeat;
+ background-size: 100% 334px;
+ margin-top: -55px;
+ }
+ .sysnoticeBox{
+ width: 100%;
+ padding:80px 0px 34px;
+ display: flex;
+ flex-direction: column;
+ width: 780px;
+ margin: 0px auto;
+ p.ntitle{
+ height: 33px;
+ font-size: 24px;
+ font-weight: 500;
+ color: #31FFF7;
+ line-height: 33px;
+ text-align: center;
+ }
+ p.nSubtitle{
+ height: 25px;
+ line-height: 25px;
+ font-size: 18px;
+ font-weight: 500;
+ color: #FFFFFF;
+ margin-top: 60px;
+ padding-left: 20px;
+ }
+ .markdown-body{
+ box-shadow: 0px 0px 17px rgba(0,0,0,0.2);
+ border-radius: 4px;
+ margin-top: 17px!important;
+ }
+ .nContent{
+ padding:20px 34px;
+ background-color: #fff;
+ .nMaindesc{
+ height: 90px;
+ font-size: 15px;
+ font-weight: 400;
+ color: #000000;
+ line-height: 30px;
+ }
+ .realmName{
+ margin-top: 20px;
+ display: flex;
+ ul{
+ width: 50%;
+ li{
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 32px;
+ text-align: left;
+ color: #000;
+ &:first-child{
+ color: #E65714;
+ }
+ }
+ }
+ }
+ .nSubdesc{
+ font-size: 15px;
+ font-weight: 400;
+ color: #000000;
+ line-height: 31px;
+ margin-top: 20px;
+ }
+ .nInfo{
+ font-size: 14px;
+ font-weight: 400;
+ color: #333333;
+ text-align: right;
+ margin-top: 25px;
+ p{
+ height: 20px;
+ line-height: 20px;
+ }
+ }
+ }
+ .nBtn{
+ text-align: center;
+ margin-top: 33px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/forge/Component/NoticeModal/SystemNotice.jsx b/src/forge/Component/NoticeModal/SystemNotice.jsx
new file mode 100644
index 000000000..94b197480
--- /dev/null
+++ b/src/forge/Component/NoticeModal/SystemNotice.jsx
@@ -0,0 +1,82 @@
+import React , { useEffect , useState } from 'react';
+import { Modal , Button } from 'antd';
+import './Index.scss';
+import '../../css/index.scss';
+import RenderHtml from '../../../components/render-html';
+import axios from 'axios';
+
+function SystemNotice({system_notification,history,login,showNotice,hideSystemNotice}){
+ const [ visible , setVisible ] = useState(false);
+
+ useEffect(()=>{
+ if(system_notification && !system_notification.is_read && showNotice){
+ setVisible(true);
+ }
+ },[system_notification])
+
+ function sureContinue() {
+ if(login && ( system_notification && system_notification.id )){
+ const url = `/users/${login}/system_notification_histories.json`;
+ axios.post(url,{
+ system_notification_id:system_notification.id
+ }).then(result=>{
+ if(result && result.status === 0){
+ setVisible(false);
+ hideSystemNotice();
+ }
+ }).catch(error=>{})
+ }
+ setVisible(false);
+ hideSystemNotice();
+ }
+
+ return (
+ {system_notification && system_notification.subject} {system_notification && system_notification.sub_subject} Gitlink运营团队 2021年10月xx日
+
+
+
+