<template>
  <div class="jiahe">
    <Header />
    <Banner />
    <!-- 留学产品 -->
    <div class="studyProduct">
      <div class="title">留学产品</div>
      <div class="subTitle">副标题</div>
      <div v-for="item in studyProductList" :key="item.id">
        <div class="studyProductBox" v-if="item.type == 1">
          <div class="left">
            <div class="name">{{ item.name }}</div>
            <div class="line"></div>
            <div class="desc">{{ item.desc }}</div>
          </div>
          <div class="right">
            <img :src="item.url" alt="" />
          </div>
        </div>
        <div class="studyProductBox" v-if="item.type == 2">
          <div class="right">
            <img :src="item.url" alt="" />
          </div>
          <div class="left">
            <div class="name">{{ item.name }}</div>
            <div class="line"></div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <TeacherTeam :viewNum="3"/>
    <Footer />
  </div>
</template>
<script>
import Header from "../../components/header/headerType2";
import Banner from "../../components/bnaner/banner";
import TeacherTeam from "../../components/teacherTeam/teacherTeam";
import Footer from "../../components/footer/footerType2";
export default {
  components: {
    Banner,
    Header,
    TeacherTeam,
    Footer,
  },
  data() {
    return {
      studyProductList: [
        {
          // url:require(''),
          id: 1,
          url: "",
          name: "学部直考",
          desc:
            "日本，作为中国一衣带水的邻邦，同时因为其一流的教育水平、与中国相近的文化风俗、保持完好的传统礼仪以及良好的社会治安，一直以来深受中国留学生的喜爱",
          type: 1,
        },
        {
          id: 2,
          url: "",
          name: "学部直通车",
          desc:
            "学生12年教育经历，日语到N2水平，经我校推荐，即能直通日本本科：日本，作为中国一衣带水的邻邦，同时因为其一流的教育水平、与中国相近的文化风俗、保持完好的传统礼仪以及良好的社会治安，一直以来深受中国留学生的喜爱。",
          type: 2,
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.jiahe{
    background-color: #F6F6F6;
}
.studyProduct {
  width: 62.5vw;
  margin: 0 auto;
  .title {
    font-size: 1.5625vw;
    // font-family: Microsoft YaHei;
    // font-weight: bold;
    font-family: "pingfang-b" !important;
    color: #111111;
    line-height: 1.5625vw;
    text-align: center;
    margin-top: 5.208vw;
    margin-bottom: 1.041vw;
  }
  .subTitle {
    text-align: center;
    font-size: 0.833vw;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #888888;
    line-height: 1.5625vw;
    margin-bottom: 2.833vw;
  }
  .studyProductBox {
    display: flex;
    justify-content: space-between;
    height: 27.395vw;
    margin-bottom: 5.208vw;
    .left {
      width: 18.125vw;
      height: 100%;
      .name {
        font-size: 1.25vw;
        font-family: "pingfang-b" !important;
        color: #111111;
        line-height: 1.5625vw;
      }
      .line {
        width: 5.208vw;
        height: 1px;
        background-color: #45766d;
        margin: 1.5625vw 0;
      }
      .desc {
        width: 100%;
        max-height: 20.104vw;
        overflow-y: auto;
        font-size: 0.625vw;
        color: #111111;
        line-height: 1.875vw;
      }
    }
    .right {
      width: 41.145vw;
      height: 100%;
      background-color: #333;
    }
  }
}
</style>