右上角名字长度最长要显示20个字

src/components/headerBar/header-bar.vue

@@ -1,68 +1,64 @@
 <template>
-	<div id="main" class="header-bar">
+  <div id="main" class="header-bar">
-		<header>
+    <header>
-			<ul class="nav">
+      <ul class="nav">
-				<!-- <div class="logo">ByteSailing</div> -->
+        <!-- <div class="logo">ByteSailing</div> -->
-				<div class="logo" style="display: flex; align-items: center; justify-content: center">
+        <div class="logo" style="display: flex; align-items: center; justify-content: center">
-					<img v-if="!logoUrl" :src="'/img/logo2.png'"/>
+          <img v-if="!logoUrl" :src="'/img/logo2.png'" />
-					<el-image v-else   style="width: 120px; height: 30px" :src="logoUrl" fit="scale-down"/>
+          <el-image v-else style="width: 120px; height: 30px" :src="logoUrl" fit="scale-down" />
-				</div>
+        </div>
-				<li class="header-bar-hover-warp nav-li" :class="isChildMenu ? 'active' : ''">
+        <li class="header-bar-hover-warp nav-li" :class="isChildMenu ? 'active' : ''">
-					<div @click="isChildMenu = !isChildMenu" class="menu-modal">
+          <div @click="isChildMenu = !isChildMenu" class="menu-modal">
-						<i class="iconfont icon-icomx_gongndh" style="margin: 0 5px 0 0;"></i>
+            <i class="iconfont icon-icomx_gongndh" style="margin: 0 5px 0 0"></i>
-						功能导览
+            功能导览
-						<i class="iconfont icon-iconm_xialan1" style="margin: 0 0 0 3px;"></i>
+            <i class="iconfont icon-iconm_xialan1" style="margin: 0 0 0 3px"></i>
-					</div>
+          </div>
-				</li>
+        </li>
-				<div class="auto-list">
+        <div class="auto-list">
-					<li 
+          <li class="nav-li" @click="commonsBannerToRouter(i)" v-for="(i, index) in commonsRouterList" v-show="index < autoListChidrenNum - 1" :key="i.id">
-						class="nav-li" 
+            <span>{{ i.menuName }}</span>
-						@click="commonsBannerToRouter(i)"
+          </li>
-						v-for="(i, index) in commonsRouterList" 
+          <li class="nav-li more-box" v-show="commonsRouterList.length > autoListChidrenNum - 1">
-						v-show="index < autoListChidrenNum - 1" :key="i.id">
+            更多
-						<span>{{ i.menuName }}</span>
+            <i class="iconfont icon-iconm_xialan1"></i>
-					</li>
+            <ul class="more-list">
-					<li class="nav-li more-box" v-show="commonsRouterList.length > autoListChidrenNum - 1">
+              <li v-for="(i, index) in commonsRouterList" v-show="index >= autoListChidrenNum - 1" :key="i.id">
-						更多
+                <span @click="commonsBannerToRouter(i)">{{ i.menuName }}</span>
-						<i class="iconfont icon-iconm_xialan1"></i>
+              </li>
-						<ul class="more-list">
+            </ul>
-							<li v-for="(i, index) in commonsRouterList" v-show="index >= autoListChidrenNum - 1" :key="i.id">
+          </li>
-								<span @click="commonsBannerToRouter(i)">{{ i.menuName }}</span>
+        </div>
-							</li>
+        <div class="header-bar-warp" v-if="isChildMenu" @click.stop="isChildMenu = false">
-						</ul>
+          <div class="header-bar-hover" @click.stop>
-					</li>
+            <div class="header-bar-hover-content">
-				</div>
+              <div class="left-banner">
-				<div class="header-bar-warp" v-if="isChildMenu" @click.stop="isChildMenu = false">
+                <div class="first-order" @click="leftBanerType = 2">
-					<div class="header-bar-hover" @click.stop>
+                  <el-icon size="16" color="#0084FF">
-						<div class="header-bar-hover-content">
+                    <edit />
-							<div class="left-banner">
+                  </el-icon>
-								<div class="first-order" @click="leftBanerType = 2">
+                  常用功能
-									<el-icon size="16" color="#0084FF">
+                </div>
-										<edit />
+                <div class="first-order">
-									</el-icon>
+                  <el-icon size="16" color="#0084FF">
-									常用功能
+                    <edit />
-								</div>
+                  </el-icon>
-								<div class="first-order">
+                  功能菜单
-									<el-icon size="16" color="#0084FF">
+                </div>
-										<edit />
+                <ul>
-									</el-icon>
+                  <li @click="openLeftBaner(i, index)" v-for="(i, index) in sidebarRoutersCopy" :key="i.name" v-show="i.type == 1 && i.status == '0'">
-									功能菜单
+                    {{ i.menuName }}
-								</div>
+                  </li>
-								<ul>
+                </ul>
-									<li @click="openLeftBaner(i,index)" v-for="(i,index) in sidebarRoutersCopy" :key="i.name"
+                <!-- <div class="first-order">
-										v-show="i.type == 1 && i.status == '0'">{{ i.menuName
-										}}</li>
-								</ul>
-								<!-- <div class="first-order">
 									<el-icon size="16" color="#0084FF">
 										<edit /> 
 									</el-icon>
 									推荐服务
 								</div> -->
