| | |
| | | > |
| | | <el-scrollbar |
| | | ref="layoutMainScrollbarRef" |
| | | class="layout-main-scroll layout-backtop-header-fixed" |
| | | class="layout-main-scroll layout-backtop-header-fixed" |
| | | wrap-class="layout-main-scroll flex" |
| | | view-class="layout-main-scroll bg-[#1c1e1d] flex h100 w-full" |
| | | > |
| | | <SideBar /> |
| | | <div class="flex-auto flex-col flex right-container"> |
| | | <waterHeader class="flex-0"/> |
| | | <SideBar v-if="!isSharePage && sidebarIsShow" :isShow="sidebarIsShow" @toggleSidebar="toggleSidebar" /> |
| | | <SidebarOther v-if="!isSharePage && !sidebarIsShow" :isShow="!sidebarIsShow" @toggleSidebar="toggleSidebar" /> |
| | | <div |
| | | class="flex-auto flex-col flex right-container" |
| | | :class="{ |
| | | // 'm-[6px]': !isSharePage, |
| | | // 'rounded-[10px]': !isSharePage, |
| | | 'bg-[#1c1e1d]': !isSharePage, |
| | | 'bg-[#f7f8fa]': isSharePage, |
| | | }" |
| | | > |
| | | <Header v-if="!isSharePage" class="flex-0" :sidebarIsShow="sidebarIsShow" /> |
| | | <ShareHeader v-else class="flex-0"></ShareHeader> |
| | | <LayoutParentView class="flex-auto" /> |
| | | </div> |
| | | <!-- <LayoutFooter v-if="isFooter" /> --> |
| | | <Login v-show="isShowLogin" /> |
| | | </el-scrollbar> |
| | | <el-backtop :target="setBacktopClass" /> |
| | | </el-main> |
| | | </template> |
| | | |
| | | <script setup lang="ts" name="layoutMain"> |
| | | import { defineAsyncComponent, onMounted, computed, ref } from 'vue'; |
| | | import { useRoute } from 'vue-router'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { computed, defineAsyncComponent, onMounted, ref } from 'vue'; |
| | | import { useRoute } from 'vue-router'; |
| | | import Header from './header/Header.vue'; |
| | | import ShareHeader from './header/ShareHeader.vue'; |
| | | |
| | | import Login from './login/Login.vue'; |
| | | import SideBar from './sidebar/Sidebar.vue'; |
| | | import SidebarOther from './sidebar/SidebarOther.vue'; |
| | | import { isSharePage, isShowLogin } from '/@/stores/chatRoom'; |
| | | import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; |
| | | import { useThemeConfig } from '/@/stores/themeConfig'; |
| | | import { NextLoading } from '/@/utils/loading'; |
| | | import SideBar from './SideBar.vue'; |
| | | import WIHeader from './WIHeader.vue'; |
| | | import waterHeader from '/@/views/project/ch/home/component/waterRight/header.vue'; |
| | | |
| | | import { Local } from '/@/utils/storage'; |
| | | // 引入组件 |
| | | const LayoutParentView = defineAsyncComponent(() => import('/@/layout/routerView/parent.vue')); |
| | | const LayoutFooter = defineAsyncComponent(() => import('/@/layout/footer/index.vue')); |
| | | |
| | | // 定义变量内容 |
| | | const layoutMainScrollbarRef = ref(); |
| | | const route = useRoute(); |
| | |
| | | const storesThemeConfig = useThemeConfig(); |
| | | const { themeConfig } = storeToRefs(storesThemeConfig); |
| | | const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes); |
| | | |
| | | // 设置 footer 显示/隐藏 |
| | | const isFooter = computed(() => { |
| | | return themeConfig.value.isFooter && !route.meta.isIframe; |
| | |
| | | defineExpose({ |
| | | layoutMainScrollbarRef, |
| | | }); |
| | | |
| | | //#region ====================== 侧边栏显示隐藏 ====================== |
| | | const sidebarIsShow = ref(Local.get('sidebarIsShow') ?? true); |
| | | const toggleSidebar = (val) => { |
| | | console.log('🚀 ~ val:', val); |
| | | sidebarIsShow.value = val; |
| | | Local.set('sidebarIsShow', val); |
| | | }; |
| | | //#endregion |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .right-container{ |
| | | .right-container { |
| | | width: 100vw; |
| | | // margin: 0; |
| | | padding: 0; |
| | | overflow: hidden; |
| | | -webkit-box-sizing: border-box; |
| | | box-sizing: border-box; |
| | | background-color: #1c1e1d; |
| | | // background-color: #1c1e1d; |
| | | font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
| | | margin: 6px; |
| | | border-radius: 10px; |
| | | |
| | | // margin: 6px; |
| | | // border-radius: 10px; |
| | | } |
| | | </style> |