<div class="body-bg"></div>
<div class="player-border">
  <div class="p-content">
    <div class="p-conversation-box" nz-row nzGutter="16" nzType="flex">
      <div nz-col nzSpan="8" *ngFor="let item of data.contentObj.list; index as i;">
        <div class="p-conversation" [style.border-color]="colorArr[i]" (click)="selectItem(item, i)">
          {{item.text}}
        </div>
      </div>
    </div>

    <div class="p-popup-box" [@fadePopup] *ngIf="curItem"
         [style.border-color]="colorArr[curIndex]">
      <div class="i-close" (click)="onClosePopup()">
        <i class="anticon anticon-close"></i>
      </div>
      <div class="i-text">{{curItem.text}}</div>
      <div class="position-relative">
        <div class="p-options" nz-row nzGutter="16" nzType="flex" *ngIf="!curOption">
          <div nz-col [nzSpan]="optionCol" *ngFor="let item of curItem.options; index as i;" (click)="curOption=item;">
            <div class="p-option"
                 [style.background-image]="'url('+ item.pic_id +')'"
            ></div>
          </div>
        </div>
        <div class="p-cur-option" [@zoomOption] *ngIf="curOption" (click)="curOption=null;"
             [style.background-image]="'url('+ curOption.pic_id +')'"
        >
        </div>
      </div>
    </div>
  </div>
</div>
