Merge branch 'master' of http://git.cc-lotus.info/shuiTou/web

src/views/windowsIndex.vue

@@ -1,11 +1,15 @@
 <template>
   <el-row class="main">
-    <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">
+      <el-row v-if="isScrollingDown" class="new-title">
+        <div class="title">长春水投</div>
+      </el-row>
+      <div ref="targetDiv" :span="24" class="bottom">
         <el-col :span="24" class="zero">
           <topIndex />
         </el-col>
@@ -27,14 +31,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'
 defineOptions({ name: 'windowsIndex' })
-
 /* 菜单 */
 import menusIndex from '../components/windows/menusIndex.vue'
 /* 头部信息 */
@@ -51,6 +55,34 @@ import conductingBusiness from './winParts/conductingBusiness.vue'
 import popularWill from './winParts/popularWill.vue'
 /* 底部信息 */
 import footIndex from '../components/windows/footIndex.vue'
+
+// 创建一个 ref 来引用目标 div
+const targetDiv = ref()
+// 用于存储是否向下滚动的状态
+const isScrollingDown = ref(false)
+// 存储上一次的滚动位置
+let lastScrollTop = 0
+
+// 滚动事件处理函数
+const handleScroll = () => {
+  const currentScrollTop = targetDiv.value.scrollTop
+  console.log(currentScrollTop)
+  // 判断是否不在最上面且向下滚动
+  if (currentScrollTop > 0) isScrollingDown.value = true
+  else isScrollingDown.value = false
+  // 更新上一次的滚动位置
+  lastScrollTop = currentScrollTop
+}
+
+onMounted(() => {
+  // 组件挂载后，添加滚动事件监听器
+  targetDiv.value.addEventListener('scroll', handleScroll)
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载前，移除滚动事件监听器
+  targetDiv.value.removeEventListener('scroll', handleScroll)
+})
 </script>
 <style scoped lang="scss">
 .main {
@@ -63,6 +95,11 @@ import footIndex from '../components/windows/footIndex.vue'
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
+  .new-style {
+    height: 11em;
+    width: 100%;
+    top: 0;
+  }
 
   .info {
     position: absolute;
@@ -75,7 +112,17 @@ import footIndex from '../components/windows/footIndex.vue'
       height: 66px;
       overflow: hidden;
     }
-
+    .new-title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 70px;
+      font-weight: 700;
+      line-height: 101px;
+      letter-spacing: 8px;
+    }
     .bottom {
       height: calc(100vh - 66px);
       overflow-y: auto;