weexpack 的 Login.vue 及 vue 的 Login.vue

1.登录页

weexpack  Login.vue

<!-- 登录页 -->
<template>
  <div class="wrapper">  
    <div class="login">  
      <div class="input-wrapper">  
        <input v-model="userNumber" class="input" type="text" placeholder="账号" autofocus="true" value=""/> 
        <image class="input-img" src="http://cdn-img.easyicon.net/png/11741/1174195.gif"></image>  
      </div>
      <div class="input-wrapper">  
        <input v-model="userPassword" class="input" type="password" placeholder="密码" value=""/>
        <image class="input-img" src="http://cdn-img.easyicon.net/png/11741/1174192.gif"></image>  
      </div>  
      <div class="input-wrapper">  
        <div class="input-login" @click="login">  
          <text class="input-login-text">登录</text>  
        </div>  
      </div>  
      <div class="input-wrapper">  
        <text class="input-forget" @click="findPassword">找回密码</text>  
        <text class="input-register" @click="register">立即注册</text>  
      </div>
    </div>
  </div>  
</template>  
  
<script>
  // 弹窗
  const modal = weex.requireModule('modal');
  
  module.exports = {  
    data(){  
      return{
        userNumber:'',  
        userPassword:''
      }
    },
    created () {
      //
    }, 
    methods:{ 
      /*找回密码*/  
      findPassword() {
        modal.toast({
          'message': '找回密码暂时未开发',
          'duration': 1
        });
      },
      /*注册*/  
      register() {
        modal.toast({
          'message': '注册暂时未开发',
          'duration': 1
        });
      },
      /*处理登录*/  
      login() {  
        if(!this.userNumber){
          modal.toast({
            'message': '请输入手机号',
            'duration': 1
          });
          return;  
        }else if(!this.userPassword.length){
          modal.toast({
            'message': '请输入密码',
            'duration': 1
          });
          return;  
        }
        // 登录成功
        modal.toast({
          'message': '登录成功',
          'duration': 1
        });
      }  
    }  
  }  
</script>  
  
<style scoped>
  /*整体框架 绝对定位*/
  .wrapper { 
    position: absolute;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;  
  }  
  .login{
     600px;
    height: 500px;
    /*垂直水平居中*/
    position: absolute;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;
    margin: auto;  
  }  
  .input-wrapper{  
     600px;
    margin-bottom: 30px;  
  }  
  .input {  
    font-size: 30px;  
    height: 80px;  
     600px;  
    padding-left: 90px;  
    padding-top: 15px;  
    padding-bottom: 15px;  
    border-1px;  
    border-color: #48c9bf;  
    border-radius:10px;  
    outline: none;  
  }  
  .input-img{  
    position: absolute;  
    top:10px;  
    left: 15px;  
     60px;  
    height: 60px;  
  }  
  .input-login{  
    height: 80px;  
     600px;  
    background-color: #48c9bf;  
    border-radius: 10px;  
    margin-top: 40px;  
  }  
  .input-login-text{  
    height: 80px;  
     600px;  
    text-align: center;  
    line-height: 80px;  
    color: white;  
    font-size: 35px;  
  }  
  .input-forget{  
    position: absolute;  
    left: 20px;  
    font-size: 30px;  
  }  
  .input-register{  
    position: absolute;  
    right: 20px;  
    font-size: 30px;  
  }
</style>

注：style上需要添加 scoped，否则无法自动适配。

vue  Login.vue

<!-- 登录页 -->
<template>
  <div class="login">
    <!-- 输入框 -->
    <div class="input-wrapper">
      <input v-model="userNumber" class="input" type="text" placeholder="账号" autofocus="true" value=""/>
      <img class="input-img" src="data:image/gif;base64,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" />
    </div>
    <div class="input-wrapper">
      <input v-model="userPassword" class="input" type="password" placeholder="密码" value=""/>
      <img class="input-img" src="data:image/gif;base64,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" />
    </div>
    <!-- 登录按钮 -->
    <div class="input-wrapper">
      <div class="input-login" @click="login">登录</div>
    </div>
    <!-- 其他操作 -->
    <div class="input-wrapper">
      <span class="input-forget" @click="findPassword">找回密码</span>
      <span class="input-register" @click="register">立即注册</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Login',
    data(){
      return{
        userNumber:'',
        userPassword:''
      }
    },
    mounted () {
      // 隐藏tab栏
      this.$store.dispatch('hideTabBar');
    },
    methods:{
      /*找回密码*/
      findPassword() {
        this.$toast.center('找回密码暂时未开发');
      },
      /*注册*/
      register() {
        this.$toast.center('注册暂时未开发');
      },
      /*处理登录*/
      login() {
        if(!this.userNumber){
          this.$toast.center('请输入手机号');
          return;
        }else if(!this.userPassword){
          this.$toast.center('请输入密码');
          return;
        }
        /*登录成功*/
        this.$toast.center('登录成功!');
        // 跳转home
        this.$router.push({path:'/'});
      }
    }
  }
</script>

<style scoped>
  .login{
     100%;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .input-wrapper{
     90%;
    margin: 0px auto 30px;
    position: relative;
  }
  .input {
    font-size: 16px;
    height: 44px;
     100%;
    border-1px;
    border-style: solid;
    border-color: #48c9bf;
    border-radius:5px;
    outline: none;
    text-indent:2.5em;
  }
  .input-img{
    position: absolute;
    top:6px;
    left: 5px;
     30px;
    height: 30px;
  }
  .input-login{
    height: 44px;
    line-height: 44px;
     100%;
    background-color: #48c9bf;
    border-radius: 6px;
    color: white;
    font-size: 16px;
    text-align: center;
  }
  .input-forget{
    position: absolute;
    left: 0px;
    font-size: 16px;
  }
  .input-register{
    position: absolute;
    right: 0px;
    font-size: 16px;
  }
</style>

　　

2.效果图