| | |
| | | |
| | | <template> |
| | | <div> |
| | | <div class="default-theme" style="display: flex; height: 100%; background-color: #fff"> |
| | | <div v-show="collapseStore.isOpen" class="default-theme-left"> |
| | | <a-layout class="default-theme" style="display: flex; height: 100%; background-color: #fff"> |
| | | <a-layout-sider width="250" style="border-inline-end: 1px solid rgb(5 5 5 / 6%)" :style="siderStyle" v-show="collapseStore.isOpen"> |
| | | <LeftNav></LeftNav> |
| | | </div> |
| | | <div style="height: 100%" :class="collapseStore.isOpen ? 'onOpen' : 'isOpen'"> |
| | | </a-layout-sider> |
| | | <a-layout> |
| | | <a-layout-content :style="contentStyle"> |
| | | <RouterView> |
| | | <template #default="{ Component, route }"> |
| | | <transition |
| | |
| | | </transition> |
| | | </template> |
| | | </RouterView> |
| | | </div> |
| | | </div> |
| | | </a-layout-content> |
| | | </a-layout> |
| | | </a-layout> |
| | | <div @click="fuToggleContent(!collapseStore.isOpen)" class="toggle-btn" :class="collapseStore.isOpen ? 'iconOpen' : 'onIconOpen'"> |
| | | <LeftOutlined v-if="collapseStore.isOpen" /> |
| | | <RightOutlined v-else /> |
| | |
| | | Component: FunctionalComponent & { type: Recordable }; |
| | | route: RouteLocation; |
| | | } |
| | | const siderStyle = { |
| | | lineHeight: '120px', |
| | | backgroundColor:'#fff', |
| | | }; |
| | | const contentStyle = { |
| | | lineHeight: '120px', |
| | | backgroundColor:'#fff', |
| | | |
| | | }; |
| | | function getTransitionName({ |
| | | route, |
| | | openCache, |
| | |
| | | } |
| | | } |
| | | |
| | | .default-theme-left { |
| | | width: 20%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .toggle-btn { |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .onOpen { |
| | | width: 80%; |
| | | width: 86vw; |
| | | } |
| | | |
| | | .isOpen { |
| | | width: 100%; |
| | | width: 100vw; |
| | | } |
| | | |
| | | .iconOpen { |
| | | left: 20%; |
| | | left: 250px; |
| | | } |
| | | |
| | | .onIconOpen { |