找病人

src/routes/FindPatient/FindPatientView.css

@@ -0,0 +1,182 @@
+@charset "UTF-8";
+body{
+    overflow: hidden;
+}
+/* 顶部 */
+.home-top{
+    background: #589bff;
+    width: 100%;
+}
+.home-top > div{
+    height: 70px;
+    float: left;
+}
+
+.home-top .left{
+    width: 220px;
+    background: #4f80f6;
+    text-align: center;
+}
+
+.home-top .right{
+    /*width: 100%;*/
+    line-height: 70px;
+    color: white;
+    font-size: 18px;
+    padding-left: 30px;
+}
+
+/*主体内容*/
+.home-body{
+    box-sizing: border-box;
+}
+
+.home-body .left{
+    width: 220px;
+    position: absolute;
+    margin-top: 70px;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-right: 1px #ebebeb solid;
+    background: #fff;
+}
+
+.home-body .left .avatarbox{
+    padding: 30px;
+    text-align: center;
+}
+
+.home-body .left .avatarbox .name,.home-body .left .avatarbox .avatar {
+    margin: 5px auto;
+}
+
+.home-body .left .avatarbox .name {
+    color: #808a9c;
+    font-size: 18px;
+}
+
+/* 侧边栏 */
+.home-body .left .list{
+
+}
+.home-body .left .parent{
+    padding-left: 0;
+}
+.home-body .left .list li{
+    list-style-type: none;
+    font-size: 16px;
+    /*padding: 10px;*/
+    margin-bottom: 10px;
+}
+.home-body .left .list>ul li .icon{
+    color: #5d8af7;
+    font-size: 20px;
+    vertical-align: text-bottom;
+    padding: 10px;
+}
+.home-body .left .list li a{
+    color: #000;
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+}
+.home-body .left .list li.active,.home-body .left .list li:hover{
+    background: #488af7;
+    -webkit-border-radius: 50px;
+    -moz-border-radius: 50px;
+    border-radius: 50px;
+}
+.home-body .left .list li.active .icon,.home-body .left .list li:hover .icon{
+    color: #fff;
+}
+.home-body .left .list li.active a, .home-body .left .list li:hover a{
+    color: #fff;
+}
+.home-body .left .list .text-message{
+    color: #ff6f56;
+}
+.home-body .left .list .childList{
+    padding: 0 40px 0 0 ;
+}
+.home-body .left .list .childList a{
+    padding-left: 60px;
+}
+
+
+
+/* 右边主体内容 */
+.home-body .right{
+    position: absolute;
+    padding-top: 70px;
+    height: 100%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding-left: 220px;
+    z-index: -1;
+    background: #f6f7fa;
+}
+
+.home-body .right .body{
+    padding: 10px;
+}
+.home-body .right .body .head{
+    background: #fff;
+    border-radius-topleft: 10px;
+    border-radius-topright: 10px;
+}
+.home-body .right .body .head li{
+    text-align: center;
+    /*padding: 0 90px;*/
+}
+.home-body .right .body .head li a{
+    display: block;
+    text-align: center;
+    height: 80px;
+    line-height: 80px;
+    font-size: 18px;
+    text-decoration: none;
+    max-width: 150px;
+    color: #4f80f6;
+    margin: 0 auto;
+}
+
+
+.home-body .right .body .head li.active a
+{
+    border-bottom: 2px #4f80f6 solid;
+}
+
+/* 表格居中 */
+.tableBox{
+    text-align: center;
+    margin: 10px 0 0 0;
+}
+.tableBox table{
+    background: #fff;
+}
+.tableBox th{
+    text-align: center;
+}
+.tableBox>table>thead>tr>th,.tableBox>table>tbody>tr>td{
+    border-top: 0;
+    border-bottom: 0;
+}
+.tableBox>table>tbody>tr>td>button{
+    padding: 0;
+}
+/* 分页 */
+.myPagination{
+    /*width: 600px;*/
+    margin: 0 auto;
+}
+.myPagination .addheigh{
+    height: 26px;
+    line-height: 26px;
+}
+.myPagination div{
+    margin: 0 30px;
+    display: inline-block;
+    font-size: 16px;
+}

src/routes/FindPatient/FindPatientView.js