-							</div>
+              </div>
-							<div class="menu-warp" v-show="leftBanerType == 1">
+              <div class="menu-warp" v-show="leftBanerType == 1">
-								<div class="first-order-title">{{ activeLeftData.menuName }}</div>
+                <div class="first-order-title">{{ activeLeftData.menuName }}</div>
-								<!-- <ul class="second-level" v-for="i in activeLeftData.children" :key="i.menuId">
+                <!-- <ul class="second-level" v-for="i in activeLeftData.children" :key="i.menuId">
 									<li class="menu-title">
 											
 											{{ i.menuName }}
@@ -75,331 +71,298 @@
 										</li>
 									</div>
 								</ul> -->
-								<ul class="second-level">
+                <ul class="second-level">
-									<div v-for="(i, index) in activeLeftData" :key="index">
+                  <div v-for="(i, index) in activeLeftData" :key="index">
-										<li v-if="i.isNone" class="menu-ul" style="cursor: auto"></li>
+                    <li v-if="i.isNone" class="menu-ul" style="cursor: auto"></li>
-										<li class="menu-title" v-else-if="i.isTitle">
+                    <li class="menu-title" v-else-if="i.isTitle">
-										
+                      {{ i.menuName }}
+                    </li>
+                    <li v-else class="menu-ul" @click="commonsBannerToRouter(i)" style="cursor: pointer">
+                      {{ i.menuName }}
+                    </li>
+                  </div>
+                </ul>
+              </div>
+              <div class="menu-warp" v-show="leftBanerType == 2">
+                <div class="first-order-title">常用功能</div>
+                <div class="commons-warp">
+                  <div>
+                    <div class="header-button-box cp" v-for="(i, index) in commonsRouterList" :key="i.name" @click="commonsBannerToRouter(i)">
+                      <span>{{ i.menuName }}</span>
+                      <div class="right-icon" @click.stop="deleteCommonsRouter(i, index)">
+                        <!-- <el-icon color="#46A6FF"><CirclePlus /></el-icon> -->
+                        <el-icon color="#BBBBBB" v-show="isEidtType">
+                          <Close />
+                        </el-icon>
+                      </div>
+                    </div>
+                    <div class="header-add-button-box" v-if="!isEidtType" @click="isEidtType = true">
+                      <el-icon color="#46A6FF">
+                        <CirclePlus />
+                      </el-icon>
+                      编辑功能
+                    </div>
+                  </div>
+                </div>
+                <div class="first-order-title" v-if="isEidtType">待添加功能</div>
+                <div class="all-menu-warp" v-if="isEidtType">
+                  <div v-for="(i, index) in sidebarRoutersCopy" :key="i.name" v-show="i.type === 1">
+                    <div class="all-menu-title" v-for="(j, jindex) in i.children" :key="j.name">
+                      <div class="title">
+                        {{ j.menuName }}
+                      </div>
+                      <div class="all-menu-lists">
+                        <div class="header-button-box" v-for="(n, nindex) in j.children" v-show="n.visible == '0'" :key="n.name">
+                          <span>{{ n.menuName }}</span>
 
