vue登录框半透明写法

<template>
<div><div class="background"><img :src="imgSrc" width="100%" height="100%" alt=""/></div><div class="login_container"   ><!-- 登录块 --><div class="login_box"><!-- 表单区域 --><h2  >带电作业中心</h2><el-form ref="loginFormRef" :model="loginForm"   :rules="loginRules" :v-model="login" class="login_form" label-width="0"><!-- 用户id --><el-form-item prop="id"><el-input v-model="loginForm.id" prefix-icon="iconfont icon-yonghu" class="in"></el-input></el-form-item><!-- 密码 --><el-form-item  prop="password"><el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima"  show-password class="in"></el-input></el-form-item><!-- 按钮 --><el-form-item  class="btns"><el-button type="primary" @click="login" >提交</el-button><el-button type="info" @click="resetLoginForm()">重置</el-button></el-form-item></el-form></div></div>
</div>
</template><script>
export default{data(){return {imgSrc:require('../assets/sea.jpg'),//表单数据loginForm:{id:"1",password:"123456"},//验证对象loginRules:{//校验idid:[{ required: true, message: '用户id为必填项', trigger: 'blur' },{ min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }],//校验密码password:[{ required: true, message: '用户密码为必填项', trigger: 'blur' },{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }],},};},methods: {resetLoginForm(){//重置用户名和密码方法this.$refs.loginFormRef.resetFields();},login(){this.$refs.loginFormRef.validate(async valid =>{//1.验证失败则结束if(!valid) return;const {data:res} = await this.$http.post("login",this.loginForm);//2.是否登入后台if(res.flag=="ok"){//3.登陆成功，跳转到首页this.$message.success("操作成功");//4.存储user信息window.sessionStorage.setItem("user",res.user);console.log(res.user);window.sessionStorage.setItem("userid",res.user.id);//5.进入首页this.$router.push({path:"/home"});}else{this.$message.error("操作失败");}})},},}
</script><style  scoped>
.login_container{background-color:palegreen;}
.login_box{width: 450px;height: 300px;/* background-color: #ffffff; */background: rgba(255,255,255,0.3);border: 1px solid black;opacity: 0.85;filter: alpha(opacity=90);border-radius: 20px;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);}
.avatar_box{width: 130px;height: 130px;border:-30px solid #eee;border-radius: 50%;padding: 0px;box-shadow: 0 0 2px #ddd;left:50%;}
.btns{display: flex;justify-content: space-around;
}
.login_form{position: absolute;bottom: 0%;width: 100%;border: 30px;
}
.background{width:100%;  height:100%;  /**宽高100%是为了图片铺满屏幕 */z-index:-1;position: absolute;
}
.in{margin-left: 10%;margin-right: 10%;width: 350px;
}
h1,h2,h3{font-size:xxpx;color:rgb(7, 7, 7);text-align:center;}
</style>

1.利用background:rgba(255,255,255,0.3)

2.把background:rgba(255,255,255,0.3)注释掉，把上一排的注释撤回也可以实现

页面演示

vue登录框半透明写法相关推荐

Vue前端项目-登录组件-登录框界面
目录 1.登录框组件设计 1.1 表单元素组件注册 1.2 登录组件的结构和样式 2.Icon 图标 2.1 拷贝 font 文件夹到 asserts 目录 2.2 引入 font 的 css 样式 ...
JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
vue单选框选中_使用vue如何默认选中单选框
使用了vue以后,发现这真的是一个灵活高效的框架,能够轻松实现页面的实时刷新. 那么,今天先聊聊单选框的使用.一般我们使用单选框,会这么写: //HTML one two three 有"c ...
2023-01-26 JS设计模式-单例模式:单例模式的原理和实现,懒汉模式和饿汉模式,单例模式实现登录框
文章目录 1.什么是单例模式? 介绍特点结构 2.如何实现一个单例模式? 思路实现代码 3.单例模式的优缺点 4.懒汉模式和饿汉模式懒汉模式:一开始不会实例化,什么时候用才new出来实例化饿 ...
pyQt 每日一练习 -- 登录框
#coding=utf-8#第一个练习,登录框import sys from PyQt4 import QtGui,QtCore#登录框 class LoginBox(QtGui.QWidget):d ...
SharePoint 客户端经常弹出Windows验证登录框问题
场景描述: Site工作人员UserA创建了一个Task,并且Assign给UserB.UserB接到来自Task List的邮件通知.这时UserA发现Assign的人错了,重新修改Task Ite ...
JavaScript实现鼠标拖拽登录框
拖拽的本质是登录框获得光标的偏移来调整自身的偏移. 拖拽发生时,光标相对盒子的坐标不会变化,相对于页面的坐标却在变化,二者的差值就是盒子需要的. 两个注意点: 1. 赋值给盒子的什么属性 outer. ...
linux agetty 登录框进程简介
有时候在 "ps aux" 命令的输出中,可以看到以下进程: /sbin/agetty --noclear tty1 linux 这个进程是怎么来的? 在系统起来之后,屏幕上会出现 ...
登录框显示,错误:Cookies因预料之外的输出被阻止
登录框显示,错误:Cookies因预料之外的输出被阻止,为什么刚建完新站就会出现这样的错误了,老蔡根据几天思考总结,分享给大家解决: 错误:cookies因预料之外的输出被阻止.要获取帮助,请参见此 ...

vue登录框半透明写法

vue登录框半透明写法相关推荐

最新文章

热门文章