|
@@ -1,11 +1,16 @@
|
|
<template>
|
|
<template>
|
|
<el-row class="mess">
|
|
<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="info">
|
|
<el-col :span="24" class="menus">
|
|
<el-col :span="24" class="menus">
|
|
<menusIndex />
|
|
<menusIndex />
|
|
</el-col>
|
|
</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">
|
|
<el-col :span="24" class="zero top">
|
|
<top-index :info="info" />
|
|
<top-index :info="info" />
|
|
</el-col>
|
|
</el-col>
|
|
@@ -17,7 +22,7 @@
|
|
<el-col :span="24" class="foot">
|
|
<el-col :span="24" class="foot">
|
|
<foot-index />
|
|
<foot-index />
|
|
</el-col>
|
|
</el-col>
|
|
- </el-col>
|
|
|
|
|
|
+ </div>
|
|
</el-col>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
</template>
|
|
</template>
|
|
@@ -30,8 +35,8 @@ import footIndex from '../../components/windows/footIndex.vue'
|
|
import infoDetail from './messParts/infoDetail.vue'
|
|
import infoDetail from './messParts/infoDetail.vue'
|
|
import waterDetail from './messParts/waterDetail.vue'
|
|
import waterDetail from './messParts/waterDetail.vue'
|
|
import serviceDetail from './messParts/serviceDetail.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'
|
|
import { useRoute } from 'vue-router'
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
const type = computed(() => {
|
|
const type = computed(() => {
|
|
@@ -47,6 +52,32 @@ onMounted(() => {
|
|
info.value = { title: '企业信息', enTitle: 'Information' }
|
|
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>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
@@ -61,6 +92,12 @@ onMounted(() => {
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .new-style {
|
|
|
|
+ height: 10em;
|
|
|
|
+ width: 100%;
|
|
|
|
+ top: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
.info {
|
|
.info {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
@@ -73,6 +110,27 @@ onMounted(() => {
|
|
overflow: hidden;
|
|
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 {
|
|
.bottom {
|
|
height: calc(100vh - 66px);
|
|
height: calc(100vh - 66px);
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|