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:
wf 2024-05-06 16:57:00 +08:00
parent 3f14e9dde6
commit d43ab86e2c
2 changed files with 15 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/layout/components/Aside/index.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<div :class="asideDark ? 'aside dark' : 'aside'"> <div :class="asideDark ? 'aside dark' : 'aside'">
<div class="logo_head"> <Logo />
<img :src="Logo" class="logo" />
<span class="logo_title" v-if="!collapsed">dc admin</span>
</div>
<a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220"> <a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">
<a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar"><Menu /></a-scrollbar> <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar"><Menu /></a-scrollbar>
</a-layout-sider> </a-layout-sider>
@ -11,7 +8,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Logo from "@/assets/img/logo.jpg"; import Logo from "@/layout/components/Logo/index.vue";
import Menu from "@/layout/components/Menu/index.vue"; import Menu from "@/layout/components/Menu/index.vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { useThemeConfig } from "@/store/modules/theme-config"; import { useThemeConfig } from "@/store/modules/theme-config";
@ -27,22 +24,6 @@ const { collapsed, asideDark } = storeToRefs(themeStore);
.dark { .dark {
background: #232324; background: #232324;
} }
// 头部
.logo_head {
height: 60px;
display: flex;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
border-right: $border-1 solid $color-border-2;
.logo {
width: 30px;
}
.logo_title {
font-weight: bold;
font-size: $font-size-title-2;
}
}
.layout_side { .layout_side {
height: calc(100% - 60px); height: calc(100% - 60px);

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

@ -1,7 +1,7 @@
<template> <template>
<div class="logo_head"> <div class="logo_head">
<img :src="Logo" class="logo" /> <img :src="Logo" class="logo" />
<span class="logo_title" v-if="!collapsed">dc admin</span> <span :class="isDark ? 'logo_title dark' : 'logo_title'" v-if="!collapsed">dc admin</span>
</div> </div>
</template> </template>
@ -10,7 +10,15 @@ import Logo from "@/assets/img/logo.jpg";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { useThemeConfig } from "@/store/modules/theme-config"; import { useThemeConfig } from "@/store/modules/theme-config";
const themeStore = useThemeConfig(); const themeStore = useThemeConfig();
const { collapsed } = storeToRefs(themeStore); const { collapsed, asideDark, layoutType } = storeToRefs(themeStore);
const isDark = computed(() => {
if (asideDark.value && layoutType.value === "layoutDefaults") {
return true;
} else {
return false;
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -31,5 +39,8 @@ const { collapsed } = storeToRefs(themeStore);
font-weight: bold; font-weight: bold;
font-size: $font-size-title-2; font-size: $font-size-title-2;
} }
.dark {
color: #fff;
}
} }
</style> </style>