从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战十（整体布局03之界面美化）

豆约翰

已于 2024-06-13 14:48:07 修改

阅读量707

点赞数 22

分类专栏：手把手Element Plus管理后台项目实战文章标签： typescript javascript 前端

于 2024-06-13 14:05:37 首次发布

本文链接：https://blog.csdn.net/douyh/article/details/139652720

版权

手把手Element Plus管理后台项目实战专栏收录该内容

22 篇文章 10 订阅

订阅专栏

删除style.css

删除style.css(和main.ts同级)

并且注释掉main.ts中对style.css的导入。

修改App.vue

添加样式设置高度100%

安装sass

pnpm install -D sass

修改PageSidebar.vue

修改index.vue

修改src/layout/index.vue

src/layout/index.vue添加样式

<style lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  > header {
    height: 54px;
    background: #000;
    color: #fff;
  }

  > main {
    display: flex;
    flex: 1;
    overflow: auto;

    > .left {
      height: 100%;
      background-color: #000;
      color: #fff;
    }
    > .right {
      flex: 1;
      overflow: hidden;
      background-color: #f5f7f9;
      > .main-body {
        padding: 16px 16px 30px;
        overflow: auto;
        height: 100%;
        box-sizing: border-box;
      }
    }
  }
}
</style>