Skip to content

M
max_android_panel
Commit d1c16cdb by Zhang Xin
Options

add container

parent 34d49045
Showing with 104 additions and 18 deletions
client/components/CommonComponent/HeaderComponent/HeaderComponent.jsx
...@@ -11,9 +11,9 @@ export default class HeaderComponent extends React.Component{ ...@@ -11,9 +11,9 @@ export default class HeaderComponent extends React.Component{
<div className={"headerlogo"}> <div className={"headerlogo"}>
<img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/> <img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/>
</div> </div>
<div> <div className={"locationInfo"}>
<img className={"addIcon"} src={UTILPATH.localImg.addIcon} alt=""/> <img className={"addIcon"} src={UTILPATH.localImg.addIcon} alt=""/>
<div className={"colfff"}> <div className={"local colfff"}>
<p className={"font30"}>华贸商业街</p> <p className={"font30"}>华贸商业街</p>
<p className={"font24"}>ID : 001</p> <p className={"font24"}>ID : 001</p>
</div> </div>
...@@ -21,7 +21,7 @@ export default class HeaderComponent extends React.Component{ ...@@ -21,7 +21,7 @@ export default class HeaderComponent extends React.Component{
</div> </div>
<div className={"headerContent rightContent fr"}> <div className={"headerContent rightContent fr"}>
<img className={"userheadImg"} src={UTILPATH.localImg.headlogo} alt=""/> <img className={"userheadImg"} src={UTILPATH.localImg.defaultImg} alt=""/>
<div className={"userinfo font24 colfff"}> <div className={"userinfo font24 colfff"}>
<p>李大仁</p> <p>李大仁</p>
<p>ID:001</p> <p>ID:001</p>
......
client/components/CommonComponent/HeaderComponent/index.css
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
.headerComponent .headerContent{ .headerComponent .headerContent{
height: 100%; height: 100%;
width: auto; width: auto;
display: flex;
} }
.headerComponent .headerlogo{ .headerComponent .headerlogo{
width: 440px; width: 440px;
...@@ -18,8 +19,8 @@ ...@@ -18,8 +19,8 @@
.headerComponent .headerlogo:after{ .headerComponent .headerlogo:after{
content : ''; content : '';
position: absolute; position: absolute;
width: 40px; width: 0;
height: 100%; height: 0;
/*background-color: #34343e;*/ /*background-color: #34343e;*/
border-top: 98px solid transparent; border-top: 98px solid transparent;
border-bottom: 0 solid transparent; border-bottom: 0 solid transparent;
...@@ -34,3 +35,31 @@ ...@@ -34,3 +35,31 @@
left: 40%; left: 40%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
} }
.headerComponent .locationInfo{
position: relative;
padding-top: 16px;
}
.headerComponent .locationInfo .addIcon{
display:inline-block;
margin: 0 20px;
vertical-align: middle;
}
.headerComponent .locationInfo .local {
display: inline-block;
line-height: 34px;
vertical-align: middle;
}
.headerComponent .rightContent{
padding-right: 59px;
}
.headerComponent .rightContent .userheadImg{
width: 72px;
height: 72px;
border-radius: 50%;
margin-right: 24px;
transform: translate(0,16%);
}
.headerComponent .rightContent .userinfo{
line-height: 34px;
padding-top: 18px;
}
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import React from 'react' import React from 'react'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent' import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import TroubleContainer from '../TroubleContainer/TroubleContainer'
class PageContainer extends React.Component { class PageContainer extends React.Component {
...@@ -25,6 +26,7 @@ class PageContainer extends React.Component { ...@@ -25,6 +26,7 @@ class PageContainer extends React.Component {
return ( return (
<div> <div>
<HeaderComponent /> <HeaderComponent />
<TroubleContainer />
</div> </div>
) )
} }
......
client/containers/Trouble/Trouble.jsx deleted 100644 → 0
import react from 'react';
export default class Trouble extends react.Component{
constructor(props){
super(props);
}
render(){
return <div>trouble</div>
}
}
\ No newline at end of file
client/containers/TroubleContainer/TroubleContainer.jsx 0 → 100644
import React from 'react';
require('./index.css')
export default class TroubleContainer extends React.Component{
constructor(props){
super(props);
}
render(){
return <div className={"troubleContainer"}>
<div className={"troubleText font32"}><span className={"colff7860"}>*</span>必填项</div>
<div className={"troubleBox"}>
<div className={"troubleItem"}>
<div className={"itemText"}>故障问题1：故障ID-00001</div>
<div className={"itemWrongInfo"}>2:3 左侧动作故障，取货动作出错</div>
<div className={"jugdeQuestion"}>
<span>*</span>是否有此问题
<span>是</span>
<span>否</span>
</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 0 → 100644
.troubleContainer{
padding-left: 30px;
}
.troubleText{
height: 100px;
/* line-height: 131px; */
display: table-cell;
vertical-align: bottom;
}
.troubleBox{
margin-top: 20px;
}
.troubleItem{
width: 1396px;
height: 608px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
border-radius: 20px;
overflow: hidden;
}
\ No newline at end of file
client/css/font.css
...@@ -16,6 +16,7 @@ body{ ...@@ -16,6 +16,7 @@ body{
@value font26: 26px; @value font26: 26px;
@value font28: 28px; @value font28: 28px;
@value font30: 30px; @value font30: 30px;
@value font32: 32px;
@value font40: 40px; @value font40: 40px;
@value font44: 44px; @value font44: 44px;
@value font50: 50px; @value font50: 50px;
...@@ -98,6 +99,19 @@ body{ ...@@ -98,6 +99,19 @@ body{
[data-dpr="3"] .font30 { [data-dpr="3"] .font30 {
font-size: calc(var(--font3) * font30) !important; font-size: calc(var(--font3) * font30) !important;
} }
.font32 {
font-size: font32 !important;
}
[data-dpr="2"] .font32 {
font-size: calc(var(--font2) * font32) !important;
}
[data-dpr="3"] .font32 {
font-size: calc(var(--font3) * font32) !important;
}
.font40 { .font40 {
font-size: font40 !important; font-size: font40 !important;
} }
......
client/css/reset.css
...@@ -27,7 +27,7 @@ button, input, select, textarea { /* for ie */ ...@@ -27,7 +27,7 @@ button, input, select, textarea { /* for ie */
} }
html, body { html, body {
height: 100%; height: 100%;
background-color: #ffffff; background-color: #f5f5f5;
} }
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
......
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