如何给管理页面添加header

src/components文件夹下面:
在这里插入图片描述

<template>
  <div :class="classObj" class="app-wrapper">
    <div style="background: red;color: #000;font-size: 18px;line-height: 30px;position: fixed;width: 100%;z-index: 2">test</div>
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" style="top: 30px;padding-bottom: 30px;" />
    <div :class="{hasTagsView:needTagsView}" class="main-container" style="background-image: linear-gradient(-90deg, #37b9e9, #a0bdb3);top: 30px;padding-bottom: 30px">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
    </div>
  </div>
</template>

在这里插入图片描述
上面已经改好了右侧的背景(遗留问题:面包屑部分会随着页面上下滚动而滚动,所以需要做一下固定,会在后面做讲解),
接下来是修改左侧路由菜单的背景样式。
最终要修改的地方是这里:
在这里插入图片描述

发布了29 篇原创文章 · 获赞 0 · 访问量 346
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览