console 命令行工具 X clear

console

<body>
  <div class="login-wrapper">
    <div class="login-content">
      <h1>
        欢迎回来
      </h1>
      <div class="form-wrapper">
        <div class="form-content">
          <form>
            <div class="inputs">
              <input class="username errHightlight" type="text" placeholder="手机号码/账号" />
              <span class="errMsg active">请输入手机号码或账号</span>
              <span class="errMsg"></span>
              <input class="pwd errHightlight" type="password" placeholder="密码" />
              <span class="errMsg active">请输入密码</span>
              <span class="errMsg"></span>
              <div class="veriCode-wrapper active">
                <div class="veriCode-content">
                  <input class="errHightlight" type="text" placeholder="验证码" />
                  <div>
                    2333
                  </div>
                </div>
              </div>
              <span class="errMsg active">请输入验证码</span>
              <span class="errMsg ">验证码不正确, 请重新输入</span>
              <span class="errMsg ">账号不存在或密码错误, 请重新输入</span>
            </div>
            <button class="login-btn">
              登录
            </button>
          </form>
          <div class="otherActions">
            <a href="" class="resetPwd">
              忘记密码?
            </a>
            <span class="toRegister">
              还没有账户?
              <a href="">
                立即注册
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

*,
html,
body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, span, input, button, div, p{
  color: #444;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: linear-gradient(150deg, white, whitesmoke);
}

.login-wrapper {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 300px;
  height: 100%;
  /* border: 1px solid red; */
}

.login-content {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

h1 {
  margin-bottom: 20px;
  width: 100%;
}

.inputs{
  display: flex;
  flex-flow:column nowrap;
}

.inputs input {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 100%;
  height: 45px;
  margin: 8px 0;
  box-sizing: border-box;
  padding-left: 10px;
  font-size: 16px;
  background: #ddd;
  transition: all .2s ease;
}

input:hover {
  background: #eee;
  /* box-shadow: 0 0 8px lightblue; */
  /* outline: none; */
}

input:focus {
  background: #fff;
  box-shadow: 0 0 8px lightblue;
  /* outline: none; */
}

.veriCode-wrapper {
  display: none;
}

.veriCode-content {
  display: flex;
  flex: row nowrap;
  justify-content: space-between;
}

.veriCode-content input {
  border-radius: 2px 0 0 2px;
  border-right: none;
}

.veriCode-content div {
  background: #777;
  width: 60px;
  height: 45px;
  margin: 8px 0;
  line-height: 45px;
  padding: 0 15px;
  text-align: center;
  border-radius: 0 2px 2px 0;
  color: white;
  font-weight: bold;
  letter-spacing: 3px;
}

.login-btn {
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 45px;
  width: 100%;
  margin: 15px auto;
  font-size: 16px;
  font-weight: bold;
  color: white;
  letter-spacing: 10px;
  background: rgb(14, 175, 90);
  cursor: pointer;
  transition: .2s ease;
}

.login-btn:hover{
  background: rgb(13, 163, 83);
}

.login-btn:active{
  background: rgb(14, 175, 90);
}

.errMsg{
  display: none;
  font-size: 12px;
  border: 1px solid crimson;
  border-radius: 2px;
  height: 25px;
  line-height:25px;
  padding-left: 10px;
  margin: 5px 0;
  background: pink;
  color: crimson;
}

/* .errHightlight{
  border: 1px solid crimson!important;
} */

/* .active{
  display: block;
} */

.otherActions {
  font-size: 13px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding-bottom: 170px;
}