login界面代码

<template>

    <!-- Video background -->

    <div class="video-container">

      <video class="video-background" autoplay muted loop>

        <source src="@/assets/luoshen.mp4" type="video/mp4">

        Your browser does not support the video tag.

      </video>

      <!-- 其他页面内容 -->

      <div class="content">

        <h1>欢迎来到我的页面</h1>

        <p>这里是动态背景视频的效果展示。</p>

      </div>

    </div>

  </template>

 

  <script setup>

  import { ref, reactive, onMounted } from 'vue';

  </script>

 

  <style scoped>

  .video-container {

    position: fixed; /* 固定在页面背景 */

    top: 0;

    left: 0;

    width: 100%;

    height: 100%; /* 覆盖整个页面 */

    overflow: hidden; /* 隐藏超出的部分 */

    z-index: -1; /* 保证视频在内容后面 */

  }

 

  .video-background {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%); /* 居中视频 */

    width: 100%;

    height: 100%;

    object-fit: cover; /* 保证视频覆盖全屏 */

  }

 

  .content {

    position: relative;

    z-index: 1; /* 使内容位于视频之上 */

    text-align: center;

    color: white;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

  }

 

  h1 {

    font-size: 3em;

    margin: 0;

  }

 

  p {

    font-size: 1.5em;

  }

  </style>