|
@@ -215,6 +215,19 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getData();
|
|
|
+ window.addEventListener("scroll", () => {
|
|
|
+ let scrollTop =
|
|
|
+ window.pageYOffset ||
|
|
|
+ document.documentElement.scrollTop ||
|
|
|
+ document.body.scrollTop;
|
|
|
+ // 滚动条滚动的距离
|
|
|
+ let node = document.getElementsByClassName("nav_title")[0];
|
|
|
+ if (scrollTop > 120) {
|
|
|
+ node.classList.add("xiding_nav");
|
|
|
+ } else {
|
|
|
+ node.classList.remove("xiding_nav");
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -246,6 +259,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.nav_title {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
background: #fff;
|
|
|
.inner {
|
|
|
width: 1200px;
|
|
@@ -264,6 +279,11 @@ export default {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
}
|
|
|
+ .xiding_nav {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
.main {
|
|
|
min-height: 80vh;
|
|
|
background: #f6f6f6;
|
|
@@ -282,4 +302,13 @@ export default {
|
|
|
padding: 0;
|
|
|
}
|
|
|
}
|
|
|
+.nav_title {
|
|
|
+ .el-menu--horizontal > .el-menu-item {
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+ }
|
|
|
+ .el-menu--horizontal > .el-menu-item.is-active {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|