22.（前端）登录组件布局

1.设置全局样式

鼠标放到html上，发现Login的组件只占全屏的一小部分，所以设置一个全局样式
src/assets/css/global.css

/* src/assets/css/global.css */
/* 由于在添加组件过程中发现，html并没有占满整个屏幕，设置全局样式 */
html,body,#app{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    /* background-color: black; */
    background-color: #FF8C00;
}
}

3.引入全局样式

import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'
import Login from "../components/Login.vue"
// 引入全局样式
import '../assets/css/global.css'

Vue.use(VueRouter)

const routes = [
  // 为login组件创建路由
  {
    path:'/login',
    name:'Login',
    compoent: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

2.设置登录的小窗口

src/components/Login.vue

<template>
    <div class="login_container">
        <div class="login_box"></div>
    </div>
</template>

<script>
// 默认导出
export default{
    name:'Login'
}
</script>

<style lang="less" scoped>
/* 
scpoed：只针对当前组件的样式
less：语法格式
 */
 .login_container{
    // color: #FF8C00; 
    // background-color: #FF8C00;// 百度搜索颜色值
 }
//  设计登录的方框
 .login_box{
    width: 450px;
    height: 300px;
    // 圆角
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    // 定位方框位置
    transform:translate(-50%,-50%);
 }
</style>