vue3+vite+ts视频背景酷炫登录模板【英雄联盟主题】

news2024/11/19 5:40:11

最近我准备在自己的网站上开发一个博客系统，首先要实现后台登录界面。我选择使用Vue 3 + Vite + TypeScript框架来构建，下面是针对该主题的详细说明：

在网页中使用视频作为背景图已经相当常见了，而且网上也有很多相关的插件可供使用。我选择使用"vue-responsive-video-background-player"插件来实现这个功能。

首先，你需要通过以下命令来安装该插件：

npm install vue-responsive-video-background-player

下面是两种不同的引入方式，并将插件注册到Vue应用中：

作为组件：
在main.ts文件中引入插件，并将其作为一个全局组件注册：

import VideoBackground from 'vue-responsive-video-background-player'

Vue.component('video-background', VideoBackground);

作为插件：
在main.ts文件中引入插件，并使用Vue的use方法注册插件：

import { Plugin } from 'vue-responsive-video-background-player'

Vue.use(Plugin);

如果在使用过程中出现了找不到声明模块的错误，你可以创建一个以.d.ts为后缀的新文件，然后添加以下内容：

declare module 'vue-responsive-video-background-player'{
    const content: any
    export = content
}

这样就能解决找不到声明模块的问题了。

创建视频组件

<template>
  <div class="v_bg" style="z-index: 0;">
    <video-background src="视频地址" style="width: 100vw;max-width:100%; height: 100vh;height: 100vh;" muted preload playsWhen="canplay"
      objectFit="cover">

      <h1 style="color: white;padding-left: 20px;" >Entrie Star皆星河</h1>
    </video-background>
   
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

</script>

<style scoped>
body {
  margin: 0;
}
h1 {
  font-size: 3.2em;
  line-height: 1.1;
}


</style>

src（路径，必填)
autoplay（自动播放,默认值：true)
muted（静音，默认值：true)
preload（预加载，默认值：auto)
objectFit（适应容器，默认值：cover|fill|contain)

更多的组件配置可以参考vue-responsive-video-background-player文档

使用组件

//创建login.vue
<template>
   <div class="login">
      <videoTool></videoTool>
      <div class="Loginform">

         <el-row :gutter="20">
            <el-col :span="15">
               <div class="input_form">
                  <div class="title">欢迎来到英雄联盟~</div>
                  <div class="input_user">
                     <img class="user_logo" src="@/assets/lol.png">
                     <el-input v-model="username" placeholder="请输入召唤师账号" />
                  </div>
                  <div class="input_pas">
                     <img class="pas_logo" src="@/assets/R-C_pixian.png">
                     <el-input v-model="password" placeholder="请输入召唤师密码" />
                  </div>
                  <div class="input_valiCode">
                     <el-input v-model="vailcode" placeholder="请输入验证码" />
                     <valicode></valicode>
                  </div>
                  <div class="commit">
                     <el-button type="warning" >进入峡谷</el-button>
                     
                  </div>
               </div>
            </el-col>
            <el-col :span="9">

            </el-col>
         </el-row>
      </div>
   </div>
</template>

<script lang="ts" setup>
import { ref} from 'vue';
import "animate.css";

import videoTool from '@/components/videoTool.vue'
const username=ref()
const password=ref()
const vailcode=ref()
</script>

<style lang="scss" scoped>
body {
   margin: 0;
}

.login {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;

   .Loginform {
      position: fixed;
      width: 700px;
      height: 400px;
      background-color: rgb(34, 50, 75);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      opacity: 0.95;
      background-image: url('@/assets/1_pixian.png');
      background-size: 700px 400px;
      background-position: 230px 0;
      background-repeat: no-repeat;

      .input_form {
         width: calc(100% - 20px);
         height: 380px;
         margin: 10px 10px;

         .title {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
         }

         .input_user {
            display: flex;
            width: 90%;
            height: 80px;
            margin: 0 auto;
            align-items: center;
            position: relative;

            .user_logo {
               width: 25px;
               height: 25px;
               position: absolute;
               z-index: 1111;
            }

            :deep(.el-input .el-input__inner)::placeholder {
               text-indent: 20px;
               color: rgb(95, 40, 74);
               /* 设定缩进的距离，根据需要进行调整 */
            }
         }

         .input_pas {
            display: flex;
            width: 90%;
            height: 70px;
            margin: 0 auto;
            align-items: center;
            .pas_logo{
               width: 25px;
               height: 25px;
               position: absolute;
               z-index: 1111;
            }
            :deep(.el-input .el-input__inner)::placeholder {
               text-indent: 20px;
               color: rgb(95, 40, 74);
               /* 设定缩进的距离，根据需要进行调整 */
            }
         }
         .input_valiCode{
            display: flex;
            width: 90%;
            height: 80px;
            margin: 0 auto;
            align-items: center;
            
            :deep(.el-input ) {
               width: 200px;
               /* 设定缩进的距离，根据需要进行调整 */
            }
            :deep(.el-input .el-input__inner)::placeholder {
               // text-indent: 20px;
               color: rgb(95, 40, 74);
               /* 设定缩进的距离，根据需要进行调整 */
            }
         }
         .commit{
            display: flex;
            justify-content: center;
            
            :deep(.el-button) {
               width: 150px;
               /* 设定缩进的距离，根据需要进行调整 */
            }
         }
      }
   }
}</style>