From a88eab39f6b2f5c33913d51fac4e885c052ed4a1 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 21 八月 2025 14:39:00 +0800
Subject: [PATCH] 整体样式修改
---
src/layout/index.vue | 108 +++++++++++++++++++++++++++---------------------------
1 files changed, 54 insertions(+), 54 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 60738ba..b317aad 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,16 +1,16 @@
<template>
- <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
- <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
- <navbar @setLayout="setLayout" />
- <sidebar v-if="!sidebar.hide" class="sidebar-container" />
- <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
- <div :class="{ 'fixed-header': fixedHeader }">
- <tags-view v-if="needTagsView" />
- </div>
- <app-main />
- <settings ref="settingRef" />
- </div>
- </div>
+ <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+ <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+ <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+ <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+ <div :class="{ 'fixed-header': fixedHeader }">
+ <navbar @setLayout="setLayout" />
+ <tags-view v-if="needTagsView" />
+ </div>
+ <app-main />
+ <settings ref="settingRef" />
+ </div>
+ </div>
</template>
<script setup>
@@ -29,84 +29,84 @@
const fixedHeader = computed(() => settingsStore.fixedHeader)
const classObj = computed(() => ({
- hideSidebar: !sidebar.value.opened,
- openSidebar: sidebar.value.opened,
- withoutAnimation: sidebar.value.withoutAnimation,
- mobile: device.value === 'mobile'
+ hideSidebar: !sidebar.value.opened,
+ openSidebar: sidebar.value.opened,
+ withoutAnimation: sidebar.value.withoutAnimation,
+ mobile: device.value === 'mobile'
}))
const { width, height } = useWindowSize()
const WIDTH = 992 // refer to Bootstrap's responsive design
watch(() => device.value, () => {
- if (device.value === 'mobile' && sidebar.value.opened) {
- useAppStore().closeSideBar({ withoutAnimation: false })
- }
+ if (device.value === 'mobile' && sidebar.value.opened) {
+ useAppStore().closeSideBar({ withoutAnimation: false })
+ }
})
watchEffect(() => {
- if (width.value - 1 < WIDTH) {
- useAppStore().toggleDevice('mobile')
- useAppStore().closeSideBar({ withoutAnimation: true })
- } else {
- useAppStore().toggleDevice('desktop')
- }
+ if (width.value - 1 < WIDTH) {
+ useAppStore().toggleDevice('mobile')
+ useAppStore().closeSideBar({ withoutAnimation: true })
+ } else {
+ useAppStore().toggleDevice('desktop')
+ }
})
function handleClickOutside() {
- useAppStore().closeSideBar({ withoutAnimation: false })
+ useAppStore().closeSideBar({ withoutAnimation: false })
}
const settingRef = ref(null)
function setLayout() {
- settingRef.value.openSetting()
+ settingRef.value.openSetting()
}
</script>
<style lang="scss" scoped>
- @import "@/assets/styles/mixin.scss";
- @import "@/assets/styles/variables.module.scss";
+@import "@/assets/styles/mixin.scss";
+@import "@/assets/styles/variables.module.scss";
.app-wrapper {
- @include clearfix;
- position: relative;
- height: 100%;
- width: 100%;
-
- &.mobile.openSidebar {
- position: fixed;
- top: 0;
- }
+ @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;
+ background: #000;
+ opacity: 0.3;
+ width: 100%;
+ top: 0;
+ height: 100%;
+ position: absolute;
+ z-index: 999;
}
.fixed-header {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 9;
- width: calc(100% - #{$base-sidebar-width});
- transition: width 0.28s;
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 9;
+ width: calc(100% - #{$base-sidebar-width});
+ transition: width 0.28s;
}
.hideSidebar .fixed-header {
- width: calc(100% - 120px);
+ width: calc(100% - 54px);
}
.sidebarHide .fixed-header {
- width: 100%;
+ width: 100%;
}
.mobile .fixed-header {
- width: 100%;
+ width: 100%;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3