Gitlink
/
forgeplus-react
32
0
Fork 29
Code Issues Pull Requests 1 Releases 1 Wiki Activity

通知中心新增的三个页面

This commit is contained in:
谢思 2021-09-09 14:31:31 +08:00
parent e07e435557
commit c477fbe89a
3 changed files with 282 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/forge/Head/NoticeContent.jsx Normal file
View File

@ -0,0 +1,19 @@
import React, { useEffect, useState } from 'react';
import { Badge} from 'antd';
import './header.scss';
function NoticeContent(props) {
const noticeType = props.noticeType;
return(
<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>
)
}
export default NoticeContent;

82
src/forge/SecuritySetting/notice/privateLetter/Index.jsx Normal file
View File

@ -0,0 +1,82 @@
import React, { useState, useEffect } from 'react';
import './Index.scss'
import '../manager/Index.scss'
import { Button, Input, Icon, Badge } from 'antd';
function PrivateLetter(props){
const { TextArea,Search } = Input;
function deleteNotice(){
alert("删除消息");
}
return(
<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>
<span>蒋宇航</span>
</div>
<div className="plcontent-list">
<div className="vertical-center-style plclo">
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<div className="message-bubble mb-other"></div>
<div className="notice-content vertical-center-style">
嗨在吗？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
<a className="pld01">删除</a>
</div>
<span>2021-08-29 11:59</span>
</div>
<div className="notice-my vertical-center-style plclo">
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<div className="message-bubble"></div>
<div className="notice-content vertical-center-style">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
<a className="pld01">删除</a>
</div>
<span>2021-08-29 11:59</span>
</div>
</div>
<div className="private-letter-present">
<div>
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<TextArea className="private-letter-cont" rows="2" />
</div>
<div className="presentNotice">
<Button className="private-letter-cont-mt25 but25" type="primary">发送</Button>
</div>
</div>
</div>
<div className="pl-list">
<div className="list-sort vertical-center-style">
<Search
className=""
placeholder="搜索用户"
enterButton={<i className="iconfont icon-sousuo"></i>}
onSearch={value => console.log(value)}
style={{ width: 265 }}
/>
</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>
<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>
</div>
</div>
)
}
export default PrivateLetter;

181
src/forge/SecuritySetting/notice/privateLetter/Index.scss Normal file
View File

@ -0,0 +1,181 @@
.private-letter{
border-radius: 4px 4px 0px 0px;
border: 1px solid rgba(151, 151, 151, 0.24);
display: flex;
}
.pl-content{
flex: auto;
.pl-name{
height: 3rem;
// padding-left: 26px;
border-bottom: 1px solid #EEEEEE;
&>a{
position: relative;
left: 26px;
}
span{
font-size: 16px;
font-weight: 600;
color: #333333;
flex: auto;
text-align: center;
}
}
.plcontent-list{
height: 24rem;
padding:25px;
overflow-y: scroll;
.plclo{
margin-bottom: 30px;
}
.notice-my{
flex-direction: row-reverse;
& .pld01{
left: 0;
}
}
& .notice-content{
padding:8px 10px;
background: #F4F4F4;
border-radius:5px;
position: relative;
max-width: 20rem;
.pld01{
display: none;
}
&:hover .pld01{
display: block;
position: absolute;
right: 0;
bottom: -2em;
color: #999999;
font-size: 12px;
&:hover{
color: #666666;
}
}
}
& .message-bubble{
position:relative;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#FFFFFF #FFFFFF #FFFFFF #F4F4F4;
}
& .mb-other{
border-color:#FFFFFF #F4F4F4 #FFFFFF #FFFFFF;
}
& span{
margin: 0 10px;
font-size: 12px;
color: #999999;
line-height: 17px;
}
}
.private-letter-present{
padding:20px 28px;
& div{
display: flex;
align-items: center;
justify-content: flex-end;
flex: auto;
}
.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;
margin-left: 17px;
}
.private-letter-cont:hover,.private-letter-cont:focus {
background-color: #F4F4F4 !important;
}
}
}
.pl-list{
width: 30%;
border-left: 1px solid #EEEEEE;
.list-sort{
justify-content: center;
height: 3rem;
border-bottom: 1px solid #EEEEEE;
& .ant-btn-primary{
width: 2.3rem;
color: #466AFF;
background: #eff2ff;
border: 1px solid rgba(151, 151, 151, 0.24);
}
& .ant-btn{
padding: 0;
}
}
.list-scroll{
height: 32.4rem;
overflow-y: scroll;
}
.list-scroll-content{
padding: 10px 10px 15px 15px;
border-bottom: 1px solid #EEEEEE;
// &:last-child{
// border-bottom: 0px;
// }
&:hover{
background: #F3F4F6;
}
& a{
display: none;
}
&:hover a{
display: block;
color: #466AFF;
}
}
.ls-cont{
width: 13rem;
// flex: auto;
margin-left: 6px;
justify-content: space-between;
& .ls-content-span{
max-width: 11rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.vertical-center-style{
display: flex;
align-items: center;
}
img{
width: 45x;
height: 45px;
}