wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-20 19:09:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

wip: 顶部布局模式开发中

Browse Source
This commit is contained in:
pany 2023-07-19 09:05:55 +08:00
parent 310ab846fa
commit 58cfdebcca
8 changed files with 28 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/layouts/LeftMode.vue
View File

@ -67,6 +67,7 @@ $transition-time: 0.35s;
}
.sidebar-container {
background-color: var(--v3-sidebar-menu-bg-color);
transition: width $transition-time;
width: var(--v3-sidebar-width) !important;
height: 100%;

1
src/layouts/LeftTopMode.vue
View File

@ -63,6 +63,7 @@ $transition-time: 0.35s;
}
.layout-header {
background-color: var(--v3-header-bg-color);
box-shadow: var(--el-box-shadow-lighter);
}

4
src/layouts/TopMode.vue
View File

@ -52,6 +52,7 @@ $transition-time: 0.35s;
}
.layout-header {
background-color: var(--v3-header-bg-color);
box-shadow: var(--el-box-shadow-lighter);
}
@ -67,9 +68,6 @@ $transition-time: 0.35s;
}
.hasTagsView {
.sidebar-container {
padding-top: var(--v3-header-height);
}
.app-main {
padding-top: var(--v3-header-height);
}

10
src/layouts/components/Logo/index.vue
View File

@ -1,8 +1,6 @@
<script lang="ts" setup>
import { computed } from "vue"
import { storeToRefs } from "pinia"
import { useSettingsStore } from "@/store/modules/settings"
import { getCssVariableValue } from "@/utils"
import logo from "@/assets/layouts/logo.png?url"
import logoText1 from "@/assets/layouts/logo-text-1.png?url"
import logoText2 from "@/assets/layouts/logo-text-2.png?url"
@ -17,12 +15,6 @@ const props = withDefaults(defineProps<Props>(), {
const settingsStore = useSettingsStore()
const { layoutMode } = storeToRefs(settingsStore)
const bgCloor = computed(() => {
return layoutMode.value !== "left"
? getCssVariableValue("--v3-header-bg-color")
: getCssVariableValue("--v3-sidebar-menu-bg-color")
})
</script>
<template>
@ -44,7 +36,7 @@ const bgCloor = computed(() => {
width: 100%;
height: var(--v3-header-height);
line-height: var(--v3-header-height);
background-color: v-bind(bgCloor);
background-color: transparent;
text-align: center;
overflow: hidden;
.layout-logo {

13
src/layouts/components/NavigationBar/index.vue
View File

@ -77,28 +77,29 @@ const logout = () => {
height: var(--v3-navigationbar-height);
overflow: hidden;
background: var(--v3-header-bg-color);
display: flex;
justify-content: space-between;
.hamburger {
display: flex;
align-items: center;
height: 100%;
float: left;
padding: 0 15px;
cursor: pointer;
}
.breadcrumb {
float: left;
flex: 1;
// 参考 Bootstrap 的响应式设计将宽度设置为 576
@media screen and (max-width: 576px) {
display: none;
}
}
.sidebar {
float: left;
width: 992px;
height: 100%;
flex: 1;
:deep(.el-menu) {
background-color: transparent;
}
}
.right-menu {
float: right;
margin-right: 10px;
height: 100%;
display: flex;

6
src/layouts/components/Sidebar/index.vue
View File

@ -93,12 +93,14 @@ const tipLineWidth = computed(() => {
.has-logo {
.el-scrollbar {
height: calc(100% - var(--v3-header-height));
// 多 1% 是为了在左侧模式时侧边栏最底部不显示 1px 左右的白色线条
height: calc(101% - var(--v3-header-height));
}
}
.el-scrollbar {
height: 100%;
// 多 5% 是为了在顶部模式时不显示垂直滚动条
height: 105%;
:deep(.scrollbar-wrapper) {
// 限制水平宽度
overflow-x: hidden !important;

11
src/styles/theme/core/element-plus.scss
View File

@ -4,17 +4,17 @@
.el-popper {
border: none !important;
.el-menu {
background-color: lighten($theme-bg-color, 4%) !important;
background-color: lighten($theme-bg-color, 2%) !important;
.el-menu-item {
background-color: lighten($theme-bg-color, 4%) !important;
background-color: lighten($theme-bg-color, 2%) !important;
&.is-active,
&:hover {
background-color: lighten($theme-bg-color, 8%) !important;
background-color: lighten($theme-bg-color, 6%) !important;
color: $active-font-color !important;
}
}
.el-sub-menu__title {
background-color: lighten($theme-bg-color, 4%) !important;
background-color: lighten($theme-bg-color, 2%) !important;
}
.el-sub-menu {
&.is-active {
@ -24,4 +24,7 @@
}
}
}
.el-menu--horizontal {
border: none;
}
}

15
src/styles/theme/core/layouts.scss
View File

@ -9,26 +9,22 @@
}
.app-wrapper {
// Logo
.layout-logo-container {
background-color: lighten($theme-bg-color, 2%) !important;
}
// 侧边栏
.sidebar-container {
background-color: lighten($theme-bg-color, 2%);
.el-menu {
background-color: lighten($theme-bg-color, 4%) !important;
background-color: lighten($theme-bg-color, 2%) !important;
.el-menu-item {
background-color: lighten($theme-bg-color, 4%) !important;
background-color: lighten($theme-bg-color, 2%) !important;
&.is-active,
&:hover {
background-color: lighten($theme-bg-color, 8%) !important;
background-color: lighten($theme-bg-color, 6%) !important;
color: $active-font-color !important;
}
}
}
.el-sub-menu__title {
background-color: lighten($theme-bg-color, 4%) !important;
background-color: lighten($theme-bg-color, 2%) !important;
}
.el-sub-menu {
&.is-active {
@ -41,6 +37,7 @@
// Header
.layout-header {
background-color: $theme-bg-color;
border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
}