From e07e4355570e77ffc3e3c129d64e58053dfbd63a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Thu, 9 Sep 2021 14:25:04 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83=E9=9D=99?=
 =?UTF-8?q?=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/SecuritySetting/Index.jsx           |  12 +-
 src/forge/SecuritySetting/Index.scss          |  16 ++-
 .../SecuritySetting/notice/manager/Index.jsx  | 117 +++++++++++++-----
 .../SecuritySetting/notice/manager/Index.scss |  62 ++++++++--
 .../SecuritySetting/notice/myNotice/Index.jsx |  62 +++++-----
 .../notice/myNotice/Index.scss                |  34 +++--
 src/forge/SecuritySetting/sub/SSH.jsx         |   2 +-
 src/forge/users/Material/Base.jsx             |   2 +-
 src/forge/users/Material/Index.jsx            |  14 ++-
 src/forge/users/Material/Index.scss           |   6 +
 src/forge/users/Material/Password.jsx         |   2 +-
 11 files changed, 232 insertions(+), 97 deletions(-)

diff --git a/src/forge/SecuritySetting/Index.jsx b/src/forge/SecuritySetting/Index.jsx
index 550f6f65..ab50dc72 100644
--- a/src/forge/SecuritySetting/Index.jsx
+++ b/src/forge/SecuritySetting/Index.jsx
@@ -55,15 +55,15 @@ function Index(props){
               <img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
               <span>{current_user && current_user.username}</span>
             </div>
-            <ul className="securityUl" style={{'border-bottom':'1px solid rgba(153, 153, 153, 0.22)','padding-bottom':'5px'}}>
-              <li>消息通知</li>
-              <li className={pathname.indexOf("/settings/notice/myNotice")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><i className="iconfont icon-wodetongzhi"></i><span>我的通知</span></Link></li>
-              <li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span>通知管理</span></Link></li>
-            </ul>
-            <ul className="securityUl">
+            <ul className="securityUl ul-border-buttom">
               <li>个人信息</li>
               <li className={pathname.indexOf("/settings/profile")>-1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i>基本资料</Link></li>
             </ul>
+            <ul className="securityUl ul-border-buttom">
+              <li>消息通知</li>
+              <li className={pathname.indexOf("/settings/notice/myNotice")>-1 || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><i className="iconfont icon-wodetongzhi"></i><span>我的通知</span></Link></li>
+              <li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span>通知管理</span></Link></li>
+            </ul>
             <ul className="securityUl">
               <li>安全设置</li>
               <li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i><span>SSH密钥</span></Link></li>
diff --git a/src/forge/SecuritySetting/Index.scss b/src/forge/SecuritySetting/Index.scss
index 06dadb4d..5dbb77f9 100644
--- a/src/forge/SecuritySetting/Index.scss
+++ b/src/forge/SecuritySetting/Index.scss
@@ -36,10 +36,11 @@
         color: #333;
         margin-bottom: 0px;
         padding-bottom: 0px;
+        padding-top: 5px;
         li{
           font-size: 14px;
-          margin-top: 8px;
-          margin-bottom: 8px;
+          margin-top: 10px;
+          margin-bottom: 10px;
           height: 27px;
           line-height: 27px;
           position: relative;
@@ -66,7 +67,7 @@
             width: 3px;
             border-radius: 2px;
             content: "";
-            background-color: #2A61FF;
+            background-color: #466AFF;
           }
 
           i{
@@ -75,6 +76,10 @@
           }
         }
       }
+      .ul-border-buttom{
+        border-bottom: 1px solid rgba(153, 153, 153, 0.22);
+        padding-bottom: 5px;
+      }
     }
     .sshHead{
       display: flex;
@@ -86,6 +91,11 @@
       &>span{
         font-size: 18px;
         font-weight: 600;
+        color: #333333;
+      }
+      & .add-ssh-but{
+        padding:0 12px;
+        margin-bottom: 5px;
       }
     }
     .ant-list-item{
diff --git a/src/forge/SecuritySetting/notice/manager/Index.jsx b/src/forge/SecuritySetting/notice/manager/Index.jsx
index ea64a439..5950f156 100644
--- a/src/forge/SecuritySetting/notice/manager/Index.jsx
+++ b/src/forge/SecuritySetting/notice/manager/Index.jsx
@@ -6,44 +6,93 @@ import './Index.scss';
 function NoticeManager(props){
 
   return(
-    <div>
+    <div className="notice01">
       <div className="sshHead">
         <span>通知管理</span>
       </div>
-      <div className="body">
-          <span className="tip" style={{fontSize:'16px',fontWeight:'400'}}>您可以通过通知管理来选择接受通知的方式</span>
-          <div className="cont-top">
-            我创建或负责的
-          </div>
-          <div className="cont">
-            <div className="title">易修状态变更</div>
-            <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
-            <Checkbox >邮件</Checkbox>
-          </div>
-          <div className="cont">
-            <div className="title">易修截止日期到达最后一天</div>
-            <Checkbox>站内信</Checkbox>
-            <Checkbox>邮件</Checkbox>
-          </div>
-          <div className="cont">
-            <div className="title">合并请求状态变更</div>
-            <Checkbox>站内信</Checkbox>
-            <Checkbox>邮件</Checkbox>
-          </div>
+      <div>
+        <span className="notice-manager-tip">您可以通过通知管理来选择接受通知的方式</span>
+        <div className="manager-cont-top">
+          我创建或负责的
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">易修状态变更</div>
+          <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">易修截止日期到达最后一天</div>
+          <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">合并请求状态变更</div>
+          <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">易修有新的评论</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">合并请求有新的评论</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
 
-          <div className="cont-top">
-            我管理的仓库
-          </div>
-          <div className="cont">
-            <div className="title">被关注</div>
-            <Checkbox defaultChecked='true'>站内信</Checkbox>
-            <Checkbox >邮件</Checkbox>
-          </div>
-          <div className="cont">
-            <div className="title">被点赞</div>
-            <Checkbox>站内信</Checkbox>
-            <Checkbox>邮件</Checkbox>
-          </div>
+        <div className="manager-cont-top">
+          我管理的仓库
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被关注</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被点赞</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被复刻</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">有新的里程碑</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+
+        <div className="manager-cont-top">
+          我关注的仓库
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被删除</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被转移</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">有新的易修</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">有新的合并请求</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">有新的版本发布</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
       </div>
     </div>
   )
diff --git a/src/forge/SecuritySetting/notice/manager/Index.scss b/src/forge/SecuritySetting/notice/manager/Index.scss
index 987e8111..1b5729ae 100644
--- a/src/forge/SecuritySetting/notice/manager/Index.scss
+++ b/src/forge/SecuritySetting/notice/manager/Index.scss
@@ -1,5 +1,8 @@
-
-.cont-top{
+.notice-manager-tip{
+    font-size:16px;
+    font-weight:400;
+}
+.manager-cont-top{
     font-size: 14px;
     font-weight: 600;
     height: 44px;
@@ -12,18 +15,63 @@
     margin-top: 25px;
 }
 
-.cont{
+.manager-cont{
     padding: 8px 20px 6px;
     display: flex;
     align-items: center;
     font-size: 14px;
 
-    .title{
+    .manager-cont-title{
         width: 320px;
     }
 
-    label{
-        margin-left: 6px;
-        margin-right: 34px;
+    
+}
+
+.notice01{
+    .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
+        border-color: white;
+    }
+    .ant-checkbox-disabled .ant-checkbox-inner {
+        background-color: #999999 !important;
+        border-color: #999999 !important;
+    }
+
+    .ant-checkbox-checked .ant-checkbox-inner {
+        background-color: #466AFF;
+        border: #466AFF;
+    }
+
+    .ant-checkbox-checked::after{
+        border: 1px solid #466AFF;
+    }
+    .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner,.ant-radio-checked .ant-radio-inner,.ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner {
+        border-color: #466AFF;
+    }
+
+    .ant-checkbox + span,.manager-cont-title {
+        color: #000000;
+    }
+
+    .ant-radio-inner::after{
+        background-color:#466AFF;
+    }
+
+    // .ant-radio-checked .ant-radio-inner {
+    //     border-color: #466AFF;
+    // }
+
+    .but25{
+        background-color: #466AFF;
+        color: #fff;
+        border-color: #466AFF;
+        &:hover{
+            background-color: #4a76f8;
+            border-color: #4a76f8;
+        }
+        &:active{
+            background-color: #466AFF;
+            border-color: #466AFF;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.jsx b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
index 0989eb1e..3a5eb175 100644
--- a/src/forge/SecuritySetting/notice/myNotice/Index.jsx
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Badge, Button, Menu } from 'antd';
+import { Badge, Button, Checkbox, Menu } from 'antd';
 import './Index.scss';
+import '../manager/Index.scss'
 import DelModal from '../../../Wiki/components/ModalFun';
 
 function MyNotice(props) {
@@ -47,29 +48,30 @@ function MyNotice(props) {
   }
 
   return (
-    <div>
+    <div className="notice01">
       <div className="sshHead">
         <Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
           <Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
           <Menu.Item key="1" id="item"><Badge count={10}>私信</Badge></Menu.Item>
           <Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
         </Menu>
-        <button>所有消息一键已读</button>
+        <button>所有{noticeType==="0"?"系统通知":noticeType==="1"?"私信":"@我"}一键已读</button>
       </div>
 
       <div className={isBatchDelete ? "invisible " : "visible"}>
-        <span className="alignCenter">
-          <input type="checkbox"></input>&nbsp;
-          仅看未读{noticeType === "1" ? "私信" : "消息"}（12）
-        </span>
+        <div className="vertical-center-style">
+          {/* <input type="checkbox"></input>&nbsp;
+          仅看未读{noticeType === "1" ? "私信" : "消息"}（12） */}
+          <Checkbox >仅看未读{noticeType === "1" ? "私信" : "消息"}（12）</Checkbox>
+        </div>
         {noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
       </div>
 
       <div className={isBatchDelete ? 'visible' : 'invisible'}>
-        <span>
+        <div className="vertical-center-style">
           <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
           全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
-        </span>
+        </div>
         <div>
           <button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
           <button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
@@ -77,7 +79,7 @@ function MyNotice(props) {
       </div>
 
       {noticeType === "1" ?
-        <div className="mynotice-content" onClick={() => props.history.push('/settings/notice/privateLetter')}>
+        <div className="mynotice-content vertical-center-style" onClick={() => props.history.push('/settings/notice/privateLetter')}>
           <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
           <div className="private-letter-right">
             <div>
@@ -86,28 +88,28 @@ function MyNotice(props) {
               <a onClick={deleteNotice}>删除</a>
             </div>
             <div>
-              <span className="highlightSpan">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+              <span className="highlightSpan letter-length-limit">最好的OpenStack控制台，对标OpenStack社区Horizon项目,最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
             </div>
           </div>
         </div>
-        : <div className="mynotice-content">
-          <div className="cont">
+        : <div className="mynotice-content vertical-center-style">
+          <div className="mynotice-cont vertical-center-style">
             <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
             {/* 系统通知 */}
             {noticeType === "0" ? <Badge color="#FA2020" /> : ""}
             {noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
             {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
             {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
-            <span className="highlightSpan">蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
+            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
           </div>
-          <div className="cont">
+          <div className="mynotice-cont vertical-center-style">
             <span className="timeSpan">4分钟前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
 
       {noticeType === "1" ?
-        <div className="mynotice-content">
+        <div className="mynotice-content vertical-center-style">
           <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
           <div className="private-letter-right">
             <div>
@@ -116,28 +118,28 @@ function MyNotice(props) {
               <a onClick={deleteNotice}>删除</a>
             </div>
             <div>
-              <span className="highlightSpan">gitlink平台 react 前端代码</span>
+              <span className="highlightSpan letter-length-limit">gitlink平台 react 前端代码</span>
             </div>
           </div>
         </div>
-        : <div className="mynotice-content">
-          <div className="cont">
+        : <div className="mynotice-content vertical-center-style">
+          <div className="mynotice-cont vertical-center-style">
             <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
             {/* 系统通知 */}
             {noticeType === "0" ? <Badge color="#FA2020" /> : ""}
             {noticeType === "0" ? <i className="iconfont icon-hebingqingqiuicon"></i> : ""}
             {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
             {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
-            <span className="highlightSpan">蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
+            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
           </div>
-          <div className="cont">
+          <div className="mynotice-cont vertical-center-style">
             <span className="timeSpan">10分钟前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
 
       {noticeType === "1" ?
-        <div className="mynotice-content">
+        <div className="mynotice-content vertical-center-style">
           <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
           <div className="private-letter-right">
             <div>
@@ -146,22 +148,22 @@ function MyNotice(props) {
               <a onClick={deleteNotice}>删除</a>
             </div>
             <div>
-              <span className="highlightSpan">构建卷积神经网络，训练模型，预测模型效果。</span>
+              <span className="highlightSpan letter-length-limit">构建卷积神经网络，训练模型，预测模型效果。</span>
             </div>
           </div>
         </div>
-        : <div className="mynotice-content">
-          <div className="cont">
+        : <div className="mynotice-content vertical-center-style">
+          <div className="mynotice-cont vertical-center-style">
             <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
             {/* 系统通知 */}
             {noticeType === "0" ? <span>&nbsp;&nbsp;&nbsp;</span> : ""}
             {noticeType === "0" ? <i className="iconfont icon-lichengbeiicon"></i> : ""}
             {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
-            <span className="highlightSpan">你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
+            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
           </div>
-          <div className="cont">
+          <div className="mynotice-cont vertical-center-style">
             <span className="timeSpan">1小时前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
     </div>
diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.scss b/src/forge/SecuritySetting/notice/myNotice/Index.scss
index c784bc88..6b8afdd8 100644
--- a/src/forge/SecuritySetting/notice/myNotice/Index.scss
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.scss
@@ -49,6 +49,7 @@ button {
   background: #FAFBFC;
   border: 1px solid #D0D0D0;
   border-radius: 4px;
+  height: 32px;
 }
 button:hover {
   background: #F3F4F6;
@@ -74,8 +75,6 @@ button:active {
 }
 
 .mynotice-content {
-  display: flex;
-  align-items: center;
   justify-content: space-between;
   padding: 15px 0 15px 10px;
   border-bottom: 1px solid #EEEEEE;
@@ -112,9 +111,7 @@ button:active {
     // margin-right: 10px;
   }
 
-  .cont{
-    display: flex;
-    align-items: center;
+  .mynotice-cont{
     padding:0;
   }
 }
@@ -156,16 +153,35 @@ button:active {
 }
 
 .highlightSpan{
-  max-width: 40rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   &:hover{
     color: #466AFF;
     cursor: pointer;
   }
 }
 
+.letter-length-limit{
+  max-width: 50rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sysNotice-length{
+  max-width: 52rem;
+}
+
+.at-length{
+  max-width: 48rem;
+}
 #numberSpan{
   color: #466AFF;
+}
+
+.vertical-center-style{
+  display: flex;
+  align-items: center;
+}
+
+.float-left-little{
+  margin-right: 10px;
 }
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/sub/SSH.jsx b/src/forge/SecuritySetting/sub/SSH.jsx
index bc004e11..80294b39 100644
--- a/src/forge/SecuritySetting/sub/SSH.jsx
+++ b/src/forge/SecuritySetting/sub/SSH.jsx
@@ -56,7 +56,7 @@ function SSH(props) {
       <SSHDetail visible={visibleDesc} onCancel={()=>setVisibleDesc(false)} desc={content}/>
       <div className="sshHead">
         <span>SSH密钥</span>
-        <Button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')}>添加SSH密钥</Button>
+        <Button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')} className="add-ssh-but">添加SSH密钥</Button>
       </div>
       {
         list && list.length > 0 &&
diff --git a/src/forge/users/Material/Base.jsx b/src/forge/users/Material/Base.jsx
index 5f776f8d..f9707ab0 100644
--- a/src/forge/users/Material/Base.jsx
+++ b/src/forge/users/Material/Base.jsx
@@ -125,7 +125,7 @@ export default Form.create()(
         </Form.Item>
         <AlignCenter>
           <span className="ant-form-item-label"></span>
-          <Button type={"primary"} onClick={submit}>提交</Button>
+          <Button className="but25" type={"primary"} onClick={submit}>提交</Button>
           {/* <Button type={"default"} onClick={()=>props.history.push(`/${current_user && current_user.login}`)} className="ml20">取消</Button> */}
         </AlignCenter>
       </Form>
diff --git a/src/forge/users/Material/Index.jsx b/src/forge/users/Material/Index.jsx
index 2ea0ecc1..869c1877 100644
--- a/src/forge/users/Material/Index.jsx
+++ b/src/forge/users/Material/Index.jsx
@@ -1,5 +1,6 @@
 import React , { useEffect , useState } from 'react';
 import './Index.scss';
+import '../../SecuritySetting/notice/manager/Index.scss'
 import { Menu } from 'antd';
 import { Link } from 'react-router-dom';
 import Base from './Base';
@@ -25,11 +26,14 @@ function Index(props){
 
 
   return(
-    <div>
-      <Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu">
-        <Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item>
-        {/* <Menu.Item key="1"><Link to={`/${username}/password`}>密码管理</Link></Menu.Item> */}
-      </Menu>
+    <div className="notice01">
+      <div className="sshHead">
+        <Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu">
+          <Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item>
+          {/* <Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item> */}
+          {/* <Menu.Item key="1"><Link to={`/${username}/password`}>密码管理</Link></Menu.Item> */}
+        </Menu>
+      </div>
       <div style={{padding:"20px"}}>
         {
           key === "0" ?
diff --git a/src/forge/users/Material/Index.scss b/src/forge/users/Material/Index.scss
index b24d3eb1..f4e79a52 100644
--- a/src/forge/users/Material/Index.scss
+++ b/src/forge/users/Material/Index.scss
@@ -19,6 +19,12 @@
   .ant-menu-item{
     a{
       font-size: 16px;
+      color: #333333;
+      position: relative;
+      bottom: -10px;
+    }
+    a:hover{
+      color: #333333;
     }
   }
 }
\ No newline at end of file
diff --git a/src/forge/users/Material/Password.jsx b/src/forge/users/Material/Password.jsx
index 12b31ac5..d7a2abc6 100644
--- a/src/forge/users/Material/Password.jsx
+++ b/src/forge/users/Material/Password.jsx
@@ -89,7 +89,7 @@ export default Form.create()(
         </Form.Item>
         <AlignCenter style={{marginTop:"20px"}}>
           <span className="ant-form-item-label"></span>
-          <Button type={"primary"} onClick={submit}>提交</Button>
+          <Button className="but25" type={"primary"} onClick={submit}>提交</Button>
           <Button type={"default"} onClick={()=>props.history.push(`/${username}`)} className="ml20">取消</Button>
         </AlignCenter>
       </Form>