RAS-WEB/src/views/screen/R_D_Environment/index.vue

<template>
  <div class="container">
    <!-- <img id="bg-img" class="img " :src="gitBG"> -->
    <ThreeBG style="position: absolute;left: 0;top: 0;" />
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import gitBG from '@/assets/images/gif-bg.gif';
import ThreeBG from './component/ThreeBG.vue';
</script>

<style lang="scss" scoped>
.container {
  width: 1920px;
  height: 1080px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('/src/assets/images/gif-bg.gif');
  background-repeat: no-repeat;
  /* 如果你不想让背景平铺 */
  background-size: cover;
  /* 或者其他你需要的大小设置 */
  background-position: center;

  .bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
}
</style>