🚸 usability: 优化立减金、红包组件样式

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'}
               />
               <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>
     );

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;
 	}
@@ -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%;
-	}
-}

src/components/knockGold/wangEditor.jsx

@@ -1,30 +1,30 @@
-import React from "react";
+import React from 'react';
-import Editor from "wangeditor";
+import Editor from 'wangeditor';
-import "./index.less";
+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",
+      'bold',
-      "foreColor",
+      'foreColor',
-      "italic",
+      'italic',
-      "indent",
+      'indent',
-      "link",
+      'link',
-      "justify"
+      '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>
     );

src/components/redPackets/index.jsx

@@ -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>
     );

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%;
-	}
 }

src/components/redPackets/mobileComponent.jsx

@@ -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'>