You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.0 KiB
127 lines
3.0 KiB
2 years ago
|
<template>
|
||
|
|
<div class="home">
|
||
|
|
<el-backtop />
|
||
|
|
<top :activeIndex="activeIndexs"></top>
|
||
|
|
<div class="ban">
|
||
|
|
<el-image
|
||
|
|
style="width: 100%; height: 500px"
|
||
|
|
:src="require('@/assets/img/home/content.png')"
|
||
|
|
fit="fill"
|
||
|
|
></el-image>
|
||
|
|
</div>
|
||
|
|
<div class="solutabs">
|
||
|
|
<el-menu
|
||
|
|
:default-active="solutabsIndex"
|
||
|
|
class="el-menu-demo"
|
||
|
|
mode="horizontal"
|
||
|
|
@select="handleSelect"
|
||
|
|
active-text-color="#3370FF"
|
||
|
|
>
|
||
|
|
<el-menu-item index="0">公司简介</el-menu-item>
|
||
|
|
<el-menu-item index="1">发展历程</el-menu-item>
|
||
|
|
<el-menu-item index="2">愿景使命</el-menu-item>
|
||
|
|
<el-menu-item index="3">公司团队</el-menu-item>
|
||
|
|
<el-menu-item index="4">联系方式</el-menu-item>
|
||
|
|
</el-menu>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="box-style">
|
||
|
|
<div class="box-style-box">
|
||
|
|
<div class="floor"><h1>1</h1></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box-style">
|
||
|
|
<div class="box-style-box">
|
||
|
|
<div class="floor"><h1>2</h1></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box-style">
|
||
|
|
<div class="box-style-box">
|
||
|
|
<div class="floor"><h1>3</h1></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box-style">
|
||
|
|
<div class="box-style-box">
|
||
|
|
<div class="floor"><h1>4</h1></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box-style">
|
||
|
|
<div class="box-style-box">
|
||
|
|
<div class="floor"><h1>5</h1></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<bottom />
|
||
|
|
<el-backtop />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import top from "@/components/header.vue";
|
||
|
|
import bottom from "@/components/footer.vue";
|
||
|
|
import headline from "@/components/headline.vue";
|
||
|
|
export default {
|
||
|
|
name: "HomeView",
|
||
|
|
components: {
|
||
|
|
top,
|
||
|
|
bottom,
|
||
|
|
headline,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeIndexs: 4,
|
||
|
|
solutabsIndex: "0",
|
||
|
|
num: 0, //跳转楼层
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
var that = this;
|
||
|
|
var inner = document.getElementsByClassName("floor");
|
||
|
|
// 注册滚动监听事件
|
||
|
|
window.onscroll = function () {
|
||
|
|
// 获取滚动条距离页面底部的距离
|
||
|
|
var tops = document.documentElement.scrollTop || document.body.scrollTop;
|
||
|
|
// console.log(tops)
|
||
|
|
//判断滚动的位置，从而改变楼层选项的样式
|
||
|
|
for (var i = 0; i < inner.length; i++) {
|
||
|
|
if (inner[i].offsetTop <= tops + 200 && tops <= inner[i].offsetTop) {
|
||
|
|
that.num = i;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 楼层跳转的方法index
|
||
|
|
handleSelect(index) {
|
||
|
|
this.num = index;
|
||
|
|
// 获取所有的楼层
|
||
|
|
var inner = document.getElementsByClassName("floor");
|
||
|
|
window.scrollTo({
|
||
|
|
top: inner[index].offsetTop - 50,
|
||
|
|
behavior: "smooth",
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.box-style {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.box-style-box {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutabs {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0px auto;
|
||
|
|
.el-menu-demo {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.floor {
|
||
|
|
width: 100%;
|
||
|
|
height: 500px;
|
||
|
|
}
|
||
|
|
</style>
|