Day05--布局组件整体样式的开发--基于stylus

• 修改 webstorm 设置 -> 编辑器 -> 代码样式 -> JavaScript 将制表符大小、缩进、连续缩进设置为2，以符合ESLint规范
• 修改 代码样式 -> 样式表 中 Stylus 缩进都改为2
• 修改 其他文件类型 制表符与缩进都改为2
• 修改 编辑器 -> 常规 -> 智能建 将 Enter 下的智能缩进取消勾选
• 在 assets 下新建 styl -> index.styl 文件，并在 index.styl 中添加样式

// 页面整体布局样式
body
  height 100%
  -moz-osx-font-smoothing grayscale
  -webkit-font-smoothing antialiased
  text-rendering optimizeLegibility
  font-family Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif
  margin 0
  color #666
  overflow-y hidden  // 滚动条隐藏

label
  font-weight 700

html
  height 100%
  box-sizing border-box

#app
  height 100%

*,
*:before,
*:after
  box-sizing inherit

.no-padding
  padding 0px !important

.padding-content
  padding 4px 0

a:focus, a:active
  outline none

a, a:focus, a:hover
  cursor pointer
  color inherit
  text-decoration none

div:focus
  outline none

ul
  list-style none
  padding 0

.fr
  float right

.fl
  float left

.pr-5
  padding-right 5px

.pl-5
  padding-left 5px

.block
  display block

.pointer
  cursor pointer

.inlineBlock
  display block

.clearfix
  &:after
    visibility hidden
    display block
    font-size 0
    content " "
    clear both
    height 0

• 安装 stylus 依赖

    npm i -D stylus stylus-loader@3
  

• 在 main.js 中引入 index.styl 文件

• 运行项目，如果报错需要查看安装依赖时的 cd 目录是否在项目根目录下，如果在项目根目录外又生成了新的 package.json 则证明项目安装目录有误

• 在 layout.vue 的 style 中设置页面整体布局样式

<style scoped lang="stylus">
  // 页面整体布局样式
  .layout-wrapper
    position relative
    background #304151
    height 100%
    overflow-y auto // Y轴方向内容超出自动增加滚动条
  // 左侧边栏容器样式
  .sidebar
    position fixed
    top 0
    bottom 0
    left 0
    background #304151
    color #bfcbd1
    width 180px
  // 右侧区域样式
  .main-container
    height 100%
    overflow-y auto
    margin-left 180px
    background #f0f2f5
</style>

• 在 Navbar.vue 中设置顶部标签栏样式

<style scoped lang="stylus">
  // 顶部标签栏样式
  .navbar
    height 50px
    line-height 50px
    background-color #fff
    boder-bottom 1px solid #E6E6E6  // 底部线条
</style>

• 在 Tags.vue 中设置顶部面包屑导航栏样式

<style scoped lang="stylus">
  // 面包屑导航样式
  .page-tags-container
    position relative
    z-index 9
    color #495060
    height 34px
    line-height 34px
    background #fff
    padding 3px 1px 1px 1px  // 边距 上 右 下 左
    font-size 12px
    border-bottom 1px solid #d8dce5 // 下边框
    box-shadow 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04) // 阴影
</style>

• 在 PageContainer.vue 中设置中部页面内容样式

<style scoped lang="stylus">
  // 页面容器
  .page-container
    position relative
    height calc(100% - 84px) // 减去上部高度
    background #f0f2f5
    margin 0 12px
    padding-top 12px
    .page-wrapper
      position absolute
      width 100%
      height calc(100% - 24px)
      .page-content
        padding 12px
        background #fff
        margin-bottom 12px
</style>

• 重新运行项目

项目仓库

Gitee