Merge branch 'master' of https://bdgit.educoder.net/Hjqreturn/educoder
commit
4bf182e705
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
@ -1,128 +1,128 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { getImageUrl} from 'educoder';
|
import { getImageUrl} from 'educoder';
|
||||||
import './TPMIndex.css';
|
import './TPMIndex.css';
|
||||||
|
|
||||||
const $ = window.$;
|
const $ = window.$;
|
||||||
|
|
||||||
$(window).resize(function(){
|
$(window).resize(function(){
|
||||||
rightSlider();
|
rightSlider();
|
||||||
});
|
});
|
||||||
|
|
||||||
$(window).scroll(function(){
|
$(window).scroll(function(){
|
||||||
if($(".gotop").length>0){
|
if($(".gotop").length>0){
|
||||||
if($(document).scrollTop()>0){
|
if($(document).scrollTop()>0){
|
||||||
$(".-task-sidebar .gotop").show();
|
$(".-task-sidebar .gotop").show();
|
||||||
$(".gotop").click(function(){
|
$(".gotop").click(function(){
|
||||||
$("html,body").scrollTop(0);
|
$("html,body").scrollTop(0);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if($(document).scrollTop()==0){
|
if($(document).scrollTop()==0){
|
||||||
$(".-task-sidebar .gotop").hide();
|
$(".-task-sidebar .gotop").hide();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function rightSlider(){
|
function rightSlider(){
|
||||||
var poi=parseInt((parseInt($(window).width())- 1200 )/2)-60;
|
var poi=parseInt((parseInt($(window).width())- 1200 )/2)-60;
|
||||||
// console.log(parseInt($(window).width())+" "+poi);
|
// console.log(parseInt($(window).width())+" "+poi);
|
||||||
if(poi>0){
|
if(poi>0){
|
||||||
$(".-task-sidebar").css("right",poi);
|
$(".-task-sidebar").css("right",poi);
|
||||||
}else{
|
}else{
|
||||||
$(".-task-sidebar").css("right","0px");
|
$(".-task-sidebar").css("right","0px");
|
||||||
}
|
}
|
||||||
$(".-task-sidebar").show();
|
$(".-task-sidebar").show();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function _initSider() {
|
function _initSider() {
|
||||||
var $descSide = $("<div class='-task-desc'></div>").appendTo("body");
|
var $descSide = $("<div class='-task-desc'></div>").appendTo("body");
|
||||||
$(".-task-sidebar>div").hover(function(){
|
$(".-task-sidebar>div").hover(function(){
|
||||||
//移入显示二维码
|
//移入显示二维码
|
||||||
if($(this).hasClass("scan")){
|
if($(this).hasClass("scan")){
|
||||||
$(".scan_ewm").show().css({right:"75px",opacity:0}).stop().animate({
|
$(".scan_ewm").show().css({right:"75px",opacity:0}).stop().animate({
|
||||||
right:"45px",opacity:1
|
right:"45px",opacity:1
|
||||||
})
|
})
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var $tool = $(this).attr("tooltips");
|
var $tool = $(this).attr("tooltips");
|
||||||
$descSide.html($tool+"<div><img src='https://www.educoder.net/images/edu_user/jt.png'></div>");
|
$descSide.html($tool+"<div><img src='https://www.educoder.net/images/edu_user/jt.png'></div>");
|
||||||
$descSide.data('_dom', this)
|
$descSide.data('_dom', this)
|
||||||
$descSide.show().css({
|
$descSide.show().css({
|
||||||
left:$(this).offset().left - $descSide.width()-30,
|
left:$(this).offset().left - $descSide.width()-30,
|
||||||
opacity:0,
|
opacity:0,
|
||||||
top:$(this).offset().top
|
top:$(this).offset().top
|
||||||
}).stop().animate({
|
}).stop().animate({
|
||||||
left:$(this).offset().left - $descSide.width()-5,
|
left:$(this).offset().left - $descSide.width()-5,
|
||||||
opacity:1
|
opacity:1
|
||||||
},400);
|
},400);
|
||||||
},function(){
|
},function(){
|
||||||
if($(this).hasClass("scan")){
|
if($(this).hasClass("scan")){
|
||||||
$(".scan_ewm").stop().animate({right:"75px",opacity:0},200).hide();
|
$(".scan_ewm").stop().animate({right:"75px",opacity:0},200).hide();
|
||||||
}
|
}
|
||||||
$descSide.stop().animate({
|
$descSide.stop().animate({
|
||||||
left:$(this).offset().left - $descSide.width()-30,
|
left:$(this).offset().left - $descSide.width()-30,
|
||||||
opacity:0
|
opacity:0
|
||||||
},200).hide();
|
},200).hide();
|
||||||
});
|
});
|
||||||
rightSlider();
|
rightSlider();
|
||||||
|
|
||||||
$(window).scroll(function() {
|
$(window).scroll(function() {
|
||||||
if ($descSide.height()) {
|
if ($descSide.height()) {
|
||||||
var hoverIcon = $descSide.data('_dom')
|
var hoverIcon = $descSide.data('_dom')
|
||||||
$descSide.css('top', $(hoverIcon).offset().top)
|
$descSide.css('top', $(hoverIcon).offset().top)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
class SiderBar extends Component {
|
class SiderBar extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
_initSider();
|
_initSider();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="-task-sidebar">
|
<div className="-task-sidebar">
|
||||||
<div className="gotop" tooltips="返回顶部">
|
<div className="gotop" tooltips="返回顶部">
|
||||||
<a>
|
<a>
|
||||||
<i className="iconfont icon-shangjiantou color-white"></i>
|
<i className="iconfont icon-shangjiantou color-white"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="feedback" tooltips="意见反馈">
|
<div className="feedback" tooltips="意见反馈">
|
||||||
<a target="_blank" className="color_white" href="https://www.educoder.net/help?index=6">
|
<a target="_blank" className="color_white" href="https://www.educoder.net/help?index=6">
|
||||||
<i className="iconfont icon-yijianfankui color-white font-22"></i>
|
<i className="iconfont icon-yijianfankui color-white font-22"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="scan pr">
|
<div className="scan pr">
|
||||||
<span className="inline"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
|
<span className="inline"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
|
||||||
<p className="scan_ewm" style={{display: 'none', right:' 75px',opacity: '0'}}>
|
<p className="scan_ewm" style={{display: 'none', right:' 75px',opacity: '0'}}>
|
||||||
<p className="pr padding10">
|
<p className="pr padding10">
|
||||||
<img src={getImageUrl("images/edu_user/EWM.jpg")} width="158px" height="158px" />
|
<img src={getImageUrl("images/educoder/EWM.jpg")} width="158px" height="158px" />
|
||||||
<p>微信扫一扫</p>
|
<p>微信扫一扫</p>
|
||||||
<p>关注公众号</p>
|
<p>关注公众号</p>
|
||||||
<span className="trangle_right"></span>
|
<span className="trangle_right"></span>
|
||||||
</p>
|
</p>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="consult" tooltips="在线咨询">
|
<div className="consult" tooltips="在线咨询">
|
||||||
<a target="_blank" className="color_white" href="//shang.qq.com/wpa/qunwpa?idkey=2f2043d88c1bd61d182b98bf1e061c6185e23055bec832c07d8148fe11c5a6cd">
|
<a target="_blank" className="color_white" href="//shang.qq.com/wpa/qunwpa?idkey=2f2043d88c1bd61d182b98bf1e061c6185e23055bec832c07d8148fe11c5a6cd">
|
||||||
<i className="iconfont icon-qqzaixianzixun color-white font-22"></i>
|
<i className="iconfont icon-qqzaixianzixun color-white font-22"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SiderBar;
|
export default SiderBar;
|
||||||
|
|||||||
Loading…
Reference in new issue