file

src/components/StepCard/index.jsx

 import React from 'react';
 import './index.less'
 
-const data = [{}, {}, {}, {s: '1'}, {}]
+const data = [{}, {}, {}, {s: '1'}, {s: '111', result: '11111'}]
 const Index = () => {
     return (
-        <div>
+        <div className="auto-step">
             <ul className="auto-step-card">
                 {
                     data.map((item, index) => (
@@ -13,14 +13,20 @@ const Index = () => {
                                 <div className="auto-step-item-title-name">发起申请(拟稿)</div>
                             </div>
                             <div className={`auto-step-content ${item.s ? '' : 'step-success'}`}>
-                                <div className="auto-step-content-flow">
-                                    1111111111
-                                </div>
-                                {item.result && (
-                                    <div className="auto-step-content-result">
-                                        11111
+                                <div className="step-content-wrapper">
+                                    <div className="auto-step-content-flow">
+                                        <div className="auto-step-content-head">
+                                            <img src="/img/test/test-2.png" alt="" className="step-content-head-img"/>
+                                            <span>赵依安</span>
+                                        </div>
+                                      <span>2020-04-09 08:44:36</span>
                                     </div>
-                                )}
+                                    {item.result && (
+                                        <div className="auto-step-content-result">
+                                            11111
+                                        </div>
+                                    )}
+                                </div>
                             </div>
 
                         </li>

src/components/StepCard/index.less

+.auto-step{
+  background: #ffffff;
+  border-radius: 6px;
+  padding: 15px;
+}
 .auto-step-item-title{
   display: flex;
   align-items: center;
@@ -19,7 +24,7 @@
   display: block;
   width: 16px;
   height: 16px;
-  background: url("/img/step-success.png") center;
+  background: url("/img/step-current.png") center;
   background-size: cover;
 }
 .auto-step-item-title.step-future::before{
@@ -54,83 +59,37 @@
   background-color: rgba(228, 228, 228, 1);
 }
 
-
 .auto-step-card > .auto-step-item:last-child .auto-step-content::before{
   background-color: #ffffff;
 }
+.step-content-wrapper{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 17px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.02);
+}
+.auto-step-content-flow{
+  display: flex;
+  justify-content: space-between;
+  padding: 0 15px;
+}
+.auto-step-content-head{
+  display: flex;
+  align-items: flex-start;
+}
+.step-content-head-img{
+  width: 30px;
+  height: 30px;
+  margin-right: 7px;
+}
 
+.auto-step-content-result{
+  margin-top: 15px;
+  line-height: 41px;
+  border-radius: 7px;
+  background: rgba(0, 0, 0, 0.12);
+  padding: 0 15px;
+}
 
 
-
-
-
-
-//.contract-operate_recode_date{
-//  margin-left: 56px;
-//  height:100%;
-//  display:flex;
-//  flex-direction: column;
-//  //justify-content: space-around;
-//  li{
-//    width:100%;
-//    //:nth-child(1){
-//    //  width:119px;
-//    //  height:16px;
-//    //  font-size: 12px;
-//    //  color: #333333;
-//    //}
-//    :nth-child(2){
-//      display: inline-block;
-//      width: 8px;
-//      height: 8px;
-//      background-color: #D8D8D8;
-//      border-radius: 50%;
-//      margin: 0 50px;
-//      &:after {
-//        content: '';
-//        display: block;
-//        clear: both;
-//        width: 1px;
-//        height: 111px;
-//        background-color: #D8D8D8;
-//        margin: 8px auto;
-//      }
-//    }
-//    :nth-child(3){
-//      font-size: 12px;
-//      color: #333333;
-//      display: inline-block;
-//      width: 170px;
-//      height: 16px;
-//    }
-//  }
-//  li:last-child {
-//    :nth-child(1) {
-//      font-size: 12px;
-//      color: #09B9C1;
-//      display: inline-block;
-//      width: 119px;
-//      height: 16px;
-//    }
-//    :nth-child(2) {
-//      display: inline-block;
-//      width: 8px;
-//      height: 8px;
-//      //background-color: $c991;
-//      border-radius: 50%;
-//      &:after {
-//        content: '';
-//        display: none;
-//      }
-//    }
-//
-//    :nth-child(3) {
-//      font-size: 12px;
-//      //color: $c991;
-//      letter-spacing: 0;
-//      display: inline-block;
-//      width: 170px;
-//      height: 16px;
-//    }
-//  }
-//}

src/layout/CommonLayout.jsx

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

src/pages/Backlog/Backlog.jsx

 import React from 'react';
-import {WhiteSpace} from 'antd-mobile'
+import {WhiteSpace, WingBlank} from 'antd-mobile'
 import TodoCard from '../../components/TodoCard'
 import TopSearch from '../../components/TopSearch'
 
@@ -8,7 +8,7 @@ const Backlog = (props) => {
         props.history.push(`/blank/example/1`)
     }
     return (
-        <div>
+        <WingBlank>
             <WhiteSpace/>
             <TopSearch/>
             {
@@ -21,9 +21,7 @@ const Backlog = (props) => {
                 ))
             }
 
-            {/*<Step direction="horizontal"/>*/}
-
-        </div>
+        </WingBlank>
     );
 };
 

src/pages/Communicate/Communicate.jsx

@@ -10,7 +10,7 @@ class Communicate extends Component {
         return (
             <div>
                 <div className='breadBox'>
-                     <span className='currentLink'>科技创新委员会</span><span className='symbol'>&gt;</span><span>组织架构</span><span className='symbol'>&gt;</span><span>办公厅</span>
+                    <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'>
@@ -71,7 +71,7 @@ class Communicate extends Component {
                                         </div>
                                     </div>
                                 </div>
-                            </li>
+                         </li>
                     </ul>
                 </div>
             </div>

src/pages/Notice/Notice.jsx

 import React from 'react';
-import {WhiteSpace} from 'antd-mobile'
+import {WhiteSpace, WingBlank} from 'antd-mobile'
 import TodoCard from '../../components/TodoCard'
 import TopNotice from '../../components/TopNotice'
 
 const Notice = () => {
     return (
-        <div>
+        <WingBlank>
             <WhiteSpace/>
             <TopNotice/>
             <WhiteSpace/>
             <TodoCard/>
-        </div>
+        </WingBlank>
     );
 };
 

src/pages/Work/Work.jsx

 import React, {Component} from 'react';
-import {WhiteSpace} from "antd-mobile";
-import {WingBlank} from 'antd-mobile'
+import {WhiteSpace, WingBlank} from "antd-mobile";
 import TopSearch from '../../components/TopSearch'
 import WorkCard from '../../components/WorkCard'
 
+const data = Array.from(new Array(7)).map((_val, i) => ({
+    id: `name${i}`,
+    icon: '/img/test/test.png',
+    text: `name${i}`,
+}));
+const data2 = Array.from(new Array(7)).map((_val, i) => ({
+    id: `name2${i}`,
+    icon: '/img/test/test-1.png',
+    text: `name${i}`,
+}));
+
 class Work extends Component {
     state = {
         addStatus: false
@@ -15,24 +25,17 @@ class Work extends Component {
     workSearch = (val) => {
         console.log(val)
     };
-    itemAdd = () => {
+    itemAdd = (id) => {
         console.log('add')
     }
-    itemSlice = () => {
+    itemSlice = (id) => {
         console.log('slice')
     }
     render() {
         const {addStatus} = this.state;
 
         //测试数据
-        const data = Array.from(new Array(7)).map((_val, i) => ({
-            icon: '/img/test/test.png',
-            text: `name${i}`,
-        }));
-        const data2 = Array.from(new Array(7)).map((_val, i) => ({
-            icon: '/img/test/test-1.png',
-            text: `name${i}`,
-        }));
+
         return (
             <WingBlank>
                 <WhiteSpace/>