Commit 3288c3c7 authored by liujiangnan's avatar liujiangnan

feat: 图片背景

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