Commit 01fc65fe authored by Chen Jiping's avatar Chen Jiping

fix:调整正确显示位置

parent 0193e460
<div class="model-content">
<div class="model-content" id="content">
<div nz-row>
<div nz-col nzOffset='4'>
<h1 nz-title>课程练习内容编辑</h1>
......@@ -7,17 +7,7 @@
<div nz-row>
<div nz-col [nzSpan]="20" nzOffset="2">
<div id='listen-anchor'>
<nz-divider nzText="练习题" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="exercises">操作</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addExercises(item, 'exercisesArr')">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
<div>
<div *ngFor="let data of item.exercisesArr;let j = index" class="card-item" style="padding: 0.5vw;">
<div class="border">
......@@ -89,6 +79,17 @@
</div>
</div>
</div>
<div id='listen-anchor'>
<nz-divider nzText="练习题" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="exercises">操作</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addExercises(item, 'exercisesArr')">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
......
......@@ -102,6 +102,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item[key] = [...item[key], exercises];
this.save();
var ele = document.getElementById("content");
console.log(ele.scrollHeight, ele.clientHeight, ele.scrollTop)
//判断元素是否出现了滚动条
if(ele.scrollHeight > ele.clientHeight) {
//设置滚动条到最底部
ele.scrollTop = ele.scrollHeight;
}
}
deleteExercises(item, key, index) {
......
......@@ -42,9 +42,15 @@ export class Stage {
numberLabel: Label;
total: Number = 0;
total: any = 0;
iconRight: MySprite;
totalPage : any = 0;
curPage :any = 0;
lIconRight: MySprite;
rIconRight: MySprite;
rightScroll: MySprite;
......@@ -52,6 +58,8 @@ export class Stage {
nextPagePic: MySprite;
lastPagePic : MySprite;
resultArr: Array<ExercisesResult> = [];
lastBtn: MySprite;
......@@ -83,6 +91,8 @@ export class Stage {
this.total = this.data.exercisesArr ? this.data.exercisesArr.length : 0;
this.totalPage = Math.ceil(this.total / 12);
this.bg = new ShapeRect();
this.bg.setSize(this.width, this.height);
this.bg.alpha = 0;
......@@ -150,6 +160,20 @@ export class Stage {
audioAni.setXY(1129, 78);
audioAni.initPic(this.bg, true);
this.audioAni = audioAni;
this.nextPagePic = new MySprite();
this.nextPagePic.init(this.images.get('btn_fanye'), 1, 1);
this.nextPagePic.x = this.bg.width - 78;
this.nextPagePic.y = this.bg.height - 58;
this.bg.addChild(this.nextPagePic);
this.nextPagePic.visible = false;
this.lastPagePic = new MySprite();
this.lastPagePic.init(this.images.get('btn_fanye2'), 1, 1);
this.lastPagePic.x = this.nextPagePic.x;
this.lastPagePic.y = this.bg.height - 94 - this.nextPagePic.height;
this.bg.addChild(this.lastPagePic);
this.lastPagePic.visible = false;
}
initGuard() {
......@@ -169,6 +193,14 @@ export class Stage {
this.bg.addChild(lGuardPic2);
this.lGuardPic2 = lGuardPic2;
const lIconRight = new MySprite();
lIconRight.init(this.images.get('icon_right'), 0.5, 1);
lIconRight.y = this.bg.height - 320;
lIconRight.visible = false;
lIconRight.x = 43 + lIconRight.width / 2;
this.bg.addChild(lIconRight);
this.lIconRight = lIconRight;
const rGuardPic1 = new MySprite();
rGuardPic1.init(this.images.get('bg_monkeyright1'), 1, 1);
rGuardPic1.x = this.bg.getBoundingBox().width - 4;
......@@ -183,6 +215,14 @@ export class Stage {
rGuardPic2.alpha = 0;
this.bg.addChild(rGuardPic2);
this.rGuardPic2 = rGuardPic2;
const rIconRight = new MySprite();
rIconRight.init(this.images.get('icon_right'), 0.5, 1);
rIconRight.y = this.bg.height - 320;
rIconRight.visible = false;
rIconRight.x = (this.bg.width - 43) - rIconRight.getBoundingBox().width / 2;
this.bg.addChild(rIconRight);
this.rIconRight = rIconRight;
}
initCrown() {
......@@ -267,6 +307,9 @@ export class Stage {
this.leftCrownPic.visible = false;
this.rightCrownPic.visible = false;
this.rIconRight.visible = false;
this.lIconRight.visible = false;
this.audioAni.hide(true);
if (this.rightScroll) {
......@@ -289,10 +332,7 @@ export class Stage {
this.rightAnswer = null;
}
if (this.iconRight) {
this.bg.removeChild(this.iconRight);
this.iconRight = null;
}
if (this.lastBtn) {
this.lastBtn.alpha = 0;
......@@ -312,9 +352,6 @@ export class Stage {
this.bg.removeChild(this.wrongScroll);
}
if (this.iconRight) {
this.bg.removeChild(this.iconRight);
}
this.numberLabel.visible = true;
this.numberPic.visible = true;
......@@ -340,6 +377,9 @@ export class Stage {
this.leftCrownPic.alpha = 1;
this.rightCrownPic.alpha = 1;
this.rIconRight.visible = false;
this.lIconRight.visible = false;
if (this.audioAni.hideFlag) {
this.audioAni.show();
}
......@@ -365,15 +405,13 @@ export class Stage {
return rightScroll;
}
this.iconRight = getIcon();
this.rightScroll = getRightScroll();
playAudio(this.audioObj['right'], true);
if (flag == 'L') {
this.iconRight.x = 43 + this.iconRight.getBoundingBox().width / 2;
this.lIconRight.visible = true;;
this.leftCrownPic.alpha = 0;
......@@ -381,7 +419,7 @@ export class Stage {
}
else if (flag == 'R') {
this.iconRight.x = (this.bg.width - 43) - this.iconRight.getBoundingBox().width / 2;
this.rIconRight.visible = true;
this.rightCrownPic.alpha = 0;
this.rightScroll.x = this.rightCrownPic.x - this.rightScroll.width / 2;
}
......@@ -431,7 +469,7 @@ export class Stage {
})
}
initSummary(start = 0, limit = 0) {
initSummary(page = 0) {
//隐藏其它内容
this.hide();
......@@ -442,6 +480,8 @@ export class Stage {
}
}
this.curPage = page;
this.resultArr = [];
......@@ -457,6 +497,10 @@ export class Stage {
var tempY = startY;
let start = page * 12;
let limit = (page + 1) * 12;
let total = this.data.exercisesArr.length;
console.log(start, limit);
if (start > total) {
......@@ -495,18 +539,7 @@ export class Stage {
}
//如果超过12个练习题,增加翻页按钮
if (!this.nextPagePic && total > 12) {
this.nextPagePic = new MySprite();
this.nextPagePic.init(this.images.get('btn_fanye'), 1, 1);
this.nextPagePic.x = this.bg.width - 78;
this.nextPagePic.y = this.bg.height - 58;
this.bg.addChild(this.nextPagePic);
}
if (this.nextPagePic) {
this.nextPagePic.visible = true;
}
this.refreshPageBtn();
}
hideSummary() {
......@@ -519,6 +552,24 @@ export class Stage {
this.resultArr = [];
this.nextPagePic.visible = false;
this.lastPagePic.visible = false;
}
refreshPageBtn(){
if(this.curPage == 0){
this.lastPagePic.visible = false;
}
else{
this.lastPagePic.visible = true;
}
if(this.curPage < this.totalPage - 1){
this.nextPagePic.visible = true;
}
else{
this.nextPagePic.visible = false;
}
}
setAnswer(leftAnswer: Answer, rightAnswer: Answer, callback = null) {
......
......@@ -81,9 +81,6 @@ export class PlayComponent implements OnInit, OnDestroy {
rightAnswer: Answer;
start = 0;
limit = 12;
@HostListener('window:resize', ['$event'])
onResize(event) {
......@@ -540,9 +537,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curIndex = 0;
this.start = 0;
this.limit = 12;
}
......@@ -647,10 +641,14 @@ export class PlayComponent implements OnInit, OnDestroy {
}
if(this.stage.nextPagePic && this.checkClickTarget(this.stage.nextPagePic)){
this.start = this.limit;
this.limit += this.limit;
this.stage.initSummary(this.start, this.limit);
this.stage.initSummary(this.stage.curPage + 1);
return;
}
if(this.checkClickTarget(this.stage.lastPagePic)){
this.stage.initSummary(this.stage.curPage - 1);
return;
}
}
......@@ -745,14 +743,14 @@ export class PlayComponent implements OnInit, OnDestroy {
this.endRenderArr = [];
this.answered = true;
this.stage.initSummary(this.start, this.limit);
this.stage.initSummary(0);
this.canTouch = true;
});
}, 2000);
}
else{
this.answered = true;
this.stage.initSummary(this.start, this.limit);
this.stage.initSummary(0);
this.canTouch = true;
}
......
......@@ -16,6 +16,7 @@ const res = [
['bg_xuanxiang1', "assets/play/bg_xuanxiang1.png"],
['bg_xuanxiang2', "assets/play/bg_xuanxiang2.png"],
['btn_fanye', "assets/play/btn_fanye.png"],
['btn_fanye2', "assets/play/btn_fanye2.png"],
['btn_laba1', "assets/play/btn_laba1.png"],
['btn_laba2', "assets/play/btn_laba2.png"],
......
src/assets/play/bg_right.png

14.8 KB | W: | H:

src/assets/play/bg_right.png

14.8 KB | W: | H:

src/assets/play/bg_right.png
src/assets/play/bg_right.png
src/assets/play/bg_right.png
src/assets/play/bg_right.png
  • 2-up
  • Swipe
  • Onion skin
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