<template>
  <div class="jiahe">
    <Header :scorllNum="pageScroll" />
    <!-- 第一部分 -->
    <div class="relative-position banner-box" id="elone">
      <div class="absolute-top-left fit bg-dark">
        <q-carousel
          v-model="slide"
          swipeable
          animated
          navigation-position="right"
          navigation
          height="100%"
          autoplay
          infinite
          control-type="outline"
        >
          <q-carousel-slide
            name="first"
            img-src="../assets/images/index/banner_bg.png"
          >
            <div class="con1"><span class="jh">甲鹤-</span>您身边的日语</div>
            <div class="con2">
              这里给一点小文字介绍什么的最好，这里给一点小文字介绍什么的最好，这里给一点
              小文字介绍什么的最好。
            </div>
            <div class="con3"></div>
            <div class="btn" @click="seeDetail">查看详情</div>

            <q-img
              src="../assets/images/index/female.png"
              spinner-color="white"
              class="female"
            />
          </q-carousel-slide>
          <!-- <q-carousel-slide name="first3" img-src="https://cdn.quasar.dev/img/mountains.jpg"/> -->
        </q-carousel>
      </div>
    </div>
    <!-- 第二部分 日语培训-->
    <div class="secondbox">
      <div class="absolute-top-left subSecondbox">
        <q-img
          src="../assets/images/index/class_icon.png"
          spinner-color="white"
          class="class_icon"
        />
        <div class="classiconBox">
          <div class="classItem">
            <q-img
              src="../assets/images/index/class_icon1.png"
              spinner-color="white"
              class="class_icon2"
            />
            <div class="class_title">日标基础课</div>
            <div class="class_dec">
              要是能有一些日标基础课程的小讲解就很好
              了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
            </div>
            <q-img
              src="../assets/images/index/class_icon6.png"
              spinner-color="white"
              class="class_icon2"
            />
          </div>
          <div class="classItem">
            <q-img
              src="../assets/images/index/class_icon2.png"
              spinner-color="white"
              class="class_icon2"
            />
            <div class="class_title">日标基础课</div>
            <div class="class_dec">
              要是能有一些日标基础课程的小讲解就很好
              了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
            </div>
            <q-img
              src="../assets/images/index/class_icon7.png"
              spinner-color="white"
              class="class_icon2"
            />
          </div>
          <div class="classItem">
            <q-img
              src="../assets/images/index/class_icon3.png"
              spinner-color="white"
              class="class_icon2"
            />
            <div class="class_title">日标基础课</div>
            <div class="class_dec">
              要是能有一些日标基础课程的小讲解就很好
              了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
            </div>
            <q-img
              src="../assets/images/index/class_icon8.png"
              spinner-color="white"
              class="class_icon2"
            />
          </div>
          <div class="classItem">
            <q-img
              src="../assets/images/index/class_icon4.png"
              spinner-color="white"
              class="class_icon2"
            />
            <div class="class_title">日标基础课</div>
            <div class="class_dec">
              要是能有一些日标基础课程的小讲解就很好
              了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
            </div>
            <q-img
              src="../assets/images/index/class_icon9.png"
              spinner-color="white"
              class="class_icon2"
            />
          </div>
          <div class="classItem">
            <q-img
              src="../assets/images/index/class_icon5.png"
              spinner-color="white"
              class="class_icon2"
            />
            <div class="class_title">日标基础课</div>
            <div class="class_dec">
              要是能有一些日标基础课程的小讲解就很好
              了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
            </div>
            <q-img
              src="../assets/images/index/class_icon10.png"
              spinner-color="white"
              class="class_icon2"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 第三部分 留学服务-->
    <div class="threebox">
      <div class="absolute-top-left subThreeBox">
        <q-img
          src="../assets/images/index/study_serve.png"
          spinner-color="white"
          class="class_icon3"
        />
        <div class="threeItem">
          <div class="outside">
            <div class="inner">
              <animate-number
                from="1"
                :to="schoolResource"
                duration="2000"
                easing="easeOutQuad"
              ></animate-number>
              +
            </div>
          </div>
          <div class="itemName">本科院校资源</div>
        </div>
        <div class="threeItem threeItem1">
          <div class="itemIconBox"></div>
          <!-- <q-img
          src="../assets/images/index/x.png"
          spinner-color="white"
          class="x_icon3"
        /> -->
        </div>
        <div class="threeItem">
          <div class="outside">
            <div class="inner">
              <animate-number
                from="1"
                :to="major"
                duration="2000"
                easing="easeOutQuad"
                ref="myNum"
              ></animate-number>
              +
            </div>
          </div>
          <div class="itemName">可选专业</div>
        </div>
        <div class="threeItem threeItem1">
          <div class="outside">
            <div class="inner">
              <animate-number
                from="1"
                :to="servePeopleNum"
                duration="2000"
                easing="easeOutQuad"
              ></animate-number>
              +
            </div>
          </div>
          <div class="itemName">服务人数</div>
        </div>
      </div>
    </div>
    <!-- 第四部分 就业服务-->
    <div class="fourbox">
      <div class="absolute-top-left subFourBox">
        <q-img
          src="../assets/images/index/work_serve1.png"
          spinner-color="white"
          class="class_icon4 class_icon4_1"
        />
        <q-img
          src="../assets/images/index/work_serve2.png"
          spinner-color="white"
          class="class_icon4 class_icon4_2"
        />
        <div class="workItemBox workItemBox_1">
          <q-img
            src=""
            class="class_icon4_all"
          />
          <div class="workType">酒店</div>
        </div>
         <div class="workItemBox workItemBox_2">
          <q-img
            src=""
            class="class_icon4_all"
          />
          <div class="workType">餐厅</div>
        </div>
         <div class="workItemBox workItemBox_3">
          <q-img
            src=""
            class="class_icon4_all"
          />
          <div class="workType">IT</div>
        </div>
         <div class="workItemBox workItemBox_4">
          <q-img
            src=""
            class="class_icon4_all"
          />
          <div class="workType">康养</div>
        </div>
        
      </div>
    </div>
    <!-- 第五部分 董事长-->
    <div class="fivebox">
      <div class="absolute-top-left subFiveBox">
        <q-img
          src="../assets/images/index/chairman.png"
          spinner-color="white"
          class="class_icon5"
        />
        <div class="chairman_img"></div>
        <div class="chairman_des"></div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer />
  </div>
