Update: [首頁] FILM player 增加關閉按鈕

Tomas

2023-07-31 5302e220911410341bff29ae0c232c9a9f819c2c

Update: [首頁] FILM player 增加關閉按鈕

 PAMapp/pages/index.vue

@@ -142,12 +142,19 @@
              </div>
          </div>
      </PopUpFrame>
    
    <div class="video-container"
         v-if="isShowFilmPlayer"
         style="position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; justify-content: flex-end;"
    >
      <iframe width=”780″
          height=”440″
          style="position: fixed; bottom: 30px; right: 30px; z-index: 9999;"
          allowfullscreen
          src="https://www.youtube.com/embed/655JnwbuRGA?autoplay=1&mute=1"
        ></iframe>
      <div class="close-btn" @click="closeVideo()">X</div>
    </div>

  </div>
</template>

@@ -268,6 +275,8 @@
      seniority          : '',
      appointments       : []
    };

    isShowFilmPlayer = true;

    //////////////////////////////////////////////////////////////////////

@@ -429,6 +438,10 @@
        this.storageClearNotContactAppointmentIdFromMsg();
    }

    closeVideo() {
      this.isShowFilmPlayer = false;
    }

    ///////////////////////////////////////////////////////////////////////////////

    get gender(): string {
@@ -543,4 +556,32 @@
      max-width: 335px;
    }
  }

  /* 確保 .video-container 有相對/絕對定位或固定寬度 */
  .video-container {
    position: relative;
    width: 600px; /* 根據你的影片尺寸調整 */
  }

  /* 關閉按鈕樣式 */
  .close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    background-color: #000;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    opacity: 0.7;
  }

  .close-btn:hover {
    opacity: 1;
  }

</style>