@@ -0,0 +1,285 @@
+import React from 'react'
+import DefaultAvatar from './assets/img-defaultAvatar.png'
+import Logo from './assets/img-logo.png'
+import Detail from './assets/img-xunzhen-detail.jpg'
+import {Grid, Row, Col, Image, FormGroup, InputGroup, FormControl, Glyphicon, Button, Table, ControlLabel, Form} from 'react-bootstrap'
+import classes from './FindPatientView.css'
+
+function getInitialState() {
+    return {show: false};
+}
+
+function showModal() {
+    console.log('show');
+    this.setState({show: true});
+}
+
+function hideModal() {
+    this.setState({show: false});
+}
+
+export const FindPatientView = () => (
+    <div>
+        <div className="home-top clearfix">
+            <div className="left">
+                <Image src={Logo} responsive></Image>
+            </div>
+            <div className="right">
+                南方医务通医生工作台
+            </div>
+        </div>
+
+        <div className="home-body clearfix">
+            <div className="left">
+                <div className="avatarbox">
+                    <Image className="avatar" src={DefaultAvatar} rounded responsive/>
+                    <div className="name">李秋豪</div>
+                </div>
+                <div className="col-lg-12 list">
+                    <ul className="parent">
+                        <li><a href="/message"><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 className="active"><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={{overflow: "auto"}}>
+                <div className="body">
+                    <div className="head">
+                        <ul className="clearfix">
+                            <li className="col-lg-4 col-md-4 active col-xs-4"><a href="/findpatient">找患者</a></li>
+                            <li className="col-lg-4 col-md-4 col-xs-4" ><a href="/myorders">我的订单</a></li>
+                            <li className="col-lg-4 col-md-4 col-xs-4"><a href="/expert">专家询诊流程</a></li>
+                        </ul>
+                    </div>
+                    <div className="clearfix">
+                        <div style={{position: "relative",padding: "5px 0"}}>
+                            <FormGroup style={{width: "300px",margin: "0 auto"}}>
+                                <InputGroup>
+                                    <InputGroup.Addon style={{
+                                        border: 0,
+                                        background: "#fff",
+                                        borderTopLeftRadius: "20px",
+                                        borderBottomLeftRadius: "20px"
+                                    }}><Glyphicon glyph="search" /></InputGroup.Addon>
+                                    <FormControl type="text" style={{border: 0,boxShadow: "none"}}/>
+                                    <InputGroup.Button>
+                                        <Button bsStyle="link" style={{background: "#fff",borderTopRightRadius: "20px",borderBottomRightRadius: "20px"}}>搜索</Button>
+                                    </InputGroup.Button>
+                                </InputGroup>
+                            </FormGroup>
+                            <Button bsStyle="danger" onClick={showModal} style={{
+                                position: "absolute",
+                                right: 0,
+                                top: "1px",
+                                borderRadius: "50px"
+                            }}>添加患者</Button>
+                        </div>
+                        <div className="tableBox">
+                            <Table striped hover >
+                                <thead>
+                                <tr>
+                                    <th>患者姓名</th>
+                                    <th>性别</th>
+                                    <th>年龄（Y）</th>
+                                    <th>手机号</th>
+                                    <th>操作</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                            <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>王帆</td>
+                                    <td>男</td>
+                                    <td>26</td>
+                                    <td>18904032521</td>
+                                    <td>
+                                        <Button bsSize="small" bsStyle="link">帮他/她预约</Button>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </Table>
+                            <div className="clearfix myPagination">
+                                <div className="addheigh">3/60页</div>
+                                <div className="addheigh">
+                                    <Button bsStyle="link">上一页</Button>
+                                </div>
+                                <div className="addheigh">
+                                    <Button bsStyle="link">下一页</Button>
+                                </div>
+                                <div className="">
+                                    跳转到至第
+                                    <input style={{width: "30px"}} type="text"/>
+                                    页
+                                    <Button style={{background: "#4f80f6",marginLeft: "10px"}} bsStyle="primary" bsSize="xsmall">确定</Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+)
+
+export default FindPatientView

src/routes/FindPatient/index.js

@@ -0,0 +1,7 @@
+import FindPatientView from './FindPatientView'
+
+
+export default {
+    path: 'findpatient',
+    component: FindPatientView,
+}