<div class="model-content"> <div class="card-config"> <div class="card-item" style="padding: 0.5vw;" > <div class="card-item-content border" style="min-width: 1280px"> <div class="card-item-content"> <div class="title" > 题目素材 </div> <div class="section" > <div class="section-content"> <div style="display: flex; margin-bottom: 10px;"> <div style="flex:1; text-align: right; margin-right: 10px;"> <span>显示选项</span><span> :</span> </div> <div style="flex:3"> <nz-radio-group [(ngModel)]="contentObj.mainQuestion.type" (ngModelChange)="saveItem()" > <label nz-radio [nzValue]="'Text'">文字</label> <label nz-radio [nzValue]="'Image'">图片</label> <label nz-radio [nzValue]="'LongAudio'">长音频</label> </nz-radio-group> </div> <div style="flex:8"> <div *ngIf="contentObj.mainQuestion.type=='Image'"> <app-upload-image-with-preview style="width: 100%;" [picUrl]="contentObj.mainQuestion.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, contentObj.mainQuestion, 'image_url')"></app-upload-image-with-preview> </div> <div *ngIf="contentObj.mainQuestion.type=='Text'"> <textarea type="text" nz-input placeholder="" [(ngModel)]="contentObj.mainQuestion.text" (blur)="saveItem()" ></textarea> </div> <div *ngIf="contentObj.mainQuestion.type=='LongAudio'"> <app-audio-recorder [audioUrl]="contentObj.mainQuestion.longAudio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, contentObj.mainQuestion, 'longAudio_url')" ></app-audio-recorder> </div> </div> </div> </div> </div> <div class="section" > <div class="section-content"> <div style="display: flex; margin-bottom: 10px;"> <div style="flex:1; text-align: right; margin-right: 10px;"> <span>短音频</span><span> :</span> </div> <div style="flex:3"> <app-audio-recorder [audioUrl]="contentObj.mainQuestion.shortAudio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, contentObj.mainQuestion, 'shortAudio_url')" ></app-audio-recorder> </div> <div style="flex:8"></div> </div> </div> </div> <!-- 上层卡片 --> <div class="title" > 上层卡片 </div> <div class="section"> <div class="section-content"> <div *ngFor="let it of item.contentObj.textUp; let i = index" class="card-item" > <div style="display: flex;"> <div style="flex:1; text-align: right; margin-right: 10px;"> <span>{{i+1}}</span><span> :</span> </div> <div style="flex:3"> <input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()"/> </div> <div style="flex:8" style="margin-left: 20px;"> <span>对应下层卡片</span><span> : </span> <nz-checkbox-group [(ngModel)]="it.checkOptions" (ngModelChange)="save()"></nz-checkbox-group> </div> <div style="flex:4"> <div style="float:right; text-align: left; padding-left: 20px;"> <button style="vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemUp(item.contentObj.textUp, i)" [disabled]="i==0"> <i nz-icon nzType="up" nzTheme="outline" style="float: left; margin-top: 4px;"></i> <span style="float: right;">上移</span> </button> <button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemDown(item.contentObj.textUp, i)" [disabled]="i==item.contentObj.textUp.length-1"> <i nz-icon nzType="down" nzTheme="outline" style="float: left; margin-top: 4px;"></i> <span style="float: right;">下移</span> </button> <button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="danger" (click)="deleteItem(item.contentObj.textUp, i)" > <span>删除</span> </button> </div> </div> </div> </div> <div class="card-item" style="padding: 0.5vw; text-align: right;" > <button nz-button nzType="primary" (click)="addItem(item.contentObj.textUp, 'card')"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i> 新建卡片 </button> </div> </div> </div> <!-- 下层卡片 --> <div class="title" > 下层卡片 </div> <div class="section" > <div class="section-content"> <div *ngFor="let it of item.contentObj.textDown; let i = index" class="card-item" > <div style="display: flex;"> <div style="flex:1; text-align: right; margin-right: 10px;"> <span>{{i+1}}</span><span> :</span> </div> <div style="flex:3"> <input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()"/> </div> <div style="flex:8"> </div> <div style="flex:4"> <div style="float:right; text-align: left; padding-left: 20px;"> <button style="vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemUp(item.contentObj.textDown, i)" [disabled]="i==0"> <i nz-icon nzType="up" nzTheme="outline" style="float: left; margin-top: 4px;"></i> <span style="float: right;">上移</span> </button> <button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemDown(item.contentObj.textDown, i)" [disabled]="i==item.contentObj.textDown.length-1"> <i nz-icon nzType="down" nzTheme="outline" style="float: left; margin-top: 4px;"></i> <span style="float: right;">下移</span> </button> <button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="danger" (click)="deleteItem(item.contentObj.textDown, i)" > <span>删除</span> </button> </div> </div> </div> </div> <div class="card-item" style="padding: 0.5vw; text-align: right;" > <button nz-button nzType="primary" (click)="addItem(item.contentObj.textDown, 'card')"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i> 新建卡片 </button> </div> </div> </div> </div> </div> </div> </div> </div>