debug

src/components/StepCard/index.jsx

 import React from 'react';
 import './index.less'
 
+const data = [{}, {}, {}, {s: '1'}, {}]
 const Index = () => {
     return (
         <div>
-            <ul>
+            <ul className="auto-step-card">
                 {
-                    [{}, {}, {}, {}].map(item => (
-                        <li>1111111</li>
+                    data.map((item, index) => (
+                        <li className="auto-step-item">
+                            <div className={`auto-step-item-title ${item.s ? 'step-current' : 'step-success'}`}>
+                                <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>
+                                )}
+                            </div>
+
+                        </li>
                     ))
                 }
-
             </ul>
+
         </div>
     );
 };

src/components/StepCard/index.less

-ul li{
-  width:100%;
-  &:after {
+.auto-step-item-title{
+  display: flex;
+  align-items: center;
+  //height: 43px;
+  font-size: 14px;
+  padding: 0 10px;
+}
+
+.auto-step-item-title.step-success::before{
+  content: '';
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: url("/img/step-success.png") center;
+  background-size: cover;
+}
+.auto-step-item-title.step-current::before{
+  content: '';
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: url("/img/step-success.png") center;
+  background-size: cover;
+}
+.auto-step-item-title.step-future::before{
+  content: '';
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 60%;
+  background: rgba(228, 228, 228, 1);
+}
+
+.auto-step-item-title-name{
+  margin-left: 10px;
+}
+.auto-step-content{
+  display: flex;
+  align-items: center;
+  padding: 0 17px;
+}
+.auto-step-content.step-success::before{
+  content: '';
+  display: block;
+  width: 1px;
+  min-height: 90px;
+  background-color: rgba(34, 192, 100, 1);
+}
+.auto-step-content::before{
   content: '';
   display: block;
-    //clear: both;
   width: 1px;
-    min-height: 115px;
-    background-color: #D8D8D8;
-    //margin: 8px auto;
-  }
+  min-height: 90px;
+  background-color: rgba(228, 228, 228, 1);
+}
+
+
+.auto-step-card > .auto-step-item:last-child .auto-step-content::before{
+  background-color: #ffffff;
 }
+
+
+
+
+
+
+
+//.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/index.css

@@ -16,4 +16,5 @@ body,
   margin: 0;
   padding: 0;
 }
-p{margin: 0}
+ul, p{margin: 0;padding: 0}
+ul{list-style: none}

src/layout/CommonLayout.jsx

 import React from 'react';
-import {WingBlank} from 'antd-mobile'
 import Footer from './Footer'
 import {withRouter} from 'react-router-dom'
 import './index.less'
@@ -8,9 +7,7 @@ const CommonLayout = (props) => {
     return (
         <div>
             <div className="common-layout-content">
-                <WingBlank>
                 {props.children}
-                </WingBlank>
             </div>
             <Footer {...props}/>
         </div>

src/pages/EventProcessing/Process.jsx

@@ -26,7 +26,7 @@ class Process extends Component {
         }
     };
     componentDidMount() {
-        console.log(document.getElementsByClassName("option-text")[0])
+        // console.log(document.getElementsByClassName("option-text")[0])
         document.getElementsByClassName("option-text")[0].addEventListener('focus', this.optionBlur, true)
         // window.addEventListener('scroll', this.handleScroll, true);
     }

src/pages/Work/Work.jsx

 import React, {Component} from 'react';
 import {WhiteSpace} from "antd-mobile";
-
+import {WingBlank} from 'antd-mobile'
 import TopSearch from '../../components/TopSearch'
 import WorkCard from '../../components/WorkCard'
 
@@ -34,7 +34,7 @@ class Work extends Component {
             text: `name${i}`,
         }));
         return (
-            <div>
+            <WingBlank>
                 <WhiteSpace/>
                 <TopSearch onSearch={this.workSearch}/>
                 <WhiteSpace/>
@@ -54,7 +54,7 @@ class Work extends Component {
                     data={data2}
                     iconAction={this.itemAdd}
                 />
-            </div>
+            </WingBlank>
         );
     }
 }