<template>
  <div class="jiahe">
    <Header :scorllNum="pageScroll" />
    <!-- 第一部分 -->
    <div class="banner-box">
      <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="conbox">
            <div class="con1"><span class="jh">甲鹤-</span>特色教室</div>
            <div class="con2">
              这里给一点小文字介绍什么的最好，这里给一点小文字介绍什么的最好，这里给一点
              小文字介绍什么的最好。
            </div>
            <div class="con3"></div>
            <div class="btn">查看更多</div>
          </div>
        </q-carousel-slide>
        <!-- <q-carousel-slide name="first3" img-src="https://cdn.quasar.dev/img/mountains.jpg"/> -->
      </q-carousel>

      <!-- </div> -->
      <!-- <q-pagination
       ref="pag"
      v-model="current"
      :max="5"
      :direction-links="true"
      icon-prev
      
    >
    </q-pagination>-->
    </div>
    <!-- 教育产品 -->
    <div class="edu_con">
      <div class="edu_name">教育产品</div>
      <div class="edu_subname">副标题</div>
      <div class="inputBox"></div>
      <div class="eduConbox">
        <div v-for="item in eduList" :key="item.id" class="itemBox">
          <q-img :src="item.url" class="itemImg" />
          <div class="infoBox">
            <div class="courseName">{{ item.courseName }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
      <div class="seemore">查看更多</div>
    </div>
    <!-- 开班计划 -->
    <div class="edu_con">
      <div class="edu_name">开班计划</div>
      <div class="edu_subname">副标题</div>
      <div class="inputBox"></div>
      <div class="classPlanBox">
        <div v-for="item in classPlanList" :key="item.id" class="classPlanItemBox">
          <div class="">
            
          </div>
        </div>
      </div>
      <div class="seemore">查看更多</div>
    </div>
    <!-- 底部 -->
    <Footer />
  </div>
</template>   

<script>
import Header from "../components/header/headerType2";
import Footer from "../components/footer/footerType2";
// import {  QPagination} from 'quasar'
export default {
  name: "PageIndex",
  components: {
    Header,
    Footer,
    // QPagination
  },
  data() {
    return {
      slide: "first",
      pageScroll: 1080,
      current: 4,
      eduList: [
        {
          id: 1,
          url: "",
          courseName: "什么什么课程",
          desc: "对课程的一些二级文字介绍内容，这里放一排位置。多的省略号...",
        },
        {
          id: 2,
          url: "",
          courseName: "什么什么课程",
          desc: "",
        },
        {
          id: 3,
          url: "",
          courseName: "什么什么课程",
          desc: "",
        },
        {
          id: 4,
          url: "",
          courseName: "什么什么课程",
          desc: "",
        },
        {
          id: 5,
          url: "",
          courseName: "什么什么课程",
          desc: "",
        },
        {
          id: 6,
          url: "",
          courseName: "什么什么课程",
          desc: "",
        },
      ],
      classPlanList:[{
        id:1,
        className:"东野大木(五班)",
        courseInfo:"日语 基础0-N3直通车课程系列",
        course:"156课时",
        joinStart:"2020年10月30日",
        joinEnd:"2020年10月30日",
        planNum:10,
        surplusNum:1
      },{
        id:2,
        className:"",
        courseInfo:"",
        courseHour:"",
        joinStart:"",
        joinEnd:"",
        planNum:10,
        surplusNum:10,
      }]
    };
  },

  methods: {
    //滚动条高度
    // handleScroll() {
    //   this.pageScroll =
    //     document.documentElement.scrollTop || document.body.scrollTop;
    //   console.log(this.pageScroll);
    // },
    // pag(){
    //    let dom= this.$refs.pag
    //        dom.set(1)
    //         console.log(dom)
    // }
  },
  mounted() {
    // window.addEventListener("scroll", this.handleScroll);
  },

  //销毁,否则跳到别的路由还是会出现
  beforeDestroy() {
    // window.removeEventListener("scroll", this.handleScroll);
    // this.pageScroll = 0;
  },
};
</script>
<style lang="scss" scoped>
.jiahe {
  min-height: 100vh;
  background-color: #f6f6f6;
}
.banner-box {
  width: 100vw;
  height: 38.02vw;
  position: relative;
  z-index: 5;
}

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

}
.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;
  cursor: pointer;
}
.edu_con {
  width: 62.5vw;
  margin: 5.516vw auto 0;
  margin-bottom: 5.156vw;
  .edu_name {
    text-align: center;
    font-size: 1.562vw;
    // font-family: Microsoft YaHei;
    // font-weight: bold;
    font-family: "pingfang-b" !important;
    color: #111111;
  }
  .edu_subname {
    text-align: center;
    font-size: 0.833vw;
    // font-family: Microsoft YaHei;
    // font-weight: 400;
    color: #888888;
  }
  .inputBox {
    width: 100%;
    height: 2.916vw;
    background-color: #e9e9e9;
    margin: 2.083vw 0;
  }
  .eduConbox {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2.604vw;
    .itemBox {
      width: 20vw;
      height: 18.437vw;
      background-color: #ff0;
      margin-right: 1.25vw;
      margin-bottom: 1.562vw;
      .itemImg {
        width: 20vw;
        height: 13.229vw;
        background-color: rgb(99, 150, 104);
      }
      .infoBox {
        padding: 1.406vw 0.937vw 0;
        .courseName {
          font-size: 0.833vw;
          // font-family: Microsoft YaHei;
          // font-weight: bold;
          font-family: "pingfang-b" !important;
          color: #000000;
          margin-bottom: 0.989vw;
        }
        .desc {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.625vw;
          // font-family: Microsoft YaHei;
          // font-weight: 400;
          color: #888888;
        }
      }
    }
    & .itemBox:nth-child(3n) {
      margin-right: 0;
    }
  }
}

.seemore {
  margin: 0 auto;
  width: 12.5vw;
  height: 2.916vw;
  background: #45766d;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25vw;
  // font-family: PingFang SC;
  // font-weight: 500;
  color: #ffffff;
}
.classPlanItemBox{
  width: 100%;
  height: 7.5vw;
  background-color: #FFFFFF;
  box-shadow: 0px 6px 10px 0px rgba(116, 116, 116, 0.1);
  padding: 1.562vw 1.041vw;
   margin-bottom: 2.604vw;
}
</style>