Skip to content

M
max_android_panel
Commit 7cee6ba3 by Zhang Xin
Options

更改左右结构样式

parent c3989ab3
Showing with 190 additions and 140 deletions
client/components/CommonComponent/HeaderComponent/index.css
/*.headerComponent{*/
/*height: 98px;*/
/*width: 100%;*/
/*position: relative;*/
/*background-color: #34343e;*/
/*overflow: hidden;*/
/*}*/
/*.headerComponent .homeHeader{*/
/*height: 100%;*/
/*width: 100%;*/
/*position: relative;*/
/*}*/
/*.headerComponent .homeHeader .headerContent{*/
/*height: 100%;*/
/*width: auto;*/
/*display: flex;*/
/*}*/
/*.headerComponent .homeHeader .headerlogo{*/
/*width: 440px;*/
/*height: 100%;*/
/*background-color: #ff7860;*/
/*position: relative;*/
/*}*/
/*.headerComponent .homeHeader .headerlogo:after{*/
/*content : '';*/
/*position: absolute;*/
/*width: 0;*/
/*height: 0;*/
/*!*background-color: #34343e;*!*/
/*border-top: 98px solid transparent;*/
/*border-bottom: 0 solid transparent;*/
/*border-left: 0 solid transparent;*/
/*border-right: 40px solid #34343e;*/
/*top: 0;*/
/*right: -1px;*/
/*}*/
/*.headerComponent .homeHeader .headerlogo .logoImg{*/
/*position: absolute;*/
/*top: 50%;*/
/*left: 44%;*/
/*transform: translate(-50%,-50%);*/
/*width: 80%;*/
/*}*/
/*.headerComponent .homeHeader .locationInfo{*/
/*position: relative;*/
/*!*padding-top: 16px;*!*/
/*line-height: 98px;*/
/*}*/
/*.headerComponent .homeHeader .locationInfo .addIcon{*/
/*display:inline-block;*/
/*margin: 0 20px;*/
/*vertical-align: middle;*/
/*height: 64%;*/
/*}*/
/*.headerComponent .homeHeader .locationInfo .local {*/
/*display: inline-block;*/
/*line-height: 1.336;*/
/*vertical-align: middle;*/
/*}*/
/*.headerComponent .homeHeader .locationInfo>i{*/
/*vertical-align: middle;*/
/*}*/
/*.headerComponent .homeHeader .rightContent{*/
/*padding-right: 59px;*/
/*}*/
/*.headerComponent .homeHeader .rightContent .userheadImg{*/
/*width: 72px;*/
/*height: 72px;*/
/*border-radius: 50%;*/
/*margin-right: 24px;*/
/*transform: translate(0,16%);*/
/*}*/
/*.headerComponent .homeHeader .rightContent .userinfo{*/
/*line-height: 34px;*/
/*padding-top: 18px;*/
/*}*/
/*.otherHeader{*/
/*!*line-height: 97px;*!*/
/*padding: 0 30px;*/
/*line-height: 1.6;*/
/*}*/
/*.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;*/
/*}*/
.headerComponent{ .headerComponent{
height: 0.8166666666666667rem; height: 98px;
width: 100%; width: 100%;
position: relative; position: relative;
background-color: #34343e; background-color: #34343e;
overflow: hidden; overflow: hidden;
} }
.headerComponent .homeHeader{ .headerComponent .homeHeader{
height: 100%; height: 100%;
...@@ -120,7 +17,7 @@ ...@@ -120,7 +17,7 @@
display: flex; display: flex;
} }
.headerComponent .homeHeader .headerlogo{ .headerComponent .homeHeader .headerlogo{
width: 3.6666666666666665rem; width: 440px;
height: 100%; height: 100%;
background-color: #ff7860; background-color: #ff7860;
position: relative; position: relative;
...@@ -130,14 +27,13 @@ ...@@ -130,14 +27,13 @@
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
/*background-color: #34343e; /*background-color: #34343e;*/
*/ border-top: 98px solid transparent;
border-top: 0.8166666666666667rem solid transparent;
border-bottom: 0 solid transparent; border-bottom: 0 solid transparent;
border-left: 0 solid transparent; border-left: 0 solid transparent;
border-right: 0.3333333333333333rem solid #34343e; border-right: 40px solid #34343e;
top: 0; top: 0;
right: -0.008333333333333333rem; right: -1px;
} }
.headerComponent .homeHeader .headerlogo .logoImg{ .headerComponent .homeHeader .headerlogo .logoImg{
position: absolute; position: absolute;
...@@ -148,13 +44,12 @@ ...@@ -148,13 +44,12 @@
} }
.headerComponent .homeHeader .locationInfo{ .headerComponent .homeHeader .locationInfo{
position: relative; position: relative;
/*padding-top: 0.13333333333333333rem; /*padding-top: 16px;*/
*/ line-height: 98px;
line-height: 0.8166666666666667rem;
} }
.headerComponent .homeHeader .locationInfo .addIcon{ .headerComponent .homeHeader .locationInfo .addIcon{
display:inline-block; display:inline-block;
margin: 0 0.16666666666666666rem; margin: 0 20px;
vertical-align: middle; vertical-align: middle;
height: 64%; height: 64%;
} }
...@@ -167,23 +62,22 @@ ...@@ -167,23 +62,22 @@
vertical-align: middle; vertical-align: middle;
} }
.headerComponent .homeHeader .rightContent{ .headerComponent .homeHeader .rightContent{
padding-right: 0.49166666666666664rem; padding-right: 59px;
} }
.headerComponent .homeHeader .rightContent .userheadImg{ .headerComponent .homeHeader .rightContent .userheadImg{
width: 0.6rem; width: 72px;
height: 0.6rem; height: 72px;
border-radius: 50%; border-radius: 50%;
margin-right: 0.2rem; margin-right: 24px;
transform: translate(0,16%); transform: translate(0,16%);
} }
.headerComponent .homeHeader .rightContent .userinfo{ .headerComponent .homeHeader .rightContent .userinfo{
line-height: 0.2833333333333333rem; line-height: 34px;
padding-top: 0.15rem; padding-top: 18px;
} }
.otherHeader{ .otherHeader{
/*line-height: 0.8083333333333333rem; /*line-height: 97px;*/
*/ padding: 0 30px;
padding: 0 0.25rem;
line-height: 1.6; line-height: 1.6;
} }
.otherHeader .middle{ .otherHeader .middle{
...@@ -191,19 +85,125 @@ ...@@ -191,19 +85,125 @@
} }
.circleIcon{ .circleIcon{
display: inline-block; display: inline-block;
margin-right: 0.25rem; margin-right: 30px;
} }
.iconCircle{ .iconCircle{
display: inline-block; display: inline-block;
width: 0.5333333333333333rem; width: 64px;
height: 0.5333333333333333rem; height: 64px;
border: 4px solid #fff; border: 4px solid #fff;
border-radius: 50%; border-radius: 50%;
line-height: 0.4583333333333333rem; line-height: 55px;
text-align: center; text-align: center;
/* top: 50%; /* top: 50%; */
*/ transform: translateY(-1px);
transform: translateY(-0.008333333333333333rem);
vertical-align: middle ; vertical-align: middle ;
margin-right: 0.3333333333333333rem; margin-right: 40px;
} }
/*.headerComponent{*/
/*height: 0.8166666666666667rem;*/
/*width: 100%;*/
/*position: relative;*/
/*background-color: #34343e;*/
/*overflow: hidden;*/
/*}*/
/*.headerComponent .homeHeader{*/
/*height: 100%;*/
/*width: 100%;*/
/*position: relative;*/
/*}*/
/*.headerComponent .homeHeader .headerContent{*/
/*height: 100%;*/
/*width: auto;*/
/*display: flex;*/
/*}*/
/*.headerComponent .homeHeader .headerlogo{*/
/*width: 3.6666666666666665rem;*/
/*height: 100%;*/
/*background-color: #ff7860;*/
/*position: relative;*/
/*}*/
/*.headerComponent .homeHeader .headerlogo:after{*/
/*content : '';*/
/*position: absolute;*/
/*width: 0;*/
/*height: 0;*/
/*!*background-color: #34343e;*/
/**!*/
/*border-top: 0.8166666666666667rem solid transparent;*/
/*border-bottom: 0 solid transparent;*/
/*border-left: 0 solid transparent;*/
/*border-right: 0.3333333333333333rem solid #34343e;*/
/*top: 0;*/
/*right: -0.008333333333333333rem;*/
/*}*/
/*.headerComponent .homeHeader .headerlogo .logoImg{*/
/*position: absolute;*/
/*top: 50%;*/
/*left: 44%;*/
/*transform: translate(-50%,-50%);*/
/*width: 80%;*/
/*}*/
/*.headerComponent .homeHeader .locationInfo{*/
/*position: relative;*/
/*!*padding-top: 0.13333333333333333rem;*/
/**!*/
/*line-height: 0.8166666666666667rem;*/
/*}*/
/*.headerComponent .homeHeader .locationInfo .addIcon{*/
/*display:inline-block;*/
/*margin: 0 0.16666666666666666rem;*/
/*vertical-align: middle;*/
/*height: 64%;*/
/*}*/
/*.headerComponent .homeHeader .locationInfo .local {*/
/*display: inline-block;*/
/*line-height: 1.336;*/
/*vertical-align: middle;*/
/*}*/
/*.headerComponent .homeHeader .locationInfo>i{*/
/*vertical-align: middle;*/
/*}*/
/*.headerComponent .homeHeader .rightContent{*/
/*padding-right: 0.49166666666666664rem;*/
/*}*/
/*.headerComponent .homeHeader .rightContent .userheadImg{*/
/*width: 0.6rem;*/
/*height: 0.6rem;*/
/*border-radius: 50%;*/
/*margin-right: 0.2rem;*/
/*transform: translate(0,16%);*/
/*}*/
/*.headerComponent .homeHeader .rightContent .userinfo{*/
/*line-height: 0.2833333333333333rem;*/
/*padding-top: 0.15rem;*/
/*}*/
/*.otherHeader{*/
/*!*line-height: 0.8083333333333333rem;*/
/**!*/
/*padding: 0 0.25rem;*/
/*line-height: 1.6;*/
/*}*/
/*.otherHeader .middle{*/
/*vertical-align: middle;*/
/*}*/
/*.circleIcon{*/
/*display: inline-block;*/
/*margin-right: 0.25rem;*/
/*}*/
/*.iconCircle{*/
/*display: inline-block;*/
/*width: 0.5333333333333333rem;*/
/*height: 0.5333333333333333rem;*/
/*border: 4px solid #fff;*/
/*border-radius: 50%;*/
/*line-height: 0.4583333333333333rem;*/
/*text-align: center;*/
/*!* top: 50%;*/
/**!*/
/*transform: translateY(-0.008333333333333333rem);*/
/*vertical-align: middle ;*/
/*margin-right: 0.3333333333333333rem;*/
/*}*/
client/containers/LeftContainer/LeftContainer.jsx
import React from 'react'; import React from 'react';
require('./index.css')
export default class LeftContainer extends React.Component{ export default class LeftContainer extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
...@@ -7,7 +7,7 @@ export default class LeftContainer extends React.Component{ ...@@ -7,7 +7,7 @@ export default class LeftContainer extends React.Component{
render(){ render(){
return( return(
<div> <div className={"leftContainer"}>
{this.props.children} {this.props.children}
</div> </div>
) )
......
client/containers/LeftContainer/index.css
.leftContainer{
height: 100%;
background: #e4e4e4;
width: 398px;
display: inline-block;
position: absolute;
}
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
...@@ -25,6 +25,7 @@ import Clock from '../../components/CommonComponent/ClockComponent/ClockComponen ...@@ -25,6 +25,7 @@ import Clock from '../../components/CommonComponent/ClockComponent/ClockComponen
import HomePage from '../HomeContainer/HomeContainer' import HomePage from '../HomeContainer/HomeContainer'
import TakeStokeContainer from '../TakeStokeContainer/TakeStokeContainer' import TakeStokeContainer from '../TakeStokeContainer/TakeStokeContainer'
import BreakageContainer from '../BreakageContainer/BreakageConatiner' import BreakageContainer from '../BreakageContainer/BreakageConatiner'
import RecoveryPage from '../RecoveryContainer/RecoveryContainer'
/*二期引用 end*/ /*二期引用 end*/
import {on,remove} from '../../util/event'; import {on,remove} from '../../util/event';
...@@ -55,7 +56,7 @@ class PageContainer extends React.Component { ...@@ -55,7 +56,7 @@ class PageContainer extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
showPage : showPage[initPage], showPage : showPage[10],
lastPage : '', lastPage : '',
page : null, page : null,
popupInfo : defaultPopupInfo, popupInfo : defaultPopupInfo,
...@@ -522,7 +523,9 @@ class PageContainer extends React.Component { ...@@ -522,7 +523,9 @@ class PageContainer extends React.Component {
pages = <TakeStokeContainer />; pages = <TakeStokeContainer />;
case showPage[5]: case showPage[5]:
pages = <BreakageContainer />; pages = <BreakageContainer />;
case showPage[10]:
pages = <RecoveryPage />;
break;
/*以下是二期页面 end*/ /*以下是二期页面 end*/
} }
return pages; return pages;
......
client/containers/RecoveryContainer/RecoveryContainer.jsx 0 → 100644
import React from 'react';
import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer'
export default class RecoveryContainer extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div className={"recoveryContainer page"}>
<Header />
<LeftContainer />
<RightContainer>
{
<div className={"recoveryContent"}>
</div>
}
</RightContainer>
</div>
)
}
}
\ No newline at end of file
client/containers/RightContainer/RightContainer.jsx
import React from 'react'; import React from 'react';
require('./index.css')
export default class RightContainer extends React.Component{ export default class RightContainer extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
...@@ -7,7 +7,7 @@ export default class RightContainer extends React.Component{ ...@@ -7,7 +7,7 @@ export default class RightContainer extends React.Component{
render(){ render(){
return( return(
<div> <div className={"rightContainer"}>
{this.props.children} {this.props.children}
</div> </div>
) )
......
client/containers/RightContainer/index.css
.rightContainer{
margin-left: 398px;
background: #fff;
height: 100%;
position: relative;
}
\ No newline at end of file
client/css/common.css
...@@ -27,7 +27,11 @@ div{ ...@@ -27,7 +27,11 @@ div{
.disappear{ .disappear{
opacity: 0!important; opacity: 0!important;
} }
.page{
position: relative;
width: 100%;
height: 100%;
}
body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent,.pageContainer{ body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent,.pageContainer{
} }
......
client/index.js
...@@ -29,7 +29,7 @@ function renderPage(store) { ...@@ -29,7 +29,7 @@ function renderPage(store) {
let store = activateVendor(); let store = activateVendor();
// UTILPATH.socket.init(129,17); // UTILPATH.socket.init(129,17);
UTILPATH.socket.testIp(209); // UTILPATH.socket.testIp(209);
// UTILPATH.socket.testIp(179); // UTILPATH.socket.testIp(179);
renderPage(store); renderPage(store);
\ 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