custom-hot-zone.component.html 2.74 KB
Newer Older
limingzhe's avatar
limingzhe committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<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
liujiaxin's avatar
liujiaxin committed
16
          [picUrl]="bgItem?.url"
limingzhe's avatar
limingzhe committed
17 18 19 20 21
          (imageUploaded)="onBackgroundUploadSuccess($event)">
        </app-upload-image-with-preview>
      </div>
    </div>

limingzhe's avatar
limingzhe committed
22 23
    <div nz-col nzSpan="5" nzOffset="1" class="img-box"
         *ngFor="let it of hotZoneArr; let i = index">
limingzhe's avatar
limingzhe committed
24

limingzhe's avatar
limingzhe committed
25 26 27 28 29 30 31
      <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>
limingzhe's avatar
limingzhe committed
32

limingzhe's avatar
limingzhe committed
33
        <nz-divider style="margin-top: 10px;"></nz-divider>
limingzhe's avatar
limingzhe committed
34 35


limingzhe's avatar
limingzhe committed
36 37 38 39 40 41 42
        <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>
limingzhe's avatar
limingzhe committed
43

limingzhe's avatar
limingzhe committed
44 45 46 47 48 49
        <div *ngIf="it.itemType == 'pic'">
          <app-upload-image-with-preview
            [picUrl]="it?.pic_url"
            (imageUploaded)="onItemImgUploadSuccess($event, it)">
          </app-upload-image-with-preview>
        </div>
limingzhe's avatar
limingzhe committed
50

limingzhe's avatar
limingzhe committed
51 52 53
        <div *ngIf="it.itemType == 'text'">
          <input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
        </div>
limingzhe's avatar
limingzhe committed
54

limingzhe's avatar
limingzhe committed
55 56 57 58 59 60
        <div style="width: 100%; margin-top: 5px;">
          <app-audio-recorder
            [audioUrl]="it.audio_url"
            (audioUploaded)="onItemAudioUploadSuccess($event, it)"
          ></app-audio-recorder>
        </div>
limingzhe's avatar
limingzhe committed
61

limingzhe's avatar
limingzhe committed
62
      </div>
limingzhe's avatar
limingzhe committed
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

    </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"
limingzhe's avatar
limingzhe committed
87
            (click)="saveClick()" >
liujiaxin's avatar
liujiaxin committed
88
      <i nz-icon nzType="save"></i>
limingzhe's avatar
limingzhe committed
89 90 91 92 93 94 95 96 97
      Save
    </button>

  </div>


</div>


limingzhe's avatar
limingzhe committed
98 99 100
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>