Skip to content

M
max_android_panel
Commit 7cee6ba3 by Zhang Xin
Options

更改左右结构样式

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