vue3 视频监控智能分析系统登录页

使用wowjs添加入场动画
使用百分比写法结合postcss-pxtorem实现宽高自适应

使用threejs实现页面底部波浪动画效果

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

演示地址

vue3 视频监控智能分析系统登录页

关联项目

vue 数据大屏 视频监控智能分析系统

代码风格

vue3+vite+js

效果截图

动态效果

部分代码

  <div class="login">
    <div class="loginbody">
      <div class="loginbodyr wow slideInDown">
        <div class="logintitle">统一身份认证平台</div>
        <div class="logindesc">Unified identity authentication platform</div>
        <el-input
            placeholder=""
            class="logininput"
            v-model="form.userinfo">
          <img slot="prefix" src="./assets/icon-user.png" alt="">
        </el-input>
        <el-input
            class="logininput"
            placeholder=""
            type="password"
            v-model="form.password">
          <img slot="prefix" src="./assets/icon-password.png" alt="">
        </el-input>
        <el-button @click="goHome" class="loginbut" type="primary">登录</el-button>
      </div>
    </div>
    <waves></waves>
    <cfooter></cfooter>
  </div>

更新日志

2023年09月28日 v1.3

gsap动画改为wow.js动画

回车登录触发登录

2023年08月20日 v1.2

使用gsap增加动态效果

2023年08月12日 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 视频监控智能分析系统登录页源码下载

请注意当前页面纯前端登录页，没有内页