web/src/views/win/newsIndex.vue

<template>
  <el-row class="news">
    <el-col :span="24" class="info">
      <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>
        <el-col :span="24" class="foot">
          <foot-index />
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
defineOptions({ name: 'introduceIndex' })
/* 菜单 */
import menusIndex from '../../components/windows/menusIndex.vue'

/* 顶部信息 */
import topIndex from '../../components/windows/topIndex.vue'

/* 新闻 */
import listIndex from './newsParts/listIndex.vue'

/* 底部信息 */
import footIndex from '../../components/windows/footIndex.vue'

// 获取滚动条y轴坐标
const { y } = useWindowScroll()

function useWindowScroll() {
  const y = ref(0);

  const handleScroll = () => {
    y.value = window.scrollY;
  };

  onMounted(() => {
    window.addEventListener('scroll', handleScroll);
  });

  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
  });

  return { y };
}
</script>
<style scoped lang="scss">
.news {
  .info {
    position: relative;
    background-image: url('/news5.png');
    background-repeat: no-repeat;
    background-size: 100% 480px;
    .top {
      height: 480px;
      .menus {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1000;
        height: 66px;
        -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        -ms-transition: all 1.5s ease;
        -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
      }

      .new_style {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1000;
        background-color: #fff;
         -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        -ms-transition: all 1.5s ease;
        -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
      }
      .zero {
        padding: 0 17%;
      }
    }
    
    .bottom {
      margin: 40px 0 0 0;
      .zero {
        margin: 0 0 40px 0;
      }
    }
  }
}
</style>