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

模板中心滚动回到顶部效果

This commit is contained in:
red-deng-deng 2022-01-21 15:38:37 +08:00
parent 6b22732286
commit 24b82c46bd
2 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/exchangepage/template/main.js
View File

@ -36,6 +36,7 @@ export default class mytemplate extends React.Component{
preview_visible:false, preview_visible:false,
topbar:"", topbar:"",
top:"", top:"",
toTopshow:false,
center:"", center:"",
bottom:"" bottom:""
} }
@ -220,7 +221,12 @@ export default class mytemplate extends React.Component{
onClose(){ onClose(){
this.setState({preview_visible:false}) this.setState({preview_visible:false})
} }
mouseupFn(){
this.setState({toTopshow:true});
}
mouseoverFn(){
this.setState({toTopshow:false});
}
render(){ render(){
return( return(
@ -334,19 +340,11 @@ export default class mytemplate extends React.Component{
) )
}) })
} }
</div> </div>
<img className="toTopBtn" onClick={this.toTop.bind(this)} src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/totopBtn.png" alt=""/> <div ref="toTop" className="toTop-canvas" onMouseEnter={this.mouseupFn.bind(this)} onMouseLeave={this.mouseoverFn.bind(this)}>
<img className="toTopBtn" onClick={this.toTop.bind(this)} src={this.state.toTopshow?'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/totopbtn.svg':'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/willtotop.svg'} alt=""/>
</div>
<div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>到底部了哟,没有了哦</div> <div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>到底部了哟,没有了哦</div>
</div> </div>
</div> </div>

21
src/pages/exchangepage/template/main.less
View File

@ -2548,13 +2548,24 @@ div.previewclose {
background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff)); background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff));
z-index: 1; z-index: 1;
} }
.toTopBtn{ .toTop-canvas{
width: 60px;
height: 60px;
border-radius: 60px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 2px 3px 3px #eee;
position: fixed; position: fixed;
bottom: 0;
width: 90px;
right: 2vh; right: 2vh;
bottom:2vh;
cursor: pointer; cursor: pointer;
} }
.toTopBtn:hover{ .toTopBtn{
transform: scale(1.2); width: 40px;
fill-opacity: 0.2;
}
.toTop-canvas:hover{
transform: scale(1.1);
} }