Commit 3288c3c7 authored by liujiangnan's avatar liujiangnan

feat: 图片背景

parent a2f9ac99
<div class="player-preview-content"
(click)="handleTapText();$event.preventDefault()"
style="background-image: url('assets/talk/bg.png');">
<div class="all-talk-wrap">
<div class="all-talk-box" #talkListBox>
<ul class="talk-list">
<!--<li *ngFor="let itm of talkListData index as i;" id="tklst_{{i%2===0?'A':'B'}}_{{i}}" >-->
<!--{{itm.text}}-->
<!--</li>-->
</ul>
</div>
</div>
<div class="monster-talk">
<div class="monster-talk-wrap">
<div class="A-role">
<div class="A-avatar" ></div>
<!--<div class="A-text-wrap" *ngIf="talkText.A" [style.zIndex]="zIdxA">-->
<!--<img class="talk-bubble" src="assets/talk/bubble_left.png" />-->
<!--<div class="talktext">-->
<!--<p>-->
<!--{{talkText.A}}-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
<div class="body-bg"></div>
<div class="player-border">
<div class="player-preview-content"
(click)="handleTapText();$event.preventDefault()"
style="background-image: url('assets/talk/bg.png');">
<div class="all-talk-wrap">
<div class="all-talk-box" #talkListBox>
<ul class="talk-list">
<!--<li *ngFor="let itm of talkListData index as i;" id="tklst_{{i%2===0?'A':'B'}}_{{i}}" >-->
<!--{{itm.text}}-->
<!--</li>-->
</ul>
</div>
<div class="talk-bubble-box">
<div class="p-dialog A-text-wrap" *ngIf="talkText.A" [@dialog]="animationA" [style.zIndex]="zIdxA">
<img class="talk-bubble" src="assets/talk/bubble_left.png" />
<div class="talktext">
<p>
{{talkText.A}}
</p>
</div>
</div>
<div class="monster-talk">
<div class="monster-talk-wrap">
<div class="A-role">
<div class="A-avatar" ></div>
<!--<div class="A-text-wrap" *ngIf="talkText.A" [style.zIndex]="zIdxA">-->
<!--<img class="talk-bubble" src="assets/talk/bubble_left.png" />-->
<!--<div class="talktext">-->
<!--<p>-->
<!--{{talkText.A}}-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
</div>
<div class="p-dialog B-text-wrap" *ngIf="talkText.B" [@dialog]="animationB" [style.zIndex]="zIdxB">
<img class="talk-bubble" src="assets/talk/bubble_right.png" />
<div class="talktext">
<p>
{{talkText.B}}
</p>
<div class="talk-bubble-box">
<div class="p-dialog A-text-wrap" *ngIf="talkText.A" [@dialog]="animationA" [style.zIndex]="zIdxA">
<img class="talk-bubble" src="assets/talk/bubble_left.png" />
<div class="talktext">
<p>
{{talkText.A}}
</p>
</div>
</div>
<div class="p-dialog B-text-wrap" *ngIf="talkText.B" [@dialog]="animationB" [style.zIndex]="zIdxB">
<img class="talk-bubble" src="assets/talk/bubble_right.png" />
<div class="talktext">
<p>
{{talkText.B}}
</p>
</div>
</div>
</div>
</div>
<div class="B-role">
<div class="B-avatar" ></div>
<!--<div class="B-text-wrap" *ngIf="talkText.B" [style.zIndex]="zIdxB">-->
<!--<img class="talk-bubble" src="assets/talk/bubble_right.png" />-->
<!--<div class="talktext">-->
<!--<p>-->
<!--{{talkText.B}}-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
<div class="B-role">
<div class="B-avatar" ></div>
<!--<div class="B-text-wrap" *ngIf="talkText.B" [style.zIndex]="zIdxB">-->
<!--<img class="talk-bubble" src="assets/talk/bubble_right.png" />-->
<!--<div class="talktext">-->
<!--<p>-->
<!--{{talkText.B}}-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
</div>
</div>
</div>
......@@ -2,6 +2,34 @@
font-family: arialRound;
src: url('../../assets/talk/ArialRoundedBold.woff');
}
.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%;
......
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