一、页面效果

二、绘制页面

三、样式布局

.login {
  height: 100%;
  background-color: rgb(43, 75, 107);
}
.login_context {
  width: 450px;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);/*使元素居中 */
  border-radius: 10px;
  box-shadow: 0 0 5px 2px #ddd;
}
.login_logo {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -75px;
  left: 50%;
  margin-left: -82px;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff;
  padding: 10px;
  box-shadow: 0 0 3px 2px #fff;
}
.login_logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgb(238, 238, 238);
}
.login_box {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}

四、传递账号、密码给后台接口

五、写axios连接后台登录接口

axios的安装可自行百度

import axios from '../utils/axios'

// 登录
export function login(params) {
    return axios.get('/xxxx/xxxx', { params });
}