把px to rem

client/components/BreakageComponent/BreakageCode/index.css

-.breakageContent .breakageCodeHeader{
+/* .breakageContent .breakageCodeHeader{
     width:100%;
     width:100%;
     line-height: 98px;
     line-height: 98px;
     display: flex;
     display: flex;
@@ -24,4 +24,32 @@
 }
 }
 .breakageContent .breakageCodeContent .barcodeScan span{
 .breakageContent .breakageCodeContent .barcodeScan span{
     margin-left:15px;
     margin-left:15px;
+} */
+
+.breakageContent .breakageCodeHeader{
+    width:100%;
+    line-height: 0.8166666666666667rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    padding:0 0.16666666666666666rem;
+    box-sizing: border-box;
+}
+.breakageContent .breakageCodeContent{
+    text-align: center;
+    margin-top:1rem;
+}
+.breakageContent .breakageCodeContent input{
+    width:4.5rem;
+    height:0.6666666666666666rem;
+    border:2px solid #9b9b9b ;
+    border-radius: 0.08333333333333333rem;
+    margin-top:0.16666666666666666rem;
+}
+.breakageContent .breakageCodeContent .barcodeScan{
+    margin-top:0.25rem;
+}
+.breakageContent .breakageCodeContent .barcodeScan span{
+    margin-left:0.125rem;
 }
 }
\ No newline at end of file

client/components/BreakageComponent/BreakageProductDetail/BreakageProductDetail.jsx

@@ -40,7 +40,7 @@ class BreakageProductDetail extends React.Component{
                                     </div>
                                     </div>
                                     <div style={{marginTop:UTILPATH.getRemByPx(30),textAlign:'left',marginLeft:UTILPATH.getRemByPx(10)}}>
                                     <div style={{marginTop:UTILPATH.getRemByPx(30),textAlign:'left',marginLeft:UTILPATH.getRemByPx(10)}}>
                                         <h2 className={'col333 font40'} style={{fontWeight:'800'}}>{breakageProductInfo.product.skuName}</h2>
                                         <h2 className={'col333 font40'} style={{fontWeight:'800'}}>{breakageProductInfo.product.skuName}</h2>
-                                        <p className={'col333 font28'} style={{marginTop:'20px'}}><span>条形码:</span>{breakageProductInfo.product.barcode}</p>
+                                        <p className={'col333 font28'} style={{marginTop:UTILPATH.getRemByPx(20)}}><span>条形码:</span>{breakageProductInfo.product.barcode}</p>
                                     </div>
                                     </div>
                                  </div>
                                  </div>
                                  <div className={'breakProductStatus'}>
                                  <div className={'breakProductStatus'}>

client/components/BreakageComponent/BreakageProductDetail/index.css

-.breakageContent .pagebox{
+/* .breakageContent .pagebox{
     display: flex;
     display: flex;
     margin:0;
     margin:0;
     margin-left:40px;
     margin-left:40px;
@@ -75,4 +75,80 @@
 }
 }
 .breakageInfo{
 .breakageInfo{
     background:rgba(0,0,0.3);
     background:rgba(0,0,0.3);
+} */
+.breakageContent .pagebox{
+    display: flex;
+    margin:0;
+    margin-left:0.3333333333333333rem;
+}
+.pagebox .breakProductImg{
+    width:1.25rem;
+    height:1.25rem;
+    border:2px solid #e5e5e5;
+}
+.pagebox .breakProductInfo{
+    display: flex;
+}
+.pagebox .breakProductInfo .breakProductImg img{
+    width:100%;
+    height:100%;
+}
+.pagebox .breakProductStatus,.pagebox .ProductPosition{
+    text-align: left;
+    margin-top:0.16666666666666666rem;
+}
+.pagebox .breakProductStatus p {
+    margin-top:0.16666666666666666rem;
+}
+.pagebox .breakProductStatus p span{
+    display: inline-block;
+    width:1.3666666666666667rem;
+    height: 0.5rem;
+    line-height: 0.5rem;
+    border:2px solid #ccc;
+    border-radius: 0.08333333333333333rem;
+    text-align: center;
+}
+.pagebox .breakProductStatus p span.active{
+    border:2px solid #05bb09;
+    color:#05bb09;
+}
+.pagebox .breakProductStatus p span:nth-of-type(2){
+    margin-left:0.16666666666666666rem;
+}
+.pagebox .ProductPosition .imgList{
+    display: flex;
+    margin-top:0.16666666666666666rem;
+    height:1.5833333333333333rem;
+}
+.pagebox .ProductPosition ul li{
+    width:1.2166666666666666rem;
+    height:1.2166666666666666rem;
+    border:2px solid #e5e5e5;
+    margin-right:0.16666666666666666rem;
+}
+.pagebox .ProductPosition ul li span{
+    text-align: center;
+    display: block;
+    margin-top:0.08333333333333333rem;
+}
+.pagebox .ProductPosition ul li img{
+    width:100%;
+    height:100%;
+}
+.pagebox .breakProductPosition{
+    width:4.166666666666667rem;
+    height:4.166666666666667rem;
+    margin-left:0.8333333333333334rem;
+    border:4px solid #e5e5e5;
+}
+.pagebox .breakProductPosition img{
+    width:100%;
+    height:100%;
+}
+.pagebox .ProductPosition ul li.active{
+    border:6px solid #05bb09;
+}
+.breakageInfo{
+    background:rgba(0,0,0.3);
 }
 }