Browse Source

style: 布局容器调整

feature/three
guoapeng 3 months ago
parent
commit
417731724c
  1. 14
      src/layouts/default.vue

14
src/layouts/default.vue

@ -8,18 +8,16 @@ const router = useRouter()
<template> <template>
<el-container class="main"> <el-container class="main">
<el-header class="header" /> <el-header class="header" />
<el-container>
<el-container class="container">
<el-aside class="aside"> <el-aside class="aside">
<div v-for="item in authRoutes" :key="item.path" class="aside-item" :class="{ 'aside-item-active': router.currentRoute.value.path === item.path }" @click="router.push(item.path)"> <div v-for="item in authRoutes" :key="item.path" class="aside-item" :class="{ 'aside-item-active': router.currentRoute.value.path === item.path }" @click="router.push(item.path)">
<img src="../assets/images/home.svg" alt=""> <img src="../assets/images/home.svg" alt="">
<span>{{ item.meta!.title }}</span> <span>{{ item.meta!.title }}</span>
</div> </div>
</el-aside> </el-aside>
<el-container>
<el-main>
<router-view class="content" />
</el-main>
</el-container>
<el-main>
<router-view class="content" />
</el-main>
</el-container> </el-container>
<el-footer class="footer" /> <el-footer class="footer" />
</el-container> </el-container>
@ -33,6 +31,9 @@ const router = useRouter()
.header { .header {
height: 60px; height: 60px;
} }
.container {
height: calc(100% - 120px);
}
} }
.aside { .aside {
width: 150px; width: 150px;
@ -60,6 +61,7 @@ const router = useRouter()
} }
.el-main { .el-main {
padding: 0 15px; padding: 0 15px;
height: 100%;
} }
.content { .content {
height: 100%; height: 100%;

Loading…
Cancel
Save