Commit aea9b35551c5870275b32b9d928d84a4fbe466be
1 parent
021971ab
Exists in
master
[修改] 调整布局
Showing
2 changed files
with
16 additions
and
2 deletions
Show diff stats
examples/styles/index.scss
| ... | ... | @@ -6,6 +6,12 @@ html, |
| 6 | 6 | body { |
| 7 | 7 | padding: 0; |
| 8 | 8 | margin: 0; |
| 9 | + &::-webkit-scrollbar { | |
| 10 | + width: 5px; | |
| 11 | + } | |
| 12 | + &::-webkit-scrollbar-thumb { | |
| 13 | + background-color: #e5e5e5; | |
| 14 | + } | |
| 9 | 15 | } |
| 10 | 16 | #app { |
| 11 | 17 | font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, | ... | ... |
examples/views/layout/component.vue
| ... | ... | @@ -2,7 +2,7 @@ |
| 2 | 2 | <el-container> |
| 3 | 3 | <layout-header @menu-change="handleSelect"></layout-header> |
| 4 | 4 | <el-container class="layout-container__component"> |
| 5 | - <el-aside class="layout-aside__component" width="240px"> | |
| 5 | + <el-aside class="layout-aside__component" width="300px"> | |
| 6 | 6 | <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect"> |
| 7 | 7 | <h4 class="side-menu__group">开发指南</h4> |
| 8 | 8 | <el-menu-item v-for="(doc, index) in guideList" :key="`doc-${index}`" :index="doc.name">{{ doc.meta.title }}</el-menu-item> |
| ... | ... | @@ -148,6 +148,12 @@ export default { |
| 148 | 148 | .layout-container__component { |
| 149 | 149 | margin-top: 60px; |
| 150 | 150 | .layout-aside__component { |
| 151 | + &::-webkit-scrollbar { | |
| 152 | + width: 5px; | |
| 153 | + } | |
| 154 | + &::-webkit-scrollbar-thumb { | |
| 155 | + background-color: #e5e5e5; | |
| 156 | + } | |
| 151 | 157 | &::after { |
| 152 | 158 | position: absolute; |
| 153 | 159 | top: 50%; |
| ... | ... | @@ -193,6 +199,8 @@ export default { |
| 193 | 199 | font-size: 12px; |
| 194 | 200 | text-decoration: none; |
| 195 | 201 | padding: 5px 20px; |
| 202 | + width: 100%; | |
| 203 | + box-sizing: border-box; | |
| 196 | 204 | color: $text; |
| 197 | 205 | transition: all 300ms ease-out; |
| 198 | 206 | border-left: 1px solid $border; |
| ... | ... | @@ -205,7 +213,7 @@ export default { |
| 205 | 213 | } |
| 206 | 214 | } |
| 207 | 215 | .layout-main__component { |
| 208 | - margin-left: 240px; | |
| 216 | + margin-left: 300px; | |
| 209 | 217 | margin-right: 150px; |
| 210 | 218 | padding: 20px 40px !important; |
| 211 | 219 | } | ... | ... |