jayq_vue_newbigdata/src/App.vue

<template>
  <div class="main">
    <MainHeader />
    <MainBody />
    <!-- 遮罩层颜色渐变区域 -->
    <div class="mask" ref="mask">
      <!-- 视频背景区域 -->
      <video
        v-if="currentPath === '/'"
        class="video_background"
        preload="auto"
        loop
        playsinline
        autoplay
        muted
        src="@/assets/videos/1.mp4"
      ></video>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, ref } from "vue";
import { useRoute } from "vue-router";

// 路由实例
const $route = useRoute();

// 遮罩层DOM元素
const mask = ref();
// 当前路由路径
const currentPath = ref("");

// 监听当前路由路径变化
watch($route, (newValue) => {
  currentPath.value = newValue.path;

  if (currentPath.value !== "/") {
    mask.value.style.backgroundColor = "rgb(2, 2, 28)";
  } else {
    mask.value.style.backgroundColor = "";
  }
});
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  width: 7072px;
  height: 1872px;
  overflow: hidden;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .video_background {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background-image: radial-gradient(
        rgba(0, 6, 15, 0) 0%,
        rgba(0, 6, 15, 0.8) 90%,
        rgba(0, 6, 15, 1) 100%
      );
    }
  }
}
</style>