Commit f4b162de authored by liujiangnan's avatar liujiangnan

feat: 添加背景色

parent 1e983049
<div class="vocabulary-container"> <div class="player-border">
<div class="content-wrap"> <div class="vocabulary-container">
<div class="top-line"> <div class="content-wrap">
<img class="star" src="assets/vocabulary/star.png" alt="" size="20"> <div class="top-line">
<h1 class="vocabulary" [ngClass]="{'animated bounce infinite': vocabularyPlaying}" <img class="star" src="assets/vocabulary/star.png" alt="" size="20">
(click)="playVocabularyAudio()"> <h1 class="vocabulary" [ngClass]="{'animated bounce infinite': vocabularyPlaying}"
<span class="star"></span>{{data.contentObj.vocabulary}} (click)="playVocabularyAudio()">
</h1> <span class="star"></span>{{data.contentObj.vocabulary}}
<h2 class="type"> </h1>
{{data.contentObj.vocabularyType}} <h2 class="type">
</h2> {{data.contentObj.vocabularyType}}
<div class="audio-button" [ngClass]="{'animated zoomIn slow infinite': definitionPlaying}" </h2>
(click)="playDefinitionAudio()"></div> <div class="audio-button" [ngClass]="{'animated zoomIn slow infinite': definitionPlaying}"
<div class="show-text" (click)="showSentence()"></div> (click)="playDefinitionAudio()"></div>
</div> <div class="show-text" (click)="showSentence()"></div>
<div class="sentence" [style.visibility]="show"> </div>
{{data.contentObj.definition}} <div class="sentence" [style.visibility]="show">
</div> {{data.contentObj.definition}}
<div class="img-wrap"> </div>
<img [src]="data.contentObj.pic_id" alt="" (dragstart)="false;$event.preventDefault();"/> <div class="img-wrap">
<img [src]="data.contentObj.pic_id" alt="" (dragstart)="false;$event.preventDefault();"/>
</div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
.player-border{
position: absolute;
left: calc((100% - 100vh * 1.36)/ 2);
top: 5vh;
right: calc((100% - 100vh * 1.36)/ 2);
bottom: 5vh;
text-align: center;
// box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
border-radius: 11px;
border: 20px solid #23b1c2;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
}
.vocabulary-container { .vocabulary-container {
text-align: left; text-align: left;
height: 100%; height: 100%;
......
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core'; import { Component, ElementRef, ViewChild, ApplicationRef,ChangeDetectorRef, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core';
import * as _ from 'lodash'; import * as _ from 'lodash';
import { animate, state, style, transition, trigger } from '@angular/animations'; import { animate, state, style, transition, trigger } from '@angular/animations';
...@@ -23,7 +23,8 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni ...@@ -23,7 +23,8 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
vocabularyPlaying = false; vocabularyPlaying = false;
definitionPlaying = false; definitionPlaying = false;
constructor() { constructor(private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) {
this.vocabulary_audio.onplay = () => { this.vocabulary_audio.onplay = () => {
this.vocabularyPlaying = true; this.vocabularyPlaying = true;
}; };
...@@ -64,6 +65,7 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni ...@@ -64,6 +65,7 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
} }
this.init(); this.init();
window["air"].hideAirClassLoading(this.saveKey, this.data); window["air"].hideAirClassLoading(this.saveKey, this.data);
this.refresh();
}, this.saveKey); }, this.saveKey);
} }
...@@ -127,5 +129,11 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni ...@@ -127,5 +129,11 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
} }
} }
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
} }
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.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 style="background-image: url('./assets/player-bg.jpg')">
<app-root></app-root> <app-root></app-root>
</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