-											{{ i.menuName }}
+                          <div class="right-icon" @click="addCommonsRouter(index, jindex, nindex, n)">
-										</li>
+                            <el-icon color="#46A6FF">
-										<li v-else class="menu-ul" @click="commonsBannerToRouter(i)" style="cursor: pointer">
+                              <CirclePlus />
-											
+                            </el-icon>
-											{{ i.menuName }}
+                          </div>
-										</li>
+                        </div>
-									</div>
+                      </div>
-								</ul>
+                    </div>
-							</div>
+                  </div>
-							<div class="menu-warp" v-show="leftBanerType == 2">
+                </div>
-								<div class="first-order-title">常用功能</div>
+                <div class="btn-warp" v-if="isEidtType">
-								<div class="commons-warp">
+                  <el-button type="" @click="isEidtType = false">取消</el-button>
-									<div>
+                  <el-button type="primary" @click="userMenuEdit">保存</el-button>
-										<div class="header-button-box cp" v-for="(i,index) in commonsRouterList" :key="i.name" @click="commonsBannerToRouter(i)">
+                </div>
-											<span>{{ i.menuName }}</span>
+              </div>
-											<div class="right-icon" @click.stop="deleteCommonsRouter(i,index)">
+            </div>
-												<!-- <el-icon color="#46A6FF"><CirclePlus /></el-icon> -->
+          </div>
-												<el-icon color="#BBBBBB" v-show="isEidtType">
+        </div>
-													<Close />
+      </ul>
-												</el-icon>
+      <div class="fr">
-											</div>
+        <el-badge :value="12" class="badge">
-										</div>
+          <el-icon :size="20">
-										<div class="header-add-button-box"  v-if="!isEidtType" @click="isEidtType = true">
+            <BellFilled />
-											<el-icon color="#46A6FF">
+          </el-icon>
-												<CirclePlus />
+        </el-badge>
-											</el-icon>
+        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
-											编辑功能
+          <div class="dropdown-box">
-										</div>
+            {{ userData }}
-									</div>
+          </div>
-								</div>
+          <template #dropdown>
-								<div class="first-order-title" v-if="isEidtType">待添加功能</div>
+            <el-dropdown-menu>
-								<div class="all-menu-warp" v-if="isEidtType">
+              <router-link to="/user/profile">
-									<div v-for="(i, index) in sidebarRoutersCopy" :key="i.name"  v-show="i.type === 1">
+                <el-dropdown-item>个人中心</el-dropdown-item>
-										<div class="all-menu-title" v-for="(j, jindex) in i.children" :key="j.name">
+              </router-link>
-											<div class="title">
+              <el-dropdown-item command="setLayout">
-												{{ j.menuName }}
+                <span>布局设置</span>
-
+              </el-dropdown-item>
-											</div>
+              <el-dropdown-item divided command="logout">
-											<div class="all-menu-lists">
+                <span>退出登录</span>
-												<div class="header-button-box" v-for="(n, nindex) in j.children"
+              </el-dropdown-item>
-													v-show="n.visible == '0'"
-													:key="n.name">
-													<span>{{ n.menuName }}</span>
-
-													<div class="right-icon"
-														@click="addCommonsRouter(index, jindex, nindex, n)">
-														<el-icon color="#46A6FF">
-															<CirclePlus />
-														</el-icon>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-
-								</div>
-								<div class="btn-warp" v-if="isEidtType">
-									<el-button type="" @click="isEidtType = false">取消</el-button>
-									<el-button type="primary" @click="userMenuEdit">保存</el-button>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</ul>
-			<div class="fr">
-				<!-- <el-input
-            class="input-search"
-            placeholder="请输入关键词"
-            suffix-icon="el-icon-search"
-			size="mini"
-            v-model="input1">
-          </el-input>
-          <el-dropdown class="dropdown-box">
-            <span class="el-dropdown-link">
-              中文<i class="el-icon-arrow-down el-icon--right"></i>
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>English</el-dropdown-item>
-              <el-dropdown-item>中文</el-dropdown-item>
             </el-dropdown-menu>
