通知中心静态页面0910
This commit is contained in:
parent
c477fbe89a
commit
4795de938e
|
|
@ -13,7 +13,6 @@ 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 这部分脚本从公共脚本中直接调用
|
||||
|
|
@ -49,7 +48,6 @@ class NewHeader extends Component {
|
|||
settings: null,
|
||||
visiblemyss: false,
|
||||
openSearch:false,
|
||||
noticeType:"0",
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
|
|
@ -259,43 +257,6 @@ class NewHeader extends Component {
|
|||
)
|
||||
}
|
||||
|
||||
click = (e) =>{
|
||||
this.setState({
|
||||
noticeType: e.key,
|
||||
})
|
||||
}
|
||||
|
||||
messageList=()=>{
|
||||
let { noticeType } = this.state;
|
||||
return(
|
||||
<div className="messageHoverDiv">
|
||||
<div className="sshHead hoverNotice-head">
|
||||
<Menu mode="horizontal" selectedKeys={noticeType} onClick={this.click}>
|
||||
<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>
|
||||
</div>
|
||||
<div className="hoverNotice-body">
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
<NoticeContent noticeType={noticeType}></NoticeContent>
|
||||
</div>
|
||||
<div className="hoverNotice-buttom">
|
||||
<a>全部消息</a>
|
||||
<a>所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderMenu=(personal)=>{
|
||||
const { current_user } = this.props;
|
||||
return(
|
||||
|
|
@ -478,7 +439,7 @@ class NewHeader extends Component {
|
|||
|
||||
{/* {current_user && current_user.login && notice_url ? */}
|
||||
{current_user && current_user.login ?
|
||||
<Popover placement={`bottomRight`} content={this.messageList(settings && settings.personal)}>
|
||||
<Popover placement={`bottomRight`} content={<NoticeContent/>}>
|
||||
<a href={`/settings/notice/myNotice`} >
|
||||
<i className="iconfont icon-xiaoxilingdang color-grey-6 ml15 mr15"></i>
|
||||
<span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,285 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Badge} from 'antd';
|
||||
import { Badge, Menu} from 'antd';
|
||||
import './header.scss';
|
||||
import '../SecuritySetting/notice/manager/Index.scss';
|
||||
import '../SecuritySetting/Index.scss';
|
||||
import '../SecuritySetting/notice/myNotice/Index.scss'
|
||||
import { timeAgo } from '../../common/DateUtil';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function NoticeContent(props) {
|
||||
const noticeType = props.noticeType;
|
||||
const[noticeType,setNoticeType] = useState("0");
|
||||
const[notice_unread_count,setNotice_unread_count]=useState(221);//未读系统通知数量
|
||||
const[letter_unread_count,setLetter_unread_count]=useState(10);//未读私信数量
|
||||
const[at_unread_count,setAt_unread_count]=useState(2);//未读@我数量
|
||||
const[notice_unread_list,setNotice_unread_list]=useState([
|
||||
{
|
||||
id: 11,
|
||||
type: 1, //12345，用于展示不同的图标等，对应： 平台消息推送； 异常登录提示； 被拉入或移出项目，被拉入或移出组织；我负责的ISSUE发生改变； 我管理的仓库：有新的易修，有新的合并请求，有成员变更，仓库设置被更改，有新的易修指派给我，有新的合并请求指派给我等；
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
url: "/jasder/courselist", //跳转路径，跳转到对应的项目/issue等；单条通知只要一个跳转路径，点击该条通知任意位置都会跳到对应issue/项目
|
||||
content: "蒋宇航在 Gitlink/Gitlink 新建易修：<b>测试环境链接地址错误</b>", //要加粗的内容，在两侧加<b></b>标签
|
||||
create_time: "2019-03-04 18:08", //通知发送时间
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
type: 2,
|
||||
read: 0,
|
||||
url: "/jasder/courselist",
|
||||
content: "你关注的仓库 <b>王涛/协同分析</b> 已被删除",
|
||||
create_time: "2019-03-04 18:08",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
type: 3,
|
||||
read: 0,
|
||||
url: "/jasder/courselist",
|
||||
content: "蔡世新建易修<b> 【镜像项目-Github】私有项目 用户新建仓库，仓库转移到本地仓库的哈哈哈哈哈</b>",
|
||||
create_time: "2019-03-04 18:08",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
type: 4,
|
||||
read: 0,
|
||||
url: "/jasder/courselist",
|
||||
content: "您的帐号<b> 小霞子1999 </b>于2021-08-11 10:52:29在非常用的IP地址113.218.1.188(湖南)",
|
||||
create_time: "2019-03-04 18:08",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
type: 5,
|
||||
read: 0,
|
||||
url: "/jasder/courselist",
|
||||
content: "蔡世新建易修<b> 【镜像项目-Github】私有项目</b> 用户新建仓库，仓库转移到本地仓库的哈哈哈哈哈",
|
||||
create_time: "2019-03-04 18:08",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
type: 6,
|
||||
read: 0,
|
||||
url: "/jasder/courselist",
|
||||
content: "蔡世新建易修<b> 【镜像项目-Github】私有项目 用户新建仓库，仓库转移到本地仓库的哈哈哈</b>",
|
||||
create_time: "2019-03-04 18:08",
|
||||
}
|
||||
]);
|
||||
const[letter_unread_list,setLetter_unread_list]=useState([
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
send_name: "蒋宇航", //消息发送人
|
||||
send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页
|
||||
content: "私信内容", //最近一条未读消息的内容
|
||||
create_time: "2019-03-04 18:08", //发送时间
|
||||
},
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
send_name: "景霞", //消息发送人
|
||||
send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页
|
||||
content: "最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。", //最近一条未读消息的内容
|
||||
create_time: "2019-03-04 18:08", //发送时间
|
||||
},
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
send_name: "陈银花", //消息发送人
|
||||
send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页
|
||||
content: "A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.", //最近一条未读消息的内容
|
||||
create_time: "2019-03-04 18:08", //发送时间
|
||||
},
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
send_name: "蒋宇航", //消息发送人
|
||||
send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页
|
||||
content: "您好？", //最近一条未读消息的内容
|
||||
create_time: "2019-03-04 18:08", //发送时间
|
||||
},
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
send_name: "蒋宇航", //消息发送人
|
||||
send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页
|
||||
content: "Open-source high-performance RISC-V processor", //最近一条未读消息的内容
|
||||
create_time: "2019-03-04 18:08", //发送时间
|
||||
},
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
send_name: "蒋宇航", //消息发送人
|
||||
send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页
|
||||
content: "构建卷积神经网络，训练模型，预测模型效果。", //最近一条未读消息的内容
|
||||
create_time: "2019-03-04 18:08", //发送时间
|
||||
}
|
||||
]);
|
||||
const[at_unread_list,setAt_unread_list]=useState([
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
name: "蒋宇航", //@我的人
|
||||
content: "<b>钟景霞</b> 在易修 <b>【UI设计】用户public key添加功能</b> 中@我", //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
|
||||
create_time: "2019-03-04 18:08", //@我的时间
|
||||
url: "/jasder/courselist", //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
|
||||
},
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
name: "阿吧", //@我的人
|
||||
content: "<b>钟景霞</b> 在易修 <b>【UI设计】用户public key添加功能</b> 中@我【后端】代码库没有任何文件的情况下镜像项目创建/代码库页面一直处于loading状态需优化 ", //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
|
||||
create_time: "2019-03-04 18:08", //@我的时间
|
||||
url: "/jasder/courselist", //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
|
||||
}
|
||||
,
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
name: "蒋宇航", //@我的人
|
||||
content: "<b>钟景霞</b> 在易修 <b>【UI设计】用s@我", //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
|
||||
create_time: "2019-03-04 18:08", //@我的时间
|
||||
url: "/jasder/courselist", //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
|
||||
}
|
||||
,
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
name: "蒋宇航", //@我的人
|
||||
content: "<b>钟景霞</b> key添加功能</b> 中@我", //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
|
||||
create_time: "2019-03-04 18:08", //@我的时间
|
||||
url: "/jasder/courselist", //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
|
||||
}
|
||||
,
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
name: "蒋宇航", //@我的人
|
||||
content: "<b>钟景霞</b> 在易修 <b>【UI设计】用户public key添加功能</b> 中@我axdsadasd", //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
|
||||
create_time: "2019-03-04 18:08", //@我的时间
|
||||
url: "/jasder/courselist", //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
|
||||
}
|
||||
,
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
name: "蒋宇航", //@我的人
|
||||
content: "<b>钟景霞</b> 在易修 <b>【UI设计】用户public key添加功sdasd能</b> 中@我", //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
|
||||
create_time: "2019-03-04 18:08", //@我的时间
|
||||
url: "/jasder/courselist", //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
|
||||
}
|
||||
,
|
||||
{
|
||||
id: 122,
|
||||
read: 0, //是否已读，0未读，1已读
|
||||
name: "蒋宇航", //@我的人
|
||||
content: "<b>钟景霞</b> 在易修 <b>【UI设计】用户public key添加功能</b> 中@我", //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
|
||||
create_time: "2019-03-04 18:08", //@我的时间
|
||||
url: "/jasder/courselist", //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
|
||||
}
|
||||
]);
|
||||
|
||||
return(
|
||||
<div className="noticeCont">
|
||||
<Badge color="#FA2020" />
|
||||
{noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
|
||||
<div className="text">
|
||||
<span>蒋宇航：</span>
|
||||
<span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
|
||||
<span className="timeSpan">4分钟前</span>
|
||||
<div className="messageHoverDiv notice01">
|
||||
<div className="sshHead hoverNotice-head">
|
||||
<Menu mode="horizontal" selectedKeys={noticeType} onClick={(e)=>setNoticeType(e.key)}>
|
||||
<Menu.Item key="0"><Badge count={notice_unread_count}>系统通知</Badge></Menu.Item>
|
||||
<Menu.Item key="1" id="item-private"><Badge count={letter_unread_count}>私信</Badge></Menu.Item>
|
||||
<Menu.Item key="2"><Badge count={at_unread_count}>@我</Badge></Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
<div className="hoverNotice-body">
|
||||
|
||||
{/* 系统消息 */}
|
||||
{noticeType==="0"?notice_unread_list.length>0?notice_unread_list.map(item=>{
|
||||
let contentStr = item.content.endsWith("</b>") && item.content.length>=50 && item.content.replace("</b>","").substr(0,40)+"...";
|
||||
let iconName = item.type===1?"icon-xitongtongzhiicon":item.type===2?"icon-xiaoxi2":item.type===3?"icon-yixiuicon1":item.type===4?"icon-hebingqingqiuicon":item.type===5?"icon-lichengbeiicon":"icon-daimakuicon1";
|
||||
return(
|
||||
<div className="noticeCont-back">
|
||||
<div className="noticeCont" style={{height:item.content.length>=30 && item.content.length<=34?'65px':""}}>
|
||||
<Badge color="#FA2020" />
|
||||
<i className={"iconfont "+iconName}></i>
|
||||
<div className="noticeCont-text">
|
||||
<span dangerouslySetInnerHTML={{__html:contentStr?contentStr: item.content.length>=48?item.content.substr(0,48)+"...":item.content}}></span>
|
||||
<span className="timeSpan">{item.create_time?timeAgo(item.create_time):"刚刚"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}):"暂无数据":""}
|
||||
|
||||
{/* 私信 */}
|
||||
{noticeType==="1"?letter_unread_list.length>0?letter_unread_list.map(item=>{
|
||||
return(
|
||||
<div className="noticeCont-back">
|
||||
<div className="noticeCont" style={{height:item.content.length>=30 && item.content.length<=34?'65px':""}}>
|
||||
<Badge color="#FA2020" />
|
||||
<div className="noticeCont-text">
|
||||
<span>{item.send_name}：</span>
|
||||
<span className="boldSpan" dangerouslySetInnerHTML={{__html:item.content.length>=50?item.content.substr(0,50)+"...":item.content}}></span>
|
||||
<span className="timeSpan">{item.create_time?timeAgo(item.create_time):"刚刚"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}):"暂无数据":""}
|
||||
|
||||
{/* @我 */}
|
||||
{noticeType==="2"?at_unread_list.length>0?at_unread_list.map(item=>{
|
||||
return(
|
||||
<div className="noticeCont-back">
|
||||
<div className="noticeCont" style={{height:item.content.length>=30 && item.content.length<=42?'65px':""}}>
|
||||
<Badge color="#FA2020" />
|
||||
<div className="noticeCont-text">
|
||||
{/* <span className="at-name">{item.name}</span> */}
|
||||
<span dangerouslySetInnerHTML={{__html:item.content.length>=56?item.content.substr(0,56)+"...@我":item.content}}></span>
|
||||
<span className="timeSpan">{item.create_time?timeAgo(item.create_time):"刚刚"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}):"暂无数据":""}
|
||||
|
||||
{/* <div className="noticeCont">
|
||||
<Badge color="#FA2020" />
|
||||
{noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
|
||||
<div className="text">
|
||||
<span>蒋宇航：</span>
|
||||
<span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
|
||||
<span className="timeSpan">4分钟前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="noticeCont">
|
||||
<Badge color="#FA2020" />
|
||||
{noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
|
||||
<div className="text">
|
||||
<span>蒋宇航：</span>
|
||||
<span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
|
||||
<span className="timeSpan">4分钟前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="noticeCont">
|
||||
<Badge color="#FA2020" />
|
||||
{noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
|
||||
<div className="text">
|
||||
<span>蒋宇航：</span>
|
||||
<span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
|
||||
<span className="timeSpan">4分钟前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="noticeCont">
|
||||
<Badge color="#FA2020" />
|
||||
{noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
|
||||
<div className="text">
|
||||
<span>蒋宇航：</span>
|
||||
<span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
|
||||
<span className="timeSpan">4分钟前</span>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="hoverNotice-buttom">
|
||||
<Link to="/settings/notice/myNotice">全部消息</Link>
|
||||
<a>所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
export default NoticeContent;
|
||||
|
|
|
|||
|
|
@ -141,66 +141,84 @@
|
|||
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;
|
||||
padding: 12px 1px 12px 0;
|
||||
}
|
||||
|
||||
.hoverNotice-head .ant-badge{
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.hoverNotice-head{
|
||||
margin-left: 18px;
|
||||
|
||||
& .ant-badge{
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
&>.ant-menu-horizontal {
|
||||
border-bottom: 1px solid #e8e8e8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hoverNotice-body{
|
||||
height: 342px;
|
||||
overflow-y: scroll;
|
||||
|
||||
& b{
|
||||
font-weight: 400;
|
||||
text-shadow: 0.5px 0 0 #333;
|
||||
}
|
||||
}
|
||||
|
||||
.hoverNotice-buttom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
|
||||
padding: 12px 18px;
|
||||
a{
|
||||
color: #466AFF;
|
||||
}
|
||||
a:hover{
|
||||
opacity:0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.noticeCont-back{
|
||||
&:hover{
|
||||
background: #F3F4F6;
|
||||
}
|
||||
}
|
||||
|
||||
.noticeCont{
|
||||
display: flex;
|
||||
padding:12px 10px 10px 0;
|
||||
margin: 0 16px 0 18px;
|
||||
padding: 12px 0 10px 0;
|
||||
line-height: 24px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
||||
i{
|
||||
font-size: 16px !important;
|
||||
margin-right: 5px;
|
||||
font-size: 14px !important;
|
||||
margin-right: 6px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.text{
|
||||
.boldSpan{
|
||||
font-weight: 400;
|
||||
text-shadow: 0.5px 0 0 #333;
|
||||
}
|
||||
|
||||
.noticeCont-text{
|
||||
|
||||
flex: auto;
|
||||
position: relative;
|
||||
max-height: 48px;
|
||||
color:#333333;
|
||||
.boldSpan{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.timeSpan{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
right: 3px;
|
||||
bottom: 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;
|
||||
}
|
||||
.at-name{
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -57,16 +57,16 @@ function Index(props){
|
|||
</div>
|
||||
<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>
|
||||
<li className={pathname.indexOf("/settings/profile")>-1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i><span className="text-shodow-bold">基本资料</span></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>
|
||||
<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 className="text-shodow-bold">我的通知</span></Link></li>
|
||||
<li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span className="text-shodow-bold">通知管理</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>
|
||||
<li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i><span className="text-shodow-bold">SSH密钥</span></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<LongWidth>
|
||||
|
|
|
|||
|
|
@ -55,8 +55,9 @@
|
|||
}
|
||||
&.active a{
|
||||
color: #333;
|
||||
span{
|
||||
font-weight: 600;
|
||||
.text-shodow-bold{
|
||||
font-weight: 400;
|
||||
text-shadow: 0.5px 0 #333;
|
||||
}
|
||||
}
|
||||
&.active::before{
|
||||
|
|
@ -88,16 +89,23 @@
|
|||
margin-bottom: 15px;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
&>span{
|
||||
&>.text-shadow07{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
text-shadow: 0.5px 0 #333;
|
||||
}
|
||||
& .add-ssh-but{
|
||||
&>.add-SSH-title{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
text-shadow: 0.5px 0 #333;
|
||||
}
|
||||
& .but25{
|
||||
padding:0 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-list-item{
|
||||
padding:20px;
|
||||
border-bottom: 1px solid #eee!important;
|
||||
|
|
@ -129,7 +137,7 @@
|
|||
.questionLink{
|
||||
padding:15px 20px;
|
||||
a{
|
||||
color: #4B7AFF;
|
||||
color: #466AFF;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -167,4 +175,23 @@
|
|||
flex:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.but25{
|
||||
margin-bottom: 5px;
|
||||
background-color: #466AFF;
|
||||
color: #fff;
|
||||
border-color: #466AFF;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
background-color: #466AFF;
|
||||
border-color: #466AFF;
|
||||
}
|
||||
&:active{
|
||||
opacity: 1;
|
||||
background-color: #466AFF;
|
||||
border-color: #466AFF;
|
||||
}
|
||||
}
|
||||
.blue-Purple{
|
||||
color: #466AFF !important;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ function NoticeManager(props){
|
|||
return(
|
||||
<div className="notice01">
|
||||
<div className="sshHead">
|
||||
<span>通知管理</span>
|
||||
<span className="text-shadow07">通知管理</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="notice-manager-tip">您可以通过通知管理来选择接受通知的方式</span>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@
|
|||
.manager-cont-title{
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.notice01{
|
||||
|
|
@ -57,21 +55,33 @@
|
|||
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;
|
||||
opacity: 0.8;
|
||||
background-color: #466AFF;
|
||||
border-color: #466AFF;
|
||||
}
|
||||
&:active{
|
||||
opacity: 1;
|
||||
background-color: #466AFF;
|
||||
border-color: #466AFF;
|
||||
}
|
||||
}
|
||||
|
||||
::-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;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,8 +6,8 @@ import DelModal from '../../../Wiki/components/ModalFun';
|
|||
|
||||
function MyNotice(props) {
|
||||
|
||||
const [noticeType, setNoticeType] = useState("1");
|
||||
const [selectedNum, setSelectedNum] = React.useState(0);
|
||||
const [noticeType, setNoticeType] = useState("2");
|
||||
const [selectedNum, setSelectedNum] = useState(0);
|
||||
const [isBatchDelete, setIsBatchDelete] = useState(false);
|
||||
|
||||
function handleClick(e) {
|
||||
|
|
@ -52,16 +52,14 @@ function MyNotice(props) {
|
|||
<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.Item key="1" id="item-private"><Badge count={10}>私信</Badge></Menu.Item>
|
||||
<Menu.Item key="2"><Badge count={999}>@我</Badge></Menu.Item>
|
||||
</Menu>
|
||||
<button>所有{noticeType==="0"?"系统通知":noticeType==="1"?"私信":"@我"}一键已读</button>
|
||||
</div>
|
||||
|
||||
<div className={isBatchDelete ? "invisible " : "visible"}>
|
||||
<div className="vertical-center-style">
|
||||
{/* <input type="checkbox"></input>
|
||||
仅看未读{noticeType === "1" ? "私信" : "消息"}（12） */}
|
||||
<Checkbox >仅看未读{noticeType === "1" ? "私信" : "消息"}（12）</Checkbox>
|
||||
</div>
|
||||
{noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
|
||||
|
|
@ -73,21 +71,21 @@ function MyNotice(props) {
|
|||
全选 已选择 <span id="numberSpan">{selectedNum}</span> 项
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={() => { setIsBatchDelete(false); }}>取消</button>
|
||||
<button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
|
||||
<button onClick={() => { setIsBatchDelete(false);setSelectedNum(0); }}>取消</button>
|
||||
<button className="deleteBut" onClick={selectedNum>0 ? deleteNotice:()=>{}}>删除</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{noticeType === "1" ?
|
||||
<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="mynotice-content vertical-center-style">
|
||||
<Badge count={95}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" class="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-right">
|
||||
<div>
|
||||
<span>蒋宇航</span>
|
||||
<span className="timeSpan">4分钟前</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
<div>
|
||||
<div onClick={() => props.history.push('/settings/notice/privateLetter')}>
|
||||
<span className="highlightSpan letter-length-limit">最好的OpenStack控制台，对标OpenStack社区Horizon项目,最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,9 +96,9 @@ function MyNotice(props) {
|
|||
{/* 系统通知 */}
|
||||
{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={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
|
||||
{noticeType === "2" ? <img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" class="currentImg"/> : ""}
|
||||
{/* {noticeType === "2" ? <Badge color="#FA2020" className="at-badge"/> : ""} */}
|
||||
<span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>{noticeType === "2" ? <Badge color="#FA2020" className="at-badge"/> : ""}蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
|
||||
</div>
|
||||
<div className="mynotice-cont vertical-center-style">
|
||||
<span className="timeSpan">4分钟前</span>
|
||||
|
|
@ -110,7 +108,7 @@ function MyNotice(props) {
|
|||
|
||||
{noticeType === "1" ?
|
||||
<div className="mynotice-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
|
||||
<Badge count={599}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" class="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-right">
|
||||
<div>
|
||||
<span>段甲生</span>
|
||||
|
|
@ -128,9 +126,9 @@ function MyNotice(props) {
|
|||
{/* 系统通知 */}
|
||||
{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={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
|
||||
{noticeType === "2" ? <img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" class="currentImg"/> : ""}
|
||||
{/* {noticeType === "2" ? <Badge color="#FA2020" className="at-badge"/> : ""} */}
|
||||
<span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>{noticeType === "2" ? <Badge color="#FA2020" className="at-badge"/> : ""}蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
|
||||
</div>
|
||||
<div className="mynotice-cont vertical-center-style">
|
||||
<span className="timeSpan">10分钟前</span>
|
||||
|
|
@ -140,7 +138,7 @@ function MyNotice(props) {
|
|||
|
||||
{noticeType === "1" ?
|
||||
<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://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" class="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-right">
|
||||
<div>
|
||||
<span>巴拉迪维</span>
|
||||
|
|
@ -158,7 +156,7 @@ function MyNotice(props) {
|
|||
{/* 系统通知 */}
|
||||
{noticeType === "0" ? <span> </span> : ""}
|
||||
{noticeType === "0" ? <i className="iconfont icon-lichengbeiicon"></i> : ""}
|
||||
{noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
|
||||
{noticeType === "2" ? <img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" class="currentImg"/> : ""}
|
||||
<span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
|
||||
</div>
|
||||
<div className="mynotice-cont vertical-center-style">
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#item{
|
||||
margin: 0 34px !important;
|
||||
#item-private{
|
||||
margin: 0 24px 0 34px !important;
|
||||
}
|
||||
|
||||
li.ant-menu-item, .ant-menu-horizontal > .ant-menu-item {
|
||||
|
|
@ -24,12 +24,15 @@
|
|||
|
||||
.ant-menu-item-selected{
|
||||
color: #333333 !important;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
text-shadow: 0.5px 0 #333;
|
||||
border-bottom: 2px solid #2A61FF !important;
|
||||
}
|
||||
|
||||
.ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
|
||||
right: -4px;
|
||||
right: -6px;
|
||||
-webkit-box-shadow: 0 0 0 0;
|
||||
box-shadow: 0 0 0 0;
|
||||
}
|
||||
.ant-badge-multiple-words {
|
||||
padding: 0 0px;
|
||||
|
|
@ -78,6 +81,7 @@ button:active {
|
|||
justify-content: space-between;
|
||||
padding: 15px 0 15px 10px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
color: #333333;
|
||||
|
||||
&:hover{
|
||||
background: #F3F4F6;
|
||||
|
|
@ -102,17 +106,42 @@ button:active {
|
|||
}
|
||||
|
||||
.boldSpan{
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
text-shadow: 0.5px 0 0 #333;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
img{
|
||||
& .currentImg{
|
||||
width: 40px;
|
||||
// margin-right: 10px;
|
||||
height: 40px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
& .private-letter-img + .ant-badge-count{
|
||||
top: 2px;
|
||||
right: 5px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.mynotice-cont{
|
||||
padding:0;
|
||||
position: relative;
|
||||
|
||||
& .at-badge{
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
& .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
|
||||
-webkit-box-shadow: 0 0 0 0;
|
||||
box-shadow: 0 0 0 0;
|
||||
top: 3px;
|
||||
right: 4px;
|
||||
min-width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -135,17 +164,9 @@ button:active {
|
|||
}
|
||||
}
|
||||
|
||||
.ant-badge-count {
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 0;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.private-letter-right {
|
||||
flex: auto;
|
||||
margin: 0px 10px;
|
||||
margin: 0px 10px 0 16px;
|
||||
& div{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -172,6 +193,7 @@ button:active {
|
|||
|
||||
.at-length{
|
||||
max-width: 48rem;
|
||||
margin-left: 22px;
|
||||
}
|
||||
#numberSpan{
|
||||
color: #466AFF;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
|
|||
import './Index.scss'
|
||||
import '../manager/Index.scss'
|
||||
import { Button, Input, Icon, Badge } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function PrivateLetter(props){
|
||||
|
||||
|
|
@ -15,12 +16,12 @@ function PrivateLetter(props){
|
|||
<div className="private-letter notice01">
|
||||
<div className="pl-content">
|
||||
<div className="pl-name vertical-center-style">
|
||||
<a href="/settings/notice/myNotice"><i className="iconfont icon-zuojiantou"></i></a>
|
||||
<Link to="/settings/notice/myNotice"><i className="iconfont icon-zuojiantou"></i></Link>
|
||||
<span>蒋宇航</span>
|
||||
</div>
|
||||
<div className="plcontent-list">
|
||||
<div className="vertical-center-style plclo">
|
||||
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg"/>
|
||||
<div className="message-bubble mb-other"></div>
|
||||
<div className="notice-content vertical-center-style">
|
||||
嗨在吗？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
|
||||
|
|
@ -30,7 +31,7 @@ function PrivateLetter(props){
|
|||
</div>
|
||||
|
||||
<div className="notice-my vertical-center-style plclo">
|
||||
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg"/>
|
||||
<div className="message-bubble"></div>
|
||||
<div className="notice-content vertical-center-style">
|
||||
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
|
||||
|
|
@ -42,7 +43,7 @@ function PrivateLetter(props){
|
|||
</div>
|
||||
<div className="private-letter-present">
|
||||
<div>
|
||||
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg"/>
|
||||
<TextArea className="private-letter-cont" rows="2" />
|
||||
</div>
|
||||
<div className="presentNotice">
|
||||
|
|
@ -62,7 +63,124 @@ function PrivateLetter(props){
|
|||
</div>
|
||||
<div className="list-scroll">
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
<span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
|
||||
</div>
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
|
||||
<a onClick={deleteNotice}>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-scroll-content vertical-center-style">
|
||||
<Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
|
||||
<div className="private-letter-list-content-right">
|
||||
<div className="ls-cont vertical-center-style">
|
||||
<span>蒋宇航</span>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,28 @@
|
|||
border-radius: 4px 4px 0px 0px;
|
||||
border: 1px solid rgba(151, 151, 151, 0.24);
|
||||
display: flex;
|
||||
|
||||
.currentImg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
& .private-letter-img + .ant-badge-count{
|
||||
top: 2px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.pl-content{
|
||||
flex: auto;
|
||||
.pl-name{
|
||||
height: 3rem;
|
||||
// padding-left: 26px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
||||
&>a{
|
||||
position: relative;
|
||||
left: 26px;
|
||||
color:#999999;
|
||||
}
|
||||
span{
|
||||
font-size: 16px;
|
||||
|
|
@ -25,7 +35,7 @@
|
|||
}
|
||||
.plcontent-list{
|
||||
height: 24rem;
|
||||
padding:25px;
|
||||
padding:20px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.plclo{
|
||||
|
|
@ -85,7 +95,7 @@
|
|||
}
|
||||
}
|
||||
.private-letter-present{
|
||||
padding:20px 28px;
|
||||
padding:20px 20px;
|
||||
& div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -95,21 +105,18 @@
|
|||
.private-letter-cont-mt25{
|
||||
margin-top: 8px;
|
||||
padding:0 22px;
|
||||
// background-color: #2A61FF;
|
||||
// color: #fff;
|
||||
// border-color: #2A61FF;
|
||||
// &:hover,&:focus,&:active{
|
||||
// background-color: #4a76f8;
|
||||
// border-color: #4a76f8;
|
||||
// }
|
||||
}
|
||||
|
||||
.private-letter-cont, .private-letter-cont .ant-input-suffix{
|
||||
background-color: #F4F4F4 !important;
|
||||
background-color: #fafafa !important;
|
||||
margin-left: 17px;
|
||||
}
|
||||
.private-letter-cont:hover,.private-letter-cont:focus {
|
||||
background-color: #F4F4F4 !important;
|
||||
|
||||
.private-letter-cont{
|
||||
resize:none;
|
||||
&:hover,&:focus{
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -131,6 +138,10 @@
|
|||
& .ant-btn{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// & .ant-input:hover{
|
||||
// border: 1px solid red !important;
|
||||
// }
|
||||
}
|
||||
|
||||
.list-scroll{
|
||||
|
|
@ -159,7 +170,7 @@
|
|||
.ls-cont{
|
||||
width: 13rem;
|
||||
// flex: auto;
|
||||
margin-left: 6px;
|
||||
margin-left: 15px;
|
||||
justify-content: space-between;
|
||||
& .ls-content-span{
|
||||
max-width: 11rem;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ function New({ form , showNotification , history }) {
|
|||
return(
|
||||
<div>
|
||||
<div className="sshHead">
|
||||
<span><Link to={`/settings/SSH`} className="color-blue">SSH密钥</Link><i className="iconfont icon-youjiantou ml5 mr5 font-12"></i>添加SSH密钥</span>
|
||||
<span className="add-SSH-title"><Link to={`/settings/SSH`} className="blue-Purple">SSH密钥</Link><i className="iconfont icon-youjiantou ml5 mr5 font-12"></i>添加SSH密钥</span>
|
||||
</div>
|
||||
<Form className="sshForm">
|
||||
<Form.Item label="标题" validateStatus={msg && msg.status === 10001 ? "error":undefined} help={msg && msg.status === 10001 ? msg.message:undefined}>
|
||||
|
|
@ -51,7 +51,7 @@ function New({ form , showNotification , history }) {
|
|||
<TextArea placeholder="支持以'ssh-rsa','ssh-dss','ssh-ed25519','ecdsa-sha2-nistp256','ecdsa-sha2-nistp384','ecdsa-sha2-nistp521'开头" autoSize={{ minRows: 6, maxRows: 6 }}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Button type="primary" style={{width:"100px"}} onClick={submit}>确定</Button>
|
||||
<button style={{width:"100px"}} onClick={submit} className="but25">确定</button>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -55,8 +55,8 @@ function SSH(props) {
|
|||
<DeleteBox visible={visible} onCancel={()=>setVisible(false)} onSuccess={onSuccess}/>
|
||||
<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')} className="add-ssh-but">添加SSH密钥</Button>
|
||||
<span className="text-shadow07">SSH密钥</span>
|
||||
<button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')} className="but25">添加SSH密钥</button>
|
||||
</div>
|
||||
{
|
||||
list && list.length > 0 &&
|
||||
|
|
|
|||
Loading…
Reference in New Issue