<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>