展示效果修改

src/assets/styles/adaptive.scss

@@ -24,6 +24,11 @@
         span {
           margin-left: 10px;
         }
+        .menu-item-account {
+          span {
+            max-width: 108px;
+          }
+        }
       }
     }
   }
@@ -112,6 +117,11 @@
         span {
           margin-left: 6px;
         }
+        .menu-item-account {
+          span {
+            max-width: 84px;
+          }
+        }
       }
     }
   }
@@ -167,6 +177,7 @@
     }
     .head-menu-btn {
       display: block;
+      padding: 7px 10px;
     }
   }
   .home-navs {

src/assets/styles/home.scss

@@ -160,6 +160,7 @@
       &:hover {
         opacity: 1;
       }
+
       &.menu-item-act {
         background-color: $--color-blue-white;
         opacity: 1;
@@ -181,6 +182,14 @@
         vertical-align: middle;
         margin-left: 14px;
       }
+      .menu-item-account {
+        white-space: nowrap;
+        span {
+          max-width: 156px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
     }
   }
   // .head-menu-btn

src/views/Home.vue

@@ -22,9 +22,9 @@
       <div class="head-user menu-list">
         <ul>
           <li @click="$refs.ResetPwd.open()">
-            <div class="menu-item">
+            <div class="menu-item menu-item-account">
               <i class="icon icon-account"></i>
-              <span>{{ username }}</span>
+              <span :title="username">{{ username }}</span>
             </div>
           </li>
           <li @click="toLogout">