Merge remote-tracking branch 'origin/master'

src/components/layout/Header.vue

 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
+import { useWindowScroll } from '@vueuse/core'
 import { useUserStore } from '@/stores/user'
 import { useRoute } from 'vue-router'
 import AppNav from './Nav.vue'
@@ -20,7 +21,8 @@ watch(route, () => {
 })
 const classNames = computed(() => {
   return {
-    'has-menu': menuVisible.value
+    'has-menu': menuVisible.value,
+    'is-scrolled': isScrolled.value
   }
 })
 // 退出登录
@@ -29,15 +31,22 @@ function handleLogout() {
     location.href = '/'
   })
 }
+
+const { y } = useWindowScroll()
+
+const isScrolled = computed(() => {
+  return y.value > 0
+})
 </script>
 
 <template>
-  <header class="app-header" :class="classNames">
+  <header class="app-header" :class="classNames" ref="header">
     <div class="app-header-inner">
       <div class="app-header-left">
         <div class="logo">
           <router-link to="/">
-            <img src="@/assets/images/logo.png" />
+            <img src="@/assets/images/logo.png" v-if="isScrolled" />
+            <img src="@/assets/images/logo_white.png" v-else />
           </router-link>
         </div>
       </div>
@@ -60,9 +69,15 @@ function handleLogout() {
 
 <style lang="scss">
 .app-header {
-  background: #fff;
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  left: 0;
+  right: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
   z-index: 1000;
+  &.is-scrolled {
+    background: #fff;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+  }
 }
 .app-header-inner {
   max-width: 1200px;