若依框架----登录界面美化

代码如下：

<template><div class="login"><div class="login-logo"><span> 开源字节 | 通行证</span></div><h2 class="main-title"><span>开源字节</span></h2><h3 class="sub-title">登录开源字节，与攻城狮一起交流、分享快乐吧！</h3><el-formref="loginForm":model="loginForm":rules="loginRules"class="login-form"><el-form-item prop="username"><el-inputv-model="loginForm.username"type="text"auto-complete="off"placeholder="账号"><svg-iconslot="prefix"icon-class="user"class="el-input__icon input-icon"/></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="loginForm.password"type="password"auto-complete="off"placeholder="密码"@keyup.enter.native="handleLogin"><svg-iconslot="prefix"icon-class="password"class="el-input__icon input-icon"/></el-input></el-form-item><el-form-item prop="code" v-if="captchaOnOff"><el-inputv-model="loginForm.code"auto-complete="off"placeholder="验证码"style="width: 63%"@keyup.enter.native="handleLogin"><svg-iconslot="prefix"icon-class="validCode"class="el-input__icon input-icon"/></el-input><div class="login-code"><img :src="codeUrl" @click="getCode" class="login-code-img" /></div></el-form-item><el-checkboxv-model="loginForm.rememberMe"style="margin: 0px 0px 25px 0px">记住密码</el-checkbox><el-form-item style="width: 100%"><el-button:loading="loading"size="medium"type="primary"style="width: 100%"@click.native.prevent="handleLogin"><span v-if="!loading">登 录</span><span v-else>登 录 中...</span></el-button><div style="float: right" v-if="register"><router-link class="link-type" :to="'/register'">立即注册</router-link></div></el-form-item></el-form><!--  底部  --><div class="el-login-footer"><span><a href="http://8.136.213.245" target="_blank">Copyright © 2021-2022 开源字节 Open Source Byte All RightsReserved.</a></span></div></div>
</template><script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";export default {name: "Login",data() {return {codeUrl: "",loginForm: {username: "admin",password: "admin123",rememberMe: false,code: "",uuid: "",},loginRules: {username: [{ required: true, trigger: "blur", message: "请输入您的账号" },],password: [{ required: true, trigger: "blur", message: "请输入您的密码" },],code: [{ required: true, trigger: "change", message: "请输入验证码" }],},loading: false,// 验证码开关captchaOnOff: true,// 注册开关register: false,redirect: undefined,};},watch: {$route: {handler: function (route) {this.redirect = route.query && route.query.redirect;},immediate: true,},},created() {this.getCode();this.getCookie();},methods: {getCode() {getCodeImg().then((res) => {this.captchaOnOff =res.captchaOnOff === undefined ? true : res.captchaOnOff;if (this.captchaOnOff) {this.codeUrl = "data:image/gif;base64," + res.img;this.loginForm.uuid = res.uuid;}});},getCookie() {const username = Cookies.get("username");const password = Cookies.get("password");const rememberMe = Cookies.get("rememberMe");this.loginForm = {username: username === undefined ? this.loginForm.username : username,password:password === undefined ? this.loginForm.password : decrypt(password),rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),};},handleLogin() {this.$refs.loginForm.validate((valid) => {if (valid) {this.loading = true;if (this.loginForm.rememberMe) {Cookies.set("username", this.loginForm.username, { expires: 30 });Cookies.set("password", encrypt(this.loginForm.password), {expires: 30,});Cookies.set("rememberMe", this.loginForm.rememberMe, {expires: 30,});} else {Cookies.remove("username");Cookies.remove("password");Cookies.remove("rememberMe");}this.$store.dispatch("Login", this.loginForm).then(() => {this.$router.push({ path: this.redirect || "/" }).catch(() => {});}).catch(() => {this.loading = false;if (this.captchaOnOff) {this.getCode();}});}});},},
};
</script><style rel="stylesheet/scss" lang="scss">
.login {display: flex;// justify-content: center;align-items: center;flex-direction: column;height: 100%;background-image: url("../assets/images/login-background2.jpg");background-size: cover;
}
.login-logo {width: 200px;height: 24px;margin-right: 10px;padding-right: 10px;background-image: url("../assets/logo/logo_w.png");background-repeat: no-repeat;background-size: auto 24px;display: inline-block;vertical-align: middle;zoom: 1;position: absolute;left: 200px;top: 50px;span {line-height: 24px;font-size: 20px;height: 24px;padding-left: 30px;color: #ffffff;vertical-align: middle;font-weight: 600;}
}
.main-title {margin: 100px 0 0 0;height: 34px;text-align: center;color: #ffffff;background-image: url("../assets/logo/logo_w.png");background-repeat: no-repeat;background-size: auto 34px;display: inline-block;vertical-align: middle;zoom: 1;span {line-height: 34px;font-size: 34px;height: 34px;padding-left: 40px;color: #ffffff;vertical-align: middle;font-weight: 600;}
}
.sub-title {margin: 20px 0 60px 0;text-align: center;color: #ffffff;
}.login-form {border-radius: 6px;background: #ffffff;width: 400px;padding: 40px 40px 20px 40px;.el-input {height: 38px;input {height: 38px;}}.input-icon {height: 39px;width: 14px;margin-left: 2px;}
}
.login-tip {font-size: 13px;text-align: center;color: #bfbfbf;
}
.login-code {width: 33%;height: 38px;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: 38px;
}
</style>

若依框架----登录界面美化相关推荐

Android imagebutton美化+edittext美化实现登录界面美化
利用空闲时间开发app SUPER CLASS,前面已经完成构建app框架,接下来进入编码阶段. 第一步实现登录界面设计及编码先上效果图实现步骤创建rounded_editview.xml,实现 ...
html注册页面美化,css登录界面美化
本篇文章主要介绍如何用css美化网站登录界面,需要的小伙伴参考下. 代码如下: 美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .co ...
Tkinter登录界面美化(含背景图、代码注释)
首先给大家展示一下成品! 最近本poss哥自己写出了以上风格的登录界面.不得不说,因为tkinter内置库可设置组件的参数有限,UI界面我只能做到这一步啦. 等不及要完整代码的小伙伴可以在网盘链接下载 ...
python TCP服务器v1.8 - PyQt5登录界面美化+淡入淡出
TCP聊天服务器套接字v1.8 所有版本记录: v1.0 : TCP聊天服务器套接字|PyQt5+socket(TCP端口映射+端口放行)+logging+Thread(含日志,html)+anaco ...
linux终端界面美化,Ubuntu 18.04系统美化记录：Grub2\主题\登录界面\终端美化
初装Ubuntu 18.04系统后想美化操作系统,该怎么做?以下为你介绍Ubuntu 18.04美化一体化:Grub2美化.主题美化.登录界面美化.终端美化.以下美化仅是初级介绍,如果需要更多请看Li ...
vue框架搭建前端登录界面
使用vue框架搭建前端登录界面,用v-bind引入类,v-model实现数据绑定,v-on实现事件处理机制的处理. <!DOCTYPE html> <html lang=" ...
(三)SSO之CAS框架单点退出,退出到CAS登录界面
应需求的改变.CAS自己定义登录页面不安全,不再使用,于是我一下子回到了原点.在linux上部署上了没有加自己定义登陆界面的CAS,接下来開始改动CAS自己默认的登录界面为我们的界面. 一下子改动成功 ...
php登录界面模板美化,一款简单好看的登录界面——Typecho美化包 Sign-Page-For-Typecho...
Loading... 一款对Typecho后台登录的美化首发于 MBRBlog 和 Github ![ ][1] ---------- 源码包只有200KB,总体制作时间为一周,开发者为学生党,不定 ...
仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

若依框架----登录界面美化

若依框架----登录界面美化相关推荐

最新文章

热门文章