<template>
  <div class="jiahe">
    <Header :scorllNum="pageScroll" />

    <!-- 教育产品 -->
    <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 eduProductList" :key="item.id" class="itemBox" @click="seeDetail">
          <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>
    <div class="pageBox">
      <q-pagination
        v-model="current"
        color="light-green-10"
        :max="10"
        :max-pages="6"
        :boundary-numbers="true"
      >
      </q-pagination>
    </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",
      current: 1,
      eduProductList: [
        {
          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: "",
        },
      ],
    };
  },

  methods: {
    seeDetail(){
        this.$router.push("/eduProductDetail")
    }
  },
  
};
</script>
<style lang="scss" scoped>
.jiahe {
  // min-height: 100vh;
  background-color: #faf8f9;
}

.edu_con {
  width: 62.5vw;
  margin: 0 auto;
  padding-top: 4.01vw;
//   margin-bottom: 4.974vw;
  .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;
    }
  }
  .eduConbox {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3.385vw;
    .itemBox {
      width: 20vw;
      height: 18.437vw;
      background-color: #fff;
      margin-right: 1.25vw;
      margin-bottom: 1.562vw;
      box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1);
      .itemImg {
        width: 20vw;
        height: 13.229vw;
      }
      .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;
    }
  }
}
.pageBox{
    width: 100%;
    margin-bottom: 5.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.q-btn{
    border: 1px solid #D2D7DD;
}
</style>