add iconfont & fix header & finish trouble UI

client/components/CommonComponent/HeaderComponent/HeaderComponent.jsx

 import React from 'react';
 require('./index.css')
+const headerStatus = {
+    1 : 'home',
+    2 : 'other'
+}
 export default class HeaderComponent extends React.Component{
     constructor(props){
         super(props);
+        this.getHomeHeader = this.getHomeHeader.bind(this);
+        this.getOtherHeader = this.getOtherHeader.bind(this);
+        this.state = {
+            showHeader : headerStatus[2]
+        }
     }
 
-    render(){
-        return <div className={"headerComponent clearfix"}>
+    getHeader(){
+        let pages = null;
+        switch (this.state.showHeader){
+            case headerStatus[1]:
+                pages = this.getHomeHeader();
+                break;
+            case headerStatus[2]:
+                pages = this.getOtherHeader();
+                break;
+
+        }
+        return pages;
+    }
+
+    getHomeHeader(){
+        return <div className={"homeHeader clearfix"}>
             <div className={"headerContent leftContent fl"}>
                 <div className={"headerlogo"}>
                     <img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/>
@@ -29,4 +52,27 @@ export default class HeaderComponent extends React.Component{
             </div>
         </div>
     }
+
+    getOtherHeader(){
+        return <div className={"otherHeader font32 clearfix"}>
+            <div className={"fl colfff"}>
+                <i className={"iconfont middle icon font60 icon-circle-left circleIcon"}></i>
+                <span className={"middle"}>检查编辑结果</span>
+            </div>
+            <div className={"fr col999"}>
+                <i className={"iconfont middle icon font60 icon-save saveIcon"}></i>
+                <span className={"middle"}>保存</span>
+            </div>
+        </div>
+    }
+
+
+
+
+    render(){
+        let pages = this.getHeader.bind(this)();
+        return <div className={"headerComponent"}>
+            {pages}
+        </div>
+    }
 }
\ No newline at end of file

client/components/CommonComponent/HeaderComponent/index.css

@@ -3,20 +3,26 @@
     width: 100%;
     position: relative;
     background-color: #34343e;
+    overflow: hidden;
 
 }
-.headerComponent .headerContent{
+.headerComponent .homeHeader{
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+.headerComponent .homeHeader .headerContent{
     height: 100%;
     width: auto;
     display: flex;
 }
-.headerComponent .headerlogo{
+.headerComponent .homeHeader .headerlogo{
     width: 440px;
     height: 100%;
-    background-color: #fff;
+    background-color: #ff7860;
     position: relative;
 }
-.headerComponent .headerlogo:after{
+.headerComponent .homeHeader .headerlogo:after{
     content : '';
     position: absolute;
     width: 0;
@@ -29,37 +35,62 @@
     top: 0;
     right: 0;
 }
-.headerComponent .headerlogo .logoImg{
+.headerComponent .homeHeader .headerlogo .logoImg{
     position: absolute;
     top: 50%;
     left: 40%;
     transform: translate(-50%,-50%);
 }
-.headerComponent .locationInfo{
+.headerComponent .homeHeader .locationInfo{
     position: relative;
     padding-top: 16px;
 }
-.headerComponent .locationInfo .addIcon{
+.headerComponent .homeHeader .locationInfo .addIcon{
     display:inline-block;
     margin: 0 20px;
     vertical-align: middle;
 }
-.headerComponent .locationInfo .local {
+.headerComponent .homeHeader .locationInfo .local {
     display: inline-block;
     line-height: 34px;
     vertical-align: middle;
 }
-.headerComponent .rightContent{
+.headerComponent .homeHeader .rightContent{
     padding-right: 59px;
 }
-.headerComponent .rightContent  .userheadImg{
+.headerComponent .homeHeader .rightContent  .userheadImg{
     width: 72px;
     height: 72px;
     border-radius: 50%;
     margin-right: 24px;
     transform: translate(0,16%);
 }
-.headerComponent .rightContent  .userinfo{
+.headerComponent .homeHeader .rightContent  .userinfo{
     line-height: 34px;
     padding-top: 18px;
 }
+.otherHeader{
+    /*line-height: 97px;*/
+    padding: 0 30px;
+    line-height: 1.6666667;
+}
+.otherHeader .middle{
+    vertical-align: middle;
+}
+.circleIcon{
+    display: inline-block;
+    margin-right: 30px;
+}
+.iconCircle{
+    display: inline-block;
+    width: 64px;
+    height: 64px;
+    border: 4px solid #fff;
+    border-radius: 50%;
+    line-height: 55px;
+    text-align: center;
+    /* top: 50%; */
+    transform: translateY(-1px);
+    vertical-align: middle ;
+    margin-right: 40px;
+}
\ No newline at end of file

client/components/TroubleComponent/TroubleItemComponent/TroubleItemComponent.jsx

+import React from 'react';
+require('./index.css')
+export default class TroubleItemComponent extends React.Component{
+    constructor(props){
+        super(props)
+        this.state = {
+            text: ''
+        }
+    }
+
+    render(){
+        return (
+            <div className={"troubleItemComponent"}>
+                <div className={"finishBox"}>
+                    <div className={"finishText colfff font24"}>已处理</div>
+                </div>
+                <div className={"itemText font32"}>故障问题1：故障ID-00001</div>
+                <div className={"itemWrongInfo font24 col999"}>
+                    <p>2:3 左侧动作故障，取货动作出错</p>
+                </div>
+                <div className={"jugdeQuestion font32 rel"}>
+                    <span className={"colff7860 font32 star"}>*</span>
+                    <span>是否有此问题</span>
+                    <div className={"questionBox border_e5"}>是</div>
+                    <div className={"questionBox border_e5"}>否</div>
+                </div>
+                <div className={"itemTextArea rel font24"}>
+                    <div className={"itemTextEdit font24 colff7860"}>
+                        <span className={"iconfont font24 icon icon-editor-line colff7860"}></span>
+                        <span> 编辑</span>
+                    </div>
+                    <span className={"colff7860 font32 star"}>*</span>
+                    <div className={"itemTextAreaBox col999 border_e5"}>
+                        {
+                            this.state.text ? <textarea readOnly className={"itemTextAreaBoxs col999"} value={this.state.text}></textarea> :
+                                <span className={"itemPlayceHolder"}>编辑检查结果</span>
+                        }
+
+                    </div>
+                </div>
+
+                <div className={"itemControl rel"}>
+                    <div className={"plusImg controlBox "}>
+                        <img src={UTILPATH.localImg.plusIcon} alt=""/>
+                    </div>
+                    <div className={"refreshImg controlBox "}>
+                        <img src={UTILPATH.localImg.refreshIcon} alt=""/>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file

client/components/TroubleComponent/TroubleItemComponent/index.css

+.troubleItemComponent{
+    width: 1396px;
+    height: 608px;
+    border: 1px solid #e5e5e5;
+    background-color: #ffffff;
+    border-radius: 20px;
+    overflow: hidden;
+    padding: 42px 45px 0 45px;
+    position: relative;
+}
+.troubleItemComponent .border_e5{
+    border: 2px solid #e5e5e5;
+    border-radius: 10px;
+}
+.troubleItemComponent .border_dashed_e5{
+    border: 2px dashed #e5e5e5;
+    border-radius: 10px;
+}
+
+.troubleItemComponent .rel{
+    position: relative;
+    padding-left: 44px;
+}
+.troubleItemComponent .itemText{
+    font-weight: bold;
+}
+.troubleItemComponent .itemWrongInfo{
+    height: 86px;
+    position: relative;
+}
+.troubleItemComponent .itemWrongInfo>p{
+    line-height: 32px;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+}
+.troubleItemComponent .star{
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+}
+.troubleItemComponent .jugdeQuestion{
+    height: 61px;
+    line-height: 61px;
+    margin-bottom: 30px;
+}
+.troubleItemComponent .jugdeQuestion .questionBox{
+    height: 100%;
+    width: 161px;
+    text-align: center;
+    display: inline-block;
+    margin-left: 30px;
+}
+.troubleItemComponent .jugdeQuestion .questionBox.active{
+    border-color: #26ce61;
+}
+.troubleItemComponent .itemTextArea{
+    height: 198px;
+    margin-bottom: 29px;
+}
+.troubleItemComponent .itemTextAreaBox{
+    width: 1250px;
+    height: 100%;
+    display: inline-block;
+    background-color: #f2f2f2;
+    padding: 20px;
+    overflow: hidden;
+}
+.itemTextAreaBoxs{
+    background-color: #f2f2f2;
+    border: none;
+    resize: none;
+    width: 100%;
+    height: 100%;
+    line-height: 40px;
+    text-align: justify;
+}
+.troubleItemComponent .itemTextArea .itemPlayceHolder{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.troubleItemComponent .itemTextArea .itemTextEdit{
+    text-align: right;
+    position: absolute;
+    line-height: 57px;
+    top: -57px;
+    right: 46px;
+}
+.troubleItemComponent .itemControl .controlBox{
+    width: 90px;
+    height: 90px;
+    position: relative;
+    display: inline-block;
+    margin-right: 30px;
+}
+.troubleItemComponent .itemControl .controlBox>img{
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+
+.troubleItemComponent .finishBox{
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-top: 63px solid #26ce61;
+    border-bottom: 63px solid transparent;
+    border-left: 63px solid transparent;
+    border-right: 63px solid #26ce61;
+}
+.troubleItemComponent .finishBox .finishText{
+    position: absolute;
+    text-align: center;
+    width: 178px;
+    height: 178px;
+    line-height: 126px;
+    left: -89px;
+    top: -89px;
+    transform: rotate(45deg);
+}
+.troubleItemComponent.finish{
+    border: 3px solid #26ce61;
+}
+.troubleItemComponent.finish .finishBox{
+    display: block;
+}
+

client/config/swiperContainer.js

 module.exports = {
-    bannerSwiperContainer : 'bannerSwiperContainer',
-    categorySwiperContainer : 'categorySwiperContainer',
-    subSwiperContainer : 'subSwiperContainer',
-    skuListSwiperContainer : 'skuListSwiperContainer',
+    troubleSwiperContainer : 'troubleSwiperContainer',
 }
\ No newline at end of file

client/containers/PageContainer/PageContainer.jsx

@@ -9,14 +9,14 @@ import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDama
 const showPage = {
     1 : 'Trouble',
     2 : 'Scan'
-}
+};
 
 class PageContainer extends React.Component {
     constructor(props) {
         super(props);
         // UTILPATH.socket.getIp();
         this.state = {
-            showPage : showPage[2],
+            showPage : showPage[1],
             page : null
         };
         this.getPages = this.getPages.bind(this);

client/containers/TroubleContainer/TroubleContainer.jsx

 import React from 'react';
+import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
+import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent'
 require('./index.css')
 export default class TroubleContainer extends   React.Component{
     constructor(props){
@@ -6,28 +8,33 @@ export default class TroubleContainer extends   React.Component{
     }
 
     render(){
+        let arr = [1,2,3,4];
+        let dom = arr.map((i,k)=>{
+            return <TroubleItem key={k}/>;
+        });
+        let swiperOptions = {
+            width : 1396,
+            spaceBetween: 30,
+            freeMode:true,
+            // slidesPerView: 2.6,
+        };
+        let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
+        let swiperCount = arr.length;
         return <div className={"troubleContainer"}>
-            <div className={"troubleText font32"}><span className={"colff7860"}>*</span>必填项</div>
+            <div className={"troubleText font32"}><span className={"colff7860"}>* </span>必填项</div>
             <div className={"troubleBox"}>
-                <div className={"troubleItemComponent"}>
-                    <div className={"itemText font32"}>故障问题1：故障ID-00001</div>
-                    <div className={"itemWrongInfo font24 col999"}>
-                        <p>2:3 左侧动作故障，取货动作出错2:3 左侧动作故障，取货动作出错2:3 左侧动作故障，取货动作出错2:3 左侧动作故障，取货动作出错</p>
-
+                <SwiperComponent
+                    swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
+                >
+                    {dom}
+                </SwiperComponent>
             </div>
-                    <div className={"jugdeQuestion"}>
-                        <span>*</span>是否有此问题
-                        <span>是</span>
-                        <span>否</span>
+            <div className={"troubleBtnBox"}>
+                <div className={"troubleBtn colfff font32"}>
+                    处理完毕
                 </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{
+.troubleContainer .troubleText{
     height: 100px;
-    /* line-height: 131px; */
     display: table-cell;
     vertical-align: bottom;
 }
-.troubleBox{
-    margin-top: 20px;
+.troubleContainer .troubleBox{
+    margin: 20px 0;
 }
-.troubleItemComponent{
-    width: 1396px;
-    height: 608px;
-    border: 1px solid #e5e5e5;
-    background-color: #ffffff;
-    border-radius: 20px;
-    overflow: hidden;
-    padding: 42px 45px 0 45px;
+.troubleContainer .troubleBtnBox{
+    height: 80px;
+    width: 100%;
+    text-align: right;
+    padding-right: 30px;
 }
-.troubleItemComponent .itemText{
-    font-weight: bold;
-}
-.troubleItemComponent .itemWrongInfo{
-    height: 86px;
-    position: relative;
-}
-.troubleItemComponent .itemWrongInfo>p{
-    line-height: 32px;
-    top: 50%;
-    transform: translateY(-50%);
+.troubleContainer .troubleBtn{
+    width: 413px;
+    height: 100%;
+    display: inline-block;
+    line-height: 80px;
+    text-align: center;
+    background-color: #ff7860;
+    border-radius: 10px;
 }
\ No newline at end of file

client/css/color.css

@@ -21,3 +21,8 @@
 .col999{
     color: #999999!important;
 }
+
+
+.border-green{
+    border-color: #26ce61!important;
+}

client/css/font.css

@@ -134,3 +134,14 @@ body{
 [data-dpr="3"] .font44 {
     font-size: calc(var(--font3) * font44) !important;
 }
+.font60 {
+    font-size: font60 !important;
+}
+
+[data-dpr="2"] .font60 {
+    font-size: calc(var(--font2) * font60) !important;
+}
+
+[data-dpr="3"] .font60 {
+    font-size: calc(var(--font3) * font60) !important;
+}
\ No newline at end of file

client/css/iconfont.css

 
+@font-face {font-family: "font_family";
+    src: url(../font/iconfont.eot?t=1531483155508); /* IE9*/
+    src: url(../font/iconfont.eot?t=1531483155508#iefix) format('embedded-opentype'), /* IE6-IE8 */
+    url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+    url(../font/iconfont.ttf?t=1531483155508) format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    url(../font/iconfont.svg?t=1531483155508#font_family) format('svg'); /* iOS 4.1- */
+}
 
+.iconfont {
+    font-family:"font_family" !important;
+    font-size:16px;
+    font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-editor-line:before { content: "\e684"; }
+
+.icon-circle-left:before { content: "\e613"; }
+
+.icon-arrow-o-l:before { content: "\e789"; }
+
+.icon-speedup:before { content: "\e617"; }
+
+.icon-address:before { content: "\e618"; }
+
+.icon-save:before { content: "\e619"; }
+
+.icon-plus:before { content: "\e61a"; }
+
+.icon-arrow:before { content: "\e61b"; }
+
+.icon-refresh:before { content: "\e61c"; }

webpack.config.js

@@ -15,13 +15,13 @@ let baseConfig = {
     module : {
         rules:[
             {
-                test:/\.(ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-                use:["url-loader?limit=5120"]
-            },
-            {
-                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-                use: ['url-loader?limit=10000&mimetype=image/svg+xml']
+                test:/\.(ttf|eot|otf|woff|woff2|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                use:["url-loader?limit=10240"]
             },
+            // {
+            //     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+            //     use: ['url-loader?limit=10000&mimetype=image/svg+xml']
+            // },
             {
                 test:/\.(jpg|png|jpeg)$/,
                 use:["url-loader?limit=512000&name=[name]-[hash:6].[ext]&mimetype=image/png"] //limit 500kb