<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"
          /> -->
          <p style="margin:0.16rem 0;">在数字经济快速发展，产业化、实践性人才能力亟需升级的大背景下，清控紫荆教育响应国家战略，调研300+数字经济机构，了解人才培养痛点、梳理数字化时代人才的能力模型；开展100+场次的行业专家、高职本科学科带头人、重点本科学者的科研碰撞；分析近三年的数字经济产业的招聘岗位，针对超过180万+岗位从业岗位进行分析；走访200+院校，对比分析数字经济相关专业的人才培养方案。总结出数字经济时代下人才需求十大能力。</p>
          <p style="font-size: 18px;font-weight: 400;color: #A81840;margin-bottom:12px">
            数字经济人才需求-能力模型
          </p>
          <img
            :src="
              $cookies.get('lang') == 'en-US'
                ? 'https://webapp-pub.ezijing.com/www/pc/services/college/power_02.png'
                : ' https://webapp-pub.ezijing.com/www/pc/services/college/power_02.png'
            "
          />
          <p style="font-size: 18px;font-weight: 400;color: #000000;margin:0.15rem 0;">
            数字经济产业学院共建目标
          </p>
          <p style="font-size: 0.14rem;font-weight: 400;color: #555;margin-bottom:20px">
            依托清控紫荆教育长期所积累的专业化研发能力，科技研发能力以及国际化能力，我们对共建数字经济产业学院提出了“五个一流”的建设目标，力争和全国各类院校一起，从实际情况出发培养产业所急需的初、中、高等各级别专业化岗位人才。
          </p>
          <img style="margin-bottom:0;" src="https://webapp-pub.ezijing.com/www/pc/services/college/power_01.png" alt="" />
          
        </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>
