小程序实战Flex布局(6) 通用的登录界面布局

效果

image.png

login.wxml

    <view class='container_login'>

      <view class='header'>
        <image src='{{headerimg}}' class='header-img'></image>
      </view>

      <view class='content'>
        <view class='input'>
          <view class='account'>
            <text>账号 </text>
            <view class='line'></view>
            <input></input>
          </view>
          <view class='password'>
            <text>密码 </text>
            <view class='line'></view>
            <input password='true'></input>
          </view>
        </view>
        <view class='commit'>
          <button>登 录</button>
        </view>
      </view>

      <view class='footer'>
        <view class='userTip'>
          <text>忘记密码</text>
          <text>新用户注册</text>
        </view>
      </view>

    </view>

login.wxss

  /* pages/login/login.wxss */

  page {
      height: 100%;
  }

  .container_login {
    display: flex;
    height:100%;
    width: 100;

    flex-direction: column;
    align-items: center;

    background-color: #f8f8f8;
  }

  .header {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-img{
    width: 80px;
    height: 80px;
    border: 1px solid gainsboro;
    border-radius: 50%;
  }

  .content {
    width: 100%;
  }

  .content .input {
    width: 100%;
    background: #fff;
  }
  .input text{
    font-size: 15px;
  }
  .input input{
    flex: 1;

  }
  .line{
    height: 15px;
    margin: 5px 5px 5px 10px;
    border-left: 1px solid gainsboro;
  }
  .account {
    display: flex;
    padding: 8px;
    align-items: center;
    border-bottom: 1px solid lightgray;
  }

  .password {
    padding: 8px;
    display: flex;
      align-items: center;
  }

  .commit button {
    margin: 10px 20px 10px 20px;
    background: #5da3ed;
    font-size: 15px;
    color: white;
  }

  .footer {
    width: 100%;


  }

  .userTip {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .userTip  text {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 13px;
    color: #5da3ed;
  }

Github源码