attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: logo组件长度限制

Browse Source
This commit is contained in:
wang_fan_w 2024-05-12 23:33:58 +08:00
parent 6087ae2b4e
commit 84835f4e26
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/components/Logo/index.vue
View File

@ -36,8 +36,12 @@ const isDark = computed(() => {
} }
.logo_title { .logo_title {
max-width: 150px;
font-weight: bold; font-weight: bold;
font-size: $font-size-title-2; font-size: $font-size-title-2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.dark { .dark {
color: #fff; color: #fff;

8
src/layout/layout-head/index.vue
View File

@ -2,7 +2,10 @@
<div class="layout-head"> <div class="layout-head">
<div class="layout-head-top"> <div class="layout-head-top">
<a-layout-header class="header"> <a-layout-header class="header">
<Logo /> <div class="header-logo">
<Logo />
</div>
<a-menu mode="horizontal" :selected-keys="[currentRoute.name]" @menu-item-click="onMenuItem"> <a-menu mode="horizontal" :selected-keys="[currentRoute.name]" @menu-item-click="onMenuItem">
<template v-for="item in routeTree" :key="item.name"> <template v-for="item in routeTree" :key="item.name">
<a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name"> <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
@ -69,6 +72,9 @@ const onMenuItem = (key: string) => {
display: flex; display: flex;
align-items: stretch; // 如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。 align-items: stretch; // 如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。
overflow: hidden; overflow: hidden;
.header-logo {
width: 150px;
}
&-top { &-top {
flex: 1; // 按比例分配大小 flex: 1; // 按比例分配大小
display: flex; display: flex;