From bd2f187c3f6e24576919e71c794cf8cb9f8c8bac Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 29 十二月 2022 11:21:41 +0800
Subject: [PATCH] 1.初级实现项目换肤功能
---
src/layout/index.vue | 79 ++++++++++++++++++++++-----------------
1 files changed, 45 insertions(+), 34 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6ae88f3..58ca9b0 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,13 +8,17 @@
<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 +26,9 @@
Navbar,
Sidebar,
AppMain,
- TagsView
+ TagsView,
+ RightPanel,
+ Settings
},
mixins: [ResizeMixin],
computed: {
@@ -37,6 +43,9 @@
},
fixedHeader() {
return this.$store.state.settings.fixedHeader
+ },
+ showSettings() {
+ return this.$store.state.settings.showSettings
},
classObj() {
return {
@@ -56,43 +65,45 @@
</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;
- }
+.app-wrapper {
+ @include clearfix;
+ position: relative;
+ height: 100%;
+ width: 100%;
- .fixed-header {
+ &.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