Commit b3eb18e0 by yaxiLiuu

fixed conflict â€

parents f273990f 0d6fc89f
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
......@@ -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
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
.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;
}
module.exports = {
bannerSwiperContainer : 'bannerSwiperContainer',
categorySwiperContainer : 'categorySwiperContainer',
subSwiperContainer : 'subSwiperContainer',
skuListSwiperContainer : 'skuListSwiperContainer',
troubleSwiperContainer : 'troubleSwiperContainer',
}
\ No newline at end of file
......@@ -19,7 +19,7 @@ class PageContainer extends React.Component {
super(props);
// UTILPATH.socket.getIp();
this.state = {
showPage : showPage[3],
showPage : showPage[1],
page : null
};
this.getPages = this.getPages.bind(this);
......
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>
</div>
<div className={"jugdeQuestion"}>
<span>*</span>是否有此问题
<span></span>
<span></span>
</div>
<div className={"itemTextArea"}>
<span className={"itemPlayceHolder"}>编辑检查结果</span>
</div>
<div className={"itemControl"}>
</div>
<SwiperComponent
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
>
{dom}
</SwiperComponent>
</div>
<div className={"troubleBtnBox"}>
<div className={"troubleBtn colfff font32"}>
处理完毕
</div>
</div>
</div>
}
}
\ No newline at end of file
.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
......@@ -20,4 +20,9 @@
}
.col999{
color: #999999!important;
}
\ No newline at end of file
}
.border-green{
border-color: #26ce61!important;
}
......@@ -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
@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"; }

10.1 KB | W: | H:

7.21 KB | W: | H:

client/image/header-logo.png
client/image/header-logo.png
client/image/header-logo.png
client/image/header-logo.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment