用vue写透明登录界面（代码+透明显示不出来的问题改正）

wyw在路上

已于 2023-12-16 23:46:49 修改

阅读量1.6k

点赞数 34

文章标签： vue.js javascript elementui java 用户界面

于 2023-12-16 23:42:06 首次发布

本文链接：https://blog.csdn.net/m0_68325382/article/details/135039579

版权

一、首先来看代码实现，这就是用vue写的一整个界面

二、接下来是如果没成功显示透明框的问题分析

1.就是style里面有scoped

2.在el-input没有写input

3.大家可以选择一下，如果这些都不行的话，看看div的class是不是设置错了，或者是不是写了两个color属性。我发现在el-input里面color和background-color都可以修改颜色，不要同时写两个喔

PS：碎碎念时间

一、首先来看代码实现，这就是用vue写的一整个界面

(关于不透明的报错修改在后面）

<script>
export default {
  name: "Login”, 
  /*这里改成自己vue文件的名字，好像不改也行，反正我之前偷懒不改也没报错*/
  data(){
    return{
      img: require('@/assets/R-C.jpg’),
      /*这里单引号里面改成自己图片的refrence*/
      uname: '',
      upassword: ''
    }
  },
  methods:{

  }
}
</script>

<template>

    <div class="login">
      <img :src="img" width="100%" height="100%" />

      <div class="loginPart">
        <h2>用户登录</h2>
        <el-form>
          <div>
            <el-input   v-model="uname" placeholder="请输入用户名"></el-input>
          </div>
          <div class="inputElement">
            <el-input   v-model=“upassword" placeholder="请输入密码"></el-input>
          </div>
          <div>
            <el-button type="primary" >登录</el-button>
            <el-button type="primary" >注册</el-button> 
            /*这里我偷了个懒，其实最好写在两个div里*/
          </div>
          <div style="text-align: right;color: white;">
            <el-link type="warning">忘记密码？</el-link>
          </div>
        </el-form>
      </div>
    </div>

</template>

<style >
.loginPart{
  position:absolute;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%);
  width:400px;
  padding:50px;
  background: rgba(0,0,0,.5);
  box-sizing:border-box;
  box-shadow: 0px 15px 25px rgba(0,0,0,.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius:15px;
  /*边框圆角，四个角均为15px*/
}
.loginPart h2{
  margin:0 0 30px;
  padding:0;
  color: white;
  text-align:center;
  /*居中*/
}
.loginPart .inputbox {
  position:relative;
  color:black ;
}

.el-input input {
  width: 100%;
  padding:10px 0;
  font-size:16px;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 30px;
  border:none;
  border-bottom: 1px solid #fff;
  outline:none;
  background: transparent;
  /*输入框背景颜色为透明*/
}

.login{
  width:100%;
  height:100%;
}
</style>

最后呈现的样子是这样