Commit 47dcdb23 authored by limingzhe's avatar limingzhe

fix: 不刷新

parent 3ebcc061
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<!-- 背景图 --> <!-- 背景图 -->
<div style="width: 100%; height: 100%; position: absolute;"> <div style="width: 100%; height: 100%; position: absolute;">
<img src="../../assets/play/bg.jpg" style="width: 100%; height: 100%; position: absolute; "/> <img src="assets/play/bg.jpg" style="width: 100%; height: 100%; position: absolute; "/>
</div> </div>
<!-- 标题 --> <!-- 标题 -->
...@@ -20,27 +20,27 @@ ...@@ -20,27 +20,27 @@
<!-- 中间句子面板 --> <!-- 中间句子面板 -->
<div style="text-align: center; margin-top: 20vh; position: absolute; text-align: center; " > <div style="text-align: center; margin-top: 20vh; position: absolute; text-align: center; " >
<!-- 背景图 --> <!-- 背景图 -->
<img src="../../assets/play/sentence_bg.png" style="height: 28vh; width: auto;"> <img src="assets/play/sentence_bg.png" style="height: 28vh; width: auto;">
<!-- 小圈 --> <!-- 小圈 -->
<div style="position: relative; top: -33.9vh; "> <div style="position: relative; top: -33.9vh; ">
<img [src]="'../../assets/play/circle_1'+ (countDownNum > 3 ? '' : '_red') +'.png'" style="height: 11.8vh; width: auto; "> <img [src]="'assets/play/circle_1'+ (countDownNum > 3 ? '' : '_red') +'.png'" style="height: 11.8vh; width: auto; ">
<div style="position: relative; height: 11.8vh; top: -11.8vh; display: flex; align-items: center; justify-content: center;"> <div style="position: relative; height: 11.8vh; top: -11.8vh; display: flex; align-items: center; justify-content: center;">
<label style="font-family: Aileron-Black; font-size: 4.3vh;" [style.color]="countDownNum > 3 ? '#3b9d31' : '#ffffff'">{{countDownNum}}</label> <label style="font-family: Aileron-Black; font-size: 4.3vh;" [style.color]="countDownNum > 3 ? '#3b9d31' : '#ffffff'">{{countDownNum}}</label>
</div> </div>
<div *ngIf="countDownNum > 3" style="position: relative; height: 11.8vh; top: -23.6vh; display: flex; align-items: center; justify-content: center;"> <div *ngIf="countDownNum > 3" style="position: relative; height: 11.8vh; top: -23.6vh; display: flex; align-items: center; justify-content: center;">
<img [style.height]="tweenItem?.circleHeight + 'vh'" [style.opacity]="tweenItem?.opacity" src="../../assets/play/circle_2.png" style="width: auto; "> <img [style.height]="tweenItem?.circleHeight + 'vh'" [style.opacity]="tweenItem?.opacity" src="assets/play/circle_2.png" style="width: auto; ">
</div> </div>
</div> </div>
<!-- 喇叭 --> <!-- 喇叭 -->
<div style="position: absolute; top: 0; margin-top: -0.7vh; right: 3%;" (click)="playSentenceAudio()"> <div style="position: absolute; top: 0; margin-top: -0.7vh; right: 3%;" (click)="playSentenceAudio()">
<img src="../../assets/play/sound_bg.png" style="height: 8.1vh; width: auto; "> <img src="assets/play/sound_bg.png" style="height: 8.1vh; width: auto; ">
<div style="position: relative; top: -8.1vh; left: 0.8vh; overflow: hidden; height: 8.1vh; width: 4.9368vh; display: flex; align-items: center;"> <div style="position: relative; top: -8.1vh; left: 0.8vh; overflow: hidden; height: 8.1vh; width: 4.9368vh; display: flex; align-items: center;">
<img [src]="'../../assets/play/sound_icon_'+ curSoundIconIndex +'.png'" style="height: 4.2vh; width: auto;" > <img [src]="'assets/play/sound_icon_'+ curSoundIconIndex +'.png'" style="height: 4.2vh; width: auto;" >
</div> </div>
</div> </div>
<!-- 页码 --> <!-- 页码 -->
<div style="position: absolute; top: 0; margin-top: 19.7vh; right: -0.7%;"> <div style="position: absolute; top: 0; margin-top: 19.7vh; right: -0.7%;">
<img src="../../assets/play/page_num_bg.png" style="height: 7.1vh; width: auto; "> <img src="assets/play/page_num_bg.png" style="height: 7.1vh; width: auto; ">
<div style="position: relative; height: 8.1vh; top: -8.1vh; display: flex; align-items: center; justify-content: center;"> <div style="position: relative; height: 8.1vh; top: -8.1vh; display: flex; align-items: center; justify-content: center;">
<label style="margin-left: -0.5vw; font-family: DroidSansFallback; font-size: 3.8vh; color:#ffffff">{{curPage + ' / ' + totalPage}}</label> <label style="margin-left: -0.5vw; font-family: DroidSansFallback; font-size: 3.8vh; color:#ffffff">{{curPage + ' / ' + totalPage}}</label>
</div> </div>
...@@ -57,13 +57,13 @@ ...@@ -57,13 +57,13 @@
</div> </div>
<!-- 面板阴影 --> <!-- 面板阴影 -->
<div style="width: 100%; position: absolute; top:0; margin-top: 20.8vh; text-align: center;"> <div style="width: 100%; position: absolute; top:0; margin-top: 20.8vh; text-align: center;">
<img src="../../assets/play/sentence_bg_shadow.png" style="width: auto; height: 12.9vh;"/> <img src="assets/play/sentence_bg_shadow.png" style="width: auto; height: 12.9vh;"/>
</div> </div>
<!-- 提交按钮 --> <!-- 提交按钮 -->
<div style="position: absolute; width: 100%; top: 0; margin-top: 40%; z-index: 1;"> <div style="position: absolute; width: 100%; top: 0; margin-top: 40%; z-index: 1;">
<img src="../../assets/play/btn.png" style="height: 9.5vh; width: auto; " > <img src="assets/play/btn.png" style="height: 9.5vh; width: auto; " >
<div style="position: relative; height: 9.5vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;"> <div style="position: relative; height: 9.5vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;">
<label style="margin-left: -0.5vw; font-family: Aileron-Black; font-size: 3.8vh; color:#ffffff">{{'Submit'}}</label> <label style="margin-left: -0.5vw; font-family: Aileron-Black; font-size: 3.8vh; color:#ffffff">{{'Submit'}}</label>
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
</div> </div>
<div style="width: 100%; position: absolute; top:0; margin-top: 49.5vh; text-align: center;"> <div style="width: 100%; position: absolute; top:0; margin-top: 49.5vh; text-align: center;">
<img src="../../assets/play/btn_shadow.png" style="width: auto; height: 12.9vh;"/> <img src="assets/play/btn_shadow.png" style="width: auto; height: 12.9vh;"/>
</div> </div>
</div> </div>
...@@ -85,15 +85,15 @@ ...@@ -85,15 +85,15 @@
<div *ngIf="isShowResult" style="z-index: 5; position: absolute; top:0; width: 100%; height: 100%; background-size: cover; display: flex; align-items: center; flex-direction: column;"> <div *ngIf="isShowResult" style="z-index: 5; position: absolute; top:0; width: 100%; height: 100%; background-size: cover; display: flex; align-items: center; flex-direction: column;">
<!-- 背景图 --> <!-- 背景图 -->
<div style="width: 100%; height: 100%; position: absolute;"> <div style="width: 100%; height: 100%; position: absolute;">
<img src="../../assets/play/bg.jpg" style="width: 100%; height: 100%; position: absolute; "/> <img src="assets/play/bg.jpg" style="width: 100%; height: 100%; position: absolute; "/>
</div> </div>
<!-- 面板 --> <!-- 面板 -->
<div style="width: 100%; height: 68.7vh; position: absolute; top: 0; margin-top: 13vh;; text-align: center;"> <div style="width: 100%; height: 68.7vh; position: absolute; top: 0; margin-top: 13vh;; text-align: center;">
<img src="../../assets/play/result_panel.png" style="width: auto; height: 68.7vh; "/> <img src="assets/play/result_panel.png" style="width: auto; height: 68.7vh; "/>
<!-- 标题 --> <!-- 标题 -->
<div style="position: absolute; margin-top: -71.7vh; width: 100%; text-align: center;"> <div style="position: absolute; margin-top: -71.7vh; width: 100%; text-align: center;">
<div> <div>
<img src="../../assets/play/result_panel_item.png" style="width: auto; height: 10vh; "/> <img src="assets/play/result_panel_item.png" style="width: auto; height: 10vh; "/>
</div> </div>
<div style="position: relative; height: 10vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;"> <div style="position: relative; height: 10vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;">
<label style="font-family: Aileron-Black; font-size: 3.1vh; color:#ffffff">{{'Check'}}</label> <label style="font-family: Aileron-Black; font-size: 3.1vh; color:#ffffff">{{'Check'}}</label>
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
<!-- 纠正信息 --> <!-- 纠正信息 -->
<div *ngIf="!rs.isRight" style="background-color: #3b962e; margin-top:0.5vh; border-radius: 3.55vh; height: 7.1vh; width: 108.9vh; display: flex; align-items: center;"> <div *ngIf="!rs.isRight" style="background-color: #3b962e; margin-top:0.5vh; border-radius: 3.55vh; height: 7.1vh; width: 108.9vh; display: flex; align-items: center;">
<div style="margin-left: 2vh; margin-top:-0.5vh;"> <div style="margin-left: 2vh; margin-top:-0.5vh;">
<img src="../../assets/play/info_icon.png" style="width: auto; height: 3.6vh; "/> <img src="assets/play/info_icon.png" style="width: auto; height: 3.6vh; "/>
</div> </div>
<div style="margin-left: 2vh"> <div style="margin-left: 2vh">
<label style="font-family: Aileron-Black; font-size: 2.6vh; color:#ffe9b1">{{rs.answerRight}}</label> <label style="font-family: Aileron-Black; font-size: 2.6vh; color:#ffe9b1">{{rs.answerRight}}</label>
...@@ -125,13 +125,13 @@ ...@@ -125,13 +125,13 @@
</div> </div>
<!-- 面板阴影 --> <!-- 面板阴影 -->
<div style="width: 100%; position: absolute; top:0; margin-top: 60.8vh; text-align: center;"> <div style="width: 100%; position: absolute; top:0; margin-top: 60.8vh; text-align: center;">
<img src="../../assets/play/result_panel_shadow.png" style="width: auto; height: 12.9vh;"/> <img src="assets/play/result_panel_shadow.png" style="width: auto; height: 12.9vh;"/>
</div> </div>
</div> </div>
<!-- 按钮 --> <!-- 按钮 -->
<div style="position: absolute; top: 0; margin-top: 87vh;"> <div style="position: absolute; top: 0; margin-top: 87vh;">
<div style="z-index: 2; position: relative; "> <div style="z-index: 2; position: relative; ">
<img src="../../assets/play/big_btn.png" style="height: 9.5vh; width: auto; z-index: 12;" > <img src="assets/play/big_btn.png" style="height: 9.5vh; width: auto; z-index: 12;" >
</div> </div>
<div style="z-index: 2; position: relative; height: 9.5vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;"> <div style="z-index: 2; position: relative; height: 9.5vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;">
<label style="margin-left: -0.5vw; font-family: Aileron-Black; font-size: 3.8vh; color:#ffffff">{{'更多练习'}}</label> <label style="margin-left: -0.5vw; font-family: Aileron-Black; font-size: 3.8vh; color:#ffffff">{{'更多练习'}}</label>
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
</div> </div>
<!-- 按钮阴影 --> <!-- 按钮阴影 -->
<div style="z-index: 1; width: 100%; position: absolute; top:0; margin-top: 2.5vh; text-align: center;"> <div style="z-index: 1; width: 100%; position: absolute; top:0; margin-top: 2.5vh; text-align: center;">
<img src="../../assets/play/big_btn_shadow.png" style="width: auto; height: 11.3vh;"/> <img src="assets/play/big_btn_shadow.png" style="width: auto; height: 11.3vh;"/>
</div> </div>
</div> </div>
...@@ -153,6 +153,6 @@ ...@@ -153,6 +153,6 @@
<!-- </div> --> <!-- </div> -->
<!-- <div style="background: url('../../assets/play/bg.jpg'); width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size:contain; z-index: -1;"> <!-- <div style="background: url('/assets/play/bg.jpg'); width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size:contain; z-index: -1;">
</div> --> </div> -->
...@@ -137,7 +137,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -137,7 +137,6 @@ export class PlayComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
...@@ -149,7 +148,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -149,7 +148,7 @@ export class PlayComponent implements OnInit, OnDestroy {
async ngOnInit() { async ngOnInit() {
await loadFonts(); // await loadFonts();
const getData = (<any>window).courseware.getData; const getData = (<any>window).courseware.getData;
...@@ -178,11 +177,21 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -178,11 +177,21 @@ export class PlayComponent implements OnInit, OnDestroy {
this.init() // this.init()
// this.initAudio(); // this.initAudio();
// this.initImg(); // this.initImg();
// this.initListener(); // this.initListener();
this.initData();
this.stopSoundAnim();
// this.playSentenceAudio();
this.update();
this.addServerListener();
window['air'].hideAirClassLoading(this.KEY, this.data);
}, this.KEY); }, this.KEY);
...@@ -473,6 +482,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -473,6 +482,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.loadResources().then(() => { this.loadResources().then(() => {
// this.setfontData(); // this.setfontData();
this.addServerListener(); this.addServerListener();
window['air'].hideAirClassLoading(this.KEY, this.data); window['air'].hideAirClassLoading(this.KEY, this.data);
...@@ -481,8 +491,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -481,8 +491,10 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
loadEnd(cb) { loadEnd(cb) {
this.init();
this.update(); this.playSentenceAudio();
// this.init();
// this.update();
cb() cb()
} }
...@@ -513,11 +525,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -513,11 +525,10 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
c.onEvent('game_start', (data, next) => { c.onEvent('course-in-screen', (data, next) => {
this.gameStart(); this.loadEnd(() => {
if (next) { next();
next(); });
}
}); });
} }
...@@ -552,7 +563,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -552,7 +563,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.playSentenceAudio(); this.playSentenceAudio();
this.update(); // this.update();
// this.initResultView(); // this.initResultView();
} }
...@@ -607,6 +618,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -607,6 +618,9 @@ export class PlayComponent implements OnInit, OnDestroy {
playHtmlAudio(mp3Url, cb=null) { playHtmlAudio(mp3Url, cb=null) {
if (!mp3Url) { if (!mp3Url) {
if (cb) {
cb();
}
return; return;
} }
const mp3 = new Audio(mp3Url); const mp3 = new Audio(mp3Url);
...@@ -635,13 +649,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -635,13 +649,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.showCircleAnim(); this.showCircleAnim();
if (this.countDownNum == 3) { if (this.countDownNum == 3) {
this.countDownAudio3 = this.playHtmlAudio("../../assets/play/music/time_3.mp3") this.countDownAudio3 = this.playHtmlAudio("assets/play/music/time_3.mp3")
} }
if (this.countDownNum <= 0) { if (this.countDownNum <= 0) {
this.countDownStop(); this.countDownStop();
this.countDownAudio0 = this.playHtmlAudio("../../assets/play/music/time_0.mp3", () => { this.countDownAudio0 = this.playHtmlAudio("assets/play/music/time_0.mp3", () => {
this.submitAnswer(); this.submitAnswer();
}) })
return; return;
...@@ -673,7 +687,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -673,7 +687,7 @@ export class PlayComponent implements OnInit, OnDestroy {
changeNextQuestion() { changeNextQuestion() {
this.cleanAudio(); this.cleanAudio();
this.playHtmlAudio('../../assets/play/music/submit.mp3'); this.playHtmlAudio('assets/play/music/submit.mp3');
if (this.curPage >= this.totalPage) { if (this.curPage >= this.totalPage) {
this.countDownStop(); this.countDownStop();
...@@ -747,7 +761,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -747,7 +761,7 @@ export class PlayComponent implements OnInit, OnDestroy {
moreBtnClick() { moreBtnClick() {
console.log(' in moreBtnClick'); console.log(' in moreBtnClick');
this.playHtmlAudio("../../assets/play/music/more.mp3") this.playHtmlAudio("assets/play/music/more.mp3")
} }
inputTouch() { inputTouch() {
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">--> <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air_online_open.js"></script> <script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head> </head>
<body> <body>
......
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