Commit d67bab73 authored by shajiaiming's avatar shajiaiming

fix

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