从0-1开发一个Vue3前端系统页面-3.页面布局2

页面布局2：Header、Content、Footer详细设计

注:本Demo使用的组件均为个人选择,并非必须

1.Header.vue

1.去组件库找一个Menu菜单组件

复制源码至文件进行修改并设计

<template>
    <div class="header-container">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect" router>
            <el-menu-item index="myBlog">博客</el-menu-item>
            <el-menu-item index="perCenter">博客园</el-menu-item>
            <el-menu-item index="2">草稿箱</el-menu-item>
            <el-menu-item index="3">回收站</el-menu-item>
        </el-menu>
        <div class="avator_div">
            <el-avatar class="avatar" shape="circle" :size="55"
                src="https://n.sinaimg.cn/sinakd20116/96/w2048h2048/20240323/24a7-52a54c327350fe430e27f8b5847a0bf5.jpg"></el-avatar>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Header',
    data() {
        return {
            activeIndex: '0',
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>

<style lang="scss" scoped>
.header-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-menu-demo {
        flex-grow: 1;
    }

    .avator_div {
        position: absolute;
        width: 200px;
        right: 0;
        top: 0;

        .avatar {
            float: left;
        }
    }

}
</style>

2.Content.vue

<template>
    <div class="app-main">
        <router-view v-slot="{ Component }">
            <component :is="Component" />
        </router-view>
    </div>
</template>
<script>
export default {
    name: 'Content',
    data() {
        return {}
    }
}
</script>
<style>
.app-main {
    width: 80%;
    margin: 0 auto;
    min-height: calc(100vh - 84px);
}
</style>

3.Footer.vue

<template>
    <a href="#">@Demo级项目最终解释权归个人所有</a>
</template>
<script>
export default {
    name: 'Footer'
}
</script>
<style lang="scss" scoped>
a {
    font-size: 12px;
    text-decoration-line: none;
    color: rgb(129, 132, 139);
}
</style>

4.去除右侧滚动条

在public文件夹下打开index.html文件加入样式

<style>
  #app {
    overflow-y: scroll;
    /* 保留滚动功能 */
    height: calc(100vh - 60px);
    /* 设置高度，例如减去头部的高度 */
    max-height: 100%;
    /* 最大高度为 100% */
  }

  #app::-webkit-scrollbar {
    width: 0;
    /* 隐藏滚动条宽度 */
  }

  /* 可选：隐藏滚动条轨道 */
  #app::-webkit-scrollbar-track {
    display: none;
  }

  /* 可选：隐藏滚动条滑块 */
  #app::-webkit-scrollbar-thumb {
    display: none;
  }
</style>

5.修改Index.vue文件部分样式

<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <Header></Header>
            </el-header>
            <el-container>
                <el-main>
                    <Content></Content>
                </el-main>
                <el-footer class="footer">
                    <Footer></Footer>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import Footer from '@/components/layout/Footer.vue'
import Header from '@/components/layout/Header.vue'
import Content from '@/components/layout/Content.vue'
export default {
    name: 'Index',
    components: {
        Footer,
        Header,
        Content
    },
    data() {
        return {
        }
    }
}
</script>
<style scoped lang="scss">
.common-layout {
    height: 100%;

    .header,
    .footer {
        position: sticky;
        z-index: 1000;
        background-color: #fff;
    }

    .header {
        top: 0;
        min-height: 60px;
    }

    .footer {
        bottom: 0;
        border-top: 1px solid rgb(220, 223, 230);
        max-height: 20px;
    }


}
</style>

 6.最终效果图