vue實現登陸單頁面

一 實現頁面的布局

 

 

1. 首先在components里建一個login.vue

<template>
    <div class=login_container>
         登陸組件
    </div>
</template>

<script>
    export default {

    }
</script>


<style>
</style>

2. 路由的設置 router下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 導入login路勁
import login from '@/components/login'


Vue.use(VueRouter)




export default new VueRouter({
       /* 設置路由 */
    routes:[
        { path: '/',redirect:'/login'},
        { path: '/login',component: login}
    ]
})

3. App.vue

<template>
    <div id="app">
                // *********
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
                name: 'app',
        components:{
    
        }
        
    }    
</script>

<style>
</style>    

4. 整體樣式

在assets新建一個global.css

html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}

在main.js導入

import './assets/css/global.css'

5. 修改login.vue

<template>
    <div class=login_container>
         登陸組件
         <div class="login_box"></div>
    </div>
</template>

<script>
    export default {

    }
</script>


<style>

.login_container{
    height: 100%;
    background-color: #2b4b6b;
}
.login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    
}
</style>

二 頁面繪制頭像

 

<template>
    <div class=login_container>
         登陸組件
         <div class="login_box">
             <!-- 頭像 -->
             <div class="avatar_box">
                 <img src="../assets/logo.png" alt="">
             </div>
             
         </div>
    </div>
</template>

<script>
    export default {

    }
</script>


<style>

.login_container{
    height: 100%;
    background-color: #2b4b6b;
}
.login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    
}
/* 頭像樣式開始 */
.avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left:50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
    }
.avatar_box img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
/* 頭像樣式結束 */
</style>

三 繪制登陸表單

 

 

 其實要實現上面的樣子 我們就用到了 element-ui 組件

有Button   Input     Form    FormItem 組件

我們是按需要導入 

我們在plugins文件下的element.js

import Vue from 'vue'
import { Button } from 'element-ui'
import { Input } from 'element-ui'
import { Form, FormItem } from 'element-ui'


Vue.use(Button)
Vue.use(Input)
Vue.use(Form)
Vue.use(FormItem)

在回到 login.vue

<template>
    <div class=login_container>
         登陸組件
         <div class="login_box">
             <!-- 頭像 -->
             <div class="avatar_box">
                 <img src="../assets/logo.png" alt="">
             </div>
             <!-- 表單 -->
             <el-form class="login_form">
                 <!-- 用戶名 -->
               <el-form-item>
                 <el-input></el-input>
               </el-form-item>
               <!-- 密碼 -->
               <el-form-item>
                 <el-input></el-input>
               </el-form-item>
               <!-- 按鈕 -->
               <el-form-item class="btns">
                   <el-button type="primary">登陸</el-button>
               </el-form-item>
            </el-form>
         </div>
    </div>
</template>

<script>
    export default {

    }
</script>


<style>

.login_container{
    height: 100%;
    background-color: #2b4b6b;
}
.login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    
}
/* 頭像樣式開始 */
.avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left:50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
    }
.avatar_box img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
/* 頭像樣式結束 */

.btns{
/*     position: absolute;
    right: 0; */
    display: flex;
    justify-content: flex-end;
    }
.login_form{
    position: absolute;
    bottom: 0;
    /* 占滿全屏 */
    width: 100%;
    /* 邊距會超出 用后面那句 box-sizing: border-box; */
    padding: 0 20px;
    box-sizing: border-box;
}
</style>