[真传弟子]JS-赵立鼐|2019年12月29日的日报-技能树.IT修真院

发表于： 2019-12-29 23:18:31

1 1325

今日完成：

将登陆页面放入angular框架中：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登陆</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scale=no">
</head>
<body>
<div class="outer">
  <span>萝卜多后台登陆</span>
  <label for="username">
    <input #usernameRef type="text" id="username" placeholder="用户名">
  </label>
  <label for="password">
    <input #passwordRef type="text" id="password" placeholder="密码">
  </label>
  <button id="log_btn" (click)="login(usernameRef.value,passwordRef.value)">登陆</button>
</div>

</body>
</html>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {


  login(username,password) {
    console.log("u:"+username+"p:"+password);
  }

  constructor() { }

  ngOnInit() {
  }

}

html{
  height: 100%;
}


body {
  margin: 0;
  background-image: url("../../assets/js5_1.png");
  background-size: cover;
  background-position: 0,0;
  background-repeat: no-repeat;
}


.outer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 30%;
  height: 40%;
  min-width: 300px;
  background-color: #d3d7de;

}


span {
  font-size: 30px;
  color: #03a9f4;
}

label {
  height: 40px;
  width: 80%;
}
input{
  padding-left: 20%;
  height: 100%;
  width: 100%;
  background-color:#fff;
  border: 0 none;
}
#username {
  background-image: url("../../assets/js5_user.png");
  background-position: 20px,0;
  background-repeat: no-repeat;
}
#password {
  background-image: url("../../assets/js5_psd.png");
  background-position: 20px,0;
  background-repeat: no-repeat;
}

.u-icon {
  width: 100px;
}

button{
  width: 80%;
  border: 0 none;
  border-radius: 5px;
  background-color: #03a9f4;
  color: #fff;
  padding: 10px 0;
}