From 2b3d681027239e2685c5d600e02cff674f85562b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com> Date: Wed, 7 Sep 2022 15:50:13 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=88=A0=E9=99=A4?= =?UTF-8?q?=EF=BC=9A=E8=AE=A1=E7=AE=97div=E6=9C=80=E9=A1=B6=E8=BE=B9?= =?UTF-8?q?=E8=B7=9D=E7=A6=BB=E6=B5=8F=E8=A7=88=E5=99=A8=E7=9A=84=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E6=8E=A7=E5=88=B6=E5=88=A0=E9=99=A4=E6=A1=86?= =?UTF-8?q?=E5=AE=9A=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/comm.css | 6 ++- .../edittemplate/goodstemplate.js | 29 ++++++++++--- .../edittemplate/goodstemplate.less | 43 ++++++++++++++++--- src/pages/exchangepage/edittemplate/main.less | 9 ++-- 4 files changed, 68 insertions(+), 19 deletions(-) diff --git a/src/assets/comm.css b/src/assets/comm.css index d1e42580..c40edada 100644 --- a/src/assets/comm.css +++ b/src/assets/comm.css @@ -197,4 +197,8 @@ input { .big { font-size: 16px; -} \ No newline at end of file +} +.del-color{ + color: #f00; + cursor: pointer; +} diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index 756c564f..f4948fcd 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.js +++ b/src/pages/exchangepage/edittemplate/goodstemplate.js @@ -7,26 +7,41 @@ import BottomBarView from './couponConfig/bottomBar' //底部栏 export default class edittemplate extends React.Component { constructor(props) { super(props) + this.state={ + clientY:0, + selectDom:'searchBar' + } } opendescFn() { this.props.opendesc(true) } + customComponent(e,name){ + //getBoundingClientRect().top ;获取div最顶边距离浏览器的位置 + let b=this.refs[name]; + let offset_top=this.refs[name].getBoundingClientRect().top; + console.log(22,offset_top); + this.setState({clientY:(offset_top-125),selectDom:name}); + if(name=='bottomBar'){ + this.setState({clientY:600,selectDom:name}); + } + } render() { let goodsConfig=this.props.goodsdata; return (
{ - goodsConfig.search?:null + goodsConfig.search? +
this.customComponent(e,'searchBar')} className={this.state.selectDom=='searchBar'?'selectBorder':''} ref="searchBar">
:null } { !goodsConfig.top_image ? : } { - goodsConfig.picture? :null + goodsConfig.picture?
this.customComponent(e,'picBar')} ref="picBar" className={this.state.selectDom=='picBar'?'selectBorder':''}>
:null } { - goodsConfig.title?
{goodsConfig.title.text}
:null + goodsConfig.title?
this.customComponent(e,'title')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}>
{goodsConfig.title.text}
:null } { goodsConfig.list == 2 ? : goodsConfig.list == 3 ? : @@ -41,13 +56,13 @@ export default class edittemplate extends React.Component { goodsConfig.describe.type == 2 ? : null } { - goodsConfig.bottomBar? :null + goodsConfig.bottomBar?
this.customComponent(e,'bottomBar')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}>
:null } -
- 搜索 +
+ | - + 删除
) diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index d83e8f63..f3f4a117 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/src/pages/exchangepage/edittemplate/goodstemplate.less @@ -37,7 +37,9 @@ position: relative; margin-top: -50px; } - + >.goodsPic{ + margin-top: 8px; + } >.goodsPicMatrax { height: auto; } @@ -86,16 +88,16 @@ .delete-component { display: flex; position: absolute; - top: 193.2px; - right: -5px; + top: 0; + right: -10px; -ms-flex-align: center; align-items: center; padding: 6px 8px; border-radius: 2px; background: #fff; font-size: 14px; - -webkit-transform: translate3d(100%, 64px, 0); - transform: translate3d(100%, 64px, 0); + -webkit-transform: translateX(73px); + transform: translateX(70px); &:before{ position: absolute; left: 0; @@ -109,11 +111,39 @@ } .split{ padding: 0 5px; + color: #b4b8b4; } } + .fixbottom{ + bottom: 0!important; + } } .goodstemplate { + +.selectBorder { + z-index: 2; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 2px solid #1985ff; + width: 100%; + height: auto; + background: rgba(25,133,255,.2); + content: ""; +} +.selectBottomBorder { + position: absolute; + left: 0; + bottom: 0; + z-index: 2; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 2px solid #1985ff; + width: 100%; + height: 54px; + background: rgba(25,133,255,.2); + content: ""; +} .bottomactiveTip { width: 350px; margin: 12.5px; @@ -125,8 +155,7 @@ .searchBar { width: 80%; - margin-left: 10%; - margin-top: 2%; + margin: 2% 10%; height: 40px; line-height: 40px; padding-left: 15px; diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index ee37bd6c..4ee0a026 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/src/pages/exchangepage/edittemplate/main.less @@ -14,7 +14,7 @@ right: 0; } .xj-center-small{ - margin: 0 448px 0 490px; + margin: 0 430px 0 470px; } .perimg { position: absolute; @@ -155,7 +155,7 @@ overflow-y: auto; position: absolute; right: 0; - width: 450px; + width: 440px; .zent-image-upload-item-delete[data-zv="9.11.0"] { display: block; top: -15px; @@ -718,8 +718,9 @@ width: 30px !important; height: 13px !important; position: absolute; - top: 32px; - right: 10px; + top: 20px; + right: 7px; + border-radius: 7px; } }