登陆页面模板

简单好看的登陆页面 vue项目代码可忽略js部分

先来个效果图

请添加图片描述

<template><div class="login"><div class="content"><p >账户密码登录</p><div class="unit"><label class="label">用户名</label><div class="input"><input type="text" placeholder="请输入用户名" maxlength="20" v-model="form.name"></div></div><div class="unit"><label class="label">密码</label><div class="input"><input type="password" placeholder="请输入密码" maxlength="20" autocomplete="off" v-model="form.password"></div></div><div class="unit"><label class="label">验证码</label><div class="input"><input type="text" placeholder="请输入验证码" id="randCode" name="randCode" maxlength="4"><img id="randCodeImg" class="randCode" src="../assets/img/randImg.jpg"></div></div><el-button type="primary" @click="submitLogin" :loading="loading">登录</el-button></div></div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { Login } from "@/api/index.js";
import { useRouter } from "vue-router";
const $router=useRouter()
const form = reactive({name: '',password: '',code:''
})async function submitLogin() {try {const { data } = await Login(form)console.log(data);if(data.respCode=='0000'){$router.push('/home')}} catch (error) {} finally {}
}</script>
<style lang="scss" scoped>
.login{width: 100vw;height: 95vh;background-image: url('../assets/img/10001.jpg');background-repeat: no-repeat;background-size: 100% 100%;display: flex;justify-content: center;align-items: center;.content{width: 432px;height: 480px;background: #fff;border-radius: 4px;cursor: pointer;padding: 64px 32px;box-sizing: border-box;p{margin-bottom: 20px;font-size: 16px;font-weight: 700;}.unit {position: relative;margin-bottom: 25px;.label {font-size: 14px;color: #ccc;}.input {position: relative;input {border: 0 none;border-bottom: 1px solid #e3e3e3;border-radius: 5px;user-select: none;outline: none;font-size: 16px;width: 100%;background: none;color: #000;display: block;font-size: 16px;padding: 10px 15px;box-sizing: border-box;}}.randCode {width: 100px;height: 30px;position: absolute;top: 50%;margin-top: -14px;right: 5px;vertical-align: middle;cursor: pointer;}}.el-button{width: 100%;}}
}
</style>