non-invasive-checkup/src/views/step1.vue

<template>
  <div class="step1">
    <div class="top">
      <div class="title"><img src="@/assets/step1/title.png" alt=""></div>
      <div class="sub-title"><img src="@/assets/step1/sub-title.png" alt=""></div>
    </div>
    <div class="main">
      <div class="ip" ref="ipRef">
        <div class="l">
          <img src="@/assets/step1/avatars.png" alt="">
        </div>
        <van-popover
          v-model:show="showHelp"
          placement="top-start"
          :offset="[8, 0]"
          :teleport="teleportTarget"
          class="help-popover"
        >
          <div class="help-content">我可以帮您检测常规生命体<br>征和心理压力指数噢~</div>
          <template #reference>
            <span aria-hidden="true"  id="help-anchor"/>
          </template>
        </van-popover>
        <!-- muted -->
        <video
          class="ip-video"
          src="@/assets/step1/1.mp4"
          autoplay
          playsinline
          webkit-playsinline
          preload="auto"
        />
      </div>
    </div>
    <div class="bottom">
      <div class="btn" @click="start()"> <img src="@/assets/step1/start.png" alt=""></div>
      <img class="tips" src="@/assets/step1/bottom.png" alt=""></img>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';

const showHelp = ref(true);
const ipRef = ref<HTMLElement | null>(null);
const teleportTarget = computed(() => ipRef.value ?? 'body');
const router = useRouter();
const start = () => {
  router.push('/step2');
}
</script>
<style scoped lang="scss">
.step1 {
  padding-top: 52.97px;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: url('@/assets/step1/bg.png') no-repeat center center/cover;
  min-height: 100vh;

  .top {
    .title {
      width: 340px;
      height: 60px;
      padding-left: 49px;

      img {
        width: 100%;
      }
    }

    .sub-title {
      margin: 0 auto;
      width: 930px;
      height: 187.57px;

      img {
        width: 100%;
      }
    }
  }

  .main {
    flex: 1;
    position: relative;
    
    /* 与 step4 的 main 同布局：居中的 ip 容器 + 左右绝对定位元素 */
    .ip {
      position: absolute;
      top: 86px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 485.04px;
      height: 1309px;

      img,
      .ip-video {
        width: 100%;
        height: 100%;
      }

      .ip-video {
        display: block;
        object-fit: cover;
      }

      .l,
      .r {
        position: absolute;
        top: 125px;
        width: 137px;
        height: 644px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .l {
        left: -222px;
      }

      .r {
        right: -222px;
      }

      .help-content {
        // max-width: 520px;
        font-size: 28px;
        line-height: 1.4;
        padding: 16px 18px;
        color: #fff;
      }

      /* 最简单：把 wrapper 当作“help-anchor”，只调这里就能移动 Popover */
      :deep(.van-popover__wrapper) {
        position: absolute;
        top: 200px;
        right: 120px;
        width: 1px;
        height: 1px;
      }
    }
  }

  .bottom {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 102px;
    .btn {
      margin: 0 auto;
      width: 284px;
      height: 284px;
    }

    .tips {
      margin: 19px auto 0;
      width: 724px;
      height: 195px;
    }
  }
}
</style>

<!-- Popover 现 teleport 到 .ip，覆盖样式仍放全局，避免 scoped 限制 -->
<style lang="scss">
.help-popover {
  
  .van-popover__content {
    white-space: nowrap;
    // width: 520px;
    background: rgba(0, 0, 0, 1);
    border: 0;
    border-radius: 16px;
    padding: 6px 8px;
    font-size: 28px;
    line-height: 1.4;
    color: #fff;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  }

  .van-popover__arrow {
    /* 用自定义“对话框小尾巴”替换默认菱形箭头 */
    width: 64px;
    height: 56px;
    background: transparent;
    border: 0;
    box-shadow: none;
    bottom: -8px !important;
  
  }


  .van-popover__arrow::before,
  .van-popover__arrow::after {
    content: '';
    position: absolute;

    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    /* 形状：上边平直 + 左下斜切的小尾巴（接近截图效果） */
    clip-path: polygon(
      0 0,
      100% 0,
      100% 38%,
      62% 38%,
      18% 100%,
      18% 38%,
      0 38%
    );
  }
}
</style>