<template>
  <div>
    <tabs :list="navList" @tabChange="tabChange"></tabs>
    <template v-if="showModule === 0">
      <div class="module-1">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-1.png" />
        <div class="width-con">
          <img
            style="margin: 0.26rem 0 0.07rem"
            src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-2.png"
          />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-3.png" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-4.png" />
          <img
            style="width: 1.82rem; margin: 0.27rem 0 0.15rem"
            src="https://webapp-pub.ezijing.com/www/h5/images/college-text.png"
            alt=""
          />
          <div class="layout-con">
            <div class="lay-con__left">
              <div class="lay-l__top">
                <img src="https://webapp-pub.ezijing.com/www/h5/images/college-i1.png" />
                <img class="img-text" src="https://webapp-pub.ezijing.com/www/h5/images/college-i1-t1.png" />
              </div>
              <div class="lay-l__bottom">
                <img src="https://webapp-pub.ezijing.com/www/h5/images/college-i2.png" />
                <img class="img-text" src="https://webapp-pub.ezijing.com/www/h5/images/college-i2-t2.png" />
              </div>
            </div>
            <div class="lay-con__right">
              <img src="https://webapp-pub.ezijing.com/www/h5/images/college-i3.png" />
              <img class="img-text" src="https://webapp-pub.ezijing.com/www/h5/images/college-i3-t3.png" />
            </div>
          </div>
          <img
            style="margin: 0.15rem 0 0.17rem"
            src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-5.png"
          />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-6.png" />
          <img style="margin: 0.3rem 0 0.4rem" src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-7.png" />
        </div>
      </div>
    </template>
    <template v-if="showModule === 1">
      <div class="module-2">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img2-1.png" />
        <div class="width-con">
          <img
            style="margin: 0.31rem 0 0.24rem"
            src="https://webapp-pub.ezijing.com/www/h5/images/college-img2-2.png"
          />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img2-3.png" />
          <div class="title">目标岗位群</div>
          <college-item :data="m2Data" />
        </div>
      </div>
    </template>
    <template v-if="showModule === 2">
      <div class="module-3">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img3-1.png" />
        <div class="width-con">
          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img3-2.png" />
          <img style="margin-top: 0.1rem" src="https://webapp-pub.ezijing.com/www/h5/images/college-img3-3.png" />
          <div class="title">目标岗位群</div>
          <college-item :data="m3Data1" />
          <college-item :data="m3Data2" style="margin: 0.1rem 0 0.2rem" />
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import collegeItem from './components/collegeItem'
import tabs from './components/tab'
export default {
  components: { tabs, collegeItem },
  data() {
    return {
      navList: ['现代产业学院', '数字金融', '国际品牌管理与数字运营'],
      showModule: 0,
      m2Data: {
        list: [
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l1.png',
            text: '数字化营销'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l2.png',
            text: '数字化运营'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l3.png',
            text: '智能投顾'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l4.png',
            text: '风险管理'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l5.png',
            text: '金融数据分析'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l6.png',
            text: '财务会计'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l7.png',
            text: '金融建模'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l8.png',
            text: '投资分析'
          }
        ]
      },
      m3Data1: {
        list: [
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img1-i1n.png'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i2.png',
            text: '文案策划'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i3.png',
            text: '营销策划'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i4.png',
            text: '渠道管理'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i5.png',
            text: '广告策划'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i6.png',
            text: '媒体公共'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i7.png',
            text: '品牌管理运营'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i8.png',
            text: '产品设计'
          }
        ]
      },
      m3Data2: {
        height: '.98rem',
        list: [
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img1-i2n.png'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i8.png',
            text: '互联网运营'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i9.png',
            text: '网站运营'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i10.png',
            text: '电商运营'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i11.png',
            text: '新媒体运营'
          },
          {
            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i12.png',
            text: '活动策划运营'
          }
        ]
      }
    }
  },
  methods: {
    tabChange(index) {
      this.showModule = index
    }
  }
}
</script>
<style lang="scss" scoped>
img {
  width: 100%;
  display: block;
}
.width-con {
  padding: 0 0.17rem;
}
.module-1 {
  .layout-con {
    display: flex;
    .lay-con__left {
      width: 1.25rem;
      margin-right: 0.03rem;
      .lay-l__top {
        height: 0.73rem;
        position: relative;
        margin-bottom: 0.03rem;
        .img-text {
          width: 0.85rem;
          position: absolute;
          bottom: 0.08rem;
          left: 0.07rem;
        }
      }
      .lay-l__bottom {
        height: 0.73rem;
        position: relative;
        .img-text {
          width: 0.6rem;
          position: absolute;
          bottom: 0.04rem;
          left: 0.07rem;
        }
      }
    }
    .lay-con__right {
      position: relative;
      width: 2.15rem;
      height: 1.48rem;
      .img-text {
        width: 1rem;
        position: absolute;
        bottom: 0.08rem;
        left: 0.11rem;
      }
    }
  }
}
.module-2 {
  .title {
    margin: 0.32rem 0 0.06rem;
    font-size: 0.14rem;
    line-height: 100%;
    color: #424242;
  }
}
.module-3 {
  .title {
    font-size: 0.14rem;
    color: #424242;
    line-height: 100%;
    margin: 0.3rem 0 0.1rem;
  }
}
</style>
