🚸 usability: 优化立减金、红包组件样式
This commit is contained in:
wangsongsole
parent
0879f03d1e
commit
cf06f7a593
|
|
@ -1042,7 +1042,7 @@ export default class addKnockGold extends Component {
|
|||
height={'36px'}
|
||||
unit='个'
|
||||
countShow={false}
|
||||
width={'520px'}
|
||||
width={'304px'}
|
||||
alignment={'left'}
|
||||
/>
|
||||
<RadioGroup
|
||||
|
|
@ -1417,23 +1417,6 @@ export default class addKnockGold extends Component {
|
|||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
{/* <h5>样式设置</h5> */}
|
||||
<Card style={{ width: '70%', margin: '10px 0' }} title={'样式设置'}>
|
||||
<Form ref='form3'>
|
||||
<FormItem id='instruction' labelname='使用说明' required=''>
|
||||
<WangEditor
|
||||
pageType='detaileditor'
|
||||
setEdittext={(text) => {
|
||||
this.onHandleChange(text, 'instruction');
|
||||
}}
|
||||
width='520px'
|
||||
text={this.state.model.instruction}
|
||||
limitLength={500}
|
||||
key={this.state.model.channel}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
{/* <h5>预警规则</h5> */}
|
||||
<Card style={{ width: '70%', margin: '10px 0' }} title={'预警规则'}>
|
||||
<Form model={this.state.model} rules={rules.warning} ref='form4'>
|
||||
|
|
@ -1525,6 +1508,24 @@ export default class addKnockGold extends Component {
|
|||
/>
|
||||
</Dialog>
|
||||
</Card>
|
||||
{/* <h5>样式设置</h5> */}
|
||||
<Card style={{ width: '70%', margin: '10px 0' }} title={'样式设置'}>
|
||||
<Form ref='form3'>
|
||||
<FormItem id='instruction' labelname='使用说明' required=''>
|
||||
<WangEditor
|
||||
pageType='detaileditor'
|
||||
setEdittext={(text) => {
|
||||
this.onHandleChange(text, 'instruction');
|
||||
}}
|
||||
// width='520px'
|
||||
text={this.state.model.instruction}
|
||||
limitLength={500}
|
||||
key={this.state.model.channel}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<MobileComponent data={this.state.model} keyType={this.props.keyType} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
overflow: scroll;
|
||||
min-width: 375px !important;
|
||||
width: auto !important;
|
||||
z-index: 99999;
|
||||
|
||||
.available_time {
|
||||
text-align: left;
|
||||
|
|
@ -198,6 +199,31 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#wangeditorDom {
|
||||
max-width: 800px;
|
||||
min-width: 520px;
|
||||
}
|
||||
|
||||
.w-e-text-container {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.countBox_par {
|
||||
display: inline-block;
|
||||
|
||||
.countBox {
|
||||
max-width: 800px;
|
||||
border: 1px solid #c9d8db;
|
||||
border-top: 0;
|
||||
min-width: 520px;
|
||||
text-align: end;
|
||||
color: #999;
|
||||
z-index: 10001;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.form-Item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
|
@ -413,16 +439,3 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.countBox_par {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.countBox {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
bottom: 5%;
|
||||
z-index: 999999;
|
||||
right: 3%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +1,30 @@
|
|||
import React from "react";
|
||||
import Editor from "wangeditor";
|
||||
import "./index.less";
|
||||
import React from 'react';
|
||||
import Editor from 'wangeditor';
|
||||
import './index.less';
|
||||
export default class wangEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
editorHtml: "",
|
||||
editorHtml: '',
|
||||
count: 0
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
let self = this;
|
||||
const editor = new Editor("#wangeditorDom");
|
||||
const editor = new Editor('#wangeditorDom');
|
||||
this.setState({ editor });
|
||||
editor.config.colors = ["#696969", "#9093a2", "#fgddbb", "#e3e7eb"];
|
||||
editor.config.colors = ['#696969', '#9093a2', '#fgddbb', '#e3e7eb'];
|
||||
editor.config.pasteText = true;
|
||||
// 设置编辑区域高度为 500px
|
||||
editor.config.height = 200;
|
||||
editor.config.showFullScreen = false;
|
||||
editor.config.menus = [
|
||||
"bold",
|
||||
"foreColor",
|
||||
"italic",
|
||||
"indent",
|
||||
"link",
|
||||
"justify"
|
||||
'bold',
|
||||
'foreColor',
|
||||
'italic',
|
||||
'indent',
|
||||
'link',
|
||||
'justify'
|
||||
];
|
||||
|
||||
// 注意，先配置 height ，再执行 create()
|
||||
|
|
@ -33,7 +33,7 @@ export default class wangEditor extends React.Component {
|
|||
var text = editor.txt.text();
|
||||
if (text.length == 0) {
|
||||
//没有文字
|
||||
self.props.setEdittext("");
|
||||
self.props.setEdittext('');
|
||||
}
|
||||
if (text.length > self.props.limitLength) {
|
||||
let str = text.slice(0, self.props.limitLength);
|
||||
|
|
@ -57,7 +57,7 @@ export default class wangEditor extends React.Component {
|
|||
<div className='countBox_par'>
|
||||
<div id='wangeditorDom' style={{ width: this.props.width }}></div>
|
||||
<p className='countBox'>
|
||||
{this.state.count + "/" + this.props.limitLength}
|
||||
{this.state.count + '/' + this.props.limitLength}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -479,7 +479,7 @@ export default class addKnockGold extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div id='addKnockGold'>
|
||||
<div id='redPackets'>
|
||||
{/* <h5>基本信息</h5> */}
|
||||
<Card style={{ width: '70%', margin: '10px 0' }} title={'基本信息'}>
|
||||
<Form model={this.state.model} rules={rules.basic} ref='form'>
|
||||
|
|
@ -665,7 +665,7 @@ export default class addKnockGold extends Component {
|
|||
height={'36px'}
|
||||
unit='个'
|
||||
countShow={false}
|
||||
width={'520px'}
|
||||
width={'306px'}
|
||||
alignment={'left'}
|
||||
/>
|
||||
<RadioGroup
|
||||
|
|
@ -906,23 +906,6 @@ export default class addKnockGold extends Component {
|
|||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
{/* <h5>样式设置</h5> */}
|
||||
<Card style={{ width: '70%', margin: '10px 0' }} title={'样式设置'}>
|
||||
<Form ref='form3'>
|
||||
<FormItem id='instruction' labelname='使用说明' required=''>
|
||||
<WangEditor
|
||||
pageType='detaileditor'
|
||||
setEdittext={(text) => {
|
||||
this.onHandleChange(text, 'instruction');
|
||||
}}
|
||||
width='520px'
|
||||
text={this.state.model.instruction}
|
||||
limitLength={500}
|
||||
key={this.state.model.channel}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
{/* <h5>预警规则</h5> */}
|
||||
<Card style={{ width: '70%', margin: '10px 0' }} title={'预警规则'}>
|
||||
<Form model={this.state.model} rules={rules.warning} ref='form4'>
|
||||
|
|
@ -998,6 +981,23 @@ export default class addKnockGold extends Component {
|
|||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
{/* <h5>样式设置</h5> */}
|
||||
<Card style={{ width: '70%', margin: '10px 0' }} title={'样式设置'}>
|
||||
<Form ref='form3'>
|
||||
<FormItem id='instruction' labelname='使用说明' required=''>
|
||||
<WangEditor
|
||||
pageType='detaileditor'
|
||||
setEdittext={(text) => {
|
||||
this.onHandleChange(text, 'instruction');
|
||||
}}
|
||||
text={this.state.model.instruction}
|
||||
limitLength={500}
|
||||
key={this.state.model.channel}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
{/* <MobileComponent data={this.state.model} keyType={this.props.keyType} /> */}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
width: 0 !important
|
||||
}
|
||||
|
||||
#reduceKnockGold {
|
||||
#redPacketsViews {
|
||||
position: fixed !important;
|
||||
top: 130px !important;
|
||||
right: 90px !important;
|
||||
|
|
@ -187,17 +187,44 @@
|
|||
padding-bottom: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#addKnockGold {
|
||||
#redPackets {
|
||||
& {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#wangeditorDom {
|
||||
max-width: 800px;
|
||||
min-width: 520px;
|
||||
}
|
||||
|
||||
.w-e-text-container {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.countBox_par {
|
||||
display: inline-block;
|
||||
|
||||
.countBox {
|
||||
max-width: 800px;
|
||||
border: 1px solid #c9d8db;
|
||||
border-top: 0;
|
||||
min-width: 520px;
|
||||
text-align: end;
|
||||
color: #999;
|
||||
z-index: 10001;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.form-Item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
|
@ -380,18 +407,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.countBox_par {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.countBox {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
bottom: 5%;
|
||||
z-index: 999999;
|
||||
right: 3%;
|
||||
}
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@ export default ({ data, keyType }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div id='reduceKnockGold' className='mobile'>
|
||||
<div id='redPacketsViews' className='mobile'>
|
||||
<div className='couponShow'>
|
||||
<div className='coupon-left'>
|
||||
<p className='coupon_money'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue