<div class="p-image-children-editor"> <h5 style="margin-left: 2.5%;"> preview: </h5> <div class="preview-box" #wrap> <canvas id="canvas" #canvas></canvas> </div> <div nz-row nzType="flex" nzAlign="middle"> <div nz-col nzSpan="5" nzOffset="1"> <h5> add background: </h5> <div class="bg-box"> <app-upload-image-with-preview [picUrl]="bgItem?.url" (imageUploaded)="onBackgroundUploadSuccess($event)"> </app-upload-image-with-preview> </div> </div> <div nz-col nzSpan="5" nzOffset="1" class="img-box" *ngFor="let it of hotZoneArr; let i = index"> <div style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px"> <span style="margin-left: 40%;"> item-{{i + 1}} </span> <button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)"> X </button> <nz-divider style="margin-top: 10px;"></nz-divider> <div style="margin-top: -20px; margin-bottom: 5px"> <nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)"> <label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label> <label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label> <label *ngIf="isHasText" nz-radio nzValue="text">文本</label> </nz-radio-group> </div> <div *ngIf="it.itemType == 'pic'"> <app-upload-image-with-preview [picUrl]="it?.pic_url" (imageUploaded)="onItemImgUploadSuccess($event, it)"> </app-upload-image-with-preview> </div> <div *ngIf="it.itemType == 'text'"> <input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)"> </div> <div style="width: 100%; margin-top: 5px;"> <app-audio-recorder [audioUrl]="it.audio_url" (audioUploaded)="onItemAudioUploadSuccess($event, it)" ></app-audio-recorder> </div> </div> </div> <div nz-col nzSpan="5" nzOffset="1"> <div class="bg-box"> <button nz-button nzType="dashed" (click)="addBtnClick()" class="add-btn"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i> <!--Add Image--> Add hot zone </button> </div> </div> </div> <nz-divider></nz-divider> <div class="save-box"> <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" (click)="saveClick()" > <i nz-icon nzType="save"></i> Save </button> </div> </div> <label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>