Vue_shop学习22：home页面的Header布局

最新推荐文章于 2024-07-28 22:02:05 发布

¡Venceremo

最新推荐文章于 2024-07-28 22:02:05 发布

阅读量203

点赞数

分类专栏： Vue_shop 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_47295886/article/details/130207658

版权

Vue_shop 专栏收录该内容

93 篇文章 3 订阅

订阅专栏

给home.vue的el-header部分添加样式

<template>
   
        <el-container class="home-container">
            <!-- el-header头部区域 -->
            <el-header>
                <div>
                    <img src="../assets/home页面.jpg" alt="">
                    <span>电商后台管理系统</span>
                </div>
                <el-button type="info" @click="logout">退出</el-button>
            </el-header>
            <!-- el-container主体区域 -->
            <el-container>
                <!-- el-aside侧边栏 -->
              <el-aside width="200px" style="color: #fff;">
               dddddddcc
              </el-aside>
              <!-- el-main右侧内容 -->
              <el-main>Main</el-main>
            </el-container>
          </el-container>
      
    
</template>
<script>
    export default{
        methods: {
            logout(){
                window.sessionStorage.clear()
                this.$router.push('/login')//重定向到登录页面
            }
        },
        
    }
</script>
<style lang="less">
    .home-container{
        /* 实现全屏 */
        height: 100%;
    }
    .el-header{
        background-color: #343d41;
        display: flex;
        justify-content: space-between;/*此时会留有空白*/
        padding-right: 20px;
        align-items: center;/*按钮上下居中*/
        /*文本*/
        color: #fff;
        font-size: 20px;
         >div{
            /*文本居中*/
            display: flex;
            align-items:center;
           
            span{
                margin-left: 15px;
            } 

        } 
       
    }
    .el-aside{
        background-color: #333744;
    }
    .el-main{
        background-color: #eaedf1;
    }
</style>