Browse Source

fix: Fluid layout Multi-Tab max-width and user menu float right #160

Sendya 6 years ago
parent
commit
a37db2da76
3 changed files with 48 additions and 37 deletions
  1. 6 1
      src/components/MultiTab/index.less
  2. 4 0
      src/components/global.less
  3. 38 36
      src/components/tools/UserMenu.vue

+ 6 - 1
src/components/MultiTab/index.less

@@ -17,4 +17,9 @@
 .topmenu .@{multi-tab-wrapper-prefix-cls} {
   max-width: 1200px;
   margin: 0 auto;
-}
+}
+
+.topmenu.content-width-Fluid .@{multi-tab-wrapper-prefix-cls} {
+  max-width: 100%;
+  margin: 0 auto;
+}

+ 4 - 0
src/components/global.less

@@ -290,6 +290,10 @@ body {
         flex: 1 0 auto;
         height: 64px;
         overflow: hidden;
+
+        .content-box {
+          float: right;
+        }
       }
     }
 

+ 38 - 36
src/components/tools/UserMenu.vue

@@ -1,42 +1,44 @@
 <template>
   <div class="user-wrapper">
-    <a href="https://pro.loacg.com/docs/getting-started" target="_blank">
-      <span class="action">
-        <a-icon type="question-circle-o"></a-icon>
-      </span>
-    </a>
-    <notice-icon class="action"/>
-    <a-dropdown>
-      <span class="action ant-dropdown-link user-dropdown-menu">
-        <a-avatar class="avatar" size="small" :src="avatar()"/>
-        <span>{{ nickname() }}</span>
-      </span>
-      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
-        <a-menu-item key="0">
-          <router-link :to="{ name: 'center' }">
-            <a-icon type="user"/>
-            <span>个人中心</span>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item key="1">
-          <router-link :to="{ name: 'settings' }">
+    <div class="content-box">
+      <a href="https://pro.loacg.com/docs/getting-started" target="_blank">
+        <span class="action">
+          <a-icon type="question-circle-o"></a-icon>
+        </span>
+      </a>
+      <notice-icon class="action"/>
+      <a-dropdown>
+        <span class="action ant-dropdown-link user-dropdown-menu">
+          <a-avatar class="avatar" size="small" :src="avatar()"/>
+          <span>{{ nickname() }}</span>
+        </span>
+        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
+          <a-menu-item key="0">
+            <router-link :to="{ name: 'center' }">
+              <a-icon type="user"/>
+              <span>个人中心</span>
+            </router-link>
+          </a-menu-item>
+          <a-menu-item key="1">
+            <router-link :to="{ name: 'settings' }">
+              <a-icon type="setting"/>
+              <span>账户设置</span>
+            </router-link>
+          </a-menu-item>
+          <a-menu-item key="2" disabled>
             <a-icon type="setting"/>
-            <span>账户设置</span>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item key="2" disabled>
-          <a-icon type="setting"/>
-          <span>测试</span>
-        </a-menu-item>
-        <a-menu-divider/>
-        <a-menu-item key="3">
-          <a href="javascript:;" @click="handleLogout">
-            <a-icon type="logout"/>
-            <span>退出登录</span>
-          </a>
-        </a-menu-item>
-      </a-menu>
-    </a-dropdown>
+            <span>测试</span>
+          </a-menu-item>
+          <a-menu-divider/>
+          <a-menu-item key="3">
+            <a href="javascript:;" @click="handleLogout">
+              <a-icon type="logout"/>
+              <span>退出登录</span>
+            </a>
+          </a-menu-item>
+        </a-menu>
+      </a-dropdown>
+    </div>
   </div>
 </template>