vue3 可视化数据大屏引力云登录页
使用wowjs添加入场动画
记住密码功能
如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870
演示地址
代码风格
vue3+vite+js
vue3 可视化数据大屏引力云登录页效果图
动态效果
部分代码
<div class="LoginMain">
<div class="LoginMainInner">
<div class="Loginleft wow slideInDown">
<img src="./assets/logo_w2.png" alt="">
<h3>系统名称</h3>
<p>登录描述</p>
</div>
<div class="Loginright wow fadeInRight">
<div class="Loginright1">
<h3>用户登录</h3>
<div class="formInput">
<input v-model="username" type="text" placeholder="账号">
<img class="icon_user" src="./assets/icon_user.png" alt="">
</div>
<div class="formInput">
<input v-model="password" type="password" placeholder="密码">
<img class="icon_password" src="./assets/icon_password.png" alt="">
</div>
<div class="remember">
<rememberPwd ref="rememberPassword" v-model:password="username"
v-model:username="password"></rememberPwd>
</div>
<div class="loginbut" @click="goLogin">
登录
</div>
</div>
</div>
</div>
</div>
更新日志
2023年08月25日 v1.1
添加mockjs模拟接口交互实现登录 账号 wanjunshijie 密码 123456
async handleLogin() {
// 检查用户名和密码是否已被输入
if (!this.username || !this.password) {
// 如果没有输入用户名或密码,显示错误消息并退出函数
ElMessage.error('请输入用户名和密码');
return;
}
try {
// 使用用户输入的用户名和密码调用登录 API
const response = await login({username: this.username, password: this.password});
// 检查返回的响应码
if (response.code === 1) {
// 记住密码
this.$refs.rememberPassword.rememberPassword();
// 登录成功,重定向到主页
ElMessage({
message: '登录成功',
type: 'success',
})
} else {
// 登录失败,显示错误消息
ElMessage.error(response.message);
}
} catch (error) {
// 发生错误,显示错误消息
ElMessage.error('登录失败,请检查网络连接');
}
}
更多可视化数据大屏登录页
源码下载
项目基于vue3+vite+js开发 nodejs 14,购买代码请确保有相关开发基础
虚拟产品一经售出 概不退款请谅解