file

src/layout/Footer.jsx

@@ -20,7 +20,7 @@ class Footer extends Component {
         const tabItem = [
             {title: '待办', key: 'backlog', icon: '/img/footer-backlog.png', selectedIcon: '/img/footer-backlog-s.png', badge: '', onPress: '/bord/backlog'},
             {title: '工作', key: 'work', icon: '/img/footer-work.png', selectedIcon: '/img/footer-work-s.png', badge: '', onPress: '/bord/work'},
-            {title: '通讯录', key: 'communicate', icon: '/img/footer-communicate.png', selectedIcon: '/img/footer-communicate-s.png', badge: '', onPress: '/bord/communicate'},
+            {title: '通讯录', key: 'addressList', icon: '/img/footer-communicate.png', selectedIcon: '/img/footer-communicate-s.png', badge: '', onPress: '/bord/addressList'},
             {title: '通知', key: 'notice', icon: '/img/footer-notice.png', selectedIcon: '/img/footer-notice-s.png', badge: '', onPress: '/bord/notice'}
         ];
 

src/pages/AddressList/AddressList.jsx

+import React, {Component} from 'react';
+import {List, WhiteSpace,Row,Col} from 'antd-mobile';
+import { BrowserRouter, Route, Link } from "react-router-dom";
+import '../Communicate/index.less';
+class AddressList extends Component {
+    state = {
+        
+    }
+    render() {
+        const partList = [{
+            name:'办公厅',
+            id:1,
+        },{
+            name:'组织部',
+            id:2
+        }];
+        return (
+            <div>
+                <div className='breadBox'>
+                     <span className='currentLink'>科技创新委员会</span><span className='symbol'>&gt;</span><span>组织架构</span><span className='symbol'>&gt;</span><span>办公厅</span>
+                </div>
+                <div className='adMainBox'>
+                    <div className='adListBox'>
+                        <ul className='partList'>
+                            {partList && partList.map(item => {
+                                    return <li onClick = { () => {this.props.history.push(`/bord/communicate/${item.id}`)}}>
+                                    <p className="item">{item.name}</p>
+                                    <p className="item"><img src="/img/rarrow.png" alt="" className='icon18'/></p>
+                                    </li>
+                            })}
+                        </ul>
+                    </div>
+                </div> 
+            </div>
+        );
+    }
+}
+
+export default AddressList;

src/pages/Communicate/Communicate.jsx

@@ -5,6 +5,7 @@ import './index.less'
 const Item = List.Item;
 
 class Communicate extends Component {
+    
     render() {
         return (
             <div>
@@ -19,7 +20,50 @@ class Communicate extends Component {
                                     <div className='adContent'>
                                         <div className='peopleList'>
                                             <p className='subItem'>
-                                                王磊
+                                                <span className='cicrleHead mr-5'>
+                                                    <img src='/img/head.png' className='imgRes' />
+                                                </span>
+                                               王磊
+                                            </p>
+                                            <p className='subItem'>
+                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
+                                            </p>
+                                        </div>
+                                        <div className='peopleList'>
+                                            <p className='subItem'>
+                                                <span className='cicrleHead mr-5 centerFont'>
+                                                   王
+                                                </span>
+                                               王磊
+                                            </p>
+                                            <p className='subItem'>
+                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div className='itemBox'>
+                                    <h4 className='titleBar'>市委办公厅审核员</h4>
+                                    <div className='adContent'>
+                                        <div className='peopleList'>
+                                            <p className='subItem'>
+                                                <span className='cicrleHead mr-5'>
+                                                    <img src='/img/head.png' className='imgRes' />
+                                                </span>
+                                               王磊
+                                            </p>
+                                            <p className='subItem'>
+                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
+                                            </p>
+                                        </div>
+                                        <div className='peopleList'>
+                                            <p className='subItem'>
+                                                <span className='cicrleHead mr-5 centerFont'>
+                                                   王
+                                                </span>
+                                               王磊
                                             </p>
                                             <p className='subItem'>
                                                 <img className='smallIco mr-5' src='/img/tel.png' />13488876526

src/pages/Communicate/index.less

@@ -20,12 +20,16 @@
 }
 .adListBox{
     li{
-        margin-bottom:5px ;
+        margin-bottom:10px ;
         border-bottom: 1px solid @grayLight;
+        &:last-child{
+            padding-top: 0;
+            border-bottom: none;
+        }
     }
     .titleBar{
         font-size: 16px;
-        font-weight: bold;
+        padding-top: 0;
     }
     .adContent{
         padding:15px 0;
@@ -35,6 +39,8 @@
     display: flex;
     justify-content: space-between;
     line-height: 1.5;
+    align-items:center;
+    padding:10px 0;
 }
 .peopleList .subItem{
     flex:1;
@@ -43,3 +49,18 @@
 .peopleList > p:last-child{
     text-align: right;
 }
+.partList{
+    li{
+        &:extend(.peopleList);
+        border-bottom: 1px solid @grayLight;
+        margin-bottom: 0;
+        line-height: 1.5;
+        padding:15px 5px !important;
+    }
+    p:nth-child(1){
+        font-size: 14px;
+    }
+    .icon18{
+        margin-bottom: -4px;
+    }
+}
\ No newline at end of file

src/router.js

@@ -6,13 +6,14 @@ import CommonLayout from './layout/CommonLayout';
 import Backlog from './pages/Backlog/Backlog'
 import Work from './pages/Work/Work'
 import Notice from './pages/Notice/Notice'
-import Communicate from './pages/Communicate/Communicate'
-
+import Communicate from './pages/Communicate/Communicate';
+import AddressList from './pages/AddressList/AddressList';
 import Process from './pages/EventProcessing/Process'
 
 import NoFound from './pages/NoFound'
 
 
+
 const ReactRouter = () => {
     return (
         <Router>
@@ -22,6 +23,7 @@ const ReactRouter = () => {
                     <CommonLayout>
                         <Route path="/bord/backlog" component={Backlog}/>
                         <Route path="/bord/work" component={Work}/>
+                        <Route path="/bord/addressList" component={AddressList}/>
                         <Route path="/bord/communicate" component={Communicate}/>
                         <Route path="/bord/notice" component={Notice}/>
                     </CommonLayout>

src/variable.less

@@ -58,4 +58,27 @@ table {
 }
 .mr-5{
     margin-right: 5px !important;
+}
+.cicrleHead{
+    width:30px;
+    height:30px;
+    display: inline-block;
+    vertical-align: middle;
+    &.centerFont{
+        background-color: @primary;
+        color:#fff;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 30px;
+        text-align: center;
+        border-radius: 100%;
+    }
+}
+.imgRes{
+    width: auto;
+    max-width: 100%;
+}
+.icon18{
+    width:18px;
+    height: 18px;
 }
\ No newline at end of file