修改样式

src/views/windowsIndex.vue

@@ -1,14 +1,15 @@
 <template>
   <el-row class="main">
     <el-col :span="24" class="bigImage" :class="{ 'new-style': isScrollingDown }"></el-col>
-
     <el-col :span="24" class="info">
       <el-col :span="24" class="menus">
         <menusIndex />
       </el-col>
-      <el-row v-if="isScrollingDown" class="new-title">
-        <div class="title">长春水投</div>
-      </el-row>
+      <transition name="fade">
+        <el-row v-if="isScrollingDown" class="new-title">
+          <div class="title">长春水投</div>
+        </el-row>
+      </transition>
       <div ref="targetDiv" :span="24" class="bottom">
         <el-col :span="24" class="zero">
           <topIndex />
@@ -38,6 +39,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
+import throttle from 'lodash/throttle'
 defineOptions({ name: 'windowsIndex' })
 /* 菜单 */
 import menusIndex from '../components/windows/menusIndex.vue'
@@ -60,28 +62,26 @@ import footIndex from '../components/windows/footIndex.vue'
 const targetDiv = ref()
 // 用于存储是否向下滚动的状态
 const isScrollingDown = ref(false)
-// 存储上一次的滚动位置
-let lastScrollTop = 0
-
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
   console.log(currentScrollTop)
   // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 0) isScrollingDown.value = true
+  if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false
-  // 更新上一次的滚动位置
-  lastScrollTop = currentScrollTop
 }
 
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
 onMounted(() => {
   // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', handleScroll)
+  targetDiv.value.addEventListener('scroll', throttledScroll)
 })
 
 onBeforeUnmount(() => {
   // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', handleScroll)
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
 })
 </script>
 <style scoped lang="scss">
@@ -95,8 +95,9 @@ onBeforeUnmount(() => {
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
+
   .new-style {
-    height: 11em;
+    height: 10em;
     width: 100%;
     top: 0;
   }
@@ -112,13 +113,22 @@ onBeforeUnmount(() => {
       height: 66px;
       overflow: hidden;
     }
+    /* 定义淡入淡出过渡效果的 CSS 类 */
+    .fade-enter-active,
+    .fade-leave-active {
+      transition: opacity 0.5s ease;
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+      opacity: 0;
+    }
     .new-title {
       display: flex;
-      align-items: center;
-      justify-content: center;
+      padding: 0 17%;
       color: rgb(25, 25, 26);
       font-family: '宋体';
-      font-size: 70px;
+      font-size: 40px;
       font-weight: 700;
       line-height: 101px;
       letter-spacing: 8px;