dev damegeproduct list part1

client/containers/PageContainer/PageContainer.jsx

@@ -5,6 +5,7 @@ import { connect }  from 'react-redux';
 import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
 import TroubleContainer from '../TroubleContainer/TroubleContainer'
 import ScanBarCodeContainer from '../ScanBarCodeContainer/ScanBarCodeContaienr'
+import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDamagesListContainer'
 
 
 class PageContainer extends React.Component {
@@ -28,7 +29,8 @@ class PageContainer extends React.Component {
         return (
             <div>
                 <HeaderComponent />
-                <TroubleContainer />
+               {/* <TroubleContainer />*/}
+                <ReportDamagesListContainer />
             </div>
         )
     }

client/containers/ReportDamagesListContainer/ReportDamagesListContainer.jsx

+'use strict';
+import React from 'react';
+import { connect } from  'react-redux';
+require('./index.css');
+class ReportDamagesListContainer extends React.Component{
+    constructor(props){
+        super(props)
+    }
+    render(){
+        return (
+            <div className={"ReportDamagesListContainer"}>
+                <div className={"damageTitleContainer"}>故障相关报损商品(非货架区)</div>
+                <div className={"damageProductList"}>
+                    <div className={"damageProductItem"}>
+                        <div className={"productBaseInfo clearfix"}>
+                            <img className={"productImg"} src="" alt=""/>
+                            <div className={"baseNumber"}>
+                                <p className={"barcode"}>9038383832</p>
+                                <p className={"skuNumnber"}>SKU00001</p>
+                                <p className={"productName"}>可口可乐</p>
+                                <p className={"net"}>250ml</p>
+                            </div>
+                            <div className={"productCount"}>
+                                <span className={"multipleIcon"}>×</span>
+                                <span className={"count"}>1</span>
+                            </div>
+                        </div>
+                        <div className={"productOtherInfo"}>
+
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        )
+    }
+}
+function select(store) {
+    return Object.assign({}, {state: store})
+}
+
+export default connect(select)(ReportDamagesListContainer)
\ No newline at end of file

client/containers/ReportDamagesListContainer/index.css

+.ReportDamagesListContainer{
+    height: 856px;
+    width: 100%;
+    background-color: darkcyan;
+    padding-left: 30px;
+}
+.ReportDamagesListContainer .damageTitleContainer{
+    padding: 56px 0 34px 38px;
+    line-height: 25px;
+    font-size: 25px;
+    background-color: orangered;
+}
+.ReportDamagesListContainer .damageProductList{}
+.ReportDamagesListContainer .damageProductList .damageProductItem{
+    border: 1px solid #f2f2f2;
+    padding: 60px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    display: inline-block;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo{
+    border-bottom: 1px dashed #f2f2f2;
+    padding-bottom: 30px;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .productImg{
+    display: inline-block;
+    width: 200px;
+    height: 200px;
+    border: 1px solid #f2f2f2;
+    background-color: darkgoldenrod;
+    float: left;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber{
+    float: left;
+    width: 200px;
+    margin-left: 30px;
+    width: 315px;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber p{
+    margin-top: 8px;
+    font-size: 32px;
+    line-height: 44px;
+    color: #333333;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber .barcode{}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber .skuNumnber{}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber .productName{
+    font-weight: bolder;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber .net{
+    color: #999999;
+    font-size: 24px;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .productCount{
+    display: inline-block;
+    padding-top: 140px;
+    float: right;
+    margin:0 20px 0 220px;
+    box-sizing: border-box;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .productCount .multipleIcon{
+    font-size: 32px;
+    display: inline-block;
+    margin-right: 30px;
+    color: #909099;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .count{
+    color: #909099;
+    font-size: 40px;
+}
+.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo{
+    margin-top: 16px;
+}
\ No newline at end of file

client/containers/ScanBarCodeContainer/index.css

 .scanBarCodeContainer{
     position: relative;
 }
-.scanBarCodeContainer .header{
-    height: 98px;
-    background-color: #34343e;
-    width: 100%;
-}
 .scanBarCodeContainer .container{
     height: 856px;
     background-color:darkmagenta;