</template>   

<script>
import Header from "../components/header/header";
import Footer from "../components/footer/footer";
export default {
  name: "PageIndex",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      slide: "first",
      pageScroll: 0,
      activeIdx: 1,
      schoolResource: 100, //本科院校资源
      major: 300, //可选专业
      servePeopleNum: 300, //服务人数
    };
  },
  watch: {
   
  },
  methods: {
    // 滚动条高度
    handleScroll() {
      this.pageScroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(this.pageScroll);
      // var el = document.getElementById("elone");
      // el.scrollIntoView();
    },
    //第三部分递增效果
    startAnimate() {
      // this.$refs.myNum.start()
    },
    seeDetail(){
      this.$router.push("/secondClassroom")
    }
  },
  mounted() {
    // threeAdd(this.schoolResource,"schoolResource")
    // threeAdd(this.major,"major")
    // threeAdd(this.servePeopleNum,"servePeopleNum")
    window.addEventListener("scroll", this.handleScroll);
  },
  //销毁,否则跳到别的路由还是会出现
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    this.pageScroll = 0;
  },
};
</script>
<style lang="scss">
// @mixin width ($width) {
//     width: calc(($width / 1920) * 100%);
//   }

.jiahe {
  height: 100vh;
  position: relative;
}
.banner-box {
  width: 100%;
  padding-top: 57.39%;
}

.con1 {
  width: calc(845 / 1920 * 100%);
  white-space: nowrap;
  // font-size: 100px;
  font-size: 5.208vw;
  color: #111111;
  position: absolute;
  left: calc(196 / 1920 * 100%);
  top: calc(374 / 1080 * 100%);
  .jh {
    font-family: "pingfang-b" !important;
  }
}
.con2 {
  width: calc(739 / 1920 * 100%);
  // font-size: 20px !important;
  font-size: 1.041vw;
  color: #111111;
  position: absolute;
  left: calc(196 / 1920 * 100%);
  top: calc(527 / 1080 * 100%);
}
.con3 {
  width: calc(596 / 1920 * 100%);
  height: 1px;
  background-color: #111111ff;

  position: absolute;
  left: calc(196 / 1920 * 100%);
  top: calc(645 / 1080 * 100%);
}
.btn {
  width: calc(180 / 1920 * 100%);
  height: calc(56 / 1080 * 100%);
  background-color: #45766dff;
  // font-size: 24px !important;
  font-size: 1.249vw;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  position: absolute;
  left: calc(196 / 1920 * 100%);
  top: calc(726 / 1080 * 100%);
  cursor: pointer;
}

