<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="teacher-content-box">
        <!-- <img class="teacher" src="https://webapp-pub.ezijing.com/project/seg-shms/all-teacher.jpg" /> -->
        <div class="content-box">
          <div class="teacher-box">
            <div class="mar-t-box" v-for="(item, index) in teacherList" :key="index">
              <div class="title">{{ item.title }}</div>
              <ul>
                <template v-for="(cItem, cIndex) in item.list">
                  <li :key="cIndex + '='">
                    <img :src="cItem.image" alt="" />
                    <div class="name">{{ cItem.name }}</div>
                    <div class="p" v-html="cItem.intr"></div>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </app-frame>
  </div>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: {
    appFrame
  },
  data() {
    return {
      teacherList: [
        {
          title: this.$t('teachers.tit1'),
          list: [
            {
              image: 'https://webapp-pub.ezijing.com/project/caas/Tanja_Florenthal%20.png',
              name: this.$t('teachers.tea1Name'),
              intr: this.$t('teachers.tea1Txt')
            },
            {
              image: 'https://webapp-pub.ezijing.com/project/caas/R.%20Max%20Behesht.png',
              name: this.$t('teachers.tea2Name'),
              intr: this.$t('teachers.tea2Txt')
            },
            {
              image: 'https://webapp-pub.ezijing.com/project/caas/Alain%20Muller.png',
              name: this.$t('teachers.tea3Name'),
              intr: this.$t('teachers.tea3Txt')
            },
            {
              image: 'https://webapp-pub.ezijing.com/project/caas/LyndaPasmore.png',
              name: this.$t('teachers.tea4Name'),
              intr: this.$t('teachers.tea4Txt')
            },
            {
              image: 'https://webapp-pub.ezijing.com/project/caas/Apostolos%20Ampountolas.png',
              name: this.$t('teachers.tea5Name'),
              intr: this.$t('teachers.tea5Txt')
            },
            {
              image: 'https://webapp-pub.ezijing.com/project/caas/Daarren%20Burke.png',
              name: this.$t('teachers.tea6Name'),
              intr: this.$t('teachers.tea6Txt')
            }
          ]
        }
      ],
      frameParams: {
        banner: 'https://webapp-pub.ezijing.com/project/caas/about-teacher_banner.png',
        slider: [
          {
            name: this.$t('menu.courseChild.set'),
            path: '/about/course'
          },
          {
            name: this.$t('menu.courseChild.teachers'),
            path: '/about/teacher'
          }
        ]
      }
    }
  },
  mounted() {},
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>
<style lang="scss" scoped>
.teacher {
  width: 100%;
  display: block;
}
.is-pc {
  .teacher-content-box {
    // width: 1200px;
    margin: 0 auto;
    .content-box {
      padding: 60px 75px 61px;
      .teacher-box {
        .title {
          font-size: 22px;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          padding-top: 30px;
          li {
            width: 180px;
            margin-right: 140px;
            margin-bottom: 40px;
            &:nth-child(3n + 3) {
              margin-right: 0;
            }
            img {
              display: block;
              width: 100%;
              height: 240px;
              object-fit: cover;
            }
            .name {
              font-size: 18px;
              color: #aa1941;
              line-height: 100%;
              margin-top: 20px;
              margin-bottom: 10px;
              white-space: nowrap;
            }
            .p {
              font-size: 14px;
              // line-height: 100%;
              color: #666666;
              white-space: nowrap;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
}
.is-h5 {
  .teacher-content-box {
    .content-box {
      padding: 0.3rem 0.32rem 0.3rem;
      .teacher-box {
        .title {
          font-size: 0.14rem;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          padding-top: 0.15rem;
          li {
            width: 1.32rem;
            margin-left: 0.3rem;
            margin-bottom: 0.13rem;
            &:nth-child(odd) {
              margin-left: 0;
            }
            img {
              display: block;
              width: 100%;
            }
            .name {
              font-size: 0.14rem;
              line-height: 100%;
              color: #aa1941;
              margin-top: 0.1rem;
              margin-bottom: 0.03rem;
            }
            .p {
              font-size: 0.1rem;
              line-height: 0.13rem;
              color: #666666;
              margin-top: 0.03rem;
            }
          }
        }
      }
    }
  }
}
</style>
