<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%"
          infinite
          control-type="outline"
        >
          <template v-slot:navigation-icon="{ active, onClick }">
            <div v-if="active" @click="onClick" class="activeBtn"></div>
            <div v-else @click="onClick" class="parmaryBtn"></div>
          </template>
          <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">查看详情</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-slide name="first4" 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" @mouseleave="movemask(0)">
      <div class="absolute-top-left subThreeBox" >
        <q-img
          src="../assets/images/index/study_serve.png"
          spinner-color="white"
          class="class_icon3"
        />
        <div class="threeItem"  style="position: relative;" @mouseenter="movemask(1)" >
          <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 class="mask"  :class="{removeMask:currentMaskIndex==1}"></div>
        </div>
        <div class="threeItem" style="position: relative;" @mouseenter="movemask(2)" >
          <div class="itemIconBox">
            <div v-for="item in schoolIconList" :key="item.id">
              <img
                :src="item.url"
                class="schoolIcon1"
                :style="{ top: item.top + 'vw', left: item.left + 'vw' }"
                v-if="item.type == 1"
              />
              <img
                :src="item.url"
                class="schoolIcon2"
                :style="{ top: item.top + 'vw', left: item.left + 'vw' }"
                v-if="item.type == 2"
              />
              <img
                :src="item.url"
                class="schoolIcon3"
                :style="{ top: item.top + 'vw', left: item.left + 'vw' }"
                v-if="item.type == 3"
              />
              <img
                :src="item.url"
                class="schoolIcon4"
                :style="{ top: item.top + 'vw', left: item.left + 'vw' }"
                v-if="item.type == 4"
              />
            </div>
          </div>
          <div class="mask" :class="{removeMask:currentMaskIndex==2}"></div>
        </div>
        <div class="threeItem" style="position: relative;" @mouseenter="movemask(3)">
          <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 class="mask" :class="{removeMask:currentMaskIndex==3}"></div>
        </div>
        <div class="threeItem" style="position: relative;" @mouseenter="movemask(4)">
          <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 class="mask" :class="{removeMask:currentMaskIndex==4}"></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",
      currentMaskIndex:0,
      pageScroll: 0,
      activeIdx: 1,
      schoolResource: 100, //本科院校资源
      major: 300, //可选专业
      servePeopleNum: 300, //服务人数
      schoolIconList: [
        // 第一排
        {
          url: require("../assets/images/index/x.png"),
          top: 0,
          left: 0,
          type: 1,
          color: "#fff",
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 0,
          left: 2.239,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 0,
          left: 4.16,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 0,
          left: 7.864,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 0,
          left: 10.156,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 0,
          left: 15,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 0,
          left: 17.395,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 0,
          left: 19.947,
          type: 1,
        },
        // x粗轴
        {
          url: require("../assets/images/index/x.png"),
          top: 3.333,
          left: 4.27,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 2.656,
          left: 7.565,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 6.822,
          left: 5.416,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 5.52,
          left: 7.708,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 9.166,
          left: 6.562,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 8.593,
          left: 10.104,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 12.552,
          left: 7.708,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 12.552,
          left: 7.708,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 11.25,
          left: 9.895,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 15,
          left: 8.906,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 14.375,
          left: 12.395,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 16.875,
          left: 12.187,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 20.625,
          left: 11.093,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 20.052,
          left: 14.687,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 24.166,
          left: 12.291,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 22.5,
          left: 14.375,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 26.197,
          left: 13.281,
          type: 2,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 25.572,
          left: 16.875,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 29.635,
          left: 14.479,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 28.177,
          left: 16.614,
          type: 2,
        },
        // x细轴
        {
          url: require("../assets/images/index/x.png"),
          top: 2.656,
          left: 16.666,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 4.687,
          left: 15.729,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 6.77,
          left: 14.791,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 8.802,
          left: 13.906,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 10.729,
          left: 13.02,
          type: 1,
        },
        // ------
        {
          url: require("../assets/images/index/x.png"),
          top: 18.385,
          left: 9.114,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 20.52,
          left: 8.333,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 22.447,
          left: 7.5,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 24.375,
          left: 6.666,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 26.302,
          left: 5.833,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 28.072,
          left: 5.052,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 30,
          left: 4.218,
          type: 1,
        },
        //最后一排
        {
          url: require("../assets/images/index/x.png"),
          top: 32.343,
          left: 0.364,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 31.822,
          left: 3.02,
          type: 3,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 32.343,
          left: 5.937,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 32.343,
          left: 12.239,
          type: 1,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 31.5,
          left: 15.5,
          type: 4,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 31.5,
          left: 18.35,
          type: 4,
        },
        {
          url: require("../assets/images/index/x.png"),
          top: 32.343,
          left: 21.666,
          type: 1,
        },
      ],
    };
  },
  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()
    },
    movemask(i){
      this.currentMaskIndex=i
    },
  },
  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;
      box-sizing: border-box;
      .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%);
      z-index: 99;
    }
    .threeItem {
      width: 25vw;
      height: 56.25vw;
      // background-color: #eee;
      background-color: #333;
      color: #000;
      flex-grow: 5;
      
      .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.697vw;
        height: 34.114vw;
        background-image: url("../assets/images/index/x.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        margin: 15.989vw auto 0;
        position: relative;
      }
    }
  }
  .mask{
     width: 25vw;
     height: 56.25vw;
     background-color: #FFFFFF;
     opacity: 0.5;
     position: absolute;
     top:0;
     left: 0;
     z-index: 10;
  }
}

.removeMask{
  transform:translateX(25vw);
  transition: all 0.5s;
  z-index: 0;
}
.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;
    }
  }
}
// 隐藏滚动条
// ::-webkit-scrollbar {
//      width: 0 !important;
//    }
// ::-webkit-scrollbar {
//      width: 0 !important;height: 0;
//    }
.schoolIcon1 {
  width: 1.2vw;
  height: 1.2vw;
  border-radius: 50%;
  position: absolute;
  z-index: 10;
  background-color: #f00;
}
.schoolIcon1:hover {
  background-color: #fff;
}
.schoolIcon2 {
  width: 2.864vw;
  height: 2.864vw;
  border-radius: 50%;
  position: absolute;
  z-index: 10;
  background-color: #f00;
}
.schoolIcon2:hover {
  background-color: #fff;
}
.schoolIcon3 {
  width: 1.7vw;
  height: 1.7vw;
  border-radius: 50%;
  position: absolute;
  z-index: 10;
  background-color: #f00;
}
.schoolIcon3:hover {
  background-color: #fff;
}
.schoolIcon4 {
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
  position: absolute;
  z-index: 10;
  background-color: #f00;
}
.schoolIcon4:hover {
  background-color: #fff;
}
// 修改轮播图导航样式
.activeBtn {
  width: 0.729vw;
  height: 0.729vw;
  background-color: #ffffff;
  border-radius: 50%;
  margin: 0.78vw 0;
}
.parmaryBtn {
  width: 0.52vw;
  height: 0.52vw;
  border: 2px solid #ffffff;
  border-radius: 50%;
  margin: 0.78vw 0;
}
</style>