Commit 18c897cd authored by liujiangnan's avatar liujiangnan

feat: 添加背景图

parent 8898c4b3
<div class="player-preview-content">
<div
#pic
class="p-courseware-image-audio"
(click)="playAudio($event);"
[style.background-image]="data?.contentObj.pic_id ? 'url('+ data?.contentObj.pic_id +')' : 'url(assets/common/pic-not-upload.jpg)'"
>
</div>
<div class="text" #text style="text-align: center"
[innerHTML]="data.contentObj.text | brLineBreaker">
</div>
<div class="p-question-btn" [class.show-question]="showQuestion" *ngIf="data?.contentObj?.question"
(click)="toggleQuestionBox()">
<i class="anticon anticon-star"></i>
Thinking
</div>
<div class="p-question-box" [@show-question] *ngIf="showQuestion">
<div class="i-title">
<div class="body-bg"></div>
<div class="player-border">
<div class="player-preview-content">
<div
#pic
class="p-courseware-image-audio"
(click)="playAudio($event);"
[style.background-image]="data?.contentObj.pic_id ? 'url('+ data?.contentObj.pic_id +')' : 'url(assets/common/pic-not-upload.jpg)'"
>
</div>
<div class="text" #text style="text-align: center"
[innerHTML]="data.contentObj.text | brLineBreaker">
</div>
<div class="p-question-btn" [class.show-question]="showQuestion" *ngIf="data?.contentObj?.question"
(click)="toggleQuestionBox()">
<i class="anticon anticon-star"></i>
Thinking
</div>
<div class="i-content"
[innerHTML]="data?.contentObj?.question | brLineBreaker"
>
<div class="p-question-box" [@show-question] *ngIf="showQuestion">
<div class="i-title">
Thinking
</div>
<div class="i-content"
[innerHTML]="data?.contentObj?.question | brLineBreaker"
>
</div>
</div>
</div>
</div>
@import '../../app/style/123common_mixin.scss';
.body-bg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url('../../assets/player-bg.png') !important;
background-size: 100%;
}
.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;
}
.player-preview-content {
width: 100%;
height: 100%;
......
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core';
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import * as _ from 'lodash';
import {
Label,
......@@ -52,6 +52,11 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
@Input() sid;
showQuestion: boolean;
constructor(private appRef: ApplicationRef,
private changeDetectorRef: ChangeDetectorRef) {
}
ngOnInit() {
this.data = {
contentObj: {
......@@ -129,5 +134,14 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
this.showQuestion = !this.showQuestion;
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
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