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>
    <section class="cdn-container">
      <div class="cdn-title">
        <h2>
          678CDN功能
        </h2>
        <p>让科技为您的业务发光发亮，CDN功能助力您的网站顺畅、高效、安全地运作，
          同时提供数据防范和预防技术，让您的网站免于遭受恶意攻击</p>
      </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%);
    }
  }
}

.cdn-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .cdn-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    h2 {
      font-size: 45px;
      font-style: normal;
      font-weight: 500;
      line-height: 45px;
      background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    p {
      color: #E2D9FF;
      text-align: center;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: 36px;
    }
  }
}
</style>