Commit f4b162de authored by liujiangnan's avatar liujiangnan

feat: 添加背景色

parent 1e983049
<div class="vocabulary-container"> <div class="player-border">
<div class="vocabulary-container">
<div class="content-wrap"> <div class="content-wrap">
<div class="top-line"> <div class="top-line">
<img class="star" src="assets/vocabulary/star.png" alt="" size="20"> <img class="star" src="assets/vocabulary/star.png" alt="" size="20">
...@@ -20,4 +21,5 @@ ...@@ -20,4 +21,5 @@
<img [src]="data.contentObj.pic_id" alt="" (dragstart)="false;$event.preventDefault();"/> <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