<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="teacher-content-box">
        <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.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t1.png',
              name: 'Arthur Comstock',
              intr: '理海大学博士<br />教授兼系主任'
            },
            {
              image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t2.png',
              name: 'Chris Speicher',
              intr: '天普大学博士<br />副教授'
            },
            {
              image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t3.png',
              name: 'Kerimcan Ozcan',
              intr: '密西根大学博士<br />副教授'
            },
            {
              image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t4.png',
              name: 'Monica Law',
              intr: '宾夕法尼亚州立大学博士<br />副教授'
            },
            {
              image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t5.png',
              name: 'Uldarico Rex Dumdum',
              intr: '纽约州立大学宾汉姆顿分校博士<br />副教授'
            }
          ]
        },
        {
          title: this.$t('teachers.tit2'),
          list: [
            {
              image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t6.png',
              name: '肇越',
              intr: '清华大学五道口金融学院经济学博士<br />香港致富证券首席经济学家'
            },
            {
              image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t7.png',
              name: '张恩忠',
              intr: '美国普渡大学博士<br />中国人民大学市场营销系副教授'
            },
            {
              image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t8.png',
              name: '冯云霞',
              intr: '荷兰马斯特里赫特商学院工商管理博士<br />中国人民大学组织与人力资源系教授'
            },
            {
              image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t9.png',
              name: '王小华',
              intr: '加拿大西安大略大学博士<br />北京师范大学心理学部副教授'
            }
          ]
        }
      ],
      frameParams: {
        banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx4.jpg',
        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>
.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%;
            }
            .name {
              font-size: 18px;
              color: #aa1941;
              line-height: 100%;
              margin-top: 20px;
              margin-bottom: 10px;
            }
            .p {
              font-size: 14px;
              // line-height: 100%;
              color: #666666;
              white-space: nowrap;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
}
.is-h5{
  .teacher-content-box {
    .content-box {
      padding: .3rem .32rem .3rem;
      .teacher-box {
        .title {
          font-size: .14rem;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          padding-top: .15rem;
          li {
            width: 1.32rem;
            margin-left: .3rem;
            margin-bottom: .13rem;
            &:nth-child(odd){
              margin-left: 0;
            }
            img {
              display: block;
              width: 100%;
            }
            .name {
              font-size: 0.14rem;
              line-height: 100%;
              color: #AA1941;
              margin-top: .1rem;
              margin-bottom: .03rem;
            }
            .p {
              font-size: 0.1rem;
              line-height: 0.13rem;
              color: #666666;
              margin-top: .03rem;
            }
          }
        }
      }
    }
  }
}
</style>
