Commit d67bab73 authored by shajiaiming's avatar shajiaiming

fix

parent e69a65ed
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<title></title> <title></title>
<meta name="description" content="" /> <meta name="description" content=""/>
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no" content="width=device-width, initial-scale=1, user-scalable=no"
/> />
<base href="/" /> <base href="/"/>
</head> </head>
<style> <style>
html, html,
...@@ -40,33 +39,41 @@ ...@@ -40,33 +39,41 @@
top: -500%; top: -500%;
z-index: -1000; z-index: -1000;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
ul { ul {
list-style: none; list-style: none;
} }
a { a {
text-decoration: none !important; text-decoration: none !important;
} }
#root, #root,
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
button { button {
outline: none; outline: none;
border: none; border: none;
} }
input { input {
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
} }
#svg { #svg {
display: none; display: none;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -75,6 +82,7 @@ ...@@ -75,6 +82,7 @@
</style> </style>
<script> <script>
var documentElement = document.documentElement; var documentElement = document.documentElement;
function callback() { function callback() {
var clientWidth = documentElement.clientWidth; var clientWidth = documentElement.clientWidth;
// 屏幕宽度大于1366,不在放大 // 屏幕宽度大于1366,不在放大
...@@ -91,10 +99,11 @@ ...@@ -91,10 +99,11 @@
documentElement.style.fontSize = clientWidth / 3.75 + "px"; //1rem = 100px documentElement.style.fontSize = clientWidth / 3.75 + "px"; //1rem = 100px
} }
} }
document.addEventListener("DOMContentLoaded", callback); document.addEventListener("DOMContentLoaded", callback);
window.addEventListener( window.addEventListener(
"orientationchange" in window ? "orientationchange" : "resize", "orientationchange" in window ? "orientationchange" : "resize",
function() { function () {
setTimeout(callback, 200); setTimeout(callback, 200);
} }
); );
...@@ -159,6 +168,7 @@ ...@@ -159,6 +168,7 @@
this.removeListener = this.removeListener.bind(this); this.removeListener = this.removeListener.bind(this);
this.move = this.move.bind(this); this.move = this.move.bind(this);
} }
checkDevice() {//判断设备系统 checkDevice() {//判断设备系统
return /ipad|iphone/i.test(window.navigator.userAgent) return /ipad|iphone/i.test(window.navigator.userAgent)
? "ios" ? "ios"
...@@ -171,6 +181,7 @@ ...@@ -171,6 +181,7 @@
/AthenaAndroid/i.test(navigator.userAgent) /AthenaAndroid/i.test(navigator.userAgent)
); );
} }
handleOpenApp(needCheckOrigin = false, redirectUrl) {//处理打开app函数 handleOpenApp(needCheckOrigin = false, redirectUrl) {//处理打开app函数
debugger debugger
const iosAppUrl = redirectUrl ? redirectUrl : "ydathena://"; const iosAppUrl = redirectUrl ? redirectUrl : "ydathena://";
...@@ -178,12 +189,13 @@ ...@@ -178,12 +189,13 @@
let iosDownloadUrl = "https://itunes.apple.com/cn/app/id1390443078?mt=8"; let iosDownloadUrl = "https://itunes.apple.com/cn/app/id1390443078?mt=8";
let androidDownloadUrl = let androidDownloadUrl =
"https://static.du.youdao.com/download/latest_youdaoledu_official.apk"; "https://static.du.youdao.com/download/latest_youdaoledu_official.apk";
function checkOpen(cb) { function checkOpen(cb) {
let _clickTime = +new Date(); let _clickTime = +new Date();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let _count = 0; let _count = 0;
let intHandle; let intHandle;
intHandle = setInterval(function() { intHandle = setInterval(function () {
_count++; _count++;
let elsTime = +new Date() - _clickTime; let elsTime = +new Date() - _clickTime;
if (_count >= 50 || elsTime > 1000) { if (_count >= 50 || elsTime > 1000) {
...@@ -197,6 +209,7 @@ ...@@ -197,6 +209,7 @@
}, 20); }, 20);
}); });
} }
//try open app //try open app
if (!this.checkFromApp()) { if (!this.checkFromApp()) {
//不在app内 //不在app内
...@@ -227,6 +240,7 @@ ...@@ -227,6 +240,7 @@
let url = `ydathena://book?libraryId=${bookId}`; let url = `ydathena://book?libraryId=${bookId}`;
this.handleOpenApp(false, url); this.handleOpenApp(false, url);
} }
singleBook(bookItem) {//书本组件 singleBook(bookItem) {//书本组件
return ( return (
<div class="recomond" key={bookItem.bookId}> <div class="recomond" key={bookItem.bookId}>
...@@ -237,9 +251,11 @@ ...@@ -237,9 +251,11 @@
<div class="top_des"> <div class="top_des">
<div class="top_title">{bookItem.title}</div> <div class="top_title">{bookItem.title}</div>
<div class="reasonDes">{bookItem.reasonDes}</div> <div class="reasonDes">{bookItem.reasonDes}</div>
{bookItem.canRead&&( {bookItem.canRead && (
<div class="button" onClick={()=>this.handleRead(bookItem.bookId)}> <div class="button" onClick={() => this.handleRead(bookItem.bookId)}>
<img src="https://ydschool-online.nosdn.127.net/78ba2d00-c960-4740-8427-6e2f1cf3b2cf.png" alt=""/> <img
src="https://ydschool-online.nosdn.127.net/78ba2d00-c960-4740-8427-6e2f1cf3b2cf.png"
alt=""/>
<div class="text">APP内可读</div> <div class="text">APP内可读</div>
</div> </div>
)} )}
...@@ -250,10 +266,12 @@ ...@@ -250,10 +266,12 @@
</div> </div>
) )
} }
componentDidMount() { componentDidMount() {
document.title = "家长指导手册"; document.title = "家长指导手册";
this.addListener(); this.addListener();
} }
move() { move() {
let cont0 = this.refs.cont0; let cont0 = this.refs.cont0;
let cont1 = this.refs.cont1; let cont1 = this.refs.cont1;
...@@ -264,9 +282,9 @@ ...@@ -264,9 +282,9 @@
const tabH = 0.44 * documentElement.style.fontSize.split('px')[0]; const tabH = 0.44 * documentElement.style.fontSize.split('px')[0];
//console.log(this.refs.guides.getBoundingClientRect().top); //console.log(this.refs.guides.getBoundingClientRect().top);
//console.log(cont1.getBoundingClientRect().top); //console.log(cont1.getBoundingClientRect().top);
if(this.refs.guides.getBoundingClientRect().top < -20){ if (this.refs.guides.getBoundingClientRect().top < -20) {
this.refs.topTab.style.display = "block"; this.refs.topTab.style.display = "block";
}else{ } else {
this.refs.topTab.style.display = "none"; this.refs.topTab.style.display = "none";
} }
...@@ -308,45 +326,48 @@ ...@@ -308,45 +326,48 @@
}); });
} }
} }
addListener() { addListener() {
document.addEventListener("scroll", this.move); document.addEventListener("scroll", this.move);
} }
removeListener() { removeListener() {
document.removeEventListener("scroll", this.move); document.removeEventListener("scroll", this.move);
} }
itemNav(index) {//菜单切换 itemNav(index) {//菜单切换
this.removeListener(); this.removeListener();
let that = this; let that = this;
this.setState({ this.setState({
current: index current: index
},()=>{ }, () => {
if(index === 0){ if (index === 0) {
this.refs.cont0.scrollIntoView({ this.refs.cont0.scrollIntoView({
block: 'start', block: 'start',
behavior: 'smooth' behavior: 'smooth'
}) })
} }
if(index === 1){ if (index === 1) {
this.refs.tab.scrollLeft = 0; this.refs.tab.scrollLeft = 0;
this.refs.cont1.scrollIntoView({ this.refs.cont1.scrollIntoView({
block: 'start', block: 'start',
behavior: 'smooth' behavior: 'smooth'
}) })
} }
if(index === 2){ if (index === 2) {
this.refs.cont2.scrollIntoView({ this.refs.cont2.scrollIntoView({
block: 'start', block: 'start',
behavior: 'smooth' behavior: 'smooth'
}) })
} }
if(index === 3){ if (index === 3) {
this.refs.cont3.scrollIntoView({ this.refs.cont3.scrollIntoView({
block: 'start', block: 'start',
behavior: 'smooth' behavior: 'smooth'
}) })
} }
if(index === 4){ if (index === 4) {
this.refs.tab.scrollLeft = 100; this.refs.tab.scrollLeft = 100;
this.refs.cont4.scrollIntoView({ this.refs.cont4.scrollIntoView({
block: 'start', block: 'start',
...@@ -354,7 +375,7 @@ ...@@ -354,7 +375,7 @@
}) })
} }
if(index === 5){ if (index === 5) {
this.refs.cont5.scrollIntoView({ this.refs.cont5.scrollIntoView({
block: 'start', block: 'start',
behavior: 'smooth' behavior: 'smooth'
...@@ -362,23 +383,24 @@ ...@@ -362,23 +383,24 @@
} }
//滚动完成后 重新监听 //滚动完成后 重新监听
let temp = 1; let temp = 1;
setTimeout(function judge(){ setTimeout(function judge() {
let temp1 = document.getElementsByTagName("html")[0].scrollTop; let temp1 = document.getElementsByTagName("html")[0].scrollTop;
console.log('temp '+temp); console.log('temp ' + temp);
console.log('temp1 '+temp1); console.log('temp1 ' + temp1);
if (temp != temp1) { //两次滚动高度不等,则认为还没有滚动完毕 if (temp != temp1) { //两次滚动高度不等,则认为还没有滚动完毕
setTimeout(judge,100); setTimeout(judge, 100);
temp = temp1; //滚动高度赋值 temp = temp1; //滚动高度赋值
} else{ } else {
that.addListener(); that.addListener();
temp = null; //放弃引用 temp = null; //放弃引用
} }
},100); }, 100);
}); });
} }
render() {//主渲染函数 render() {//主渲染函数
const { bookListItems, tabs, current } = this.state; const {bookListItems, tabs, current} = this.state;
return ( return (
<div class="guide" ref="guides"> <div class="guide" ref="guides">
<div class="topTab" ref="topTab"> <div class="topTab" ref="topTab">
...@@ -411,7 +433,8 @@ ...@@ -411,7 +433,8 @@
<div class="intro"> <div class="intro">
<div class="title">书籍介绍</div> <div class="title">书籍介绍</div>
<div class="intro_content"> <div class="intro_content">
<img src="https://ydschool-online.nosdn.127.net/236f374d-fdf8-443c-94da-777749413a9e.png" alt=""/> <img src="https://ydschool-online.nosdn.127.net/236f374d-fdf8-443c-94da-777749413a9e.png"
alt=""/>
<div class="content_detail"> <div class="content_detail">
萨拉不小心把妈妈的珍珠项链弄坏了,她怕妈妈责怪她,于是选择了撒谎。然而她每撒一次谎,就会有一个小幽灵从她的嘴里跳出来。最后萨拉大哭起来,把真相告诉了妈妈。 萨拉不小心把妈妈的珍珠项链弄坏了,她怕妈妈责怪她,于是选择了撒谎。然而她每撒一次谎,就会有一个小幽灵从她的嘴里跳出来。最后萨拉大哭起来,把真相告诉了妈妈。
</div> </div>
...@@ -420,24 +443,33 @@ ...@@ -420,24 +443,33 @@
<div class="title_special">书籍特色</div> <div class="title_special">书籍特色</div>
<div class="special_content"> <div class="special_content">
<div class="content_title"> <div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/> <img
src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png"
alt=""/>
<div class="title_detail">学会勇敢面对错误</div> <div class="title_detail">学会勇敢面对错误</div>
</div> </div>
<div class="content_des">在生活中,我们有时也会像萨拉一样做错事,有时也会撒谎。但这个故事能让孩子了解到,相比逃避责任,勇敢面对错误会让内心更加坦然。</div> <div class="content_des">在生活中,我们有时也会像萨拉一样做错事,有时也会撒谎。但这个故事能让孩子了解到,相比逃避责任,勇敢面对错误会让内心更加坦然。
</div>
</div> </div>
<div class="special_content"> <div class="special_content">
<div class="content_title"> <div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/> <img
src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png"
alt=""/>
<div class="title_detail">引导孩子关注情感变化,培养情商</div> <div class="title_detail">引导孩子关注情感变化,培养情商</div>
</div> </div>
<div class="content_des">这是一个很容易与孩子产生共鸣的故事。在阅读中,最好能引导孩子去感受主人公的情绪,并探究情绪产生变化的原因。</div> <div class="content_des">这是一个很容易与孩子产生共鸣的故事。在阅读中,最好能引导孩子去感受主人公的情绪,并探究情绪产生变化的原因。</div>
</div> </div>
<div class="special_content"> <div class="special_content">
<div class="content_title"> <div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/> <img
src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png"
alt=""/>
<div class="title_detail">给家长教育启发</div> <div class="title_detail">给家长教育启发</div>
</div> </div>
<div class="content_des">其实萨拉妈妈内心知道是萨拉弄坏了项链,但却没有粗暴地揭露,而是耐心等待萨拉自己坦白真相。不要过分苛责孩子的撒谎行为,帮助孩子一起改正,孩子才会有信任感肯讲出真话。</div> <div
class="content_des">其实萨拉妈妈内心知道是萨拉弄坏了项链,但却没有粗暴地揭露,而是耐心等待萨拉自己坦白真相。不要过分苛责孩子的撒谎行为,帮助孩子一起改正,孩子才会有信任感肯讲出真话。
</div>
</div> </div>
</div> </div>
{/* 教学目标 */} {/* 教学目标 */}
...@@ -468,7 +500,9 @@ ...@@ -468,7 +500,9 @@
</div> </div>
<div class="inter"> <div class="inter">
<div class="inter_img"> <div class="inter_img">
<img src="https://ydschool-online.nosdn.127.net/34d3dafa-7395-4d13-925b-4c9c0d37a10d.png" alt=""/> <img
src="https://ydschool-online.nosdn.127.net/34d3dafa-7395-4d13-925b-4c9c0d37a10d.png"
alt=""/>
</div> </div>
</div> </div>
</div> </div>
...@@ -511,7 +545,9 @@ ...@@ -511,7 +545,9 @@
<div class="num">5</div> <div class="num">5</div>
<div class="dis_content"> <div class="dis_content">
<div class="dis_title">想一想,你以前还听过什么关于撒谎的故事?你觉得撒谎好不好?</div> <div class="dis_title">想一想,你以前还听过什么关于撒谎的故事?你觉得撒谎好不好?</div>
<div class="dis_detail">参考:《狼来了》、《匹诺曹》、《皇帝的新装》,引导孩子知道撒谎的坏处:得不到别人的信任,心里会不安,会说越来越多的谎言。</div> <div
class="dis_detail">参考:《狼来了》、《匹诺曹》、《皇帝的新装》,引导孩子知道撒谎的坏处:得不到别人的信任,心里会不安,会说越来越多的谎言。
</div>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -523,7 +559,9 @@ ...@@ -523,7 +559,9 @@
<div class="title">亲子互动</div> <div class="title">亲子互动</div>
<div class="special_content"> <div class="special_content">
<div class="content_title"> <div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/> <img
src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png"
alt=""/>
<div class="title_detail">《匹诺曹》儿歌</div> <div class="title_detail">《匹诺曹》儿歌</div>
</div> </div>
<div class="content_des"> <div class="content_des">
...@@ -534,7 +572,9 @@ ...@@ -534,7 +572,9 @@
</div> </div>
<div class="special_content"> <div class="special_content">
<div class="content_title"> <div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/> <img
src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png"
alt=""/>
<div class="title_detail">折叠画:《匹诺曹》</div> <div class="title_detail">折叠画:《匹诺曹》</div>
</div> </div>
<div class="content_des"> <div class="content_des">
...@@ -547,7 +587,9 @@ ...@@ -547,7 +587,9 @@
<div class="inter"> <div class="inter">
<div class="inter_text">借这个小手工可以告诉孩子要做一个诚实的好孩子,不能说谎,否则小鼻子会变长呢。</div> <div class="inter_text">借这个小手工可以告诉孩子要做一个诚实的好孩子,不能说谎,否则小鼻子会变长呢。</div>
<div class="inter_img"> <div class="inter_img">
<img src="https://ydschool-online.nosdn.127.net/34d3dafa-7395-4d13-925b-4c9c0d37a10d.png" alt=""/> <img
src="https://ydschool-online.nosdn.127.net/34d3dafa-7395-4d13-925b-4c9c0d37a10d.png"
alt=""/>
</div> </div>
</div> </div>
</div> </div>
...@@ -921,8 +963,9 @@ ...@@ -921,8 +963,9 @@
); );
} }
} }
let domContainer = document.querySelector('#root'); let domContainer = document.querySelector('#root');
ReactDOM.render(<Guide />, domContainer); ReactDOM.render(<Guide/>, domContainer);
</script> </script>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment