HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Apple 2022-10-20 16:46:21 +08:00
parent c9b2ae8fe0
commit f3b20eaeae
3 changed files with 52 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/exchangepage/edittemplate/main.js
View File

@ -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={

40
src/pages/exchangepage/edittemplate/main.less
View File

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

6
src/pages/exchangepage/template/preview.js
View File

@ -94,7 +94,11 @@ export default class preview extends React.Component {
ref="middleCenter"
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" />
<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={