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

feat: 混合布局

Browse Source
This commit is contained in:
wang_fan_w 2024-05-14 00:00:25 +08:00
parent 053b91edb6
commit 122759a525
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div :class="layoutType == 'layoutDefaults' ? 'logo_head' : 'logo_head no-border'"> <div :class="layoutType == 'layoutHead' ? 'logo_head no-border' : 'logo_head'">
<img :src="Logo" class="logo" /> <img :src="Logo" class="logo" />
<span :class="isDark ? 'logo_title dark' : 'logo_title'" v-if="!collapsed">dc admin</span> <span :class="isDark ? 'logo_title dark' : 'logo_title'" v-if="!collapsed">dc admin</span>
</div> </div>
@ -13,7 +13,7 @@ const themeStore = useThemeConfig();
const { collapsed, asideDark, layoutType } = storeToRefs(themeStore); const { collapsed, asideDark, layoutType } = storeToRefs(themeStore);
const isDark = computed(() => { const isDark = computed(() => {
if (asideDark.value && layoutType.value === "layoutDefaults") { if (asideDark.value && layoutType.value != "layoutHead") {
return true; return true;
} else { } else {
return false; return false;

12
src/layout/layout-mixing/index.vue
View File

@ -142,7 +142,6 @@ const onMenuItem = (key: string) => {
display: flex; display: flex;
align-items: stretch; // 如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。 align-items: stretch; // 如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。
overflow: hidden; overflow: hidden;
border: 1px solid red;
.header-logo { .header-logo {
width: 150px; width: 150px;
} }
@ -163,6 +162,17 @@ const onMenuItem = (key: string) => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
.menu_fold {
width: 32px;
height: 32px;
display: flex;
justify-content: space-around;
align-items: center;
.menu_fold_icon {
color: $color-text-1;
border-radius: $radius-box;
}
}
} }
:deep(.arco-menu-pop) { :deep(.arco-menu-pop) {