Recently, I am going to develop a blog system on my website. First, I need to implement the background login interface. I chose to use Vue 3 + Vite + TypeScript framework to build, here are the detailed instructions for this topic:
Using video as a background image in web pages is quite common, and there are many related plug-ins available on the Internet. I chose to use the "vue-responsive-video-background-player" plugin for this functionality.
First, you need to install the plugin with the following command:
npm install vue-responsive-video-background-player
Here are two different ways to import and register the plugin into the Vue application:
As a component:
Introduce the plugin in the main.ts file and register it as a global component:
import VideoBackground from 'vue-responsive-video-background-player'
Vue.component('video-background', VideoBackground);
As a plug-in:
introduce the plug-in in the main.ts file, and use the use method of Vue to register the plug-in:
import {
Plugin } from 'vue-responsive-video-background-player'
Vue.use(Plugin);
If you get an error that the declared module cannot be found during use, you can create a new file with a .d.ts suffix and add the following content:
declare module 'vue-responsive-video-background-player'{
const content: any
export = content
}
This will solve the problem that the declaration module cannot be found.
Create a video component
<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 (path, required)
- autoplay (automatic play, default value: true)
- muted (mute, default value: true)
- preload (preload, default: auto)
- objectFit (fit container, default: cover|fill|contain)
For more component configuration, please refer to vue-responsive-video-background-playerthe documentation
Use components
//创建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>
Here is a component using elementUI, so you need to install element-ui
npm install element-plus --save
Install scss
npm i sass sass-loader --save-dev
Please refer to my previous article for the verification code component----> vue3+vite+ts verification code component
common problem
1. Video address
The video address cannot be introduced directly in src. You need to define variables and const vurl = ref('../src/assets/test.mp4')
pass them in. For example, 2. Vue packaged video will not upload the video to the server.
3. Video loading is very slow and lags. It is recommended to use object storage to store the video. File uploads use online addresses to reduce server pressure
Final rendering:
Effect preview address: click here
Subsequent optimization
Input box prompt, login animation, theme color
will continue to be updated~