Commit c6badc81 authored by liujiangnan's avatar liujiangnan

feat: 背景

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