DDAC/app/pages/pc/products/web.vue

<template>
  <div>
    <section class="video-section">
      <video ref="videoRef" class="video-bg" src="~/assets/video/web.mp4" autoplay loop muted playsinline
        @loadedmetadata="onVideoLoaded"></video>
      <div class="video-title">
        <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
        <h1><span>智能</span>路由/<span>动态</span>优化/<span>实时</span>处理</h1>
        <div class="video-subtitle">不止于快，更稳更安全，为您的业务保驾护航</div>
        <div class="video-btn">
          <span>联系我们</span>
          <Icon name="line-md:chevron-right" />
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
definePageMeta({
  layout: 'pc'
})

</script>
<style lang="scss" scoped>
.video-section {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;


  .video-bg {
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
    position: relative;
    object-fit: cover;
    clip-path: inset(0 0 9% 0);
  }

  .video-title {
    position: absolute;
    top: 30%;
    left: 48%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    z-index: 3;
    color: #fff;
    font-style: normal;
    display: flex;
    flex-direction: column;

    h1 {
      color: #D8D3FF;
      font-size: 45px;
      font-style: normal;
      font-weight: 500;
      line-height: 80px;

      span {
        color: #997DFF;
      }
    }

    .video-subtitle {
      margin-top: 20px;
      color: #E2D9FF;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 30px;
    }

    .video-text {
      color: #E2D9FF;
      font-size: 20px;
      font-style: normal;
      font-weight: 300;
      line-height: 30px;
    }

    p {
      color: #E2D9FF;
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
    }

    .video-btn {
      cursor: pointer;
      margin-top: 112px;
      display: flex;
      box-sizing: border-box;
      width: 255px;
      height: 60px;
      padding: 7px 21px 7px 45px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 10px;
      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
    }
  }
}
</style>