Commit 3288c3c7 authored by liujiangnan's avatar liujiangnan

feat: 图片背景

parent a2f9ac99
<div class="player-preview-content" <div class="body-bg"></div>
<div class="player-border">
<div class="player-preview-content"
(click)="handleTapText();$event.preventDefault()" (click)="handleTapText();$event.preventDefault()"
style="background-image: url('assets/talk/bg.png');"> style="background-image: url('assets/talk/bg.png');">
<div class="all-talk-wrap"> <div class="all-talk-wrap">
...@@ -55,4 +57,5 @@ ...@@ -55,4 +57,5 @@
</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