1

src/components/main/components/header-bar/header-bar.less

@@ -5,14 +5,24 @@
   height: 64px;
   display: flex;
   flex-direction: row;
+  align-items: center;
 
-  .custom-content-con {
-    height: 64px;
-    padding-right: 120px;
-    line-height: 64px;
-    display: inline-block;
-    vertical-align: top;
+  .header-breadcrumb {
+    margin-left: 30px;
     flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    line-height: 64px;
   }
 
+  .header-right-slot {
+    flex-shrink: 0;
+    height: 64px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding-right: 10px;
+    line-height: 64px;
+  }
 }

src/components/main/components/header-bar/header-bar.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="header-bar">
     <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
-    <custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb>
-    <div class="custom-content-con">
+    <custom-bread-crumb class="header-breadcrumb" show-icon :list="breadCrumbList"></custom-bread-crumb>
+    <div class="header-right-slot">
       <slot></slot>
     </div>
   </div>

src/components/main/components/terminal/index.vue

@@ -19,7 +19,7 @@ export default {
 
   computed: {
     iconclass() {
-      let curClass = 'terminal-icon ml10'
+      let curClass = 'terminal-icon'
       // Terminal 功能暂时禁用
       // if (this.isServerRun) {
       //   curClass += ' run'
@@ -39,6 +39,8 @@ export default {
 <style lang="less" scoped>
 .terminal-box {
   margin-top: 3px;
+  margin-right: 10px;
+  flex-shrink: 0;
 }
 .terminal-icon {
   color: #c5c8ce;

src/components/main/components/user/user.vue

@@ -55,9 +55,9 @@ export default {
 </script>
 <style lang="less" scoped>
 .user-avator-dropdown {
-  position: absolute;
-  top: 0px;
-  right: 10px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .loginName-box {

src/components/main/main.vue

@@ -16,13 +16,15 @@
 
         <Header  class="header-con-main">
           <headerBar class="header-con" @on-coll-change="collpasedChange" :collapsed="collapsed">
-            <Terminal></Terminal>
-            <span
-              v-if="currentTenant"
-              class="main-tenant-tag"
-              :title="'租户：' + currentTenant.name + '（' + currentTenant.code + '）'"
-            >{{ currentTenant.name }}</span>
-            <user :userName="userName" :user-avator="userAvator || ''" />
+            <div class="header-user-area">
+              <Terminal></Terminal>
+              <span
+                v-if="currentTenant"
+                class="main-tenant-tag"
+                :title="'租户：' + currentTenant.name + '（' + currentTenant.code + '）'"
+              >{{ currentTenant.name }}</span>
+              <user :userName="userName" :user-avator="userAvator || ''" />
+            </div>
           </headerBar>
         </Header>
         <Layout  class="main-layout-content">
@@ -155,8 +157,17 @@ export default {
   z-index: 999999;
 }
 
+.header-user-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+}
+
 .main-tenant-tag {
-  margin-right: 16px;
+  margin-right: 12px;
+  flex-shrink: 0;
   padding: 0 10px;
   height: 28px;
   line-height: 28px;