<div class="position-relative"> <button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;" > <i nz-icon nzType="tool" nzTheme="outline"></i> {{btnName}} </button> <!--配置龙骨面板--> <nz-modal [(nzVisible)]="panelVisible" (nzAfterClose)="closePanel()" [nzTitle]="btnName" (nzOnCancel)="panelCancel()" (nzOnOk)="panelOk()" nzOkText="保存"> <div> <h4>基础内容:</h4> <div style="margin-bottom: 10px; width: 80%; margin: auto;"> <!-- <nz-radio-group [ngModel]="item.type" (ngModelChange)="radioChange($event)"> <label nz-radio nzValue="pic">图片</label> <label nz-radio nzValue="text">文本</label> </nz-radio-group> --> <div *ngIf="item.type == 'pic'"> <app-upload-image-with-preview [picUrl]="item?.pic_url" (imageUploaded)="onItemImgUploadSuccess($event, item)"> </app-upload-image-with-preview> </div> <div *ngIf="item.type == 'text'"> <input type="text" nz-input [(ngModel)]="item.text" (blur)="saveText(item)"> </div> <div *ngIf="item.type == 'anima'" style="margin-left: 100px;"> <app-upload-dragon-bone [skeJsonData]=item.skeJsonData [texJsonData]=item.texJsonData [texPngData]=item.texPngData (save)="saveAnima($event)" > </app-upload-dragon-bone> </div> </div> <nz-divider style="margin-top: 10px;"></nz-divider> <h4>状态设置:</h4> <div style="display: flex; justify-content: space-around;"> <div style="width: 30%; display: flex; align-items: center; flex-direction: column;"> <h5> 开始状态 </h5> <div *ngFor="let op of item.changeOption; let i = index" style="margin-bottom: 5px; "> <div style="display: flex; align-items: center; justify-content: center;"> <span>{{op[0]}}: </span> <input type="text" nz-input [(ngModel)]="op[1]" (blur)="saveText(op)" style="margin-left: 5px;"> </div> </div> </div> <div style="width: 30%; display: flex; align-items: center; flex-direction: column; "> <h5> 切换时间 </h5> <div style="display: flex; width: 100%; align-items: center; justify-content: center;"> <span>time: </span> <input type="text" nz-input [(ngModel)]="item.changeTime" (blur)="saveText(item.changeTime)" style="width: 80px; margin-left: 5px;"> </div> </div> <div style="width: 30%; display: flex; align-items: center; flex-direction: column;"> <h5> 结束状态 </h5> <div *ngFor="let op of item.changeOption; let i = index" style="margin-bottom: 5px; "> <div style="display: flex; align-items: center; justify-content: center;"> <span>{{op[0]}}: </span> <input [disabled]="op[2] == null" type="text" nz-input [(ngModel)]="op[2]" (blur)="saveText(op)" style="margin-left: 5px;"> </div> </div> </div> </div> <div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;"> <button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyChangeData()"> 复制数据 </button> <div style="margin-left: 20px; margin-top: -5px" > <span>粘贴数据: </span> <input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" > <button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button> </div> </div> <nz-divider style="margin-top: 10px;"></nz-divider> <h4> 音频设置 </h4> <app-audio-recorder style="margin: auto" [audioUrl]="item?.audio_url" (audioUploaded)="onItemAudioUploadSuccess($event, item)" ></app-audio-recorder> </div> <!-- <div class="anima-upload-btn"> <span style="margin-right: 10px">上传 ske_json 文件: </span> <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" (nzChange)="skeJsonHandleChange($event)"> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> </nz-upload> <i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <span *ngIf="skeJsonData && skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span> </div> <div class="anima-upload-btn"> <span style="margin-right: 10px">上传 tex_json 文件: </span> <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" (nzChange)="texJsonHandleChange($event)"> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> </nz-upload> <i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <span *ngIf="texJsonData && texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span> </div> <div class="anima-upload-btn"> <span style="margin-right: 10px">上传 tex_png 文件: </span> <nz-upload [nzShowUploadList]="false" nzAccept = "image/*" [nzAction]="uploadUrl" [nzData]="uploadData" (nzChange)="texPngHandleChange($event)"> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> </nz-upload> <i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <span *ngIf="texPngData && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span> </div> <div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0"> 提示:需包含动画: {{animaNames.toString()}}. </div> --> </nz-modal> </div>