<template>
  <div class="jiahe">
    <Header />
    <!-- bannner部分 -->
    <Banner/>
    <!-- 教育产品 -->
    <div class="edu_con">
      <div class="edu_name">教育产品</div>
      <div class="edu_subname">副标题</div>
      <div class="inputBox">
        <q-input
          v-model="search"
          filled
          type="search"
          clearable
          placeholder="可搜索课程系列/名称"
          class="inputBorder"
        >
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
        </q-input>
        <q-select
          outlined
          v-model="model"
          :options="options"
          clearable
          class="inputBorder"
          placeholder="可查询课程系列/名称"
          :dense="false"
          :options-dense="false"
        >
        </q-select>
      </div>
      <div class="eduConbox">
        <div v-for="item in eduList" :key="item.id" class="itemBox">
          <!-- <q-img src="../assets/images/JapaneseTrain/edu1.png" class="itemImg" /> -->

          <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" @click="goEduProductList">查看更多</div>
    </div>
    <!-- 开班计划 -->
    <div class="edu_con">
      <div class="edu_name">开班计划</div>
      <div class="edu_subname">副标题</div>
      <div class="inputBox">
        <q-input
          v-model="search"
          filled
          type="search"
          clearable
          placeholder="可搜索课程系列/名称"
          class="inputBorder2"
        >
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
        </q-input>
        <div class="inputBorder2">
          <q-select
            outlined
            v-model="model"
            :options="options"
            clearable
            placeholder="可查询课程系列/名称"
            :dense="false"
            :options-dense="false"
          >
          </q-select>
        </div>
        <div class="inputBorder2">
          <q-select
            outlined
            v-model="model"
            :options="options"
            clearable
            placeholder="可查询课程系列/名称"
            :dense="false"
            :options-dense="false"
          >
          </q-select>
        </div>
      </div>
      <div class="classPlanBox">
        <div
          v-for="item in classPlanList"
          :key="item.id"
          class="classPlanItemBox"
        >
          <div class="infoBox1">
            <div class="className">{{ item.className }}</div>
            <div class="courseInfo" style="margin-bottom: 0.625vw">
              <q-img
                src="../../assets/images/JapaneseTrain/icon1.png"
                class="itemIcon"
              />{{ item.courseInfo }}
            </div>
            <div class="courseInfo">
              <q-img
                src="../../assets/images/JapaneseTrain/icon2.png"
                class="itemIcon"
              />{{ item.courseTime }}
            </div>
          </div>
          <div class="infoBox2">
            <div class="title">招生信息</div>
            <div class="stuInfo" style="margin-bottom: 0.729vw">
              截止报名时间<span class="stuTime">{{ item.joinEnd }}</span>
            </div>
            <div class="stuInfo">
              开始上课时间<span class="stuTime">{{ item.joinStart }}</span>
            </div>
          </div>
          <div class="infoBox3">
            <div class="title">名额信息</div>
            <div style="margin-bottom: 0.729vw" class="numInfo">
              计划招生人数<span class="planNum">{{ item.planNum }}</span
              >人
            </div>
            <div class="numInfo">
              剩余招生名额<span class="surplusNum">{{ item.surplusNum }}</span
              >人
            </div>
          </div>
          <div class="infoBox4">
            <div class="title">咨询客服</div>
            <div class="consultBtn">去咨询</div>
          </div>
        </div>
      </div>
      <div class="seemore">查看更多</div>
    </div>
    <!-- 教师团队 -->
    <TeacherTeam :viewNum="4"/>
    <!-- 底部 -->
    <Footer />
  </div>
</template>   
<script>
import Header from "../../components/header/headerType2";
import Footer from "../../components/footer/footerType2";
import Banner from "../../components/bnaner/banner";
import TeacherTeam from "../../components/teacherTeam/teacherTeam";

export default {
  name: "PageIndex",
  components: {
    Header,
    Footer,
    Banner,
    TeacherTeam,
   
  },
  data() {
    return {
      slide: "first",
      pageScroll: 1080,
      current: 4,
      search: "",
      model: "",
      options: ["Google", "Facebook", "Twitter", "Apple", "Oracle"],
      eduList: [
        {
          id: 1,
          url: require("../../assets/images/JapaneseTrain/edu1.png"),
          courseName: "什么什么课程",
          desc: "对课程的一些二级文字介绍内容，这里放一排位置。多的省略号...",
        },
        {
          id: 2,
          url: require("../../assets/images/JapaneseTrain/edu2.png"),
          courseName: "什么什么课程",
          desc: "",
        },
        {
          id: 3,
          url: require("../../assets/images/JapaneseTrain/edu3.png"),
          courseName: "什么什么课程",
          desc: "",
        },
        {
          id: 4,
          url: require("../../assets/images/JapaneseTrain/edu4.png"),
          courseName: "什么什么课程",
          desc: "",
        },
        {
          id: 5,
          url: require("../../assets/images/JapaneseTrain/edu5.png"),
          courseName: "什么什么课程",
          desc: "",
        },
        {
          id: 6,
          url: require("../../assets/images/JapaneseTrain/edu6.png"),
          courseName: "什么什么课程",
          desc: "",
        },
      ],
      classPlanList: [
        {
          id: 1,
          className: "东野大木(五班)",
          courseInfo: "日语 基础0-N3直通车课程系列",
          courseTime: "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);
    // },

    //去教育产品列表
    goEduProductList() {
      this.$router.push("/eduProductList");
    },
  },
  mounted() {
    // window.addEventListener("scroll", this.handleScroll);
  },

 
};
</script>
<style lang="scss" scoped>
.jiahe {
  height: 100%;
  background-color: #f6f6f6;
}

.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;
    margin: 2.083vw 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .inputBorder {
      width: 30.468vw;
      height: 2.916vw;
      background-color: #e9e9e9;
    }
    .inputBorder2 {
      width: 19.791vw;
      height: 2.916vw;
      background-color: #e9e9e9;
    }
  }
  .eduConbox {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2.604vw;
    .itemBox {
      width: 20vw;
      height: 18.437vw;
      background-color: #fff;
      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;
  display: flex;
  .title {
    font-size: 0.729vw;
    font-family: "pingfang-b" !important;
    color: #2d2d2d;
    margin-bottom: 1.145vw;
  }
  .infoBox1 {
    width: 18.75vw;
    height: 100%;
    .className {
      font-size: 0.833vw;
      // font-family: Microsoft YaHei;
      color: #111111;
      margin-bottom: 1.145vw;
    }
    .courseInfo {
      display: flex;
      align-items: center;
      font-size: 0.729vw;
      color: #111111;
      .itemIcon {
        width: 0.729vw;
        height: 0.729vw;
        margin-right: 0.312vw;
      }
    }
  }
  .infoBox2 {
    width: 19.583vw;
    height: 100%;
    .stuInfo {
      font-size: 0.729vw;
      color: #111111;
      .stuTime {
        color: #45766d;
        font-family: "pingfang-b" !important;
        margin-left: 1vw;
      }
    }
  }
  .infoBox3 {
    width: 15.989vw;
    height: 100%;
    .numInfo {
      font-size: 0.729vw;
      color: #999999;
      .planNum {
        color: #111111;
        margin-left: 1vw;
      }
      .surplusNum {
        margin-left: 1vw;
      }
    }
  }
  .infoBox4 {
    .consultBtn {
      width: 4.166vw;
      height: 1.562vw;
      background-color: #45766d;
      font-size: 0.625vw;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0.52vw;
    }
  }
}

</style>