.login { width: 100%; height: 100%; background: url('../../../assets/images/caiji.jpg'); background-size:100% 100%; } .loginBox { width: 100%; height: 100%; background-color: #000; background: rgba(0,0,0,0.5);/*盒子背景透明*/ display: flex; /*!*flex-direction: column;*!可写可不写*/ justify-content: center; align-items: center; } .card { width: 500px; border-radius: 10px; padding-top: 25px; background-color: hsla(0,0%,100%,.8); text-align: center; box-shadow:0px 0px 10px 5px #333; } .cardheader{ margin-bottom: 10px; font-size: 26px; font-weight: 500; } .input { margin: 0 auto; position: relative; } .mat-form-field { width: 300px; } .position { margin-top: 5px; position: absolute; top: 15px; left: 75px; } .alert-danger { margin-bottom: 5px; text-align: left; padding-left: 100px; font-size: 12px; color: red; } .register { padding-left: 100px; text-align: left; a { font-size: 14px; color: #0066FF; } } .loginbtn { margin-top: 25px; margin-bottom: 25px; height: 30px; line-height: 30px; width: 280px; background-color:#039be5; border-radius: 15px; color: #fff; } //二维码 .forget:hover { .contactUs { opacity: 1; z-index: 1; transition: opacity 1.5s; } } .contactUs { opacity: 0; z-index: -999; position: fixed; top: 55%; left: 64%; width: 150px; border-radius: 5px;; img { width: 150px; height: 150px;} }