修改

src/components/windows/footIndex.vue

@@ -36,7 +36,7 @@
 <script setup lang="ts"></script>
 <style scoped lang="scss">
 .foot {
-  height: 490px;
+  height: 450px;
   background-image: url('/foot1.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;

src/views/winParts/newsIndex.vue

@@ -18,14 +18,14 @@
                 :key="item"
                 @click="toDetail(item)"
               >
-                <el-col :span="8" class="imgs">
+                <div class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')">
                     <template #placeholder>
                       <el-image class="images" src="zxzx.jpg" />
                     </template>
                   </el-image>
-                </el-col>
-                <el-col :span="16" class="mess">
+                </div>
+                <div class="mess">
                   <!-- item.ext.title -->
                   <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
                   <!-- item.txt.txt -->
@@ -34,7 +34,7 @@
 
                   <!-- item.ext.release_date -->
                   <el-col :span="24" class="date">{{ getProp(item, 'date') }}</el-col>
-                </el-col>
+                </div>
               </el-col>
             </el-row>
           </el-tab-pane>
@@ -47,19 +47,19 @@
                 :key="item"
                 @click="toDetail(item)"
               >
-                <el-col :span="8" class="imgs">
+                <div class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')">
                     <template #placeholder>
                       <el-image class="images" src="zxzx.jpg" />
                     </template>
                   </el-image>
-                </el-col>
-                <el-col :span="16" class="mess">
+                </div>
+                <div :span="16" class="mess">
                   <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
                   <!-- <el-col :span="24" class="brief" v-html="getProp(item, 'brief')"></el-col> -->
                   <el-col :span="24" class="brief">{{ getContent(getProp(item, 'brief')) }}</el-col>
                   <el-col :span="24" class="date">{{ getProp(item, 'date') }}</el-col>
-                </el-col>
+                </div>
               </el-col>
             </el-row>
           </el-tab-pane>
@@ -72,19 +72,19 @@
                 :key="item"
                 @click="toDetail(item)"
               >
-                <el-col :span="8" class="imgs">
+                <div class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')">
                     <template #placeholder>
                       <el-image class="images" src="zxzx.jpg" />
                     </template>
                   </el-image>
-                </el-col>
-                <el-col :span="16" class="mess">
+                </div>
+                <div :span="16" class="mess">
                   <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
                   <!-- <el-col :span="24" class="brief" v-html="getProp(item, 'brief')"></el-col> -->
                   <el-col :span="24" class="brief">{{ getContent(getProp(item, 'brief')) }}</el-col>
                   <el-col :span="24" class="date">{{ getProp(item, 'date') }}</el-col>
-                </el-col>
+                </div>
               </el-col>
             </el-row>
           </el-tab-pane>
@@ -97,19 +97,19 @@
                 :key="item"
                 @click="toDetail(item)"
               >
-                <el-col :span="8" class="imgs">
+                <div class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')">
                     <template #placeholder>
                       <el-image class="images" src="zxzx.jpg" />
                     </template>
                   </el-image>
-                </el-col>
-                <el-col :span="16" class="mess">
+                </div>
+                <div class="mess">
                   <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
                   <!-- <el-col :span="24" class="brief" v-html="getProp(item, 'brief')"></el-col> -->
                   <el-col :span="24" class="brief">{{ getContent(getProp(item, 'brief')) }}</el-col>
                   <el-col :span="24" class="date">{{ getProp(item, 'date') }}</el-col>
-                </el-col>
+                </div>
               </el-col>
             </el-row>
           </el-tab-pane>
@@ -246,6 +246,7 @@ const toDetail = (data: any) => {
           .mess {
             padding: 0 10px;
             position: relative;
+            width: 570px;
 
             .title {
               color: rgb(25, 25, 26);

src/views/winParts/notesIndex.vue

@@ -149,7 +149,7 @@ const mouseOver = async (data: any) => {
         .title {
           display: flex;
           flex-direction: column;
-          padding: 20px 0 10px 0;
+          padding: 20px 10px 10px;
 
           .titles {
             color: rgb(2, 68, 139);

src/views/windowsIndex.vue

@@ -1,22 +1,15 @@
 <template>
   <el-row class="main">
-    <transition name="fade-scale">
-      <el-col :span="24" v-if="isScrollingDown" class="bigImage new-style"></el-col>
-      <el-col :span="24" v-else class="bigImage"></el-col>
-    </transition>
     <el-col :span="24" class="info">
-      <el-col :span="24" class="menus">
-        <menusIndex />
-      </el-col>
-      <transition name="fade-scale">
-        <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="top">
+        <el-col :span="24" class="menus" :class="{ new_style: y }">
+          <menusIndex />
+        </el-col>
         <el-col :span="24" class="zero">
           <topIndex />
         </el-col>
+      </el-col>
+      <div class="bottom">
         <el-col :span="24" class="zero">
           <introduceIndex />
         </el-col>
@@ -41,7 +34,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: 'windowsIndex' })
 /* 菜单 */
@@ -61,98 +54,56 @@ import popularWill from './winParts/popularWill.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">
-.main {
-  position: relative;
 
-  .bigImage {
-    height: 30em;
-    overflow: hidden;
-    background-image: url('/home1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
+// 获取滚动条y轴坐标
+const { y } = useWindowScroll()
 
-  @keyframes fadeScale {
-    0% {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
+function useWindowScroll() {
+  const y = ref(0);
 
-  .fade-scale-enter-active {
-    animation: fadeScale 1s ease-out;
-  }
+  const handleScroll = () => {
+    y.value = window.scrollY;
+  };
 
-  .fade-scale-leave-active {
-    animation: fadeScale 1s ease-out reverse;
-  }
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
 
-  .new-style {
-    height: 10em;
-    width: 100%;
-    top: 0;
-  }
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
 
+  return { y };
+}
+</script>
+<style scoped lang="scss">
+.main {
   .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
+    position: relative;
+    .top {
+      height: 635px;
+      background-image: url('/home1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .menus {
+        height: 66px;
+      }
 
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-    @keyframes fadeScale {
-      0% {
-        opacity: 0;
-        transform: scale(0.8);
+      .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;
       }
-      100% {
-        opacity: 1;
-        transform: scale(1);
+      .zero {
+        margin: 0 0 40px 0;
+        padding: 0 17%;
       }
     }
-
-    .fade-scale-enter-active {
-      animation: fadeScale 2s ease-out;
-    }
-
-    .fade-scale-leave-active {
-      animation: fadeScale 2s ease-out reverse;
-    }
-
     .new-title {
       display: flex;
       padding: 0 17%;
@@ -164,10 +115,8 @@ onBeforeUnmount(() => {
       letter-spacing: 8px;
     }
     .bottom {
-      height: calc(100vh - 66px);
-      overflow-y: auto;
-      margin: 0 auto;
-
+      position: absolute;
+      top: 400px;
       .zero {
         margin: 0 0 40px 0;
         padding: 0 17%;