03 编写登录页面

1 编写最外层div样式，让其html上下左右居中

#login {

  position: absolute;

  width: 500px;

  height: 400px;

  top: 50%;

  left: 50%;

  margin-top: -200px;

  margin-left: -250px;

  border: 1px solid red;

}

刷新页面看下效果

 在elementui官网找一个表单案例

把代码copy到Login.vue中

  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    取消
  

先来看下页面效果

只保留两个input框（用户名和密码），一个登录按钮

代码如下：

    
      
        
      
      
        
      
      
        立即创建
      
    

页面效果如下

很明显样式还不太行，加上标题，样式

通过官方文档，element-ui可以用 :span来控制input宽度

 修改代码

 

 再看下页面效果，基本效果达到了