一个非常好看的前端Vue3登录页面(一个非常好看的中秋礼物怎么做)

一个非常好看的前端Vue3登录页面

推荐整理分享一个非常好看的前端Vue3登录页面(一个非常好看的中秋礼物怎么做)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:一个非常好看的图片,一个非常好看的图片,一个非常好看的女生说我,我有什么让她喜欢,一个非常好看的图片,一个非常好看的男生穿的很好看有没有女朋友,一个非常好看的男生穿的很好看有没有女朋友,一个非常好看的画,一个非常好看的女生说我,我有什么让她喜欢,内容如对您有帮助，希望把文章链接给更多的朋友！

Vue3+less+Element Plus

<template><div id="login"> <div id="contain"> <div id="left_card"> <h1>欢迎来到我的Vue3大世界</h1> <span>Welcome to my Vue3 world</span> </div> <div id="right_card"> <el-card class="el-card"> <h2>欢迎登录</h2> <form class="login" action=""> <input v-shake type="text" v-model="userLoginForm.username" placeholder="请输入账号"> <input v-shake type="password" v-model="userLoginForm.password" placeholder="请输入密码"> </form> <div class="remember"> <input type="radio" name="" id="psd" class="radio"><label for="psd"></label>记住密码 </div> <div class="message"> <span v-html="error"></span> </div> <div id="btn"> <button class="loginbtn" @click="usreList">登陆</button> </div> </el-card> </div> </div></div></template><script>import { useStore } from 'vuex'import { useRouter } from 'vue-router'import { getCurrentInstance, reactive , ref } from '@vue/runtime-core'export default { name:"appLogin", setup(){ let userLoginForm = reactive({ username:" ", password:" " }) const store = useStore() const router = useRouter() const { proxy } = getCurrentInstance() let error = ref('') //获取用户登录信息 async function usreList(){ } //获取用户信息 async function getUserInfo() { } return { userLoginForm,error, usreList,getUserInfo, } } }</script>//APP.vue里写margin：0；padding：0；<style lang="less" scoped>@keyframes animate { 0%{ filter: hue-rotate(0deg); } 100%{ filter: hue-rotate(360deg); }}#login{ position: relative; width: 100vw; height: 100vh; background-image: url(./../assets/login_background.gif); background-size: 100% 100%; background-color: #a7a8bd; #contain{ height: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 25px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(5px); box-shadow: -5px -5px 10px rgb(39, 65, 65), 5px 5px 20px aqua; /* 5秒 infinite循环播放无限次 linear匀速 */ animation: animate 5s linear infinite; }}#contain{ display: flex; flex-direction:row; text-align:center; align-items: center; #left_card{ width: 500px; h1{ color: white; white-space: nowrap; } span{ font-size: 1.2rem; text-align:center; color: white; white-space: nowrap; } } #right_card{ width: 400px; .el-card{ margin: 0 45px; border-radius: 25px; background-color: rgba(255, 255, 255, 0.1); } }}#right_card{ display: flex; justify-content: center; align-items: center; h2{ margin-bottom: 5px; } .login{ input{ width: 80%; height: 45px; margin-top: 10px; border: 1px solid white; background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; font-size: inherit; padding-left: 20px; outline: none; } } .remember{ float: right; height: 26px; text-align: center; font-size: 1rem; position: relative; .radio{ height: 1rem; width: 1rem; vertical-align:middle; margin-top: -2px; opacity: 0; } label { position: absolute; left: -2px; top: 5px; height: 1rem; width: 1rem; vertical-align:middle; margin-top: -2px; border-radius: 50%; border: 1px solid black; } //radio选中后修改labe内的内容 :after 选择器在被选元素的内容后面插入内容。 input:checked + label::after { content: ""; width: 0.6rem; height: 0.6rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: rgba(207, 38, 38, 0.8); border: 1px solid rgba(207, 38, 38, 0.8); } } .message{ margin-top: 26px; font-size: 0.9rem; color: red; } .loginbtn{ width: 100%; height: 35px; margin-top: 10px; border-radius: 10px; background-color: rgba(207, 38, 38, 0.8); } }</style>input抖动

参考input抖动