add container

client/components/CommonComponent/HeaderComponent/HeaderComponent.jsx

@@ -11,9 +11,9 @@ export default class HeaderComponent extends React.Component{
                 <div className={"headerlogo"}>
                     <img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/>
                 </div>
-                <div>
+                <div className={"locationInfo"}>
                     <img className={"addIcon"} src={UTILPATH.localImg.addIcon} alt=""/>
-                    <div className={"colfff"}>
+                    <div className={"local colfff"}>
                         <p className={"font30"}>华贸商业街</p>
                         <p className={"font24"}>ID : 001</p>
                     </div>
@@ -21,7 +21,7 @@ export default class HeaderComponent extends React.Component{
             </div>
 
             <div className={"headerContent rightContent fr"}>
-                <img className={"userheadImg"} src={UTILPATH.localImg.headlogo} alt=""/>
+                <img className={"userheadImg"} src={UTILPATH.localImg.defaultImg} alt=""/>
                 <div className={"userinfo font24 colfff"}>
                     <p>李大仁</p>
                     <p>ID:001</p>

client/components/CommonComponent/HeaderComponent/index.css

@@ -8,6 +8,7 @@
 .headerComponent .headerContent{
     height: 100%;
     width: auto;
+    display: flex;
 }
 .headerComponent .headerlogo{
     width: 440px;
@@ -18,8 +19,8 @@
 .headerComponent .headerlogo:after{
     content : '';
     position: absolute;
-    width: 40px;
-    height: 100%;
+    width: 0;
+    height: 0;
     /*background-color: #34343e;*/
     border-top: 98px solid transparent;
     border-bottom: 0 solid transparent;
@@ -33,4 +34,32 @@
     top: 50%;
     left: 40%;
     transform: translate(-50%,-50%);
+}
+.headerComponent .locationInfo{
+    position: relative;
+    padding-top: 16px;
+}
+.headerComponent .locationInfo .addIcon{
+    display:inline-block;
+    margin: 0 20px;
+    vertical-align: middle;
+}
+.headerComponent .locationInfo .local {
+    display: inline-block;
+    line-height: 34px;
+    vertical-align: middle;
+}
+.headerComponent .rightContent{
+    padding-right: 59px;
+}
+.headerComponent .rightContent  .userheadImg{
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    margin-right: 24px;
+    transform: translate(0,16%);
+}
+.headerComponent .rightContent  .userinfo{
+    line-height: 34px;
+    padding-top: 18px;
 }
\ No newline at end of file

client/containers/PageContainer/PageContainer.jsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import { connect }  from 'react-redux';
 import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
+import TroubleContainer from '../TroubleContainer/TroubleContainer'
 
 
 class PageContainer extends React.Component {
@@ -25,6 +26,7 @@ class PageContainer extends React.Component {
         return (
             <div>
                 <HeaderComponent />
+                <TroubleContainer />
             </div>
         )
     }

client/containers/Trouble/Trouble.jsx

-import react from 'react';
-
-export default class Trouble extends react.Component{
-    constructor(props){
-        super(props);
-    }
-
-    render(){
-        return <div>trouble</div>
-    }
-}
\ No newline at end of file

client/containers/TroubleContainer/TroubleContainer.jsx

+import React from 'react';
+require('./index.css')
+export default class TroubleContainer extends   React.Component{
+    constructor(props){
+        super(props);
+    }
+
+    render(){
+        return <div className={"troubleContainer"}>
+            <div className={"troubleText font32"}><span className={"colff7860"}>*</span>必填项</div>
+            <div className={"troubleBox"}>
+                <div className={"troubleItem"}>
+                    <div className={"itemText"}>故障问题1：故障ID-00001</div>
+                    <div className={"itemWrongInfo"}>2:3 左侧动作故障，取货动作出错</div>
+                    <div className={"jugdeQuestion"}>
+                        <span>*</span>是否有此问题
+                        <span>是</span>
+                        <span>否</span>
+                    </div>
+                    <div className={"itemTextArea"}>
+                            <span className={"itemPlayceHolder"}>编辑检查结果</span>
+                    </div>
+                    <div className={"itemControl"}>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+}
\ No newline at end of file

client/containers/TroubleContainer/index.css

+.troubleContainer{
+    padding-left: 30px;
+}
+.troubleText{
+    height: 100px;
+    /* line-height: 131px; */
+    display: table-cell;
+    vertical-align: bottom;
+}
+.troubleBox{
+    margin-top: 20px;
+}
+.troubleItem{
+    width: 1396px;
+    height: 608px;
+    border: 1px solid #e5e5e5;
+    background-color: #ffffff;
+    border-radius: 20px;
+    overflow: hidden;
+}
\ No newline at end of file

client/css/font.css

@@ -16,6 +16,7 @@ body{
 @value font26: 26px;
 @value font28: 28px;
 @value font30: 30px;
+@value font32: 32px;
 @value font40: 40px;
 @value font44: 44px;
 @value font50: 50px;
@@ -98,6 +99,19 @@ body{
 [data-dpr="3"] .font30 {
     font-size: calc(var(--font3) * font30) !important;
 }
+
+.font32 {
+    font-size: font32 !important;
+}
+
+[data-dpr="2"] .font32 {
+    font-size: calc(var(--font2) * font32) !important;
+}
+
+[data-dpr="3"] .font32 {
+    font-size: calc(var(--font3) * font32) !important;
+}
+
 .font40 {
     font-size: font40 !important;
 }

client/css/reset.css

@@ -27,7 +27,7 @@ button, input, select, textarea { /* for ie */
 }
 html, body {
     height: 100%;
-    background-color: #ffffff;
+    background-color: #f5f5f5;
 }
 
 h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }