修改图片滚动

src/views/win/introduceDetail.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="introduce">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '集团介绍', enTitle: 'Water supply information' }" />
         </el-col>
@@ -16,11 +21,14 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
+
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -35,6 +43,32 @@ 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
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -48,6 +82,12 @@ const type = computed(() => {
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -59,6 +99,26 @@ const type = computed(() => {
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
 
     .bottom {
       height: calc(100vh - 66px);

src/views/win/introduceIndex.vue

@@ -1,36 +1,40 @@
 <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">
-                              <brief-index />
-                        </el-col>
-                        <!-- <el-col :span="24" class="zero">
-                              <setting-index />
-                        </el-col> -->
-                        <el-col :span="24" class="zero">
-                              <combrief-index />
-                        </el-col>
-                        <el-col :span="24" class="zero">
-                              <fengmao-index />
-                        </el-col>
-                        <el-col :span="24" class="foot">
-                              <foot-index />
-                        </el-col>
-                  </el-col>
-            </el-col>
-      </el-row>
-
+  <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">
+          <top-index :info="{ title: '集团介绍', enTitle: 'INTRODUCTION' }" />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <brief-index />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <combrief-index />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <fengmao-index />
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
+
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -49,48 +53,95 @@ 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
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </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;
+  position: relative;
 
-            .menus {
-                  height: 66px;
-                  overflow: hidden;
-            }
+  .bigImage {
+    height: 480px;
+    overflow: hidden;
+    background-image: url('/brief5.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 
-            .bottom {
-                  height: calc(100vh - 66px);
-                  overflow-y: auto;
-                  margin: 0 auto;
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
 
+  .info {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
 
-                  .zero {
-                        margin: 0 0 40px 0;
+    .menus {
+      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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+    .bottom {
+      height: calc(100vh - 66px);
+      overflow-y: auto;
+      margin: 0 auto;
 
-                  .top {
-                        padding: 0 17%;
-                  }
-
-            }
+      .zero {
+        margin: 0 0 40px 0;
       }
 
+      .top {
+        padding: 0 17%;
+      }
+    }
+  }
 }
 </style>

src/views/win/inwaterDetail.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="introduce">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '走进水务', enTitle: 'Water affairs' }" />
         </el-col>
@@ -15,11 +20,15 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
+
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
+
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -33,6 +42,32 @@ 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
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -46,6 +81,12 @@ const type = computed(() => {
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -58,6 +99,27 @@ const type = computed(() => {
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/inwaterIndex.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="inwater">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '走进水务', enTitle: 'Water affairs' }" />
         </el-col>
@@ -18,12 +23,15 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
+
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -38,6 +46,32 @@ 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
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 <style scoped lang="scss">
 .inwater {
@@ -50,7 +84,11 @@ import footIndex from '../../components/windows/footIndex.vue'
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
-
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
   .info {
     position: absolute;
     top: 0;
@@ -63,6 +101,27 @@ import footIndex from '../../components/windows/footIndex.vue'
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/messDetail.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="mess">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="info" />
         </el-col>
@@ -17,7 +22,7 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
@@ -30,8 +35,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 } from 'lodash-es'
-import { computed, onMounted, ref } from 'vue'
+import { get, throttle } from 'lodash-es'
+import { computed, onMounted, ref, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 const type = computed(() => {
@@ -47,6 +52,32 @@ onMounted(() => {
     info.value = { title: '企业信息', enTitle: 'Information' }
   }
 })
+
+// 创建一个 ref 来引用目标 div
+const targetDiv = ref()
+// 用于存储是否向下滚动的状态
+const isScrollingDown = ref(false)
+// 滚动事件处理函数
+const handleScroll = () => {
+  const currentScrollTop = targetDiv.value.scrollTop
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 
 <style scoped lang="scss">
@@ -61,6 +92,12 @@ onMounted(() => {
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -73,6 +110,27 @@ onMounted(() => {
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/messDetailSec.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="mess">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="info" />
         </el-col>
@@ -15,18 +20,45 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
+
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 import detail from './messParts/detail.vue'
-import { ref } from 'vue'
 const info = ref({ title: '用水发展', enTitle: 'DEVELOP' })
+// 创建一个 ref 来引用目标 div
+const targetDiv = ref()
+// 用于存储是否向下滚动的状态
+const isScrollingDown = ref(false)
+// 滚动事件处理函数
+const handleScroll = () => {
+  const currentScrollTop = targetDiv.value.scrollTop
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 
 <style scoped lang="scss">
@@ -41,6 +73,12 @@ const info = ref({ title: '用水发展', enTitle: 'DEVELOP' })
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -53,6 +91,27 @@ const info = ref({ title: '用水发展', enTitle: 'DEVELOP' })
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/messIndex.vue

@@ -1,30 +1,36 @@
 <template>
-      <el-row class="mess">
-            <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: 'Information Disclosure' }" />
-                        </el-col>
-                        <el-col :span="24" class="zero">
-                              <service-index />
-                        </el-col>
-                        <el-col :span="24" class="zero">
-                              <commess-index />
-                        </el-col>
-                        <el-col :span="24" class="foot">
-                              <foot-index />
-                        </el-col>
-                  </el-col>
-            </el-col>
-      </el-row>
-
+  <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">
+          <top-index :info="{ title: '信息公开', enTitle: 'Information Disclosure' }" />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <service-index />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <commess-index />
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
 // TODO: 企业服务:用水发展是一个带标签页的详情页;剩下的是另一个标签页的详情页
 // 企业信息是一个带标签页的详情页
 defineOptions({ name: 'introduceIndex' })
@@ -39,51 +45,97 @@ import commessIndex from './messParts/commessIndex.vue'
 /* 企业服务 */
 import serviceIndex from './messParts/serviceIndex.vue'
 
-
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
-</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%;
-      }
-
-      .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;
+// 创建一个 ref 来引用目标 div
+const targetDiv = ref()
+// 用于存储是否向下滚动的状态
+const isScrollingDown = ref(false)
+// 滚动事件处理函数
+const handleScroll = () => {
+  const currentScrollTop = targetDiv.value.scrollTop
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
 
-                  }
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
 
-                  .top {
-                        padding: 0 17%;
-                  }
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
 
-            }
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
+</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;
+    }
+
+    .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;
+    }
+
+    .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/messParts/infoDetail.vue

@@ -3,7 +3,7 @@
     <el-col :span="24" class="info">
       <el-col :span="24" class="tabs">
         <el-col
-          :span="5"
+          :span="3"
           :class="['tabList', item.id == tabActive ? 'tabActiveList' : '']"
           v-for="(item, index) in tabList"
           :key="index"

src/views/win/newsDetail.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="introduce">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '集团新闻', enTitle: 'NEWS' }" />
         </el-col>
@@ -15,17 +20,45 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
+
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
 // 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
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -39,6 +72,12 @@ import detail from './newsParts/detail.vue'
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -51,6 +90,27 @@ import detail from './newsParts/detail.vue'
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/newsIndex.vue

@@ -1,27 +1,34 @@
 <template>
-      <el-row class="news">
-            <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: 'news' }" />
-                        </el-col>
-                        <el-col :span="24" class="zero">
-                              <list-index />
-                        </el-col>
-                        <el-col :span="24" class="foot">
-                              <foot-index />
-                        </el-col>
-                  </el-col>
-            </el-col>
-      </el-row>
-
+  <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">
+          <top-index :info="{ title: '集团新闻', enTitle: 'news' }" />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <list-index />
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
+
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -32,52 +39,98 @@ import topIndex from '../../components/windows/topIndex.vue'
 /* 新闻 */
 import listIndex from './newsParts/listIndex.vue'
 
-
-
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
-</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%;
-      }
-
-      .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;
+// 创建一个 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
+}
 
-                  }
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
 
-                  .top {
-                        padding: 0 17%;
-                  }
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
 
-            }
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
+</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;
+    }
+
+    .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;
+    }
+
+    .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/popularwillDetail.vue

@@ -1,13 +1,18 @@
 <template>
   <el-row class="mess">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
-          <top-index :info="info" />
+          <top-index :info="{ title: '民意征集', enTitle: 'POLL' }" />
         </el-col>
         <el-col :span="24" class="zero">
           <detail></detail>
@@ -15,7 +20,7 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
@@ -25,8 +30,32 @@ import menusIndex from '../../components/windows/menusIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 import detail from './popularwillParts/detail.vue'
-import { ref } from 'vue'
-const info = ref({ title: '民意征集', enTitle: 'POLL' })
+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
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 
 <style scoped lang="scss">
@@ -41,6 +70,12 @@ const info = ref({ title: '民意征集', enTitle: 'POLL' })
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -53,6 +88,27 @@ const info = ref({ title: '民意征集', enTitle: 'POLL' })
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/popularwillIndex.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="inwater">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '民意征集', enTitle: 'poll' }" />
         </el-col>
@@ -15,12 +20,15 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
+
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -33,6 +41,32 @@ 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
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 <style scoped lang="scss">
 .inwater {
@@ -45,6 +79,11 @@ import footIndex from '../../components/windows/footIndex.vue'
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
 
   .info {
     position: absolute;
@@ -58,6 +97,27 @@ import footIndex from '../../components/windows/footIndex.vue'
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/queryDetail.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="introduce">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '全文检索列表', enTitle: 'Full Text Search List' }" />
         </el-col>
@@ -15,17 +20,46 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
+
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
 // TODO:需要自己排下版
 /* 菜单 */
 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
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
+
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -39,6 +73,12 @@ import detail from './queryParts/detail.vue'
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -51,6 +91,27 @@ import detail from './queryParts/detail.vue'
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/queryIndex.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="query">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '全文检索列表', enTitle: 'Full Text Search List' }" />
         </el-col>
@@ -15,12 +20,14 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -33,6 +40,31 @@ 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
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 <style scoped lang="scss">
 .query {
@@ -45,7 +77,11 @@ import footIndex from '../../components/windows/footIndex.vue'
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
-
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
   .info {
     position: absolute;
     top: 0;
@@ -58,6 +94,27 @@ import footIndex from '../../components/windows/footIndex.vue'
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/watersupplyDetail.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="introduce">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '供水信息', enTitle: 'Water supply information' }" />
         </el-col>
@@ -15,11 +20,13 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -33,6 +40,30 @@ 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
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -46,6 +77,12 @@ const type = computed(() => {
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -58,6 +95,27 @@ const type = computed(() => {
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/win/watersupplyIndex.vue

@@ -1,11 +1,16 @@
 <template>
   <el-row class="watersupply">
-    <el-col :span="24" class="bigImage"></el-col>
+    <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-col :span="24" class="bottom">
+      <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">
           <top-index :info="{ title: '供水信息', enTitle: 'Water supply information' }" />
         </el-col>
@@ -15,12 +20,15 @@
         <el-col :span="24" class="foot">
           <foot-index />
         </el-col>
-      </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { throttle } from 'lodash-es'
+
 defineOptions({ name: 'watersupplyIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
@@ -33,6 +41,32 @@ 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
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 250) isScrollingDown.value = true
+  else isScrollingDown.value = false
+}
+
+// 创建节流后的滚动处理函数，每 200 毫秒触发一次
+const throttledScroll = throttle(handleScroll, 200)
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', throttledScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', throttledScroll)
+})
 </script>
 <style scoped lang="scss">
 .watersupply {
@@ -46,6 +80,12 @@ import footIndex from '../../components/windows/footIndex.vue'
     background-size: 100% 100%;
   }
 
+  .new-style {
+    height: 10em;
+    width: 100%;
+    top: 0;
+  }
+
   .info {
     position: absolute;
     top: 0;
@@ -58,6 +98,27 @@ import footIndex from '../../components/windows/footIndex.vue'
       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;
+      padding: 0 17%;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: 8px;
+    }
+
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;

src/views/windowsIndex.vue

@@ -10,7 +10,7 @@
           <div class="title">长春水投</div>
         </el-row>
       </transition>
-      <div ref="targetDiv" :span="24" class="bottom">
+      <div ref="targetDiv" class="bottom">
         <el-col :span="24" class="zero">
           <topIndex />
         </el-col>
@@ -39,7 +39,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import throttle from 'lodash/throttle'
+import { throttle } from 'lodash-es'
 defineOptions({ name: 'windowsIndex' })
 /* 菜单 */
 import menusIndex from '../components/windows/menusIndex.vue'