Commit c6badc81 authored by liujiangnan's avatar liujiangnan

feat: 背景

parent 764f2eb9
<div class="player-picture-group">
<div class="group g1" [style.height]="_HEIGHT">
<div [ngClass]="{'group-box': true}"
(click)="selectGroup(0, $event)">
<div class="group-label">{{data.contentObj.groups[0] ? data.contentObj.groups[0].name : ''}}</div>
<div class="row" style="margin: 0 3vh;">
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of result[0]; let i = index">
<div class="item">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
<div class="player-border">
<div class="player-picture-group">
<div class="group g1" [style.height]="_HEIGHT">
<div [ngClass]="{'group-box': true}"
(click)="selectGroup(0, $event)">
<div class="group-label">{{data.contentObj.groups[0] ? data.contentObj.groups[0].name : ''}}</div>
<div class="row" style="margin: 0 3vh;">
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of result[0]; let i = index">
<div class="item">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group g2" [style.height]="_HEIGHT">
<div [ngClass]="{'group-box': true}"
(click)="selectGroup(1, $event)">
<div class="group-label">{{data.contentObj.groups[1] ? data.contentObj.groups[1].name : ''}}</div>
<div class="row" style="margin: 0 3vh;">
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of result[1]; let i = index">
<div class="item">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
<div class="group g2" [style.height]="_HEIGHT">
<div [ngClass]="{'group-box': true}"
(click)="selectGroup(1, $event)">
<div class="group-label">{{data.contentObj.groups[1] ? data.contentObj.groups[1].name : ''}}</div>
<div class="row" style="margin: 0 3vh;">
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of result[1]; let i = index">
<div class="item">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pics container" #itemsContainer>
<div class="row" >
<ng-container>
<div class="pics container" #itemsContainer>
<div class="row" >
<ng-container>
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of options; let i = index">
<div class="item" (click)="selectItem(item, $event)">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of options; let i = index">
<div class="item" (click)="selectItem(item, $event)">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
.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-picture-group {
padding: 2vh 5vh;
width: 100%;
......
......@@ -10,7 +10,7 @@
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head>
<body>
<body style="background-image: url('../../assets/player-bg.jpg')">
<app-root></app-root>
</body>
</html>
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