|
|
@@ -1,5 +1,9 @@
|
|
|
<template>
|
|
|
- <div id="app" :class="{'isHomePage': $route.path === '/' || $route.path === '/index',vipHomePage: $route.path === '/member'}">
|
|
|
+ <div id="app" :class="{
|
|
|
+ 'isHomePage': $route.path === '/' || $route.path === '/index',
|
|
|
+ vipHomePage: $route.path === '/member',
|
|
|
+ isScroll: appStore.isScroll,
|
|
|
+ }">
|
|
|
<ElConfigProvider :locale="langStore.elLocale">
|
|
|
<el-container style="min-height: 100vh;">
|
|
|
<el-header class="box_shadow_card">
|
|
|
@@ -71,11 +75,12 @@
|
|
|
<script setup>
|
|
|
import { logout } from '@/api/auth.js'
|
|
|
import LoginDialog from './components/LoginDialog.vue'
|
|
|
-import { computed,ref,onMounted, provide, watch, nextTick } from 'vue'
|
|
|
+import { computed,ref,onMounted, provide, watch, nextTick,onUnmounted } from 'vue'
|
|
|
import LangSwitch from './components/LangSwitch.vue'
|
|
|
import { ElConfigProvider, ElMessage } from 'element-plus'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import { openNewTab, isLogin } from '@/utils/util.js'
|
|
|
+import { debounce } from 'lodash';
|
|
|
// 在Pinia安装后再设置初始语言
|
|
|
import { useLangStore } from '@/pinia/langStore'
|
|
|
import { useAppStore } from '@/pinia/appStore'
|
|
|
@@ -164,6 +169,20 @@ const handleLogout = () => {
|
|
|
})
|
|
|
};
|
|
|
|
|
|
+//监听页面是否滚动
|
|
|
+// 使用防抖优化滚动监听
|
|
|
+const handleScroll = debounce(() => {
|
|
|
+ appStore.isScroll = window.scrollY > 0;
|
|
|
+}, 10);
|
|
|
+
|
|
|
+// 监听滚动事件
|
|
|
+window.addEventListener('scroll', handleScroll);
|
|
|
+
|
|
|
+// 组件卸载时移除事件监听
|
|
|
+onUnmounted(() => {
|
|
|
+ window.removeEventListener('scroll', handleScroll);
|
|
|
+});
|
|
|
+
|
|
|
|
|
|
provide('openLoginDialog', openLoginDialog);
|
|
|
</script>
|
|
|
@@ -189,10 +208,15 @@ provide('openLoginDialog', openLoginDialog);
|
|
|
}
|
|
|
}
|
|
|
.vipHomePage {
|
|
|
-
|
|
|
.el-header {
|
|
|
background: rgba(255,255,255,0.5);
|
|
|
}
|
|
|
+ &.isScroll {
|
|
|
+ .el-header {
|
|
|
+ // background: url('@/assets/imgs/bg-header_2.png') no-repeat;
|
|
|
+ background: #FCEDDA;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-header {
|
zhangningning