-          </el-dropdown> -->
+          </template>
-				<el-badge :value="12" class="badge">
+        </el-dropdown>
-					<el-icon :size="20">
+      </div>
-						<BellFilled />
+    </header>
-					</el-icon>
+  </div>
-				</el-badge>
-
-				<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
-					<div class="dropdown-box">
-						{{ userData }}
-					</div>
-					<template #dropdown>
-						<el-dropdown-menu>
-							<router-link to="/user/profile">
-								<el-dropdown-item>个人中心</el-dropdown-item>
-							</router-link>
-							<el-dropdown-item command="setLayout">
-								<span>布局设置</span>
-							</el-dropdown-item>
-							<el-dropdown-item divided command="logout">
-								<span>退出登录</span>
-							</el-dropdown-item>
-						</el-dropdown-menu>
-					</template>
-				</el-dropdown>
-			</div>
-		</header>
-	</div>
 </template>
-  
+
 <script setup>
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
-import { ElMessageBox, ElNotification, ElMessage } from 'element-plus'
+import { ElMessageBox, ElNotification, ElMessage } from "element-plus";
-import useUserStore from '@/store/modules/user'
+import useUserStore from "@/store/modules/user";
-import '@/components/headerBar/header.scss'
+import "@/components/headerBar/header.scss";
-const router = useRouter()
+const router = useRouter();
-const userStore = useUserStore()
+const userStore = useUserStore();
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
-const sidebarRouters = ref([])
+const sidebarRouters = ref([]);
-const sidebarRoutersCopy = ref([])
+const sidebarRoutersCopy = ref([]);
-const isChildMenu = ref(false)
+const isChildMenu = ref(false);
-const autoListChidrenNum = ref(0)
+const autoListChidrenNum = ref(0);
-const isEidtType = ref(false)
+const isEidtType = ref(false);
-const leftBanerType = ref(2)
+const leftBanerType = ref(2);
 
-const userData = ref(Cookies.get('nickName') || '')
+const userData = ref(Cookies.get("nickName") || "");
-const commonsRouterList = ref([])
+const commonsRouterList = ref([]);
-const activeLeftData = ref({})
+const activeLeftData = ref({});
-const openLeftBaner = (i,index) => {
+const openLeftBaner = (i, index) => {
-	leftBanerType.value = 1
+  leftBanerType.value = 1;
-	activeLeftData.value = i
+  activeLeftData.value = i;
-	routerInit(i)
+  routerInit(i);
-}
+};
-const logoUrl = ref()
+const logoUrl = ref();
 const getLogo = () => {
-	proxy.post('/tenantInfo/getLogo',{}).then(
+  proxy.post("/tenantInfo/getLogo", {}).then((res) => {
-		res => {
+    if (res && res.length > 0 && res[0].fileUrl) {
-			if (res && res.length > 0 && res[0].fileUrl) {
+      logoUrl.value = res[0].fileUrl;
-				logoUrl.value = res[0].fileUrl
+    }
-			}
+  });
-		}
+};
-	)
+getLogo();
-}
-getLogo()
 const userMenuEdit = () => {
-	proxy.post('/sysUserMenu/edit',{
+  proxy
-		type:1,
+    .post("/sysUserMenu/edit", {
-		menuIdList:commonsRouterList.value.map(item=>item.menuId)
+      type: 1,
-	}).then(res=>{
+      menuIdList: commonsRouterList.value.map((item) => item.menuId),
-		ElMessage({
+    })
-			message: '保存成功',
+    .then((res) => {
-			type: 'success',
+      ElMessage({
-		})
+        message: "保存成功",
-		isEidtType.value = false
+        type: "success",
-	})
+      });
-}
+      isEidtType.value = false;
+    });
+};
 
