瀏覽代碼

更换Logo

Kevin Jiang 3 年之前
父節點
當前提交
93f36f4183

二進制
public/favicon.ico


File diff suppressed because it is too large
+ 7 - 0
src/assets/logo-banner.svg


File diff suppressed because it is too large
+ 13 - 1
src/assets/logo.svg


+ 1 - 1
src/router/index.ts

@@ -91,7 +91,7 @@ export const router = createRouter({
         {
           path: "",
           name: "HistoryIndex",
-          component: () => import("../views/HistoryView.vue"),
+          component: () => import("../views/history/HistoryView.vue"),
         }
       ]
     },

+ 0 - 6
src/views/HistoryView.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  历史记录
-</template>

+ 41 - 19
src/views/RouteView.vue

@@ -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>

+ 12 - 0
src/views/history/HistoryView.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <h1 class="title">历史记录</h1>
+</template>
+
+<style scoped lang="scss">
+.title {
+  font-size: 1.75em;
+}
+</style>

+ 1 - 1
src/views/search/AdvancedSearchView.vue

@@ -23,7 +23,7 @@ function onSearch() {
     <div class="search-box-wrap">
       <div>查询表达式:</div>
       <div>
-        <a-textarea v-model:value="query" placeholder="请输入查询表达式" :rows="4" />
+        <a-textarea v-model:value="query" placeholder="请输入查询表达式。例如:TP=(建筑工程)" :rows="4" />
       </div>
       <div class="operation-wrap">
         <a-space>