forgeplus-react/src/forge/SecuritySetting/notice/privateLetter/Index.jsx

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){

  const { TextArea,Search } = Input;

  function deleteNotice(){
    alert("删除消息");
  }

  return(
    <div className="private-letter notice01">
      <div className="pl-content">
        <div className="pl-name vertical-center-style">
          <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://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">
              嗨在吗？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
              <a className="pld01">删除</a>
            </div>
            <span>2021-08-29 11:59</span>
          </div>

          <div className="notice-my vertical-center-style plclo">
            <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">
              哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
              <a className="pld01">删除</a>
            </div>
            <span>2021-08-29 11:59</span>
          </div>
          
        </div>
        <div className="private-letter-present">
          <div>
            <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">
            <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://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>
                <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;