Commit f71d6eaf authored by liujiangnan's avatar liujiangnan

feat: 图片背景

parent 16538378
<div class="question-player" style="position: relative">
<div class="top-part">
<img
*ngIf="data.contentObj.pic_id"
[src]="data.contentObj.pic_id "
alt="cover"
(dragstart)="false;$event.preventDefault();"
(click)="onHandleZoomIn($event)"
[@zoom]="zoomIn ? 'in' : 'none'"
/>
<div class="title">{{data.contentObj.title}}</div>
</div>
<div class="opt-container">
<div
class="opt-wrap"
*ngFor="let item of options; let i = index"
[@tip-border]="item.state || 'none'"
(click)="handleAnimation(item)"
>
<span class="opt-circle" [@tip-circle]="item.state || 'none'">{{transCharCode(i)}}</span>
<div class="text" *ngIf="item.type === OPTION_TYPE.TEXT">{{item.text}}</div>
<div class="audio" style="text-align: center" *ngIf="item.type === OPTION_TYPE.AUDIO" (click)="playAudio(item, $event)">
<i class="anticon anticon-sound"></i>
<div class="body-bg"></div>
<div class="player-border">
<div class="question-player" style="position: relative">
<div class="top-part">
<img
*ngIf="data.contentObj.pic_id"
[src]="data.contentObj.pic_id "
alt="cover"
(dragstart)="false;$event.preventDefault();"
(click)="onHandleZoomIn($event)"
[@zoom]="zoomIn ? 'in' : 'none'"
/>
<div class="title">{{data.contentObj.title}}</div>
</div>
<div class="opt-container">
<div
class="opt-wrap"
*ngFor="let item of options; let i = index"
[@tip-border]="item.state || 'none'"
(click)="handleAnimation(item)"
>
<span class="opt-circle" [@tip-circle]="item.state || 'none'">{{transCharCode(i)}}</span>
<div class="text" *ngIf="item.type === OPTION_TYPE.TEXT">{{item.text}}</div>
<div class="audio" style="text-align: center" *ngIf="item.type === OPTION_TYPE.AUDIO" (click)="playAudio(item, $event)">
<i class="anticon anticon-sound"></i>
</div>
<img *ngIf="item.type === OPTION_TYPE.PIC" [src]="item.pic_id" alt=""
(dragstart)="false;$event.preventDefault();"/>
</div>
<img *ngIf="item.type === OPTION_TYPE.PIC" [src]="item.pic_id" alt=""
(dragstart)="false;$event.preventDefault();"/>
</div>
<div (click)="playQuestionAudio($event)"
style="width: 100px;height: 100px;position: absolute;bottom: 50px;right: 80px;">
<img style="max-width: 100%;max-height: 100%;" *ngIf="!playerState.getValue().isPlaying" src="assets/question/play.png" alt="" (dragstart)="false;$event.preventDefault();">
<img style="max-width: 100%;max-height: 100%;" *ngIf="playerState.getValue().isPlaying" src="assets/question/pause.png" alt="" (dragstart)="false;$event.preventDefault();">
</div>
<!--<img src="/assets/question/left.png" alt="ufo" class="left-ufo" (dragstart)="false;$event.preventDefault();">-->
<!--<img src="/assets/question/right.png" alt="ufo" class="right-ufo" (dragstart)="false;$event.preventDefault();">-->
</div>
<div (click)="playQuestionAudio($event)"
style="width: 100px;height: 100px;position: absolute;bottom: 50px;right: 80px;">
<img style="max-width: 100%;max-height: 100%;" *ngIf="!playerState.getValue().isPlaying" src="assets/question/play.png" alt="" (dragstart)="false;$event.preventDefault();">
<img style="max-width: 100%;max-height: 100%;" *ngIf="playerState.getValue().isPlaying" src="assets/question/pause.png" alt="" (dragstart)="false;$event.preventDefault();">
</div>
<!--<img src="/assets/question/left.png" alt="ufo" class="left-ufo" (dragstart)="false;$event.preventDefault();">-->
<!--<img src="/assets/question/right.png" alt="ufo" class="right-ufo" (dragstart)="false;$event.preventDefault();">-->
</div>
.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;
}
.question-player {
display: flex;
flex-direction: column;
......
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