From adb74c51618faf025fe1d46bf6b22db895c2608f Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期日, 12 二月 2023 11:16:14 +0800
Subject: [PATCH] 1.提交
---
src/layout/index.vue | 116 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 80 insertions(+), 36 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6ae88f3..ef496af 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,20 +1,49 @@
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
- <sidebar class="sidebar-container" />
- <div class="main-container">
+
+ <!-- <sidebar-->
+ <!-- :class="$store.state.settings.menuIsHorizontal?-->
+ <!-- 'sidebar-container-sideBarWidthIsMenuHorizontal':-->
+ <!-- !$store.state.settings.leftBackgroundColorValue&&sidebar.opened?-->
+ <!-- 'sidebar-container-leftBackgroundColorValue':-->
+ <!-- 'sidebar-container'"-->
+ <!-- />-->
+
+ <!--1.褰撲负妯悜鑿滃崟鏃�-->
+ <sidebar
+ v-if="$store.state.settings.menuIsHorizontal"
+ class="sidebar-container-sideBarWidthIsMenuHorizontal"
+ />
+ <!-- 2.褰撲负绔栧悜鑿滃崟涓斾负娣辫壊鑳屾櫙鑹叉椂-->
+ <sidebar
+ v-else-if="!$store.state.settings.menuIsHorizontal&&$store.state.settings.leftBackgroundColorValue"
+ class="sidebar-container"
+ />
+ <!-- 3.褰撲负绔栧悜鑿滃崟涓斾负娴呰壊鑳屾櫙鑹叉椂-->
+ <sidebar
+ v-else-if="!$store.state.settings.menuIsHorizontal&&!$store.state.settings.leftBackgroundColorValue"
+ :class="sidebar.opened?'sidebar-container-leftBackgroundColorValue':'sidebar-container sidebarContainer'"
+ />
+ <div
+ :class="$store.state.settings.menuIsHorizontal?'main-container-sideBarWidthIsMenuHorizontal': 'main-container'"
+ >
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<tags-view v-if="needTagsView" />
</div>
<app-main />
+ <right-panel v-if="showSettings">
+ <settings />
+ </right-panel>
</div>
</div>
</template>
<script>
-import { Navbar, Sidebar, AppMain, TagsView } from './components'
+import { Navbar, Sidebar, AppMain, TagsView, Settings } from './components'
import ResizeMixin from './mixin/ResizeHandler'
+import RightPanel from '@/components/RightPanel'
export default {
name: 'Layout',
@@ -22,7 +51,9 @@
Navbar,
Sidebar,
AppMain,
- TagsView
+ TagsView,
+ RightPanel,
+ Settings
},
mixins: [ResizeMixin],
computed: {
@@ -37,6 +68,9 @@
},
fixedHeader() {
return this.$store.state.settings.fixedHeader
+ },
+ showSettings() {
+ return this.$store.state.settings.showSettings
},
classObj() {
return {
@@ -56,43 +90,53 @@
</script>
<style lang="scss" scoped>
- @import "~@/styles/mixin.scss";
- @import "~@/styles/variables.scss";
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
- .app-wrapper {
- @include clearfix;
- position: relative;
- height: 100%;
- width: 100%;
- &.mobile.openSidebar{
- position: fixed;
- top: 0;
- }
- }
- .drawer-bg {
- background: #000;
- opacity: 0.3;
- width: 100%;
- top: 0;
- height: 100%;
- position: absolute;
- z-index: 999;
- }
+//@import "~@/styles/element-variables.scss";
- .fixed-header {
+.sidebarContainer {
+ background-color: #f8f8fa !important;
+}
+
+.app-wrapper {
+ @include clearfix;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ //color: #{$--color-primary};
+ //background: #{$--color-primary};
+
+ &.mobile.openSidebar {
position: fixed;
top: 0;
- right: 0;
- z-index: 9;
- width: calc(100% - #{$sideBarWidth});
- transition: width 0.28s;
}
+}
- .hideSidebar .fixed-header {
- width: calc(100% - 54px)
- }
+.drawer-bg {
+ background: #000;
+ opacity: 0.3;
+ width: 100%;
+ top: 0;
+ height: 100%;
+ position: absolute;
+ z-index: 999;
+}
- .mobile .fixed-header {
- width: 100%;
- }
+.fixed-header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 9;
+ width: calc(100% - #{$sideBarWidth});
+ transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+ width: calc(100% - 54px)
+}
+
+.mobile .fixed-header {
+ width: 100%;
+}
</style>
--
Gitblit v1.9.3