通知中心静态页面

This commit is contained in:
谢思 2021-09-09 14:25:04 +08:00
parent 8e17efb9c6
commit e07e435557
11 changed files with 232 additions and 97 deletions

View File

@ -55,15 +55,15 @@ function Index(props){
<img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/> <img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
<span>{current_user && current_user.username}</span> <span>{current_user && current_user.username}</span>
</div> </div>
<ul className="securityUl" style={{'border-bottom':'1px solid rgba(153, 153, 153, 0.22)','padding-bottom':'5px'}}> <ul className="securityUl ul-border-buttom">
<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">
<li>个人信息</li> <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> <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>
<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"> <ul className="securityUl">
<li>安全设置</li> <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> <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>

View File

@ -36,10 +36,11 @@
color: #333; color: #333;
margin-bottom: 0px; margin-bottom: 0px;
padding-bottom: 0px; padding-bottom: 0px;
padding-top: 5px;
li{ li{
font-size: 14px; font-size: 14px;
margin-top: 8px; margin-top: 10px;
margin-bottom: 8px; margin-bottom: 10px;
height: 27px; height: 27px;
line-height: 27px; line-height: 27px;
position: relative; position: relative;
@ -66,7 +67,7 @@
width: 3px; width: 3px;
border-radius: 2px; border-radius: 2px;
content: ""; content: "";
background-color: #2A61FF; background-color: #466AFF;
} }
i{ i{
@ -75,6 +76,10 @@
} }
} }
} }
.ul-border-buttom{
border-bottom: 1px solid rgba(153, 153, 153, 0.22);
padding-bottom: 5px;
}
} }
.sshHead{ .sshHead{
display: flex; display: flex;
@ -86,6 +91,11 @@
&>span{ &>span{
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #333333;
}
& .add-ssh-but{
padding:0 12px;
margin-bottom: 5px;
} }
} }
.ant-list-item{ .ant-list-item{

View File

@ -6,44 +6,93 @@ import './Index.scss';
function NoticeManager(props){ function NoticeManager(props){
return( return(
<div> <div className="notice01">
<div className="sshHead"> <div className="sshHead">
<span>通知管理</span> <span>通知管理</span>
</div> </div>
<div className="body"> <div>
<span className="tip" style={{fontSize:'16px',fontWeight:'400'}}>您可以通过通知管理来选择接受通知的方式</span> <span className="notice-manager-tip">您可以通过通知管理来选择接受通知的方式</span>
<div className="cont-top"> <div className="manager-cont-top">
我创建或负责的 我创建或负责的
</div> </div>
<div className="cont"> <div className="manager-cont">
<div className="title">易修状态变更</div> <div className="manager-cont-title">易修状态变更</div>
<Checkbox defaultChecked='true' disabled>站内信</Checkbox> <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
<Checkbox >邮件</Checkbox> <Checkbox >邮件</Checkbox>
</div> </div>
<div className="cont"> <div className="manager-cont">
<div className="title">易修截止日期到达最后一天</div> <div className="manager-cont-title">易修截止日期到达最后一天</div>
<Checkbox>站内信</Checkbox> <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
<Checkbox>邮件</Checkbox> <Checkbox >邮件</Checkbox>
</div> </div>
<div className="cont"> <div className="manager-cont">
<div className="title">合并请求状态变更</div> <div className="manager-cont-title">合并请求状态变更</div>
<Checkbox>站内信</Checkbox> <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
<Checkbox>邮件</Checkbox> <Checkbox >邮件</Checkbox>
</div> </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 className="manager-cont-top">
我管理的仓库 我管理的仓库
</div> </div>
<div className="cont"> <div className="manager-cont">
<div className="title">被关注</div> <div className="manager-cont-title">被关注</div>
<Checkbox defaultChecked='true'>站内信</Checkbox> <Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox> <Checkbox >邮件</Checkbox>
</div> </div>
<div className="cont"> <div className="manager-cont">
<div className="title">被点赞</div> <div className="manager-cont-title">被点赞</div>
<Checkbox>站内信</Checkbox> <Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox>邮件</Checkbox> <Checkbox >邮件</Checkbox>
</div> </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>
</div> </div>
) )

View File

@ -1,5 +1,8 @@
.notice-manager-tip{
.cont-top{ font-size:16px;
font-weight:400;
}
.manager-cont-top{
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
height: 44px; height: 44px;
@ -12,18 +15,63 @@
margin-top: 25px; margin-top: 25px;
} }
.cont{ .manager-cont{
padding: 8px 20px 6px; padding: 8px 20px 6px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
.title{ .manager-cont-title{
width: 320px; 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;
}
} }
} }

View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Badge, Button, Menu } from 'antd'; import { Badge, Button, Checkbox, Menu } from 'antd';
import './Index.scss'; import './Index.scss';
import '../manager/Index.scss'
import DelModal from '../../../Wiki/components/ModalFun'; import DelModal from '../../../Wiki/components/ModalFun';
function MyNotice(props) { function MyNotice(props) {
@ -47,29 +48,30 @@ function MyNotice(props) {
} }
return ( return (
<div> <div className="notice01">
<div className="sshHead"> <div className="sshHead">
<Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}> <Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
<Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item> <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="1" id="item"><Badge count={10}>私信</Badge></Menu.Item>
<Menu.Item key="2"><Badge count={99}>@</Badge></Menu.Item> <Menu.Item key="2"><Badge count={99}>@</Badge></Menu.Item>
</Menu> </Menu>
<button>所有消息一键已读</button> <button>所有{noticeType==="0"?"系统通知":noticeType==="1"?"私信":"@我"}一键已读</button>
</div> </div>
<div className={isBatchDelete ? "invisible " : "visible"}> <div className={isBatchDelete ? "invisible " : "visible"}>
<span className="alignCenter"> <div className="vertical-center-style">
<input type="checkbox"></input>&nbsp; {/* <input type="checkbox"></input>&nbsp;
仅看未读{noticeType === "1" ? "私信" : "消息"}12 仅看未读{noticeType === "1" ? "私信" : "消息"}12 */}
</span> <Checkbox >仅看未读{noticeType === "1" ? "私信" : "消息"}12</Checkbox>
</div>
{noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""} {noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
</div> </div>
<div className={isBatchDelete ? 'visible' : 'invisible'}> <div className={isBatchDelete ? 'visible' : 'invisible'}>
<span> <div className="vertical-center-style">
<input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp; <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp; 全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;
</span> </div>
<div> <div>
<button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp; <button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button> <button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
@ -77,7 +79,7 @@ function MyNotice(props) {
</div> </div>
{noticeType === "1" ? {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> <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="private-letter-right"> <div className="private-letter-right">
<div> <div>
@ -86,28 +88,28 @@ function MyNotice(props) {
<a onClick={deleteNotice}>删除</a> <a onClick={deleteNotice}>删除</a>
</div> </div>
<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>
</div> </div>
: <div className="mynotice-content"> : <div className="mynotice-content vertical-center-style">
<div className="cont"> <div className="mynotice-cont vertical-center-style">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} /> <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */} {/* 系统通知 */}
{noticeType === "0" ? <Badge color="#FA2020" /> : ""} {noticeType === "0" ? <Badge color="#FA2020" /> : ""}
{noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""} {noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
{noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""} {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
{noticeType === "2" ? <Badge color="#FA2020" /> : ""} {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>
<div className="cont"> <div className="mynotice-cont vertical-center-style">
<span className="timeSpan">4分钟前</span> <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>
</div>} </div>}
{noticeType === "1" ? {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> <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="private-letter-right"> <div className="private-letter-right">
<div> <div>
@ -116,28 +118,28 @@ function MyNotice(props) {
<a onClick={deleteNotice}>删除</a> <a onClick={deleteNotice}>删除</a>
</div> </div>
<div> <div>
<span className="highlightSpan">gitlink平台 react 前端代码</span> <span className="highlightSpan letter-length-limit">gitlink平台 react 前端代码</span>
</div> </div>
</div> </div>
</div> </div>
: <div className="mynotice-content"> : <div className="mynotice-content vertical-center-style">
<div className="cont"> <div className="mynotice-cont vertical-center-style">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} /> <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */} {/* 系统通知 */}
{noticeType === "0" ? <Badge color="#FA2020" /> : ""} {noticeType === "0" ? <Badge color="#FA2020" /> : ""}
{noticeType === "0" ? <i className="iconfont icon-hebingqingqiuicon"></i> : ""} {noticeType === "0" ? <i className="iconfont icon-hebingqingqiuicon"></i> : ""}
{noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""} {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
{noticeType === "2" ? <Badge color="#FA2020" /> : ""} {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>
<div className="cont"> <div className="mynotice-cont vertical-center-style">
<span className="timeSpan">10分钟前</span> <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>
</div>} </div>}
{noticeType === "1" ? {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> <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="private-letter-right"> <div className="private-letter-right">
<div> <div>
@ -146,22 +148,22 @@ function MyNotice(props) {
<a onClick={deleteNotice}>删除</a> <a onClick={deleteNotice}>删除</a>
</div> </div>
<div> <div>
<span className="highlightSpan">构建卷积神经网络训练模型预测模型效果</span> <span className="highlightSpan letter-length-limit">构建卷积神经网络训练模型预测模型效果</span>
</div> </div>
</div> </div>
</div> </div>
: <div className="mynotice-content"> : <div className="mynotice-content vertical-center-style">
<div className="cont"> <div className="mynotice-cont vertical-center-style">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} /> <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */} {/* 系统通知 */}
{noticeType === "0" ? <span>&nbsp;&nbsp;&nbsp;</span> : ""} {noticeType === "0" ? <span>&nbsp;&nbsp;&nbsp;</span> : ""}
{noticeType === "0" ? <i className="iconfont icon-lichengbeiicon"></i> : ""} {noticeType === "0" ? <i className="iconfont icon-lichengbeiicon"></i> : ""}
{noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""} {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>
<div className="cont"> <div className="mynotice-cont vertical-center-style">
<span className="timeSpan">1小时前</span> <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>} </div>}
</div> </div>

View File

@ -49,6 +49,7 @@ button {
background: #FAFBFC; background: #FAFBFC;
border: 1px solid #D0D0D0; border: 1px solid #D0D0D0;
border-radius: 4px; border-radius: 4px;
height: 32px;
} }
button:hover { button:hover {
background: #F3F4F6; background: #F3F4F6;
@ -74,8 +75,6 @@ button:active {
} }
.mynotice-content { .mynotice-content {
display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 15px 0 15px 10px; padding: 15px 0 15px 10px;
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
@ -112,9 +111,7 @@ button:active {
// margin-right: 10px; // margin-right: 10px;
} }
.cont{ .mynotice-cont{
display: flex;
align-items: center;
padding:0; padding:0;
} }
} }
@ -156,16 +153,35 @@ button:active {
} }
.highlightSpan{ .highlightSpan{
max-width: 40rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover{ &:hover{
color: #466AFF; color: #466AFF;
cursor: pointer; 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{ #numberSpan{
color: #466AFF; color: #466AFF;
}
.vertical-center-style{
display: flex;
align-items: center;
}
.float-left-little{
margin-right: 10px;
} }

View File

@ -56,7 +56,7 @@ function SSH(props) {
<SSHDetail visible={visibleDesc} onCancel={()=>setVisibleDesc(false)} desc={content}/> <SSHDetail visible={visibleDesc} onCancel={()=>setVisibleDesc(false)} desc={content}/>
<div className="sshHead"> <div className="sshHead">
<span>SSH密钥</span> <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> </div>
{ {
list && list.length > 0 && list && list.length > 0 &&

View File

@ -125,7 +125,7 @@ export default Form.create()(
</Form.Item> </Form.Item>
<AlignCenter> <AlignCenter>
<span className="ant-form-item-label"></span> <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> */} {/* <Button type={"default"} onClick={()=>props.history.push(`/${current_user && current_user.login}`)} className="ml20">取消</Button> */}
</AlignCenter> </AlignCenter>
</Form> </Form>

View File

@ -1,5 +1,6 @@
import React , { useEffect , useState } from 'react'; import React , { useEffect , useState } from 'react';
import './Index.scss'; import './Index.scss';
import '../../SecuritySetting/notice/manager/Index.scss'
import { Menu } from 'antd'; import { Menu } from 'antd';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Base from './Base'; import Base from './Base';
@ -25,11 +26,14 @@ function Index(props){
return( return(
<div> <div className="notice01">
<Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu"> <div className="sshHead">
<Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item> <Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu">
{/* <Menu.Item key="1"><Link to={`/${username}/password`}>密码管理</Link></Menu.Item> */} <Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item>
</Menu> {/* <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"}}> <div style={{padding:"20px"}}>
{ {
key === "0" ? key === "0" ?

View File

@ -19,6 +19,12 @@
.ant-menu-item{ .ant-menu-item{
a{ a{
font-size: 16px; font-size: 16px;
color: #333333;
position: relative;
bottom: -10px;
}
a:hover{
color: #333333;
} }
} }
} }

View File

@ -89,7 +89,7 @@ export default Form.create()(
</Form.Item> </Form.Item>
<AlignCenter style={{marginTop:"20px"}}> <AlignCenter style={{marginTop:"20px"}}>
<span className="ant-form-item-label"></span> <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> <Button type={"default"} onClick={()=>props.history.push(`/${username}`)} className="ml20">取消</Button>
</AlignCenter> </AlignCenter>
</Form> </Form>