file

src/components/StepCard/index.less

-ul li{
-  width:100%;
-  &:after {
-    content: '';
-    display: block;
-    //clear: both;
-    width: 1px;
-    min-height: 115px;
-    background-color: #D8D8D8;
-    //margin: 8px auto;
-  }
-}

src/components/TopSearch/index.less

@@ -14,4 +14,4 @@
   border:0 solid rgba(38, 104, 255, 0.2);
   border-radius:6px;
   padding: 0 0 0 40px;
-}
+}
\ No newline at end of file

src/layout/CommonLayout.jsx

@@ -8,9 +8,9 @@ const CommonLayout = (props) => {
     return (
         <div>
             <div className="common-layout-content">
-                <WingBlank>
+                <div>
                     {props.children}
-                </WingBlank>
+                </div>
             </div>
             <Footer {...props}/>
         </div>

src/pages/Communicate/Communicate.jsx

 import React, {Component} from 'react';
-import {List, WhiteSpace} from 'antd-mobile';
+import {List, WhiteSpace,Row,Col} from 'antd-mobile';
 import TopSearch from '../../components/TopSearch'
-
+import './index.less'
 const Item = List.Item;
 
 class Communicate extends Component {
     render() {
         return (
             <div>
-                <WhiteSpace/>
-                <TopSearch/>
-                <WhiteSpace/>
-                <List>
-                    <Item>通讯录</Item>
-                    <Item arrow="horizontal" multipleLine onClick={() => {}}>Title</Item>
-                </List>
+                <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'>
+                    <ul className='adListBox'>
+                            <li>
+                                <div className='itemBox'>
+                                    <h4 className='titleBar'>市委办公厅审核员</h4>
+                                    <div className='adContent'>
+                                        <div className='peopleList'>
+                                            <p className='subItem'>
+                                                王磊
+                                            </p>
+                                            <p className='subItem'>
+                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                    </ul>
+                </div>
             </div>
         );
     }

src/pages/Communicate/index.less

+@import '../../variable.less';
+
+.breadBox{
+    padding:15px 20px;
+    font-size: 14px;
+    background-color: #fff;
+    line-height: 1.5;
+}
+.currentLink{
+    color:@primary;
+}
+.adMainBox{
+    padding:10px 18px;
+}
+.adListBox{
+    padding:15px;
+    background-color: #fff;
+    border:0px solid rgba(0, 0, 0, 0.1);
+    border-radius:5px;
+}
+.adListBox{
+    li{
+        margin-bottom:5px ;
+        border-bottom: 1px solid @grayLight;
+    }
+    .titleBar{
+        font-size: 16px;
+        font-weight: bold;
+    }
+    .adContent{
+        padding:15px 0;
+    }
+}
+.peopleList{
+    display: flex;
+    justify-content: space-between;
+    line-height: 1.5;
+}
+.peopleList .subItem{
+    flex:1;
+    font-size: 14px;
+}
+.peopleList > p:last-child{
+    text-align: right;
+}

src/variable.less

+@primary: #0185FB;
+@grayLight:rgba(0,0,0,0.12);
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1.5;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+.symbol{
+    margin:0 10px;
+}
+.smallIco{
+    width:14px;
+    vertical-align: middle;
+}
+.mr-5{
+    margin-right: 5px !important;
+}
\ No newline at end of file