优化页面样式

src/views/createMaterial/AdMaterialManager.vue

@@ -734,7 +734,7 @@ export default {
 }
 
 .aside {
-  background-color: #f5f7fa;
+  /* background-color: #f5f7fa; */
   border-right: 1px solid #e6e6e6;
 }
 

src/views/layout/Layout.vue

@@ -40,10 +40,34 @@
           <el-menu-item index="/tools/uploadYoutube">Youtube视频上传</el-menu-item>
           <el-menu-item index="/tools/YoutubeVideoManage">Youtube视频管理</el-menu-item>
         </el-submenu>
+        
+        <!-- 头像菜单 - 放在最右边 -->
+        <div class="avatar-container">
+          <el-dropdown trigger="click">
+            <div class="avatar-wrapper">
+              <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+              <i class="el-icon-caret-bottom"/>
+            </div>
+            <el-dropdown-menu slot="dropdown" class="user-dropdown">
+              <router-link class="inlineBlock" to="/">
+                <el-dropdown-item>
+                  Home
+                </el-dropdown-item>
+              </router-link>
+              <el-dropdown-item divided>
+                <span style="display:block;" @click="logout">LogOut</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
       </el-menu>
     </div>
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb-container">
+        <breadcrumb />
+      </div>
     <div class="main-container">
-      <navbar/>
+      <!-- <navbar/> -->
       <app-main/>
     </div>
   </div>
@@ -52,13 +76,16 @@
 <script>
 import { Navbar, Sidebar, AppMain } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
 
 export default {
   name: 'Layout',
   components: {
     Navbar,
     Sidebar,
-    AppMain
+    AppMain,
+    Breadcrumb
   },
   data() {
     return {
@@ -67,6 +94,9 @@ export default {
   },
   mixins: [ResizeMixin],
   computed: {
+    ...mapGetters([
+      'avatar'
+    ]),
     sidebar() {
       return this.$store.state.app.sidebar
     },
@@ -89,6 +119,11 @@ export default {
     handleSelect(key) {
       console.log('选中菜单:', key);
       // 此处添加路由跳转或业务逻辑
+    },
+    logout() {
+      this.$store.dispatch('FedLogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
     }
   }
 }
@@ -119,6 +154,12 @@ export default {
     box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
   }
   
+  .breadcrumb-container {
+    padding: 0px 20px;
+    background-color: #fff;
+    box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  }
+
   .el-menu--horizontal {
     display: flex;
     justify-content: center;
@@ -127,4 +168,38 @@ export default {
   .el-submenu .el-menu-item {
     min-width: 120px;
   }
+  
+  .el-menu--horizontal {
+    display: flex;
+    justify-content: center;
+    position: relative;
+  }
+  
+  /* 头像菜单样式 */
+  .avatar-container {
+    position: absolute;
+    right: 20px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    
+    .avatar-wrapper {
+      cursor: pointer;
+      position: relative;
+      
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+        color: #fff;
+      }
+    }
+  }
 </style>

src/views/layout/components/Navbar.vue

@@ -2,27 +2,10 @@
   <el-menu class="navbar" mode="horizontal">
 <!--    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>-->
 <!--    <breadcrumb />-->
-    <el-dropdown class="avatar-container" trigger="click">
-      <div class="avatar-wrapper">
-        <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-        <i class="el-icon-caret-bottom"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <router-link class="inlineBlock" to="/">
-          <el-dropdown-item>
-            Home
-          </el-dropdown-item>
-        </router-link>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">LogOut</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
   </el-menu>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 
@@ -32,19 +15,10 @@ export default {
     Hamburger
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar'
-    ])
   },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('FedLogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
     }
   }
 }
@@ -67,29 +41,7 @@ export default {
     top: 16px;
     color: red;
   }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
+
 }
 </style>