From 95faeea7f46a9d8f4817c8950c697835a463ec1b Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 31 十二月 2022 14:52:44 +0800
Subject: [PATCH] 1.项目页签图标替换
---
src/layout/index.vue | 103 +++++++++++++++++++++++++++++++--------------------
1 files changed, 63 insertions(+), 40 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6ae88f3..3add521 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,20 +1,32 @@
<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">
+ <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+ <sidebar
+ :class="$store.state.settings.menuIsHorizontal?
+ 'sidebar-container-sideBarWidthIsMenuHorizontal':
+ $store.state.settings.leftBackgroundColorValue?
+ 'sidebar-container-leftBackgroundColorValue':
+ 'sidebar-container'"
+ />
+ <div
+ :class="$store.state.settings.menuIsHorizontal?'main-container-sideBarWidthIsMenuHorizontal': 'main-container'"
+ >
<div :class="{'fixed-header':fixedHeader}">
- <navbar />
- <tags-view v-if="needTagsView" />
+ <navbar/>
+ <tags-view v-if="needTagsView"/>
</div>
- <app-main />
+ <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 +34,9 @@
Navbar,
Sidebar,
AppMain,
- TagsView
+ TagsView,
+ RightPanel,
+ Settings
},
mixins: [ResizeMixin],
computed: {
@@ -37,6 +51,9 @@
},
fixedHeader() {
return this.$store.state.settings.fixedHeader
+ },
+ showSettings() {
+ return this.$store.state.settings.showSettings
},
classObj() {
return {
@@ -56,43 +73,49 @@
</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 {
+.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