登录窗口样式_网页登录提示样式-CSDN博客

本文链接：https://blog.csdn.net/choorn/article/details/130883621

这段代码定义了一个全屏登录界面，背景为img.png，具有居中定位的容器。容器内部包含左右两个卡片，左侧卡片有标题和文本，右侧卡片包含一个输入框和按钮。使用了CSS样式进行布局和美化，如圆角、阴影、背景色和模糊滤镜效果。

摘要由CSDN通过智能技术生成

<style  scoped>

#login {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url('/img.png');
  background-size: 100% 100%;
  background-color: #a7a8bd;
}

#login #contain {
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25px;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(5px);
  box-shadow: -5px -5px 10px rgb(39, 65, 65),
  5px 5px 20px aqua;

}


#contain {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
}

#contain #left_card {
  width: 500px;
}

#contain #left_card h1 {
  color: rgb(17, 1, 1);
  white-space: nowrap;
}

#contain #left_card span {
  font-size: 1.2rem;
  text-align: center;
  color: white;
  white-space: nowrap;
}


#contain #right_card {
  width: 400px;
}

#contain #right_card .el-card {
  margin: 0 45px;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.1);

}

#right_card {
  display: flex;
  justify-content: center;
  align-items: center;
}

#right_card h2 {
  margin-bottom: 5px;
}

#right_card .login input {
  width: 80%;
  height: 45px;
  margin-top: 10px;
  border: 1px solid white;
  /*background-color: rgba(255, 255, 255, 0.5);*/
  border-radius: 10px;
  font-size: inherit;
  padding-left: 20px;
  outline: none;
}


.message {
  margin-top: 26px;
  font-size: 0.9rem;
  color: red;
}

.loginbtn {
  width: 60%;
  height: 35px;

}
</style>