Skip to content

M
max_android_panel
Commit 1ade2958 by wujiabao
Options

add 盘点组件

parent 32bed8a5
Showing with 164 additions and 2 deletions
client/containers/TakeStokeContainer/TakeStokeContainer.jsx
import React from "react" import React from "react"
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent' import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import LeftContainer from '../LeftContainer/LeftContainer'
import RightContainer from '../RightContainer/RightContainer'
import {headerStatus} from '../../config/showPage' import {headerStatus} from '../../config/showPage'
require('./index.css')
class TakeStokeContaniner extends React.Component { class TakeStokeContaniner extends React.Component {
constructor(props){ constructor(props){
super(props) super(props)
...@@ -9,9 +12,49 @@ class TakeStokeContaniner extends React.Component { ...@@ -9,9 +12,49 @@ class TakeStokeContaniner extends React.Component {
render(){ render(){
return ( return (
<div className={'TakeStokeContainer'}> <div className={'TokeStokeContainer'}>
<HeaderComponent headerStatus={headerStatus[1]} /> <HeaderComponent headerStatus={headerStatus[1]} />
<LeftContainer />
<RightContainer>
<div className={"TokeStokeContent"}>
<div className={"TokeStokeTop"}>
<h1 className={"TokeStokeTitle font30"}>请输入以下货道中的货品数量</h1>
<div className={"TokeStokeCommodity"}>
<h4>
<p>所在区域: <span>A区</span></p>
<p>货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;柜: <span>1号柜</span></p>
<p>货道位置: <span>第6行, 第三货道</span></p>
<p>货道编号: <span>13-2-6-3</span></p>
</h4>
<div className={'numAdd'}>
<p>数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量:</p>
<p>
<span>-</span>
<span>0</span>
<span>+</span>
</p>
</div>
</div>
</div>
<div className={"TokeStokeBottom"}>
<div className={"TokeStokeLeft"}>
<p className={"font24 clo333"}>货道信息详情</p>
<p>
<span>所在区域: <span>A区</span></span>
<span>货道位置: <span>A区柜门; 从上往下数第六行</span></span>
</p>
<p>
<span>区域照片: <img src="" alt=""/></span>
<span>货品名称: <span>雪碧250ml</span></span>
</p>
</div>
<div className={"TokeStokeRight"}>
<img src="" alt=""/>
</div>
</div>
<div className={"toknStokeSubmit"}><button>提交</button></div>
</div>
</RightContainer>
</div> </div>
) )
} }
......
client/containers/TakeStokeContainer/index.css
.rightContainer{
width:100%;
height:100%;
}
.TokeStokeContainer{
width:100%;
height:100%;
background:#fff;
}
.TokeStokeContainer .TokeStokeContent{
width:100%;
height: 100%;
margin-left:50px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop{
width:1422px;
height:410px;
background:#f2f2f2;
margin-top:40px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeTitle{
text-align: center;
color:#5c66ff;
line-height: 1.4;
margin-top:23px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity{
margin-left:517px;
margin-top:24px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity h4 p{
color:#333;
font-size: 28px;
line-height: 40px;
margin-top:14px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity h4 p span{
margin-left:5px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity .numAdd{
display: flex;
margin-top:26px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity .numAdd p{
font-size: 28px;
color: #333333;
line-height: 1.4;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity .numAdd p:nth-of-type(1){
padding-top:20px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity .numAdd p:nth-of-type(2){
margin-left:15px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity .numAdd p:nth-of-type(2) span{
width:80px;
height:83px;
background:#fff;
border-radius: 10px;
border:2px inside;
display: inline-block;
text-align: center;
line-height: 83px;
font-weight: 800;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeTop .TokeStokeCommodity .numAdd p:nth-of-type(2) span:nth-of-type(2){
border:0;
background:#f2f2f2;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom{
margin-top:24px;
display: flex;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom .TokeStokeRight{
width:116px;
height:116px;
border:2px solid #ccc;
margin-top:50px;
margin-left:400px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom .TokeStokeLeft{
width:900px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom .TokeStokeLeft p{
color:#333;
font-size: 24px;
display: flex;
justify-content: space-between
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom .TokeStokeLeft p span{
width:350px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom .TokeStokeLeft p>span:nth-of-type(2){
line-height: 33px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom .TokeStokeLeft p:nth-of-type(2){
margin-top:40px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom .TokeStokeLeft p:nth-of-type(3){
margin-top:25px;
}
.TokeStokeContainer .TokeStokeContent .TokeStokeBottom .TokeStokeLeft p:nth-of-type(3) img{
width:160px;
height:60px;
border-radius: 10px;
}
.TokeStokeContainer .toknStokeSubmit button{
margin-left:1000px;
width:410px;
height:80px;
background:#ff775c;
text-align: center;
color:#fff;
font-size: 32px;
border-radius:10px;
border:0;
margin-top:50px;
}
\ No newline at end of file
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