finist recovery first page

client/components/CommonComponent/ButtonComponent/ButtonComponent.jsx

@@ -8,8 +8,11 @@ export default class ButtonComponent extends React.Component{
 
     render(){
         let props = this.props;
+        let classInfo = props.classInfo && props.classInfo.className ? props.classInfo.className : '';
+        let colorClass = props.classInfo && props.classInfo.colorInfo ? props.classInfo.colorInfo : "col333";
+        let fontClass = props.classInfo && props.classInfo.fontInfo ? props.classInfo.fontInfo : "font32";
         return(
-            <div className={"buttonComponent font32 col333"} style={props.style} onClick={()=>props.option()}>
+            <div className={`buttonComponent ${fontClass} ${colorClass} ${classInfo}`} style={props.style} onClick={()=>props.option()}>
                 {props.text}
             </div>
         )

client/components/CommonComponent/ButtonComponent/index.css

-/*.buttonComponent{*/
-    /*width: 413px;*/
-    /*height: 80px;*/
-    /*border: 2px solid #e5e5e5;*/
-    /*background-color: #ffffff;*/
-    /*line-height: 80px;*/
-    /*text-align: center;*/
-    /*!*display: inline-block;*!*/
-    /*border-radius: 10px;*/
-/*}*/
-
-
 .buttonComponent{
-    width: 3.441666666666667rem;
-    height: 0.6666666666666666rem;
+    width: 413px;
+    height: 80px;
     border: 2px solid #e5e5e5;
     background-color: #ffffff;
-    line-height: 0.6666666666666666rem;
+    line-height: 80px;
     text-align: center;
-    /*display: inline-block;
-     */
-    border-radius: 0.08333333333333333rem;
+    border-radius: 10px;
 }
 
+
+/*.buttonComponent{*/
+    /*width: 3.441666666666667rem;*/
+    /*height: 0.6666666666666666rem;*/
+    /*border: 2px solid #e5e5e5;*/
+    /*background-color: #ffffff;*/
+    /*line-height: 0.6666666666666666rem;*/
+    /*text-align: center;*/
+    /*!*display: inline-block;*/
+     /**!*/
+    /*border-radius: 0.08333333333333333rem;*/
+/*}*/
+

client/components/CommonComponent/HeaderComponent/index.css

@@ -67,7 +67,9 @@
 .headerComponent .homeHeader .rightContent .userinfos{
     display: flex;
     height: 72px;
-    margin-top: 5%;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
     align-items: center;
 }
 .headerComponent .homeHeader .rightContent  .userheadImg{

client/components/RecoveryComponent/RecoveryFirstPage/RecoveryFirstPage.jsx

+import React from 'react';
+import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
+require('./index.css')
+export default class RecoveryFirstPage extends React.Component{
+    constructor(props){
+        super(props);
+    }
+
+    render(){
+        let style = {'width':"410px","background":"#ff7860","display": "inline-block"}
+        let classInfo = {
+            colorInfo : "colfff",
+            className : ''
+        }
+        return(
+            <div className={"recoveryFirstPage"}>
+                <div className={"text font40 col333"}>请将A区回收箱进行整体更换</div>
+                <Button key={"RecoveryFirstPageBtn"} classInfo={classInfo} style={style} text={'我已替换完成，下一步'} option={this.hideError}/>
+                <div className={"tips font24"}>点击查看回收箱位置照片</div>
+            </div>
+        )
+    }
+}

client/components/RecoveryComponent/RecoveryFirstPage/index.css

+.recoveryFirstPage{
+    text-align: center;
+    padding-top: 240px;
+}
+.recoveryFirstPage .text{
+    margin-bottom: 180px;
+}
+.recoveryFirstPage .tips{
+    margin-top: 30px;
+    color: #5c66ff;
+    text-decoration: underline;
+}
\ No newline at end of file

client/containers/RecoveryContainer/RecoveryContainer.jsx

 import React from 'react';
 import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
 import LeftContainer from '../LeftContainer/LeftContainer';
-import RightContainer from '../RightContainer/RightContainer'
+import RightContainer from '../RightContainer/RightContainer';
+import RecovertyFirstPage from '../../components/RecoveryComponent/RecoveryFirstPage/RecoveryFirstPage'
 
 export default class RecoveryContainer extends React.Component{
     constructor(props){
         super(props);
+        this.getFirstPage = this.getFirstPage.bind(this);
+    }
+
+    getFirstPage(){
+        return (
+            <RecovertyFirstPage />
+        )
     }
 
     render(){
+        let dom = this.getFirstPage();
         return(
             <div className={"recoveryContainer page"}>
                 <Header />
                 <LeftContainer />
                 <RightContainer>
                     {
-                        <div className={"recoveryContent"}>
-
-                        </div>
+                        dom
                     }
                 </RightContainer>
             </div>