修改样式

src/views/win/introduceDetail.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="introduce">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">集团介绍</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '集团介绍', enTitle: 'Water supply information' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <gsjs-detail v-if="type === 'gsjs'"></gsjs-detail>
           <scfm-detail v-else-if="type === 'scfm'"></scfm-detail>
@@ -26,8 +22,7 @@
   </el-row>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 // TODO:需要自己排下版
 /* 菜单 */
@@ -44,94 +39,58 @@ const type = computed(() => {
   return get(route, 'query.type')
 })
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+function useWindowScroll() {
+  const y = ref(0)
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  const handleScroll = () => {
+    y.value = window.scrollY
+  }
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
+
+  return { y }
+}
 </script>
 <style scoped lang="scss">
 .introduce {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        margin: 0 0 40px 0;
+      }
     }
-
+    
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/introduceIndex.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="introduce">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">集团介绍</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '集团介绍', enTitle: 'INTRODUCTION' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <brief-index />
         </el-col>
@@ -32,9 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
-
+import { ref, onMounted, onUnmounted } from 'vue'
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -54,93 +48,59 @@ import fengmaoIndex from './introduceParts/fengmaoIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
+
+function useWindowScroll() {
+  const y = ref(0)
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+  const handleScroll = () => {
+    y.value = window.scrollY
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+  })
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  return { y }
+}
 </script>
 <style scoped lang="scss">
 .introduce {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/brief5.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/brief5.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
+   
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/introduceIndex1.vue

@@ -1,83 +0,0 @@
-<template>
-      <el-row class="introduce">
-            <el-col :span="24" class="bigImage"></el-col>
-            <el-col :span="24" class="info">
-                  <el-col :span="24" class="menus">
-                        <menusIndex />
-                  </el-col>
-                  <el-col :span="24" class="bottom">
-                        <el-col :span="24" class="zero top">
-                              <top-index :info="{ title: '集团介绍', enTitle: 'INTRODUCTION' }" />
-                        </el-col>
-                        <el-col :span="24" class="zero">
-                              <company-index />
-                        </el-col>
-                        <el-col :span="24" class="foot">
-                              <foot-index />
-                        </el-col>
-                  </el-col>
-            </el-col>
-      </el-row>
-
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'introduceIndex' })
-/* 菜单 */
-import menusIndex from '../../components/windows/menusIndex.vue'
-
-/* 顶部信息 */
-import topIndex from '../../components/windows/topIndex.vue'
-
-
-/* 顶部信息 */
-import companyIndex from './introduceParts/companyIndex.vue'
-
-
-/* 底部信息 */
-import footIndex from '../../components/windows/footIndex.vue'
-</script>
-<style scoped lang="scss">
-.introduce {
-      position: relative;
-
-      .bigImage {
-            height: 480px;
-            overflow: hidden;
-            background-image: url('/brief5.png');
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-      }
-
-      .info {
-            position: absolute;
-            top: 0;
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
-
-            .menus {
-                  height: 66px;
-                  overflow: hidden;
-            }
-
-            .bottom {
-                  height: calc(100vh - 66px);
-                  overflow-y: auto;
-                  margin: 0 auto;
-
-
-                  .zero {
-                        margin: 0 0 40px 0;
-
-                  }
-
-                  .top {
-                        padding: 0 17%;
-                  }
-
-            }
-      }
-
-}
-</style>

src/views/win/inwaterDetail.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="introduce">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">走进水务</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '走进水务', enTitle: 'Water affairs' }" />
         </el-col>
+      </el-col>
+      <div  class="bottom">
         <el-col :span="24" class="zero"> 
           <detail></detail>
         </el-col>
@@ -25,10 +21,7 @@
   </el-row>
 </template>
 <script setup lang="ts">
