ywt-react/view/UserMessage/UserMessageView.js

import React from 'react'
import {OverlayTrigger, Popover, Image, Glyphicon, Button} from 'react-bootstrap'
import DefaultAvatar from '../../assets/img-defaultAvatar.png'
import Logo from '../../assets/img-logo.png'
import classes from './UserMessageView.css'

const popoverBottom = (
    <Popover id="popover-positioned-scrolling-bottom">
        <Button bsSize="xsmall" href="#/" style={{border:0,background:"#fff",width:"120px"}}><Glyphicon glyph="off" />退  出</Button>
    </Popover>
);

class App extends React.Component{
    state = {};
    render() {
        return (
            <div>
                <div className="message-top clearfix">
                    <div className="left">
                        <Image src={Logo} responsive></Image>
                    </div>
                    <div className="right">
                        南方医务通医生工作台
                    </div>
                </div>

                <div className="message-body clearfix">
                    <div className="left">
                        <div className="avatarbox">
                            <OverlayTrigger container={this} trigger="click" placement="bottom" overlay={popoverBottom}>
                                <Button style={{border: 0,background: "#fff"}}>
                                    <Image className="avatar" src={DefaultAvatar} rounded responsive/>
                                </Button>
                            </OverlayTrigger>
                            <div className="name">李秋豪</div>
                        </div>
                        <div className="col-lg-12 list">
                            <ul className="parent">
                                <li className="active"><a href="#/userMessage"><span className="icon icon-message"></span><span className="text-message">消息&nbsp;&nbsp;2</span></a></li>
                                <li><a href="#/home"><span className="icon icon-home"></span><span>首页</span></a></li>
                                <ul className="childList">
                                    <li><a href="#">专家询诊</a></li>
                                    <li><a href="#">双向转诊</a></li>
                                    <li><a href="#">名医主诊</a></li>
                                    <li><a href="#">咨询</a></li>
                                </ul>
                                <li><a href="#"><span className="icon icon-patient"></span><span>我的患者</span></a></li>
                                <li><a href="#"><span className="icon icon-doctor"></span><span>我的关联医生</span></a></li>
                                <li><a href="#"><span className="icon icon-expert"></span><span>平台所有医生</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <div className="right" style={{background: "#f0f1f7"}}>
                        <div className="messageList">
                            <ul>
                                <li className="title">消息中心</li>
                            </ul>
                            <ul>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王瀚哲医生：好的，我先看看！bilibili moe 2017 动画角色人气大赏即将开始，活动预约页面于6月9日至6月18日正式开启访问，欢迎各位小伙伴及时前往参与预约啦啦啦……</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                                <li>
                                    <span className="type">专家询诊</span><span className="date">2017-09-30  10：11</span>
                                    <p>王帆患者已支付！</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default App