custom-hot-zone.component.html 1.99 KB
Newer Older
limingzhe's avatar
limingzhe committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
<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=" height: 40px;">
        <h5> item-{{i+1}}

          <i style="margin-left: 20px; margin-top: 2px; float: right; cursor:pointer" (click)="deleteItem($event, i)"
             nz-icon [nzTheme]="'twotone'"  [nzType]="'close-circle'" [nzTwotoneColor]="'#ff0000'"></i>
        </h5>
      </div>


      <!--<div class="img-box-upload">-->
        <!--<app-upload-image-with-preview-->
          <!--[picUrl]="it.pic_url"-->
          <!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">-->
        <!--</app-upload-image-with-preview>-->
      <!--</div>-->


      <!--<app-audio-recorder-->
        <!--[audioUrl]="it.audio_url ? it.audio_url : null "-->
        <!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"-->
      <!--&gt;</app-audio-recorder>-->


    </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 type="save"></i>
      Save
    </button>

  </div>



</div>