IVIEW构建个人博客（三）

IVIEW构建个人博客（三）

后台登录页

<template>
      <div class="form">
          <Icon type="md-arrow-back" @click="back" size="25"></Icon>
        <h1 style="
        text-align: center;
        color: #ffffff;
        font-weight: 300;
        margin: 0 0 40px;"
        >后台登录</h1>
        <form>
          <div class="input">
              <Input v-model="ye" placeholder="YourEmail*"/>
          </div>
          <div class="input">
              <Input v-model="pw" type="password" password placeholder="PassWord*" />
          </div>
          <p class="forgot"><a href="">忘记密码？</a></p>
          <button class="button button-block" value="post" @click="postInfo" >登陆</button>
        </form>
      </div>
</template>
<script>
  export default {
    data:{
			ye:'',
      pw:''
		},
		methods:{
      postInfo(){//发起post请求
        this.$http.post('URL', {
          ye:this.ye,
          pw:this.pw
        }, {emulateJSON:true}).then(result=>{
          console.log(result.body);
        })
      },
      back(){
        this.$router.push({ path:'./'  })
      }
		}
  }
</script>
<style >
  .form {
    background: rgba(19, 35, 47, 0.9);
    padding: 40px;
    max-width: 500px;
    margin: 40px auto;
    border-radius: 4px;
    box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
  }
  .input{
    display: block;
    margin: 5% 15% 5% 15%;
    width: 70%;
  }
  .forgot {
    text-align: right;
  }
  .button {
    border: 0;
    outline: none;
    border-radius: 3rem;
    padding: 15px 0;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: #1ab188;
    color: #ffffff;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-appearance: none;
  }
  .button:hover, .button:focus {
    background: #179b77;
  }
  .button-block {
    display: block;
    margin: 5% 10% 0 10%;
    width: 80%;
  }
</style>