提交 c11ecd6e authored 作者: matian's avatar matian

Merge remote-tracking branch 'origin/master'

<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, computed } from 'vue' import { ref, watch, computed } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import AppNav from './Nav.vue' import AppNav from './Nav.vue'
...@@ -20,7 +21,8 @@ watch(route, () => { ...@@ -20,7 +21,8 @@ watch(route, () => {
}) })
const classNames = computed(() => { const classNames = computed(() => {
return { return {
'has-menu': menuVisible.value 'has-menu': menuVisible.value,
'is-scrolled': isScrolled.value
} }
}) })
// 退出登录 // 退出登录
...@@ -29,15 +31,22 @@ function handleLogout() { ...@@ -29,15 +31,22 @@ function handleLogout() {
location.href = '/' location.href = '/'
}) })
} }
const { y } = useWindowScroll()
const isScrolled = computed(() => {
return y.value > 0
})
</script> </script>
<template> <template>
<header class="app-header" :class="classNames"> <header class="app-header" :class="classNames" ref="header">
<div class="app-header-inner"> <div class="app-header-inner">
<div class="app-header-left"> <div class="app-header-left">
<div class="logo"> <div class="logo">
<router-link to="/"> <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> </router-link>
</div> </div>
</div> </div>
...@@ -60,9 +69,15 @@ function handleLogout() { ...@@ -60,9 +69,15 @@ function handleLogout() {
<style lang="scss"> <style lang="scss">
.app-header { .app-header {
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; background: #fff;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
z-index: 1000; }
} }
.app-header-inner { .app-header-inner {
max-width: 1200px; max-width: 1200px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论