fix : 右上角用户展示样式优化

src/layout/navbar/index.vue

@@ -17,7 +17,7 @@
           <ul>
             <li>主次账号切换</li>
             <li class="avatar-li" v-for="item in accountList" @click="accountChange(item.userId)">
-              <el-avatar>{{ item.nickName }}</el-avatar>
+              <el-avatar><span>{{ item.nickName }}</span></el-avatar>
               <div class="right-li">
                 <div class="name-line">
                   <span v-if="item.accountType==='0'" class="zhu">主</span>
@@ -25,7 +25,9 @@
                   <span>{{ item.jobActivityDesc }}</span>
                 </div>
                 <div>
-                  <span :title="item.companyName+'/'+item.departmentName">{{ item.companyName }}/{{ item.departmentName }}</span>
+                  <span :title="item.companyName+'/'+item.departmentName">{{ item.companyName }}/{{
+                      item.departmentName
+                    }}</span>
                 </div>
               </div>
               <div>
@@ -71,7 +73,6 @@ const tagsViewStore = useTagsView()
 const userInfo = ref({})
 const visitedP = ref(false)
 const accountList = ref([])
-const selectUserId = ref()
 const router = useRouter()
 onMounted(() => {
   setUserInfo()
@@ -126,11 +127,13 @@ const handleLogout = () => {
 
 <style lang="scss" scoped>
 :deep(.el-avatar--circle) {
+  display: inline-block;
+  line-height: 40px;
   margin-right: 10px;
   background-color: #8a7243;
   white-space: nowrap;
-  /* width: 30px; */
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .navbar {
@@ -196,6 +199,11 @@ const handleLogout = () => {
 
             .name-line {
               margin-bottom: 5px;
+              width: 184px;
+              -webkit-line-clamp: 1;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
 
               .zhu {
                 display: inline-block;
@@ -224,11 +232,18 @@ const handleLogout = () => {
               overflow: hidden;
             }
           }
-
-
         }
 
         li {
+          padding: 0 6px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          text-align: left;
+          font-size: 14px;
+          cursor: pointer;
+          border-bottom: 1px solid #e6e6e6;
+
           &:hover {
             color: #666666 !important;
             background-color: #eaeaea;
@@ -238,15 +253,6 @@ const handleLogout = () => {
             background-color: #fff;
           }
 
-          padding: 0 10px;
-          height: 28px;
-          display: flex;
-          align-items: center;
-          text-align: left;
-          font-size: 14px;
-          cursor: pointer;
-          border-bottom: 1px solid #e6e6e6;
-
           &:last-child {
             border-bottom: none;
           }