From cf06f7a59359ae0b01b6badf8aefb0d47c237798 Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Thu, 25 May 2023 14:52:51 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20usability:=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E7=AB=8B=E5=87=8F=E9=87=91=E3=80=81=E7=BA=A2=E5=8C=85=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/knockGold/index.jsx | 37 +++++++-------- src/components/knockGold/index.less | 39 ++++++++++------ src/components/knockGold/wangEditor.jsx | 28 ++++++------ src/components/redPackets/index.jsx | 38 ++++++++-------- src/components/redPackets/index.less | 45 ++++++++++++------- src/components/redPackets/mobileComponent.jsx | 2 +- 6 files changed, 108 insertions(+), 81 deletions(-) diff --git a/src/components/knockGold/index.jsx b/src/components/knockGold/index.jsx index fe494ffa..369fc0d6 100644 --- a/src/components/knockGold/index.jsx +++ b/src/components/knockGold/index.jsx @@ -1042,7 +1042,7 @@ export default class addKnockGold extends Component { height={'36px'} unit='个' countShow={false} - width={'520px'} + width={'304px'} alignment={'left'} /> - {/*
样式设置
*/} - -
- - { - this.onHandleChange(text, 'instruction'); - }} - width='520px' - text={this.state.model.instruction} - limitLength={500} - key={this.state.model.channel} - /> - -
- {/*
预警规则
*/}
@@ -1525,6 +1508,24 @@ export default class addKnockGold extends Component { /> + {/*
样式设置
*/} + + + + { + this.onHandleChange(text, 'instruction'); + }} + // width='520px' + text={this.state.model.instruction} + limitLength={500} + key={this.state.model.channel} + /> + + +
+ ); diff --git a/src/components/knockGold/index.less b/src/components/knockGold/index.less index 3b401827..de24da66 100644 --- a/src/components/knockGold/index.less +++ b/src/components/knockGold/index.less @@ -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; } @@ -412,17 +438,4 @@ #addNew1 { display: none; } -} - -.countBox_par { - position: relative; - display: inline-block; - - .countBox { - position: absolute; - color: #999; - bottom: 5%; - z-index: 999999; - right: 3%; - } } \ No newline at end of file diff --git a/src/components/knockGold/wangEditor.jsx b/src/components/knockGold/wangEditor.jsx index e38f8cb6..82bedc60 100644 --- a/src/components/knockGold/wangEditor.jsx +++ b/src/components/knockGold/wangEditor.jsx @@ -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 {

- {this.state.count + "/" + this.props.limitLength} + {this.state.count + '/' + this.props.limitLength}

); diff --git a/src/components/redPackets/index.jsx b/src/components/redPackets/index.jsx index 2daa9950..111e04f8 100644 --- a/src/components/redPackets/index.jsx +++ b/src/components/redPackets/index.jsx @@ -479,7 +479,7 @@ export default class addKnockGold extends Component { render() { return ( -
+
{/*
基本信息
*/}
@@ -665,7 +665,7 @@ export default class addKnockGold extends Component { height={'36px'} unit='个' countShow={false} - width={'520px'} + width={'306px'} alignment={'left'} />
- {/*
样式设置
*/} - -
- - { - this.onHandleChange(text, 'instruction'); - }} - width='520px' - text={this.state.model.instruction} - limitLength={500} - key={this.state.model.channel} - /> - -
- {/*
预警规则
*/}
@@ -998,6 +981,23 @@ export default class addKnockGold extends Component {
+ {/*
样式设置
*/} + +
+ + { + this.onHandleChange(text, 'instruction'); + }} + text={this.state.model.instruction} + limitLength={500} + key={this.state.model.channel} + /> + +
+ + {/* */}
); diff --git a/src/components/redPackets/index.less b/src/components/redPackets/index.less index 365e7919..0f50eb4b 100644 --- a/src/components/redPackets/index.less +++ b/src/components/redPackets/index.less @@ -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%; - } } \ No newline at end of file diff --git a/src/components/redPackets/mobileComponent.jsx b/src/components/redPackets/mobileComponent.jsx index 5eb1b251..c1105d59 100644 --- a/src/components/redPackets/mobileComponent.jsx +++ b/src/components/redPackets/mobileComponent.jsx @@ -78,7 +78,7 @@ export default ({ data, keyType }) => { } return ( -
+