简单实现登录页面

1、Vue实现登录页面

  <div class="login_bd">
      <form>
        <div class="itemPhone">
          <div class="left">
            <span class="text">用户名：</span>
            <input
              class="input"
              v-model="user.mobile"
              placeholder="请输入手机号码"
            />
          </div>
        </div>
        <div class="itemPhone">
          <div class="left">
            <span class="text">密 码：</span>
            <input
              class="input"
              v-model="user.password"
              placeholder="请输入密码"
              type="password"
            />
          </div>
        </div>
        <div class="submit">
          <button >立即登录</button>
        </div>
        <div class="sign">
          <router-link to="/register">未有账号?请注册</router-link>
        </div>
      </form>
    </div>

css样式：

  .login_bd {
    width: 95%;
    margin: 50px auto 0;
    background: #fff;
    border-radius: 7px;
    height: 260px;

    .itemPhone {
      padding: 10px 20px 0 20px;

      .left {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #c5c8ce;

        .text {
          text-align: right;
          text-align-last: right;
        }

        .input {
          flex: 1.1;
          padding: 20px 0 20px 15px;
        }
      }

      .right {
        flex: 0.9;

        button {
          font-size: 14px;
          background: #05C7BE;
          color: #fff;
          border-radius: 5px;
          height: 35px;
          line-height: 35px;
        }
      }
    }

    .submit {
      padding: 20px 20px 10px 20px;

      button {
        border-radius: 5px;
        background: #05C7BE;
        color: #fff;
        width: 100%;
        height: 40px;
        border: none;
      }
    }

    .sign {
      float: right;
      font-size: 14px;
      padding: 10px 20px 0 0;
      color: #808695;
      text-decoration: underline;
    }
  }

2、uniapp小程序登陆页面：

    <view class="login">
      <form @submit="formSubmit">
        <view class="itemPhone" v-for="item in formContent" :key="item.id">
          <view class="left">
            <text :class="item.icon + ' ' + 'iconfont'" />
            <input
              class="input"
              :placeholder="item.placeholder"
              :name="item.name"
              :value="item.value"
              :password="item.password"
              :maxlength="item.maxlength"
              @input="changeInput($event, item.name)"
            />
            <view class="right" v-if="item.name === 'code'">
              <button @click="countDown" class="code" v-if="!isCountdown">
                获取验证码
              </button>
              <button class="isCountdown" v-else>{{ times }}S</button>
            </view>
          </view>
        </view>
        <view class="submit">
          <button form-type="submit">立即登录</button>
        </view>

        <view class="signList" v-if="showCode">
          <text @click="toPassword('code')">短信登录</text>
        </view>
        <view class="signList" v-else>
          <text @click="toPassword('')">密码登录</text>
        </view>
        <view class="sign">
          <text @click="toRegister">注册用户</text>
        </view>
      </form>
    </view>

formContent的数据格式如下：
const formContent= [
  {
    id: 1,
    title: '手机号',
    name: 'mobile',
    type: 'text',
    placeholder: '请输入您的手机号',
    err: false,
    maxlength: 11,
    msg: '',
    value: '',
    icon: 't-icon iconshoujitongxun',
    password: false
  },
  {
    id: 2,
    title: '验证码',
    name: 'code',
    placeholder: '请输入您的验证码',
    maxlength: 6,
    err: false,
    msg: '',
    value: '',
    icon: 't-icon iconyanzhengma',
    password: true
  }
];

css样式：

  .login {
    width: 95%;
    height: 540px/2;
    margin: 0 auto;
    background: #fff;
    border-radius: 7px;
    margin-top: -40px;
    .itemPhone {
      padding: 10px 20px 0 20px;
      .left {
        display: flex;
        align-items: center;
        border-bottom: 1px solid @border-color;

        .input {
          flex: 1.1;
          padding: 20px 0 20px 15px;
        }
      }

      .right {
        flex: 0.9;

        button {
          font-size: 14px;
          background: @primary-color;
          color: #fff;
          border-radius: 5px;
          height: 35px;
          line-height: 35px;
        }
      }
    }
    .submit {
      padding: 20px 20px 10px 20px;

      .hoverClass {
        background: @primary-hover-color;
      }

      button {
        border-radius: 5px;
        background: @primary-color;
        color: #fff;
      }
    }
    .sign {
      float: right;
      font-size: 14px;
      padding: 10px 20px 0 0;
      color: @sub-color;
      text-decoration: underline;
    }
  }