|
|
@@ -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%;
|
