

<!-- <div style=" display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"> -->
 
  <div class="game-container" #wrap style="height: 100%; width: 100%; overflow: hidden; position: fixed; top: 0; left: 0" >
    <!-- <canvas id="canvas" style="width: 100%; height: 100%;" #canvas></canvas> -->
  
    <div style=" width: 100%; height: 100%; background-size: cover; display: flex; align-items: center; flex-direction: column;">
      
      <!-- 背景图 -->
      <div style="width: 100%; height: 100%; position: absolute;">
        <img src="assets/play/bg.jpg" style="width: 100%; height: 100%; position: absolute; "/>
      </div> 
    
      <!-- 标题 -->
      <div class="title-box" style="z-index: 7; position: fixed;">
        {{data && data.contentObj && data.contentObj.title || ''}}
      </div>
  
      <!-- 中间句子面板 -->
      <div style="text-align: center; margin-top: 20vh; position: absolute; text-align: center; "  >
        <!-- 背景图 -->
        <img src="assets/play/sentence_bg.png" style="height: 28vh; width: auto;">
        <!-- 小圈 -->
        <div style="position: relative; top: -33.9vh; ">
          <img [src]="'assets/play/circle_1'+ (countDownNum > 3 ? '' : '_red') +'.png'" style="height: 11.8vh; width: auto; ">
          <div style="position: relative; height: 11.8vh; top: -11.8vh; display: flex; align-items: center; justify-content: center;">
            <label style="font-family: Aileron-Black; font-size: 4.3vh;" [style.color]="countDownNum > 3 ? '#3b9d31' : '#ffffff'">{{countDownNum}}</label>
          </div>
          <div *ngIf="countDownNum > 3" style="position: relative; height: 11.8vh; top: -23.6vh; display: flex; align-items: center; justify-content: center;">
            <img [style.height]="tweenItem?.circleHeight + 'vh'" [style.opacity]="tweenItem?.opacity" src="assets/play/circle_2.png" style="width: auto; ">
          </div>
        </div>
        <!-- 喇叭 -->
        <div style="position: absolute; top: 0; margin-top: -0.7vh; right: 3%;" (click)="playSentenceAudio()">
          <img src="assets/play/sound_bg.png" style="height: 8.1vh; width: auto; ">
          <div style="position: relative; top: -8.1vh; left: 0.8vh; overflow: hidden; height: 8.1vh; width: 4.9368vh; display: flex; align-items: center;">
            <img [src]="'assets/play/sound_icon_'+ curSoundIconIndex +'.png'" style="height: 4.2vh; width: auto;" >
          </div>
        </div>
        <!-- 页码 -->
        <div style="z-index: 1; position: absolute; top: 0; margin-top: 19.7vh; right: -0.7%;">
          <img src="assets/play/page_num_bg.png" style="height: 7.1vh; width: auto; ">
          <div style="position: relative; height: 8.1vh; top: -8.1vh; display: flex; align-items: center; justify-content: center;">
            <label style="margin-left: -0.5vw; font-family: DroidSansFallback; font-size: 3.8vh; color:#ffffff">{{curPage + ' / ' + totalPage}}</label>
          </div>
        </div>
        <!-- 句子 -->
        <div #sentenceDiv *ngIf="curSentenceData" style="position: absolute; top: 0; margin-top: 8vh; width: 90%; margin-left: 5%; text-align: left; font-size: 3.3vh; color:#fff; font-family: DroidSansFallback;">
          <label>
            {{curSentenceData.textArr[0]}}
          </label>
          <input autofocus [(ngModel)]="curInputValue" (change)="inputChange($event)" style="background-color: #007b3e; border-radius: 1.5vh; border-width: 0; z-index: 5; text-align: center; width: 35vh" />
          <label>
            {{curSentenceData.textArr[1]}}
          </label>
        </div>
        <!-- 面板阴影 -->
        <div style="z-index: 0; width: 100%;  position: absolute; top:0; margin-top: 20.8vh; text-align: center;">
          <img src="assets/play/sentence_bg_shadow.png" style="width: auto; height: 12.9vh;"/>
        </div> 

        <!-- 提交按钮 -->
        <div style="position: absolute; width: 100%; top: 0; margin-top: 40%; z-index: 1;" >
     
          <img src="assets/play/btn.png" style="height: 9.5vh; width: auto;" [style.marginTop]="tweenItem?.submitOffY + 'vh'" >

          <div style="position: relative; height: 9.5vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;">
            <label style="margin-left: -0.5vw; font-family: Aileron-Black; font-size: 3.8vh; color:#ffffff">{{'Submit'}}</label>
          </div>
          <!-- 点击区域 -->
          <div (mousedown)="submitAnswer()" (touchstart)="submitAnswer()" style=" position: relative; margin-top: -19vh;  margin-left: auto; margin-right: auto; height: 9.5vh; width: 52.6vh; ">
          </div>
        </div>

        <div style="width: 100%;  position: absolute; top:0; margin-top: 49.5vh; text-align: center;">
          <img src="assets/play/btn_shadow.png" style="width: auto; height: 12.9vh;" [style.marginTop]="tweenItem?.shadowOffY + 'vh'" />
        </div> 

      </div>
     
    </div>

    <!-- 结算界面 -->
    <div #result *ngIf="isShowResult" style="z-index: 5; overflow: hidden; position: absolute; top:0; width: 100%; height: 100%; background-size: cover; display: flex; align-items: center; flex-direction: column;">
        <!-- 背景图 -->
        <div style="width: 100%; height: 100%; position: absolute;">
          <img src="assets/play/bg.jpg" style="width: 100%; height: 100%; position: absolute; "/>
        </div> 
        <!-- 面板 -->
        <div style="width: 100%; height: 68.7vh; position: absolute; top: 0; margin-top: 13vh;; text-align: center;">
          <img src="assets/play/result_panel.png" style="width: auto; height: 68.7vh; "/>
          <!-- 标题 -->
          <div style="position: absolute; margin-top: -71.7vh; width: 100%; text-align: center;">
            <div>
              <img src="assets/play/result_panel_item.png" style="width: auto; height: 10vh; "/>
            </div>
            <div style="position: relative; height: 10vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;">
              <label style="font-family: Aileron-Black; font-size: 3.1vh; color:#ffffff">{{'Check'}}</label>
            </div>
          </div>

          <div style="width: 100%;  position: absolute; margin-top: -60vh; display: flex; align-items: center; justify-content: center;">
            <div style=" width: 120.3vh; height: 54.4vh; display: flex; align-items: center;  flex-direction: column; overflow-y: auto; ">
              <!-- 句子 -->
              <div *ngFor="let rs of resultSentenceArr; let i = index" style="width: 90%; font-family: DroidSansFallback; font-size: 2.8vh; color:#ffffff; text-align: left; margin-top: 2vh; ">
                <label>{{rs.resultTextArr[0]}}</label>
                <label style="padding-left: 2vh; padding-right: 2vh; border-radius: 1vh;" [class]="rs.isRight ? 'answer-right' : 'answer-wrong'">{{rs.resultTextArr[1]}}</label>
                <label>{{rs.resultTextArr[2]}}</label>
                <!-- 纠正信息 -->
                <div *ngIf="!rs.isRight" style="background-color: #3b962e; margin-top:0.5vh; border-radius: 3.55vh; height: 7.1vh; width: 108.9vh; display: flex; align-items: center;">
                  <div style="margin-left: 2vh; margin-top:-0.5vh;">
                    <img src="assets/play/info_icon.png" style="width: auto; height: 3.6vh; "/>
                  </div>
                  <div style="margin-left: 2vh">
                    <label style="font-family: Aileron-Black; font-size: 2.6vh; color:#ffe9b1">{{rs.answerRight}}</label>
                  </div>
                </div>
                <!-- 线 -->
                <div style=" margin-top: 2vh; width: 100%; height:0.5vh; background-color: #2c8520;">
                </div>

              </div>
            </div>
          </div>
          <!-- 面板阴影 -->
          <div style="width: 100%;  position: absolute; top:0; margin-top: 60.8vh; text-align: center;">
            <img src="assets/play/result_panel_shadow.png" style="width: auto; height: 12.9vh;"/>
          </div> 
        </div> 
        <!-- 按钮 -->
        <div *ngIf="isShowMoreBtnTime && isShowMore" style="position: absolute; top: 0; margin-top: 85vh; overflow: hidden;">
          <div style="z-index: 2; position: relative; ">
            <img src="assets/play/big_btn.png" style="height: 9.5vh; width: auto; z-index: 12;" >
          </div>
          <div style="z-index: 2; position: relative; height: 9.5vh; top: -9.5vh; display: flex; align-items: center; justify-content: center;">
            <label style="margin-left: -0.5vw; font-family: Aileron-Black; font-size: 3.8vh; color:#ffffff">{{'更多练习'}}</label>
          </div>
          <div  (click)="moreBtnClick()" style="z-index: 3; position: relative; margin-top: -19vh;  margin-left: auto; margin-right: auto; height: 9.5vh; width: 114vh; ">
          </div>
          <!-- 按钮阴影 -->
          <div style="z-index: 1; width: 100%;  position: relative; top:0; margin-top: -7.5vh; text-align: center;">
            <img src="assets/play/big_btn_shadow.png" style="width: auto; height: 11.3vh;"/>
          </div> 
        </div>
      
    </div>
  </div>

  <!-- <input #input style="position: fixed;"/> -->


  
<!-- </div> -->

<!-- <div style="background: url('/assets/play/bg.jpg'); width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size:contain; z-index: -1;">

</div> -->
