前端静态登录页面实现

引入全局样式：

main.js导入样式文件：

import '@/assets/styles/border.css'
import '@/assets/styles/reset.css'

加路由：

const routes = [{path: '/login',name: 'login',component: () => import('../views/Login.vue')}
]

App.vue

<template><router-view/>
</template>

安装sass和sass-loader依赖

Login.vue

<template>
<div class="login"><el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"><h3 class="title">Java1234 Vue3 后台管理系统</h3><el-form-item prop="username"><el-inputtype="text"size="large"auto-complete="off"placeholder="账号"></el-input></el-form-item><el-form-item prop="password"><el-inputtype="password"size="large"auto-complete="off"placeholder="密码"@keyup.enter="handleLogin"></el-input></el-form-item><el-checkbox  style="margin:0px 0px 25px 0px;">记住密码</el-checkbox><el-form-item style="width:100%;"><el-buttonsize="large"type="primary"style="width:100%;"@click.prevent="handleLogin"><span>登 录</span></el-button></el-form-item></el-form><!--  底部  --><div class="el-login-footer"><span>Copyright © 2013-2022 <a href="http://www.java1234.vip" target="_blank">java1234.vip</a> 版权所有.</span></div></div>
</template><script setup></script><style lang="scss" scoped>
a{color:white
}
.login {display: flex;justify-content: center;align-items: center;height: 100%;background-image: url("../assets/images/login-background.jpg");background-size: cover;
}
.title {margin: 0px auto 30px auto;text-align: center;color: #707070;
}.login-form {border-radius: 6px;background: #ffffff;width: 400px;padding: 25px 25px 5px 25px;.el-input {height: 40px;input {display: inline-block;height: 40px;}}.input-icon {height: 39px;width: 14px;margin-left: 0px;}}
.login-tip {font-size: 13px;text-align: center;color: #bfbfbf;
}
.login-code {width: 33%;height: 40px;float: right;img {cursor: pointer;vertical-align: middle;}
}
.el-login-footer {height: 40px;line-height: 40px;position: fixed;bottom: 0;width: 100%;text-align: center;color: #fff;font-family: Arial;font-size: 12px;letter-spacing: 1px;
}
.login-code-img {height: 40px;padding-left: 12px;
}
</style>

App.vue设置下全局样式：

<style>
html,body,#app{height: 100%;
}.app-container{padding:20px
}
</style>