From c477fbe89a7cd6b816418879a8566970b6e674db 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:31:31 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=9A=84=E4=B8=89=E4=B8=AA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Head/NoticeContent.jsx              |  19 ++
 .../notice/privateLetter/Index.jsx            |  82 ++++++++
 .../notice/privateLetter/Index.scss           | 181 ++++++++++++++++++
 3 files changed, 282 insertions(+)
 create mode 100644 src/forge/Head/NoticeContent.jsx
 create mode 100644 src/forge/SecuritySetting/notice/privateLetter/Index.jsx
 create mode 100644 src/forge/SecuritySetting/notice/privateLetter/Index.scss

diff --git a/src/forge/Head/NoticeContent.jsx b/src/forge/Head/NoticeContent.jsx
new file mode 100644
index 000000000..ab637f96e
--- /dev/null
+++ b/src/forge/Head/NoticeContent.jsx
@@ -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;
diff --git a/src/forge/SecuritySetting/notice/privateLetter/Index.jsx b/src/forge/SecuritySetting/notice/privateLetter/Index.jsx
new file mode 100644
index 000000000..be5b1bb36
--- /dev/null
+++ b/src/forge/SecuritySetting/notice/privateLetter/Index.jsx
@@ -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;
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/notice/privateLetter/Index.scss b/src/forge/SecuritySetting/notice/privateLetter/Index.scss
new file mode 100644
index 000000000..0ac006bd9
--- /dev/null
+++ b/src/forge/SecuritySetting/notice/privateLetter/Index.scss
@@ -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;
+}