<template>
  <div class="jiahe">
    <Header />
    <div class="detailBox">
      <div class="left">
        <div class="border_out">
          <q-img src="" class="border_img" />
        </div>
      </div>
      <div class="right">
        <div class="name">标日基础课程</div>
        <div class="line"></div>
        <div class="desc">
          全新教学模式：母语式教学，让你先学会开口再去理解。先听懂然后会说再去了解如何书写，全面了解日式思维，然后熟练应用日语专业知识学习；能够更全面阅读和理解有关各类话题的。教学特色：免费测试 新学员入学安排水平鉴定考试，根据学生水平进行分班；线上课程 实现教学“零距离”，线下全程监督跟踪；即时答疑 遇到问题随时提，获得专业解答；免费重修 出勤率达到90%的学员，学不会免费重修；免费补课 缺勤课程可跟班补习或录播视频补习；课后巩固 专业配套课后练习巩固知识，老师处一对一过关；会话练习 与外教一起练习口语会话，拒绝“哑巴”日语。
        </div>
        <div class="consult">立即咨询</div>
      </div>
    </div>
    <!-- 教育相关产品 -->
    <div class="edu_con">
      <div class="edu_name">教育相关产品</div>
      <div class="eduConbox">
        <div v-for="item in eduProductList" :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>
    <!-- 底部 -->
    <Footer />
  </div>
</template>   

<script>
import Header from "../../components/header/headerType2";
import Footer from "../../components/footer/footerType2";
export default {
  name: "PageIndex",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      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: {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.jiahe {
  min-height: 100vh;
  background-color: #faf8f9;
}

.detailBox {
  width: 62.5vw;
  height: 34.583vw;
  margin: 0 auto;
  padding-top: 5.202vw;
  display: flex;
  justify-content: space-between;
  .left {
    width: 35.208vw;
    height: 19.062vw;
    border-bottom: 3px solid #e8e8e8;
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-content: space-between;
    .border_out {
      width: 30.593vw;
      height: 18.75vw;
      background-color: #e4e4e4;
      border: 2px solid #ffffff;
      box-shadow: 0px 20px 36px 0px rgba(116, 116, 116, 0.35);
      border-radius: 18px 18px 0px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      .border_img {
        width: 29.01vw;
        height: 16.822vw;
        background-color: #000;
      }
    }
  }
  .right {
    width: 23.802vw;
    .name {
      font-size: 1.562vw;
      line-height: 1.562vw;
      //   font-family: Microsoft YaHei;
      //   font-weight: bold;
      font-family: "pingfang-b" !important;
      color: #111111;
      margin-bottom: 2.083vw;
    }
    .line {
      width: 4.166vw;
      height: 1px;
      background-color: #111111;
      margin-bottom: 2.083vw;
    }
    .desc {
      height: 10.26vw;
      width: 100%;
      overflow: hidden;
      font-size: 0.729vw;
      //   font-family: Microsoft YaHei;
      //   font-weight: 400;
      color: #999999;
      margin-bottom: 4.166vw;
      overflow-y: auto;
    }
    .consult {
      width: 100%;
      height: 2.916vw;
      background-color: #45766d;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.25vw;
      font-weight: 500;
      color: #ffffff;
    }
  }
}

.edu_con {
  width: 62.5vw;
  margin: 0 auto;
  .edu_name {
    text-align: center;
    font-size: 1.562vw;
    // font-family: Microsoft YaHei;
    // font-weight: bold;
    font-family: "pingfang-b" !important;
    color: #111111;
    margin-bottom: 2.604vw;
  }

  .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>