|
- <template>
- <div>
- <!-- 侧边栏 -->
- <div><Sidebar class="sidebar-container" /></div>
- <!-- 页面主体 -->
- <div>
- <!-- nav -->
- <div><navbar /></div>
- <!-- 页面主体 -->
- <div><app-main /></div>
- </div>
- </div>
- </template>
-
- <script setup lang="ts">
- import { computed, watchEffect } from "vue";
- import { useWindowSize } from "@vueuse/core";
- import { AppMain, Navbar } from "./components/index";
- import SignSucceed from "../views/signSucceed/index.vue";
- import Sidebar from "./components/Sidebar/index.vue";
-
- import { useAppStore } from "@/store/modules/app";
- import { useSettingsStore } from "@/store/modules/settings";
- import { useRoute, useRouter } from "vue-router";
- const route = useRoute();
- const { params } = route;
- const { width } = useWindowSize();
-
- /**
- * 响应式布局容器固定宽度
- *
- * 大屏(>=1200px)
- * 中屏(>=992px)
- * 小屏(>=768px)
- */
- const WIDTH = 992;
-
- const appStore = useAppStore();
- const settingsStore = useSettingsStore();
-
- const fixedHeader = computed(() => settingsStore.fixedHeader);
- const showTagsView = computed(() => settingsStore.tagsView);
- const showSettings = computed(() => settingsStore.showSettings);
-
- const classObj = computed(() => ({
- hideSidebar: !appStore.sidebar.opened,
- openSidebar: appStore.sidebar.opened,
- withoutAnimation: appStore.sidebar.withoutAnimation,
- mobile: appStore.device === "mobile",
- }));
-
- watchEffect(() => {
- if (width.value < WIDTH) {
- appStore.toggleDevice("mobile");
- appStore.closeSideBar(true);
- } else {
- appStore.toggleDevice("desktop");
-
- if (width.value >= 1200) {
- //大屏
- appStore.openSideBar(true);
- } else {
- appStore.closeSideBar(true);
- }
- }
- });
-
- function handleOutsideClick() {
- appStore.closeSideBar(false);
- }
-
- onMounted(() => {});
- </script>
-
- <style lang="scss" scoped>
- .app-wrapper {
- &::after {
- display: table;
- clear: both;
- content: "";
- }
-
- position: relative;
- width: 100%;
- height: 100%;
- e &.mobile.openSidebar {
- position: fixed;
- top: 0;
- }
- }
-
- .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%;
- }
-
- .drawer-bg {
- position: absolute;
- top: 0;
- z-index: 999;
- width: 100%;
- height: 100%;
- // background: #1b213a;
- background: #000;
- opacity: 0.3;
- }
- </style>
|