Commit 81b4a115 authored by liujiangnan's avatar liujiangnan

fix:自适应并且换了背景图

parent e9593722
<div class="p-content"> <div class="body-bg"></div>
<div class="p-conversation-box" nz-row nzGutter="16" nzType="flex"> <div class="player-border">
<div nz-col nzSpan="8" *ngFor="let item of data.contentObj.list; index as i;"> <div class="p-content">
<div class="p-conversation" [style.border-color]="colorArr[i]" (click)="curItem=item; curIndex=i;"> <div class="p-conversation-box" nz-row nzGutter="16" nzType="flex">
{{item.text}} <div nz-col nzSpan="8" *ngFor="let item of data.contentObj.list; index as i;">
<div class="p-conversation" [style.border-color]="colorArr[i]" (click)="curItem=item; curIndex=i;">
{{item.text}}
</div>
</div> </div>
</div> </div>
</div>
<div class="p-popup-box" [@fadePopup] *ngIf="curItem"
<div class="p-popup-box" [@fadePopup] *ngIf="curItem" [style.border-color]="colorArr[curIndex]">
[style.border-color]="colorArr[curIndex]"> <div class="i-close" (click)="onClosePopup()">
<div class="i-close" (click)="onClosePopup()"> <i class="anticon anticon-close"></i>
<i class="anticon anticon-close"></i>
</div>
<div class="i-text">{{curItem.text}}</div>
<div class="position-relative">
<div class="p-options" nz-row nzGutter="16" nzType="flex" *ngIf="!curOption">
<div nz-col [nzSpan]="optionCol" *ngFor="let item of curItem.options; index as i;" (click)="curOption=item;">
<div class="p-option"
[style.background-image]="'url('+ item.pic_id +')'"
></div>
</div>
</div> </div>
<div class="p-cur-option" [@zoomOption] *ngIf="curOption" (click)="curOption=null;" <div class="i-text">{{curItem.text}}</div>
[style.background-image]="'url('+ curOption.pic_id +')'" <div class="position-relative">
> <div class="p-options" nz-row nzGutter="16" nzType="flex" *ngIf="!curOption">
<div nz-col [nzSpan]="optionCol" *ngFor="let item of curItem.options; index as i;" (click)="curOption=item;">
<div class="p-option"
[style.background-image]="'url('+ item.pic_id +')'"
></div>
</div>
</div>
<div class="p-cur-option" [@zoomOption] *ngIf="curOption" (click)="curOption=null;"
[style.background-image]="'url('+ curOption.pic_id +')'"
>
</div>
</div> </div>
</div> </div>
</div> </div>
......
@import "../style/common_mixin.scss"; @import "../style/common_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;
}
.p-content { .p-content {
width: 100%; width: 100%;
height: 100%; height: 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