diff --git a/src/app/play/play.component.html b/src/app/play/play.component.html index 246278774f256edc045c89e428396be42ac4257b..4445d043ccc293bd0d151f79927f4ef7fee16dca 100644 --- a/src/app/play/play.component.html +++ b/src/app/play/play.component.html @@ -1,45 +1,48 @@ -<div class="player-reading" #readingContainer> - <div class="imgDetailBox" - (click)="closeDetailView($event)" - [style.display]="partDetailVisible? 'block' : 'none'"> - <div class="detail-preview-box" [ngStyle]="partViewDetailCss" > - <img [src]="data.contentObj.pic_id | resource" [ngStyle]="partViewImgDetailCss"> +<div class="body-bg"></div> +<div class="player-border"> + <div class="player-reading" #readingContainer> + <div class="imgDetailBox" + (click)="closeDetailView($event)" + [style.display]="partDetailVisible? 'block' : 'none'"> + <div class="detail-preview-box" [ngStyle]="partViewDetailCss" > + <img [src]="data.contentObj.pic_id | resource" [ngStyle]="partViewImgDetailCss"> + </div> </div> - </div> - <div class="fill"> - <div class="row fill" style="margin: 0 6vh;padding-top:3vh;padding-bottom: 3vh;"> - <div class="col-6"> - <div class="bar"> - <div class="parts-wrap"> - <div class="parts" #previewParts> - - <div class="row" *ngFor="let part of parts;let i = index"> - <div class="col-6 word-wrap" [style.color]="part.color"> - <span class="word " [style.color]="part.color"> - {{part.word}} - </span> - </div> - <div class="col-6"> - <div class="part-pic-box-border" (click)="highlightSelect(i)" [style.borderColor]="part.color"> - <div class="part-pic-box" [ngStyle]="part.previewCss"> - <img [src]="data.contentObj.pic_id | resource" [ngStyle]="part.imgCss"> + <div class="fill"> + <div class="row fill" style="margin: 0 6vh;padding-top:3vh;padding-bottom: 3vh;"> + <div class="col-6"> + <div class="bar"> + <div class="parts-wrap"> + <div class="parts" #previewParts> + + <div class="row" *ngFor="let part of parts;let i = index"> + <div class="col-6 word-wrap" [style.color]="part.color"> + <span class="word " [style.color]="part.color"> + {{part.word}} + </span> + </div> + <div class="col-6"> + <div class="part-pic-box-border" (click)="highlightSelect(i)" [style.borderColor]="part.color"> + <div class="part-pic-box" [ngStyle]="part.previewCss"> + <img [src]="data.contentObj.pic_id | resource" [ngStyle]="part.imgCss"> + </div> </div> </div> </div> + </div> - </div> </div> </div> - </div> - <div class="col-6" style="display: flex;justify-content: center;align-items: center;"> - <div class="pic-preview" [ngStyle]="previewContainerCss" #previewContainer> - <img [src]="data.contentObj.pic_id | resource" alt=""> - <div class="highlight" #highlightBox> - <div class="t-b"></div> - <div class="r-b"></div> - <div class="b-b"></div> - <div class="l-b"></div> + <div class="col-6" style="display: flex;justify-content: center;align-items: center;"> + <div class="pic-preview" [ngStyle]="previewContainerCss" #previewContainer> + <img [src]="data.contentObj.pic_id | resource" alt=""> + <div class="highlight" #highlightBox> + <div class="t-b"></div> + <div class="r-b"></div> + <div class="b-b"></div> + <div class="l-b"></div> + </div> </div> </div> </div> diff --git a/src/app/play/play.component.scss b/src/app/play/play.component.scss index 5e7a1fb17c9af97d608f1d90562e2119c6bbb8a5..4af7a0274c5fe53fb8efa0511088376991e8d17c 100644 --- a/src/app/play/play.component.scss +++ b/src/app/play/play.component.scss @@ -1,3 +1,29 @@ +.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-reading{ background: url("../../assets/reading/bg_reading.png") 50% 50% no-repeat; width: 100%; diff --git a/src/assets/player-bg.png b/src/assets/player-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..cfadf0004ed018108e5047ff64a9de3a331c54be Binary files /dev/null and b/src/assets/player-bg.png differ