-
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
-
+import { ref, onMounted, onUnmounted } from 'vue'
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -43,95 +36,59 @@ const type = computed(() => {
   return get(route, 'query.type')
 })
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+function useWindowScroll() {
+  const y = ref(0);
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
+
+  return { y };
+}
 </script>
 <style scoped lang="scss">
 .introduce {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+   
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/inwaterIndex.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="inwater">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">走进水务</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '走进水务', enTitle: 'Water affairs' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <honor-index />
         </el-col>
@@ -29,8 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
@@ -47,93 +42,59 @@ import addressIndex from './inwaterParts/addressIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
+
+function useWindowScroll() {
+  const y = ref(0);
+
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  return { y };
+}
 </script>
 <style scoped lang="scss">
 .inwater {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/inwater1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/inwater1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+    
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/messDetail.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="mess">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">{{ info.title }}</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="info" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <info-detail v-if="type === 'info'"></info-detail>
           <water-detail v-else-if="type === 'water'"></water-detail>
@@ -35,8 +31,8 @@ import footIndex from '../../components/windows/footIndex.vue'
 import infoDetail from './messParts/infoDetail.vue'
 import waterDetail from './messParts/waterDetail.vue'
 import serviceDetail from './messParts/serviceDetail.vue'
-import { get, throttle } from 'lodash-es'
-import { computed, onMounted, ref, onBeforeUnmount } from 'vue'
+import { get } from 'lodash-es'
+import { computed, onMounted, ref, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 const type = computed(() => {
@@ -53,96 +49,60 @@ onMounted(() => {
   }
 })
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+function useWindowScroll() {
+  const y = ref(0)
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  const handleScroll = () => {
+    y.value = window.scrollY
+  }
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
+
+  return { y }
+}
 </script>
 
 <style scoped lang="scss">
 .mess {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+    
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/messDetailSec.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="mess">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">用水发展</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="info" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <detail></detail>
         </el-col>
@@ -25,8 +21,7 @@
   </el-row>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -34,96 +29,59 @@ import menusIndex from '../../components/windows/menusIndex.vue'
 import footIndex from '../../components/windows/footIndex.vue'
 import detail from './messParts/detail.vue'
 const info = ref({ title: '用水发展', enTitle: 'DEVELOP' })
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
+
+function useWindowScroll() {
+  const y = ref(0);
+
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  return { y };
+}
 </script>
 
 <style scoped lang="scss">
 .mess {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
-    .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+        .bottom {
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/messIndex.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="mess">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">信息公开</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '信息公开', enTitle: 'Information Disclosure' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <service-index />
         </el-col>
@@ -29,8 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 // TODO: 企业服务:用水发展是一个带标签页的详情页;剩下的是另一个标签页的详情页
 // 企业信息是一个带标签页的详情页
 defineOptions({ name: 'introduceIndex' })
@@ -48,93 +43,58 @@ import serviceIndex from './messParts/serviceIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
+
+function useWindowScroll() {
+  const y = ref(0)
+
+  const handleScroll = () => {
+    y.value = window.scrollY
+  }
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+  })
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  return { y }
+}
 </script>
 <style scoped lang="scss">
 .mess {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/mess0.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/mess0.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
-    .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+        .bottom {
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/newsDetail.vue

@@ -1,20 +1,16 @@
 <template>
   <el-row class="introduce">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">集团新闻</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '集团新闻', enTitle: 'NEWS' }" />
         </el-col>
-        <el-col :span="24" class="zero"> 
+      </el-col>
+      <div class="bottom">
+        <el-col :span="24" class="zero">
           <detail></detail>
         </el-col>
         <el-col :span="24" class="foot">
@@ -25,104 +21,66 @@
   </el-row>
 </template>
 <script setup lang="ts">
-
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 import detail from './newsParts/detail.vue'
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
+
+function useWindowScroll() {
+  const y = ref(0)
+
+  const handleScroll = () => {
+    y.value = window.scrollY
+  }
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+  })
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  return { y }
+}
 </script>
 <style scoped lang="scss">
 .introduce {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/mess0.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+   
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/newsIndex.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="news">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">集团新闻</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '集团新闻', enTitle: 'news' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <list-index />
         </el-col>
@@ -26,9 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
-
+import { ref, onMounted, onUnmounted } from 'vue'
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -42,94 +36,59 @@ import listIndex from './newsParts/listIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
+
+function useWindowScroll() {
+  const y = ref(0);
+
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  return { y };
+}
 </script>
 <style scoped lang="scss">
 .news {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/news5.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/news5.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+    
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/popularwillDetail.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="mess">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">民意征集</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '民意征集', enTitle: 'POLL' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <detail></detail>
         </el-col>
@@ -30,97 +26,62 @@ import menusIndex from '../../components/windows/menusIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 import detail from './popularwillParts/detail.vue'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+import { ref, onMounted, onUnmounted } from 'vue'
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+function useWindowScroll() {
+  const y = ref(0);
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
-</script>
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-<style scoped lang="scss">
-.mess {
-  position: relative;
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
 
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
 
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
+  return { y };
+}
+</script>
 
+<style scoped lang="scss">
+.mess {
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-     /* 定义淡入淡出过渡效果的 CSS 类 */
-     .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+    
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/popularwillIndex.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="inwater">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">民意征集</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '民意征集', enTitle: 'poll' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <form-index />
         </el-col>
@@ -26,8 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
@@ -42,94 +37,59 @@ import formIndex from './popularwillParts/formIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
+
+function useWindowScroll() {
+  const y = ref(0);
+
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  return { y };
+}
 </script>
 <style scoped lang="scss">
 .inwater {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/popu1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/popu1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+    
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/queryDetail.vue

@@ -1,20 +1,16 @@
 <template>
   <el-row class="introduce">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">全文检索列表</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '全文检索列表', enTitle: 'Full Text Search List' }" />
         </el-col>
-        <el-col :span="24" class="zero"> 
+      </el-col>
+      <div ref="targetDiv" class="bottom">
+        <el-col :span="24" class="zero">
           <detail></detail>
         </el-col>
         <el-col :span="24" class="foot">
@@ -25,9 +21,7 @@
   </el-row>
 </template>
 <script setup lang="ts">
-
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -35,95 +29,58 @@ import menusIndex from '../../components/windows/menusIndex.vue'
 import footIndex from '../../components/windows/footIndex.vue'
 import detail from './queryParts/detail.vue'
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+function useWindowScroll() {
+  const y = ref(0)
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  const handleScroll = () => {
+    y.value = window.scrollY
+  }
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+  })
 
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
+
+  return { y }
+}
 </script>
 <style scoped lang="scss">
 .introduce {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-     /* 定义淡入淡出过渡效果的 CSS 类 */
-     .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
-    .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+        .bottom {
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/queryIndex.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="query">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">全文检索列表</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '全文检索列表', enTitle: 'Full Text Search List' }" />
         </el-col>
+      </el-col>
+      <div ref="targetDiv" class="bottom">
         <el-col :span="24" class="zero">
           <list-index />
         </el-col>
@@ -26,8 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -41,92 +36,58 @@ import listIndex from './queryParts/listIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+function useWindowScroll() {
+  const y = ref(0);
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
+
+  return { y };
+}
 </script>
 <style scoped lang="scss">
 .query {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-     /* 定义淡入淡出过渡效果的 CSS 类 */
-     .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
-    .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+       .bottom {
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/watersupplyDetail.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="introduce">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">供水信息</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '供水信息', enTitle: 'Water supply information' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <detail></detail>
         </el-col>
@@ -25,8 +21,7 @@
   </el-row>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { throttle } from 'lodash-es'
+import { ref, onMounted, onUnmounted } from 'vue'
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -40,94 +35,59 @@ const route = useRoute()
 const type = computed(() => {
   return get(route, 'query.type')
 })
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+function useWindowScroll() {
+  const y = ref(0)
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  const handleScroll = () => {
+    y.value = window.scrollY
+  }
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
+
+  return { y }
+}
 </script>
 <style scoped lang="scss">
 .introduce {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+    
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/win/watersupplyIndex.vue

@@ -1,19 +1,15 @@
 <template>
   <el-row class="watersupply">
-    <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>
-      <transition name="fade">
-        <el-row v-if="isScrollingDown" class="new-title">
-          <div class="title">供水信息</div>
-        </el-row>
-      </transition>
-      <div ref="targetDiv" class="bottom">
-        <el-col :span="24" class="zero top">
+      <el-col :span="24" class="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
+        <el-col :span="24" class="zero">
           <top-index :info="{ title: '供水信息', enTitle: 'Water supply information' }" />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <list-index />
         </el-col>
@@ -26,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { throttle } from 'lodash-es'
 
 defineOptions({ name: 'watersupplyIndex' })
@@ -42,95 +38,59 @@ import listIndex from './watersupplyParts/listIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 
-// 创建一个 ref 来引用目标 div
-const targetDiv = ref()
-// 用于存储是否向下滚动的状态
-const isScrollingDown = ref(false)
-// 滚动事件处理函数
-const handleScroll = () => {
-  const currentScrollTop = targetDiv.value.scrollTop
-  
-  // 判断是否不在最上面且向下滚动
-  if (currentScrollTop > 250) isScrollingDown.value = true
-  else isScrollingDown.value = false
-}
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
+
+function useWindowScroll() {
+  const y = ref(0);
+
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-// 创建节流后的滚动处理函数，每 200 毫秒触发一次
-const throttledScroll = throttle(handleScroll, 200)
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
 
-onMounted(() => {
-  // 组件挂载后，添加滚动事件监听器
-  targetDiv.value.addEventListener('scroll', throttledScroll)
-})
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
 
-onBeforeUnmount(() => {
-  // 组件卸载前，移除滚动事件监听器
-  targetDiv.value.removeEventListener('scroll', throttledScroll)
-})
+  return { y };
+}
 </script>
 <style scoped lang="scss">
 .watersupply {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/water1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
-
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
-    }
+    .top {
+      height: 480px;
+      background-image: url('/water1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
-    }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
+      .new_style {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #fff;
+        -webkit-transition: all 0.8s ease;
+        transition: all 0.8s ease;
+      }
+      .zero {
+        padding: 0 17%;
+      }
     }
-
+    
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      margin: 40px 0 0 0;
       .zero {
         margin: 0 0 40px 0;
       }
-
-      .top {
-        padding: 0 17%;
-      }
     }
   }
 }

src/views/windowsIndex.vue

@@ -35,7 +35,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
-import { throttle } from 'lodash-es'
 defineOptions({ name: 'windowsIndex' })
 /* 菜单 */
 import menusIndex from '../components/windows/menusIndex.vue'
@@ -88,7 +87,6 @@ function useWindowScroll() {
       .menus {
         height: 66px;
       }
-
       .new_style {
         position: fixed;
         left: 0;
@@ -104,16 +102,6 @@ function useWindowScroll() {
         padding: 0 17%;
       }
     }
-    .new-title {
-      display: flex;
-      padding: 0 17%;
-      color: rgb(25, 25, 26);
-      font-family: '宋体';
-      font-size: 40px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: 8px;
-    }
     .bottom {
       position: absolute;
       top: 400px;