|
|
@@ -1,5 +1,5 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, watch } from "vue";
|
|
|
+import { ref, watch, computed } from "vue";
|
|
|
import { RouterView } from "vue-router";
|
|
|
import NavMenu from "@/components/NavMenu.vue";
|
|
|
import { useSideBarStore } from "@/stores/side-bar";
|
|
|
@@ -8,6 +8,8 @@ const sideBarStore = useSideBarStore();
|
|
|
|
|
|
const brand = ref("技淘平台智慧产权大脑");
|
|
|
|
|
|
+const collapsed = computed(() => sideBarStore.collapsed);
|
|
|
+
|
|
|
watch(
|
|
|
() => sideBarStore.collapsed,
|
|
|
(value: boolean) => {
|
|
|
@@ -17,7 +19,7 @@ watch(
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <a-layout>
|
|
|
+ <a-layout class="layout">
|
|
|
<a-layout-sider
|
|
|
class="sider-nav-bar-wrap"
|
|
|
width="260"
|
|
|
@@ -25,7 +27,12 @@ watch(
|
|
|
v-model:collapsed="sideBarStore.collapsed"
|
|
|
collapsible
|
|
|
>
|
|
|
- <div class="logo">{{ brand }}</div>
|
|
|
+ <div class="logo">
|
|
|
+ <Transition name="fade">
|
|
|
+ <img src="@/assets/logo.svg" v-if="collapsed" />
|
|
|
+ <img src="@/assets/logo-banner.svg" v-else />
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
<NavMenu class="sider-nav" />
|
|
|
</a-layout-sider>
|
|
|
<a-layout>
|
|
|
@@ -37,25 +44,40 @@ watch(
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.sider-nav-bar-wrap {
|
|
|
- height: 100vh;
|
|
|
- .logo {
|
|
|
- height: 32px;
|
|
|
- // background: rgba(128, 128, 128, 0.5);
|
|
|
- margin: 16px;
|
|
|
- }
|
|
|
- .sider-nav {
|
|
|
- padding-bottom: 50px;
|
|
|
- }
|
|
|
+.fade-enter-active,
|
|
|
+.fade-leave-active {
|
|
|
+ transition: opacity 0.2s ease;
|
|
|
}
|
|
|
|
|
|
-.ant-layout-header {
|
|
|
- background: #ffffff;
|
|
|
- border-left: 1px solid #f0f2f5;
|
|
|
+.fade-enter-from,
|
|
|
+.fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
|
|
|
-.main-content {
|
|
|
- min-width: 800px;
|
|
|
- padding: 20px 40px;
|
|
|
+.layout {
|
|
|
+ background-color: #fff;
|
|
|
+ .main-content {
|
|
|
+ background-color: #fff;
|
|
|
+ border-left: 1px solid #f3f3f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sider-nav-bar-wrap {
|
|
|
+ height: 100vh;
|
|
|
+ .logo {
|
|
|
+ height: 32px;
|
|
|
+ margin: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .sider-nav {
|
|
|
+ border-right: 0;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ min-width: 800px;
|
|
|
+ padding: 20px 40px;
|
|
|
+ padding-bottom: 60px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|