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