-const deleteCommonsRouter = (i,index) => {
+const deleteCommonsRouter = (i, index) => {
-	commonsRouterList.value.splice(index, 1)
+  commonsRouterList.value.splice(index, 1);
-}
+};
 
 const addCommonsRouter = (index, jindex, nindex, n) => {
-	for (let i = 0; i < commonsRouterList.value.length; i++) {
+  for (let i = 0; i < commonsRouterList.value.length; i++) {
-		const element = commonsRouterList.value[i];
+    const element = commonsRouterList.value[i];
-		if(element.menuId === n.menuId){
+    if (element.menuId === n.menuId) {
-			ElMessage({
+      ElMessage({
-				message: '此目录已添加',
+        message: "此目录已添加",
-				type: 'error',
+        type: "error",
-			})
+      });
-			return
+      return;
-		}
+    }
-	}
+  }
-	if (n.hidden) {
+  if (n.hidden) {
-		ElMessage({
+    ElMessage({
-			message: '此目录需要额外参数，暂不支持添加',
+      message: "此目录需要额外参数，暂不支持添加",
-			type: 'error',
+      type: "error",
-		})
+    });
-		return
+    return;
-	}
+  }
-	commonsRouterList.value.push(n)
+  commonsRouterList.value.push(n);
-	sidebarRoutersCopy.value[index].children[jindex].children[nindex].isCommonsBanner = true
+  sidebarRoutersCopy.value[index].children[jindex].children[nindex].isCommonsBanner = true;
-}
+};
 
 const routerInit = (item) => {
-	//二维转一维
+  //二维转一维
-	const arr = []
+  const arr = [];
-	for (let i = 0; i < item.children.length; i++) {
+  for (let i = 0; i < item.children.length; i++) {
-		const element = item.children[i]
+    const element = item.children[i];
-		if (element.type === 1) {
+    if (element.type === 1) {
-			element.isTitle = true
+      element.isTitle = true;
-			
-			arr.push(element)
-		}
 
-		if (element.children && element.children.length > 0) {
+      arr.push(element);
-			for (let j = 0; j < element.children.length; j++) {
+    }
-				const jelement = element.children[j]
-				jelement.isTitle = false
-				if (jelement.type === 1) {
-					arr.push({ ...jelement, fatherPath: element.path })
-				}
-			}
-		}
-	}
-	//添加剩余子元素，补齐一列
-	for (let i = 0; i < arr.length; i++) {
-		const element = arr[i]
-		if (element.isTitle) {
-			//判断余数加上子项列会不会爆掉
-			if (
-				element.children &&
-				element.children.length > 0 &&
-				((i) % 11) + element.children.length + 1 > 11 &&
-				element.children.length < 11
-			) {
-				let num = 11 - ((i) % 11)
-				for (let j = 0; j < num; j++) {
-					arr.splice(i, 0, { ...element, isNone: true })
-					i++
-				}
-			}
 
-		}
+    if (element.children && element.children.length > 0) {
-	}
+      for (let j = 0; j < element.children.length; j++) {
-	activeLeftData.value = arr
+        const jelement = element.children[j];
-}
+        jelement.isTitle = false;
+        if (jelement.type === 1) {
+          arr.push({ ...jelement, fatherPath: element.path });
+        }
+      }
+    }
+  }
+  //添加剩余子元素，补齐一列
+  for (let i = 0; i < arr.length; i++) {
+    const element = arr[i];
+    if (element.isTitle) {
+      //判断余数加上子项列会不会爆掉
+      if (element.children && element.children.length > 0 && (i % 11) + element.children.length + 1 > 11 && element.children.length < 11) {
+        let num = 11 - (i % 11);
+        for (let j = 0; j < num; j++) {
+          arr.splice(i, 0, { ...element, isNone: true });
+          i++;
+        }
+      }
+    }
+  }
+  activeLeftData.value = arr;
+};
 function handleCommand(command) {
-	switch (command) {
+  switch (command) {
-		case 'setLayout':
+    case "setLayout":
-			setLayout()
+      setLayout();
-			break
+      break;
-		case 'logout':
+    case "logout":
-			logout()
+      logout();
-			break
+      break;
-		default:
+    default:
-			break
+      break;
-	}
+  }
 }
 
 function logout() {
-	ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
-		confirmButtonText: '确定',
+    confirmButtonText: "确定",
-		cancelButtonText: '取消',
+    cancelButtonText: "取消",
-		type: 'warning',
+    type: "warning",
-	})
+  })
-		.then(() => {
+    .then(() => {
-			userStore.logOut().then(() => {
+      userStore.logOut().then(() => {
-				location.href = '/index'
+        location.href = "/index";
-			})
+      });
-		})
+    })
-		.catch(() => { })
+    .catch(() => {});
 }
 
 //使用id计算拼接url
 const commonsBannerToRouter = (i) => {
-	sidebarRoutersCopy.value.map(item => {
+  sidebarRoutersCopy.value.map((item) => {
-		if(item.children) {
+    if (item.children) {
-			item.children.map(j => {
+      item.children.map((j) => {
-				if(j.children){
+        if (j.children) {
-					j.children.map(n => {
+          j.children.map((n) => {
-						if(n.menuId === i.menuId){
+            if (n.menuId === i.menuId) {
-							router.push('/' + item.path + '/' + j.path + '/' + n.path) 
+              router.push("/" + item.path + "/" + j.path + "/" + n.path);
-							isChildMenu.value = false
+              isChildMenu.value = false;
-						}
+            }
-					})
+          });
-				}
+        }
-			})
+      });
-		}
+    }
-	})
+  });
-} 
+};
 
 //获取浏览器宽度
 function getBrowserWidth() {
-	return document.documentElement.clientWidth
+  return document.documentElement.clientWidth;
 }
 
 //计算auto-list 能放下几个
 function calcAutoListChidren() {
-	autoListChidrenNum.value = Math.floor((getBrowserWidth() - 390) / 120)
+  autoListChidrenNum.value = Math.floor((getBrowserWidth() - 616) / 120);
 }
 
 //一维数组转tree
 
 onMounted(() => {
-	calcAutoListChidren()
+  calcAutoListChidren();
-	window.addEventListener('resize', calcAutoListChidren);
+  window.addEventListener("resize", calcAutoListChidren);
-	proxy.get('/getInfo').then(res => {
+  proxy.get("/getInfo").then((res) => {
-		userData.value = res.user.nickName
+    userData.value = res.user.nickName;
-	})
+  });
-	proxy.get('/system/menu/list').then(res => {
+  proxy.get("/system/menu/list").then((res) => {
-		res.data = res.data.map(item => {
+    res.data = res.data.map((item) => {
-			return {
+      return {
-				...item,
+        ...item,
-				isCommonsBanner: false,
+        isCommonsBanner: false,
-			}
+      };
-		})
+    });
-		sidebarRoutersCopy.value = proxy.handleTree(res.data, "menuId")
+    sidebarRoutersCopy.value = proxy.handleTree(res.data, "menuId");
-		//循环删除 i.status != 0 || i.visible != 0 的元素
+    //循环删除 i.status != 0 || i.visible != 0 的元素
-		sidebarRoutersCopy.value.map(item => {
+    sidebarRoutersCopy.value.map((item) => {
-			if(item.children) {
+      if (item.children) {
-				item.children.map(j => {
+        item.children.map((j) => {
-					if(j.children){
+          if (j.children) {
-						j.children.map(n => {
+            j.children.map((n) => {
-							if(n.status != 0 || n.visible != 0 || n.type != 1){
+              if (n.status != 0 || n.visible != 0 || n.type != 1) {
-								j.children.splice(j.children.indexOf(n),1)
+                j.children.splice(j.children.indexOf(n), 1);
-							}
+              }
-						})
+            });
-					}
+          }
-				})
+        });
-			}
+      }
-		})
+    });
-	})
+  });
-	proxy.post('/sysUserMenu/list',{type:1}).then(res => {
+  proxy.post("/sysUserMenu/list", { type: 1 }).then((res) => {
-		commonsRouterList.value = res
+    commonsRouterList.value = res;
-	})
+  });
-})
+});
 </script>
-  
-<style  lang="scss"></style>
 
-  
+<style lang="scss"></style>

src/components/headerBar/header.scss

@@ -207,7 +207,7 @@
 		height: 50px;
 		
 		.auto-list{
-			width: calc(100vw - 400px);
+			width: calc(100vw - 616px);
 			li{
 				float: left;
 			}
@@ -290,6 +290,7 @@
 		display: flex;
 		justify-content: space-between;
 		.fr {
+			max-width: 336px;
 			display: flex;
 			.input-search {
 				margin: 12px 40px 12px 0;
@@ -299,11 +300,13 @@
 				}
 			}
 			.dropdown-box {
-				margin: 0 24px 0 0px;
+				margin-right: 12px;
 				line-height: 50px;
 				cursor: pointer;
-				width: 80px;
+				width: fit-content;
-				overflow:hidden
+				white-space:nowrap;
+				overflow:hidden;
+				text-overflow:ellipsis;
 			}
 			.badge {
 				margin: 15px 24px 15px 0;