vue3 数据可视化大屏登录页 - 能源供热分析大屏登录

入场动画

宽高自适应

记住密码

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

演示地址

vue3 数据可视化大屏登录页 - 能源供热分析大屏登录

代码风格

vue3+vite+js

vue3 数据可视化大屏登录页 - 能源供热分析大屏登录

动态效果

部分代码

<template>
  <div class="login login33">
    <div class="login33videoBg">
      <video id="video" loop="true" muted class="videoBg" autoplay="autoplay" controls="controls">
        <source src="./assets/bg.mp4" type="video/mp4"/>
      </video>
    </div>
    <div class="loginbody">
      <div class="loginbodyr" ref="loginbody">
        <item>
          <div class="logintitle wow fadeInDown" data-wow-delay="0.3s" ref="title">能源供热分析大屏登录</div>
          <div class="w100 wow fadeInLeft" data-wow-delay="0.9s" ref="usernameContainer">
            <el-input
                placeholder=""
                ref="username"
                class="logininput"
                v-model="username">
            </el-input>
          </div>
          <div class="w100 wow fadeInRight" data-wow-delay="1.2s" ref="passwordContainer">
            <el-input
                class="logininput"
                placeholder=""
                ref="password"
                type="password"
                v-model="password">
            </el-input>
          </div>
          <div class="remember wow fadeInUp" data-wow-delay="1.5s">
            <div class="rememberl">
              <rememberPwd ref="rememberPwd" v-model:password="password" v-model:username="username"></rememberPwd>
            </div>
            <div class="forget" @click="forget">忘记密码？</div>
          </div>
          <div class="w100 wow fadeInUp" data-wow-delay="1.8s" ref="loginButContainer">
            <el-button ref="loginBut" @click="handleLogin" class="loginBut" type="primary">登录</el-button>
          </div>
        </item>
      </div>
    </div>
    <!--    回车登录监听-->
    <monitorEnter @monitorEnter="handleLogin"></monitorEnter>
  </div>
</template>

更新日志

2024年03月23日

增加普通html版本

更多可视化数据大屏登录页

33款 vue3 数据可视化大屏登录页下载

项目应用

vue3 可视化数据大屏 能源供热分析大屏登录

vue3 数据可视化大屏登录页 - 能源供热分析大屏登录下载

项目基于 vue3+vite+js nodejs 16 环境开发

普通html版本

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