feat(编辑器):落地页增加输入框实时显示文字颜色交互

src/pages/exchangepage/edittemplate/main.js

@@ -597,7 +597,6 @@ export default class edittemplate extends React.Component {
   canvasImgFn() {
     let self = this
     let path = null
-    let canvasEle = this.canvasImg //获取元素
     let scrolDom = this.canvascrol
     scrolDom.scrollTop = 0
     let dom = document.querySelector('.xj-viewer-mask')
@@ -758,6 +757,10 @@ export default class edittemplate extends React.Component {
                 />
                 <div className='hascode'>
                   <img src={this.state.showType == 8 ? this.state.model.white_image ? this.state.model.white_image : 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png' : this.state.model.middle_image ? this.state.model.middle_image : 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'} id='top' />
+                  <div className='dflexajc thumbipt'>
+                    <div  style={{color:this.state.model.font_color}}>请输入{[1, 8].includes(this.state.showType)?'手机号':'兑换码'}</div>
+                    <div  className='ipt-code'  style={{color:this.state.model.font_color}}>请输入验证码</div>
+                  </div>
                   {[1, 8].includes(this.state.showType) ? (
                     <img
                       src={
@@ -874,6 +877,11 @@ export default class edittemplate extends React.Component {
                         id='center-img'
                         src={this.state.showType == 8 ? this.state.model.white_image ? this.state.model.white_image : 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png' : this.state.model.middle_image ? this.state.model.middle_image : 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'}
                       />
+                      <div className='dflexajc ipt-user'>
+                        <div  style={{color:this.state.model.font_color}}>请输入{[1, 8].includes(this.state.showType)?'手机号':'兑换码'}</div>
+                        <div  className='ipt-code'  style={{color:this.state.model.font_color}}>请输入验证码</div>
+                      </div>
+                     
                       {[1, 8].includes(this.state.showType) ? (
                         <img
                           src={

src/pages/exchangepage/edittemplate/main.less

@@ -343,7 +343,25 @@
 	font-size: 14px;
 	padding: 16px 0 17px 24px;
 }
+.ipt-user{
+	width: 100px !important;
+	position: absolute;
+	font-size: 14px;
+	left: 110px;
+	top: 40px;
+	border-radius: 22px;
+	div{
+		width: 100%;
+		height: 25px;
+		background: transparent;
+		outline: none;
+		border: 0;
+		&.ipt-code{
+			margin-top: 30px;
+		}
+	}
 	
+}
 .xj-viewer-mask {
 	max-height: 600px;
 	overflow-y: auto;
@@ -367,6 +385,7 @@
 		position: relative;
 		overflow: hidden;
 		vertical-align: middle;
+		
 	}
 
 	.bottom {
@@ -599,7 +618,24 @@
 		position: relative;
 		top: -5px;
 	}
-
+    .thumbipt{
+		width: 100px !important;
+		position: absolute;
+		left: 10px;
+		top: -10px;
+		border-radius: 22px;
+		transform: scale(0.45);
+		div{
+			display: block;
+			height: 25px;
+			background: transparent;
+			outline: none;
+			border: 0;
+			&.ipt-code{
+				margin-top: 22px;
+			}
+		}
+	}
 	.thumbcode {
 		width: 30px !important;
 		height: 13px !important;

src/pages/exchangepage/template/preview.js

@@ -95,6 +95,10 @@ export default class preview extends React.Component {
                 style={{ fontSize: this.props.fontSize }}
               >
                 <img src={this.props.pageType== 8 ? propsData.land.white_image ? propsData.land.white_image : this.state.middle_image :propsData.land.middle_image ? propsData.land.middle_image : this.state.middle_image} id="preview-center-img" />
+                <div className='dflexajc ipt-user'>
+                  <div  style={{color:propsData.land.font_color}}>请输入{[1, 8].includes(this.props.pageType) ?'手机号':'兑换码'}</div>
+                  <div  className='ipt-code'  style={{color:propsData.land.font_color}}>请输入验证码</div>
+                </div>
                 {[1, 8].includes(this.props.pageType) ? (
                     <img
                       src={