.female {
  width: calc(786 / 1920 * 100%);
  // @include width(786);
  height: auto;
  position: absolute;
  right: 0;
  top: calc(263 / 1080 * 100%);
}
.secondbox {
  width: 100%;
  padding-top: calc(1080 / 1920 * 100%);
  position: relative;
  .subSecondbox {
    width: 100%;
    height: 100%;
    padding-top: calc(101 / 1920 * 100%);
    .class_icon {
      width: calc(740 / 1920 * 100%);
      // height: calc(302 / 1080 * 100%);
      height: auto;
      margin-left: calc(590 / 1920 * 100%);
    }
    .classiconBox {
      width: 100%;
      // height: calc(361 / 1080 * 100%);
      padding: 0 calc(160 / 1920 * 100%);
      margin-top: calc(123 / 1920 * 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow-x: auto;
      overflow-y: hidden;
      .classItem {
        width: calc(266 / 1920 * 100%);
        height: 100%;
        // background-color: #000;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-between;
        .class_icon2 {
          width: 4.166vw;
          height: auto;
          cursor: pointer;
        }
        .class_title {
          width: 100%;
          text-align: center;
          font-size: 0.937vw;
          color: #111111;
          margin-top: 1.77vw;
          margin-bottom: 2.083vw;
        }
        .class_dec {
          width: 100%;
          height: 3.645vw;
          overflow: hidden;
          text-align: center;
          font-size: 0.729vw;
          color: #999999;
          margin-bottom: 2.083vw;
        }
      }
    }
  }
}
.threebox {
  width: 100%;
  padding-top: calc(1080 / 1920 * 100%);
  position: relative;
  z-index: 1 !important;
  .subThreeBox {
    width: 100%;
    height: 100%;
    display: flex;
    .class_icon3 {
      width: calc(459 / 1920 * 100%);
      height: auto;
      position: absolute;
      top: calc(116 / 1080 * 100%);
      left: calc(690 / 1920 * 100%);
      //  left: 50%;
      //  transform: translateX(-50%);
    }
    .threeItem {
      width: 25%;
      height: 100%;
      background-color: #fff;
      // background-color: #333;
      color: #000;
      .outside {
        width: 12.656vw;
        height: 13.333vw;
        border: 4px solid #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 19.531vw auto 3.75vw;
        .inner {
          width: 10.52vw;
          height: 11.093vw;
          background-color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 3.125vw;
          font-family: "pingfang-b" !important;
          color: #888888;
        }
      }
      .itemName {
        text-align: center;
        font-size: 1.458vw;
        font-family: "pingfang-b" !important;
        color: #ffffff;
      }
      .itemIconBox {
        width: 23.679vw;
        height: 34.114vw;
        background-image: url("../assets/images/index/x.png");
        background-repeat: no-repeat;
        background-size: contain;
        margin: 15.989vw auto 0;
      }
    }
    .threeItem1 {
      background-color: #222 !important;
    }
  }
}
.fourbox {
  width: 100%;
  padding-top: calc(2377 / 1920 * 100%);
  position: relative;
  .subFourBox {
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/index/work_serve_bg.png");
    background-repeat: no-repeat;
    .class_icon4 {
      width: calc(675 / 1920 * 100%);
      height: auto;
    }
    .class_icon4_1 {
      position: absolute;
      top: 8.229vw;
      right: 8.333vw;
    }
    .class_icon4_2 {
      position: absolute;
      bottom: 8.229vw;
      left: 8.333vw;
    }
    .workItemBox {
      width: 26.666vw;
      height: 46.562vw;
      position: absolute;
      
      .class_icon4_all {
        width: 26.666vw;
        height: 39.062vw;
        background-color: #eee;
      }
      .workType {
        width: 26.666vw;
        height: 7.343vw;
        font-size: 2.083vw;
        font-family: "pingfang-b" !important;
        color: #111111;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FFFFFF;
      }
    }
    .workItemBox_1 {
        top: 8.802vw;
        left: 8.489vw;
        z-index: 1;
    }
    .workItemBox_2 {
        top: 19.635vw;
        left: 27.083vw;
        z-index: 4;
    }
    .workItemBox_3 {
        top: 48.541vw;
        left: 46.25vw;
        z-index: 3;
    }
    .workItemBox_4 {
        top: 65.572vw;
        left: 64.843vw;
        z-index: 2;
    }

  }
}
.fivebox {
  width: 100%;
  padding-top: calc(1080 / 1920 * 100%);
  position: relative;
  .subFiveBox {
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/index/chairman_bg.png");
    background-repeat: no-repeat;
    .class_icon5 {
      width: calc(350 / 1920 * 100%);
      height: auto;
      position: absolute;
      top: 10.937vw;
      left: 41.354vw;
    }
    .chairman_img {
      width: calc(700 / 1920 * 100%);
      height: 100%;
      background-color: #eee;
    }
    // .chairman_des{
    // width: calc(350 / 1920 * 100%);
    // height: auto;
    // position: absolute;
    // top: 10.937vw;
    // left: 41.354vw;
    // }
  }
}
// 隐藏滚动条
// ::-webkit-scrollbar {
//      width: 0 !important;
//    }
// ::-webkit-scrollbar {
//      width: 0 !important;height: 0;
//    }
</style>