保誠-保戶業務員媒合平台
Tomas
2023-07-31 fdedea98f7c2af0144de16a6e291310869f6d113
PAMapp/pages/index.vue
@@ -59,7 +59,7 @@
                  <p>性別:{{gender}}</p>
                  <p>年齡:{{appointmentDetail.age | toAgeLabel }}</p>
                  <p>職業:{{appointmentDetail.job}}</p>
                  <p>諮詢方式:{{appointmentDetail.consultantMode }}</p>
                  <p>諮詢方式:{{appointmentDetail.consultationMethod }}</p>
                  <p>需求:{{ appointmentDetail.requirement ? appointmentDetail.requirement.split(',').join('、') : '--'}}</p>
                  <p
                      v-for="(item, index) in hopeContactTime"
@@ -142,6 +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″
              allowfullscreen
              src="https://www.youtube.com/embed/655JnwbuRGA?autoplay=1&mute=1"
      ></iframe>
      <div class="close-btn" @click="closeVideo()">X</div>
    </div>
  </div>
</template>
@@ -245,7 +258,7 @@
      phone             : '',
      requirement       : '',
      satisfactionScore : 0,
      consultantMode    : ''
      consultationMethod    : ''
    };
    agentInfo: Consultant = {
@@ -262,6 +275,8 @@
      seniority          : '',
      appointments       : []
    };
    isShowFilmPlayer = true;
    //////////////////////////////////////////////////////////////////////
@@ -423,6 +438,10 @@
        this.storageClearNotContactAppointmentIdFromMsg();
    }
    closeVideo() {
      this.isShowFilmPlayer = false;
    }
    ///////////////////////////////////////////////////////////////////////////////
    get gender(): string {
@@ -537,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>