Skip to content

M
max_android_panel
Commit 89b8b7af by Zhang Xin
Options

增加textarea 和 增加弹窗公共样式

parent 0d6fc89f
Showing with 208 additions and 9 deletions
client/components/CommonComponent/HeaderComponent/HeaderComponent.jsx
...@@ -56,7 +56,7 @@ export default class HeaderComponent extends React.Component{ ...@@ -56,7 +56,7 @@ export default class HeaderComponent extends React.Component{
getOtherHeader(){ getOtherHeader(){
return <div className={"otherHeader font32 clearfix"}> return <div className={"otherHeader font32 clearfix"}>
<div className={"fl colfff"}> <div className={"fl colfff"}>
<i className={"iconfont middle icon font60 icon-circle-left circleIcon"}></i> <i className={"iconfont middle icon font58 icon-circle-left circleIcon"}></i>
<span className={"middle"}>检查编辑结果</span> <span className={"middle"}>检查编辑结果</span>
</div> </div>
<div className={"fr col999"}> <div className={"fr col999"}>
......
client/components/CommonComponent/HeaderComponent/index.css
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
.otherHeader{ .otherHeader{
/*line-height: 97px;*/ /*line-height: 97px;*/
padding: 0 30px; padding: 0 30px;
line-height: 1.6666667; line-height: 1.6;
} }
.otherHeader .middle{ .otherHeader .middle{
vertical-align: middle; vertical-align: middle;
......
client/components/CommonComponent/PopupComponent/PopupComponent.jsx 0 → 100644
import React from 'react';
require('./index.css')
export default class PopupComponent extends React.Component{
constructor(props){
super(props);
this.getDefaultPopup = this.getDefaultPopup.bind(this);
}
getDefaultPopup(){
let props = this.props;
let {popupInfo} = props;
let arrButton = popupInfo.popupButtons ? popupInfo.popupButtons : []
let dom = arrButton.map((a,k)=>{
return (
a.option && a.option instanceof Function ? <div key={"popuoButton"+k} className={"defaultPopupButton"} onClick={()=>a.option()}>{a.text}</div> :
<div key={"popuoButton"+k} className={"defaultPopupButton"}>{a.text}</div>
)
});
return (
<div className={"defaultPopup col333"}>
<div className={"defaultPopupText font30"}>
{this.props.text}
</div>
<div className={"defaultPopupButtons font32"}>
{dom}
</div>
</div>
)
}
render(){
let {popupInfo} = this.props;
return (
<div className={"popupComponent " + (popupInfo.showPopup ? ' ' : 'hide ') + popupInfo.classNames}>
{popupInfo.popupChild ? popupInfo.popupChild :
this.getDefaultPopup()
}
</div>
)
}
}
\ No newline at end of file
client/components/CommonComponent/PopupComponent/index.css 0 → 100644
.popupComponent{
position: absolute;
background: rgba(0,0,0,.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9;
}
.defaultPopup{
height: 366px;
width: 800px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
background: #ffffff;
overflow: hidden;
text-align: center;
}
.defaultPopup .defaultPopupText{
margin-top: 111px;
line-height: 40px;
padding: 0 160px;
}
.defaultPopup .defaultPopupButtons{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
margin-top: 70px;
}
.defaultPopup .defaultPopupButtons .defaultPopupButton{
width: 260px;
height: 80px;
border: 2px solid #e5e5e5;
line-height: 80px;
border-radius: 10px;
margin-left: 30px;
}
.defaultPopup .defaultPopupButtons .defaultPopupButton:first-child{
margin: 0;
}
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
...@@ -2,24 +2,39 @@ ...@@ -2,24 +2,39 @@
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 PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
import TroubleContainer from '../TroubleContainer/TroubleContainer' import TroubleContainer from '../TroubleContainer/TroubleContainer'
import TextAreaContainer from '../TextAreaContainer/TextAreaContainer'
import ScanBarCodeContainer from '../ScanBarCodeContainer/ScanBarCodeContaienr' import ScanBarCodeContainer from '../ScanBarCodeContainer/ScanBarCodeContaienr'
import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDamagesListContainer' import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDamagesListContainer'
require('./index.css')
const showPage = { const showPage = {
1 : 'Trouble', 1 : 'Trouble',
2 : 'Scan' 2 : 'Scan',
4 : 'TextArea'
}; };
const defaultPopupInfo = {
showPopup : false, //是否显示弹窗
popupChild : null, // 自定义弹窗内部html
popupText : "", //默认弹窗的文本 （必填）
popupButtons : [], // 默认弹窗的按钮
classNames : '' //自定义类名
};
class PageContainer extends React.Component { class PageContainer extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
// UTILPATH.socket.getIp(); // UTILPATH.socket.getIp();
this.state = { this.state = {
showPage : showPage[1], showPage : showPage[4],
page : null page : null,
popupInfo : defaultPopupInfo,
}; };
this.getPages = this.getPages.bind(this); this.getPages = this.getPages.bind(this);
this.showPopup = this.showPopup.bind(this);
this.hidePopup = this.hidePopup.bind(this);
} }
componentWillMount() { componentWillMount() {
let pages = this.getPages(); let pages = this.getPages();
...@@ -36,6 +51,28 @@ class PageContainer extends React.Component { ...@@ -36,6 +51,28 @@ class PageContainer extends React.Component {
componentWillUnmount(){ componentWillUnmount(){
} }
hidePopup(){
this.setState({
popupInfo : defaultPopupInfo
})
}
showPopup(info){
//eg : info = {popupText:'test',popupButtons:[{text : '返回',option:FUNCTION}]}
let popupInfo = Object.assign({},defaultPopupInfo,info);
if(
( popupInfo.popupChild ||
popupInfo.popupText ||
(popupInfo.popupButtons && popupInfo.popupButtons.length > 0)
) && !popupInfo.showPopup
){
popupInfo.showPopup = true; //以防未设置显示弹窗，做此判断。
}
this.setState({
popupInfo : popupInfo,
})
}
getPages(){ getPages(){
let pages = null; let pages = null;
switch (this.state.showPage){ switch (this.state.showPage){
...@@ -45,14 +82,17 @@ class PageContainer extends React.Component { ...@@ -45,14 +82,17 @@ class PageContainer extends React.Component {
case showPage[2]: case showPage[2]:
pages = <ScanBarCodeContainer />; pages = <ScanBarCodeContainer />;
break; break;
case showPage[4]:
pages = <TextAreaContainer />
} }
return pages; return pages;
} }
render() { render() {
return ( return (
<div> <div className={"pageContainer " + "backColfff"}>
<HeaderComponent /> <HeaderComponent />
<PopupComponent popupInfo={this.state.popupInfo} />
{this.state.page} {this.state.page}
</div> </div>
) )
......
client/containers/PageContainer/index.css
.pageContainer{
position: relative;
height: 956px;
width: 1920px;
}
.pageContainer.backColfff{
background-color: #ffffff;
}
\ No newline at end of file
client/containers/TextAreaContainer/TextAreaContainer.jsx 0 → 100644
import React from 'react';
require('./index.css');
export default class TextAreaContainer extends React.Component{
constructor(props){
super(props);
this.state = {
text : ''
}
}
handleChange(e){
let value = e.target.value
this.setState({text: value});
}
render(){
return (
<div className={"textAreaContainer"}>
<div className={"textAreaDiv font30 col999"} >
<textarea className={"textAreaBox font30 col999"} name="" id="" cols="30" rows="10" onChange={this.handleChange.bind(this)} value={this.state.text} placeholder={"点击输入"}></textarea>
</div>
</div>
)
}
}
client/containers/TextAreaContainer/index.css 0 → 100644
.textAreaContainer{
width: 100%;
padding: 29px 29px 0 ;
}
.textAreaContainer .textAreaDiv{
width: 100%;
background-color: #f5f5f5;
height: 428px;
border: 2px solid #e5e5e5;
border-radius: 10px;
padding: 30px 40px;
display: inline-block;
}
.textAreaContainer .textAreaDiv .textAreaBox{
width: 100%;
height: 100%;
background-color: transparent;
border: none;
resize:none;
}
\ No newline at end of file
client/containers/TroubleContainer/TroubleContainer.jsx
...@@ -7,6 +7,10 @@ export default class TroubleContainer extends React.Component{ ...@@ -7,6 +7,10 @@ export default class TroubleContainer extends React.Component{
super(props); super(props);
} }
dealTrouble(){
}
render(){ render(){
let arr = [1,2,3,4]; let arr = [1,2,3,4];
let dom = arr.map((i,k)=>{ let dom = arr.map((i,k)=>{
...@@ -30,7 +34,7 @@ export default class TroubleContainer extends React.Component{ ...@@ -30,7 +34,7 @@ export default class TroubleContainer extends React.Component{
</SwiperComponent> </SwiperComponent>
</div> </div>
<div className={"troubleBtnBox"}> <div className={"troubleBtnBox"}>
<div className={"troubleBtn colfff font32"}> <div className={"troubleBtn colfff font32"} onClick={()=>this.dealTrouble.bind(this)()}>
处理完毕 处理完毕
</div> </div>
</div> </div>
......
client/css/font.css
...@@ -20,6 +20,7 @@ body{ ...@@ -20,6 +20,7 @@ body{
@value font40: 40px; @value font40: 40px;
@value font44: 44px; @value font44: 44px;
@value font50: 50px; @value font50: 50px;
@value font58: 58px;
@value font60: 60px; @value font60: 60px;
.font10 { .font10 {
...@@ -134,6 +135,17 @@ body{ ...@@ -134,6 +135,17 @@ body{
[data-dpr="3"] .font44 { [data-dpr="3"] .font44 {
font-size: calc(var(--font3) * font44) !important; font-size: calc(var(--font3) * font44) !important;
} }
.font58 {
font-size: font58 !important;
}
[data-dpr="2"] .font58 {
font-size: calc(var(--font2) * font58) !important;
}
[data-dpr="3"] .font58 {
font-size: calc(var(--font3) * font58) !important;
}
.font60 { .font60 {
font-size: font60 !important; font-size: font60 !important;
} }
......
package.json
{ {
"name": "machinehomepage_new_27", "name": "max_android_panel",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"description": "Maxbox machinePage 27", "description": "Maxbox machinePage 27",
......
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