<template>
  <div class="occupation-content">
    <div class="mian-title">{{ $t('home.college.program') }}</div>
    <div class="mian">
      <tab :data="tabList" :defaultActive="1" @tabChangeIndex="tabChangeIndex" />
      <div class="occupation-content-mian">
        <template v-if="showModule === 1">
          <div class="module-1 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_011.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_011.png'"
              class="banner" />
            <div class="content-mian">
              <div class="module-title">{{ isEn ? '培养目标' : '培养目标' }}</div>
              <p style="font-size: 16px; line-height: 32px; color: #424242; margin: 10px 0 30px">
                聚焦金融科技人才复合型、创新型与国际化，通过学科交叉设置，打造全新课程体系，学生通过学习金融数字化，掌握量化金融、金融风险管理、大数据、机器学习、深度学习等领域技术核心原理方法及应用，深刻理解金融科技应用场景，具备数字化和智能化项目解决架构和实施管理能力，培养企业数字化转型和金融科技应用的中坚力量和具备国际竞争的金融科技应用创新型人才。
              </p>
              <div class="module-title">{{ isEn ? '对应专业' : '对应专业' }}</div>
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_02.png'"
                style="margin: 15px 20px 25px" />
              <div class="module-title">{{ isEn ? '课程设置' : '课程设置' }}</div>
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_03.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_03.png'"
                style="margin: 15px 0 40px" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_04.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_04.png'" />
              <div class="module-title">{{ isEn ? '就业岗位' : '就业岗位' }}</div>
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_051.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page1_051.png'" />
            </div>
          </div>
        </template>
        <template v-if="showModule === 2">
          <div class="module-1 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_01.png'"
              class="banner" />
            <div class="content-mian">
              <div class="module-title">{{ isEn ? '培养目标' : '培养目标' }}</div>
              <!-- <div class="cart-txt">
                <div>
                  <h5>{{isEn ? '初级' : '初级'}}</h5>
                  <p class="bold">{{isEn ? '工具操作+业务执行' : '工具操作+业务执行'}}</p>
                  <p>{{isEn ? '客户管理能力' : '客户管理能力'}}</p>
                  <p>{{isEn ? '产品理解能力' : '产品理解能力'}}</p>
                  <p>{{isEn ? '营销专业知识能力' : '营销专业知识能力'}}</p>
                  <p>{{isEn ? '网络与新媒体传播能力' : '网络与新媒体传播能力'}}</p>
                </div>
                <div>
                  <h5>{{isEn ? '中级' : '中级'}}</h5>
                  <p class="bold">{{isEn ? '知识运用+任务统筹' : '知识运用+任务统筹'}}</p>
                  <p>{{isEn ? '方案策划能力' : '方案策划能力'}}</p>
                  <p>{{isEn ? '数字媒体操作能力' : '数字媒体操作能力'}}</p>
                  <p>{{isEn ? '投放管理能力' : '投放管理能力'}}</p>
                  <p>{{isEn ? '数据分析能力' : '数据分析能力 '}}</p>
                </div>
                <div>
                  <h5>{{isEn ? '高级' : '高级'}}</h5>
                  <p class="bold">{{isEn ? '策略制定+创新升级' : '策略制定+创新升级'}}</p>
                  <p>{{isEn ? '行业洞察能力' : '行业洞察能力'}}</p>
                  <p>{{isEn ? '跨行业整合能力' : '跨行业整合能力'}}</p>
                  <p>{{isEn ? '策略制定能力' : '策略制定能力'}}</p>
                  <p>{{isEn ? '创意思维能力' : '创意思维能力'}}</p>
                </div>
              </div> -->
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_02.png'" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_031.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_031.png'" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_04.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_04.png'" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_05.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page2_05.png'" />
              <div class="module-title">{{ isEn ? '就业岗位' : '就业岗位' }}</div>
              <div class="module-sub-title" style="margin-bottom: 20px">
                <span>{{ isEn ? '就业行业' : '就业行业' }}</span>
              </div>
              <ul class="cart-img">
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_01.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '新型互联网行业' : '新型互联网行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_02.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '汽车行业' : '汽车行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_03.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '房地产行业' : '房地产行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_04.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '教育行业' : '教育行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_05.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '美妆行业' : '美妆行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_06.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '金融行业' : '金融行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_07.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '新媒体行业' : '新媒体行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_08.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '咨询服务行业' : '咨询服务行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page2_card_09.png" />
                </li>
              </ul>
              <div class="module-sub-title">
                <span>{{ isEn ? '就业岗位' : '就业岗位' }}</span>
              </div>
              <div class="cart-txt">
                <div>
                  <h5>{{ isEn ? '品牌及数字化营销' : '品牌及数字化营销' }}</h5>
                  <p>{{ isEn ? '品牌管理经理' : '品牌管理经理' }}</p>
                  <p>{{ isEn ? '品牌公关经理' : '品牌公关经理' }}</p>
                  <p>{{ isEn ? '品牌投放经理' : '产品理解能力' }}</p>
                  <p>{{ isEn ? '品牌传播策略经理' : '品牌传播策略经理' }}</p>
                  <p>{{ isEn ? '数字营销平台项目经理' : '数字营销平台项目经理' }}</p>
                  <p>{{ isEn ? '营销策划师' : '营销策划师' }}</p>
                </div>
                <div>
                  <h5>{{ isEn ? '市场客户关系管理' : '市场客户关系管理' }}</h5>
                  <p>{{ isEn ? '市场营销经理' : '市场营销经理' }}</p>
                  <p>{{ isEn ? '新媒体营销经理' : '新媒体营销经理' }}</p>
                  <p>{{ isEn ? '客户数据库管理员' : '客户数据库管理员' }}</p>
                  <p>{{ isEn ? '客户体验设计师' : '客户体验设计师' }}</p>
                  <p>{{ isEn ? '客户经理' : '客户经理 ' }}</p>
                </div>
                <div>
                  <h5>{{ isEn ? '视觉表现与制作' : '视觉表现与制作' }}</h5>
                  <p>{{ isEn ? '摄影、摄像师' : '摄影、摄像师' }}</p>
                  <p>{{ isEn ? '后期编辑工程师' : '后期编辑工程师' }}</p>
                  <p>{{ isEn ? '交互设计与制作' : '交互设计与制作' }}</p>
                  <p>{{ isEn ? '新媒体运营制作' : '新媒体运营制作' }}</p>
                  <p>{{ isEn ? '短视频编导制作' : '短视频编导制作' }}</p>
                  <p>{{ isEn ? '直播电商运营' : '直播电商运营' }}</p>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="showModule === 3">
          <div class="module-1 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_00.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_00.png'"
              class="banner" />
            <div class="content-mian">
              <div class="module-title">{{ isEn ? '培养目标' : '培养目标' }}</div>
              <div style="color: #a81840; font-size: 20px; margin-top: 15px">企业信息决策</div>
              <div class="cart-txt">
                <div>
                  <h5>{{ isEn ? '理解企业数据' : '理解企业数据' }}</h5>
                  <p class="bold">{{ isEn ? '基础知识培养' : '基础知识培养' }}</p>
                  <p>{{ isEn ? '商业经济与运行管理知识' : '商业经济与运行管理知识' }}</p>
                  <p>{{ isEn ? '数理统计等数学思维' : '数理统计等数学思维' }}</p>
                </div>
                <div>
                  <h5>{{ isEn ? '发现业务问题' : '发现业务问题' }}</h5>
                  <p class="bold">{{ isEn ? '大数据分析平台工具使用' : '大数据分析平台工具使用' }}</p>
                </div>
                <div>
                  <h5>{{ isEn ? '开发预测模型' : '开发预测模型' }}</h5>
                  <p class="bold">{{ isEn ? '核心技术方法培养' : '核心技术方法培养' }}</p>
                  <p>{{ isEn ? '数据收集' : '数据收集' }}</p>
                  <p>{{ isEn ? '数据处理' : '数据处理' }}</p>
                  <p>{{ isEn ? '数据可视化' : '数据可视化' }}</p>
                  <p>{{ isEn ? '预测建模' : '预测建模' }}</p>
                </div>
              </div>
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_01.png'"
                style="margin-bottom: 15px" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_021.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_021.png'" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_03.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_03.png'" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_04.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_04.png'" />
              <div class="module-title">{{ isEn ? '就业岗位' : '就业岗位' }}</div>
              <div class="module-sub-title" style="margin-bottom: 20px">
                <span>{{ isEn ? '就业行业' : '就业行业' }}</span>
              </div>
              <ul class="cart-img col-4" style="margin-bottom: 48px">
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page3_card_01.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '新型互联网行业' : '新型互联网行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page3_card_02.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '能源行业' : '能源行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page3_card_03.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '制造行业' : '制造行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page3_card_04.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '医疗行业' : '医疗行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page3_card_05.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '快消零售行业' : '快消零售行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page3_card_06.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '咨询服务行业' : '咨询服务行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page3_card_07.png" />
                  <div class="txt">
                    <div class="name">
                      {{ isEn ? '金融行业' : '金融行业' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page3_card_08.png" />
                </li>
              </ul>
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_05.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page3_05.png'" />
            </div>
          </div>
        </template>
        <template v-if="showModule === 4">
          <div class="module-1 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page4_011.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page4_011.png'"
              class="banner" />
            <div class="content-mian">
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page4_021.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page4_021.png'" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page4_03.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page4_03.png'" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page4_04.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page4_04.png'" />
            </div>
          </div>
        </template>
        <template v-if="showModule === 5">
          <div class="module-1 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page5_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page5_01.png'"
              class="banner" />
            <div class="content-mian">
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page5_021.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page5_021.png'" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page5_03.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page5_03.png'" />
              <div class="module-title">{{ isEn ? '就业岗位' : '就业岗位' }}</div>
              <p>就业方向和岗位：主要面向电子商务公司、传统企业数字化转型公司及企事业单位从事数字运营岗、数据管理岗</p>
              <div class="cart-txt">
                <div>
                  <h5>{{ isEn ? '高级岗位' : '高级岗位' }}</h5>
                  <p>{{ isEn ? '数字运营总监' : '数字运营总监' }}</p>
                  <p>{{ isEn ? '数字运营数据专家' : '数字运营数据专家' }}</p>
                  <p>{{ isEn ? '数字运营营销总监' : '数字运营营销总监' }}</p>
                  <p>{{ isEn ? '数字运营项目总监' : '数字运营项目总监' }}</p>
                </div>
                <div>
                  <h5>{{ isEn ? '中级岗位' : '中级岗位' }}</h5>
                  <p>{{ isEn ? '数字运营经理' : '数字运营经理' }}</p>
                  <p>{{ isEn ? '数字运营数据经理' : '数字运营数据经理' }}</p>
                  <p>{{ isEn ? '数字运营营销经理' : '数字运营营销经理' }}</p>
                  <p>{{ isEn ? '数字运营项目经理' : '数字运营项目经理' }}</p>
                </div>
                <div>
                  <h5>{{ isEn ? '初级岗位' : '初级岗位' }}</h5>
                  <p>{{ isEn ? '数字商家运营专员' : '数字商家运营专员' }}</p>
                  <p>{{ isEn ? '数字用户运营专员' : '数字用户运营专员' }}</p>
                  <p>{{ isEn ? '商务数据分析专员' : '商务数据分析专员' }}</p>
                  <p>{{ isEn ? '数字营销专员' : '数字营销专员' }}</p>
                  <p>{{ isEn ? '数字项目专员' : '数字项目专员' }}</p>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="showModule === 6">
          <div class="module-6 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_011.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_011.png'"
              class="banner" />
            <div class="content-mian">
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_02.png'" />
              <div class="module-title">{{ isEn ? '专业分类' : '专业分类' }}</div>
              <div class="tabs">
                <div
                  :class="{ item: true, active: module6TabActive === index, isHover: module6TabHoverIndex === index }"
                  v-for="(item, index) in module6TabList"
                  :key="index"
                  @click="module6TabActive = index"
                  @mouseenter="module6TabHoverIndex = index"
                  @mouseleave="module6TabHoverIndex = -1">
                  <img :src="module6TabActive === index || module6TabHoverIndex === index ? item.active_icon : item.icon" />
                  <p>{{ item.text }}</p>
                </div>
              </div>
              <div v-show="module6TabActive === 0">
                <img
                  :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab1_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab1_01.png'"
                  style="margin: 15px 0 0" />
                <img
                  :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab1_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab1_02.png'"
                  style="margin: 35px 0 0; width: 890px" />
              </div>
              <template v-if="module6TabActive === 1">
                <div class="img-text">
                  <img
                    :src="
                      isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_01.png'
                    "
                    class="img3" />
                  <div>
                    <h5>人才培养方向</h5>
                    <p>大数据技术生态系统解析，科技创新前沿实践<br />创新思维 + 应用场景 + 实践应用，多维度培养数据技术人才</p>
                  </div>
                </div>
                <div class="module-title" style="margin-top: 30px">{{ isEn ? '就业行业' : '就业行业' }}</div>
                <div class="swiper-content">
                  <div v-swiper:mySwiper="swiperOption">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon01.png" />
                          <span>{{ isEn ? '医学类' : '医学类' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon02.png" />
                          <span>{{ isEn ? '生物行业' : '生物行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon03.png" />
                          <span>{{ isEn ? '金融行业' : '金融行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_04.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon04.png" />
                          <span>{{ isEn ? '零售行业' : '零售行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon05.png" />
                          <span>{{ isEn ? '电商行业' : '电商行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon06.png" />
                          <span>{{ isEn ? '农牧行业' : '农牧行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon07.png" />
                          <span>{{ isEn ? '交通行业' : '交通行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_04.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon08.png" />
                          <span>{{ isEn ? '教育行业' : '教育行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon09.png" />
                          <span>{{ isEn ? '体育行业' : '体育行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon10.png" />
                          <span>{{ isEn ? '食品行业' : '食品行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_swiper_icon11.png" />
                          <span>{{ isEn ? '政府行业' : '政府行业' }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-btn swiper-button-prev">
                    <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png" />
                  </div>
                  <div class="swiper-btn swiper-button-next">
                    <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png" />
                  </div>
                </div>
                <div class="module-title" style="margin-top: 30px">{{ isEn ? '广泛需求岗位' : '广泛需求岗位' }}</div>
                <img
                  :src="
                    isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab2_02.png'
                  " />
              </template>
              <template v-if="module6TabActive === 2">
                <div class="img-text">
                  <img
                    :src="
                      isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab3_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab3_01.png'
                    " />
                  <div>
                    <h5>人才培养方向</h5>
                    <p>复合 + 创新 + 可持续发展<br />赋能未来，夯实云计算人才培养</p>
                  </div>
                </div>
                <div class="module-title" style="margin-top: 30px">{{ isEn ? '就业行业' : '就业行业' }}</div>
                <div class="swiper-content">
                  <div v-swiper:mySwiper="swiperOption">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_01.png" />
                          <span>{{ isEn ? '政务云' : '政务云' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_02.png" />
                          <span>{{ isEn ? '城市云' : '城市云' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_03.png" />
                          <span>{{ isEn ? '教育云' : '教育云' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_04.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_04.png" />
                          <span>{{ isEn ? '医疗云' : '医疗云' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_05.png" />
                          <span>{{ isEn ? '工业云' : '工业云' }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-btn swiper-button-prev">
                    <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png" />
                  </div>
                  <div class="swiper-btn swiper-button-next">
                    <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png" />
                  </div>
                </div>
                <div class="module-title" style="margin-top: 30px">{{ isEn ? '广泛需求岗位' : '广泛需求岗位' }}</div>
                <img
                  :src="
                    isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab3_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab3_02.png'
                  " />
              </template>
              <template v-if="module6TabActive === 3">
                <div class="img-text">
                  <img
                    :src="
                      isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_01.png'
                    " />
                  <div>
                    <h5>人才培养方向</h5>
                    <p>复合 + 国际 + 创新<br />加快网络安全人才培养，打造人才培养“新样板”</p>
                  </div>
                </div>
                <div class="module-title" style="margin-top: 30px">{{ isEn ? '就业行业' : '就业行业' }}</div>
                <div class="swiper-content">
                  <div v-swiper:mySwiper="swiperOption">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_swiper_icon01.png" />
                          <span>{{ isEn ? 'IT/互联网行业' : 'IT/互联网行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_swiper_icon02.png" />
                          <span>{{ isEn ? '通信/电子行业' : '通信/电子行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_swiper_icon03.png" />
                          <span>{{ isEn ? '制造行业' : '制造行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_04.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_swiper_icon04.png" />
                          <span>{{ isEn ? '政府机关' : '政府机关' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_swiper_icon05.png" />
                          <span>{{ isEn ? '建筑房地产业' : '建筑房地产业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_swiper_icon06.png" />
                          <span>{{ isEn ? '咨询服务行业' : '咨询服务行业' }}</span>
                        </p>
                      </div>
                      <div class="swiper-slide">
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png" />
                        <p>
                          <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_swiper_icon07.png" />
                          <span>{{ isEn ? '金融行业' : '金融行业' }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-btn swiper-button-prev">
                    <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png" />
                  </div>
                  <div class="swiper-btn swiper-button-next">
                    <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png" />
                  </div>
                </div>
                <img
                  :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab4_02.png'"
                  style="margin-top: 36px" />
              </template>
            </div>
          </div>
        </template>
        <template v-if="showModule === 7">
          <div class="module-7 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page7_011.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page7_011.png'"
              class="banner" />
            <div class="content-mian">
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page7_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page7_02.png'" />
              <div class="module-title">{{ isEn ? '专业分类' : '专业分类' }}</div>
              <div class="swiper-content">
                <div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-container">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_img_01.png" />
                      <p>
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_01.png" />
                        <span>{{ isEn ? '工业机器人' : '工业机器人' }}</span>
                      </p>
                    </div>
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_img_02.png" />
                      <p>
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_02.png" />
                        <span>{{ isEn ? '智能控制技术' : '智能控制技术' }}</span>
                      </p>
                    </div>
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_img_03.png" />
                      <p>
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_03.png" />
                        <span>{{ isEn ? '物联网技术' : '物联网技术' }}</span>
                      </p>
                    </div>
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_img_04.png" />
                      <p>
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_04.png" />
                        <span>{{ isEn ? '智能制造工程' : '智能制造工程' }}</span>
                      </p>
                    </div>
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_img_05.png" />
                      <p>
                        <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_swiper_icon_05.png" />
                        <span>{{ isEn ? '新能源汽车' : '新能源汽车' }}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="swiper-btn swiper-button-prev">
                  <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png" />
                </div>
                <div class="swiper-btn swiper-button-next">
                  <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png" />
                </div>
              </div>
              <!-- <ul class="cart-img cart-img1">
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_cart_01.png"  />
                  <div class="txt">
                    <div class="name">
                      {{
                        isEn ? '工业机器人' : '工业机器人'
                      }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_cart_02.png"  />
                  <div class="txt">
                    <div class="name">
                      {{
                        isEn ? '智能控制技术' : '智能控制技术'
                      }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_cart_03.png"  />
                  <div class="txt">
                    <div class="name">
                      {{
                        isEn ? '物联网技术' : '物联网技术'
                      }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_cart_04.png"  />
                  <div class="txt">
                    <div class="name">
                      {{
                        isEn ? '智能制造工程' : '智能制造工程'
                      }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/major/page7_cart_05.png"  />
                  <div class="txt">
                    <div class="name">
                      {{
                        isEn ? '新能源汽车' : '新能源汽车'
                      }}
                    </div>
                  </div>
                </li>
              </ul> -->
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page7_031.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page7_031.png'"
                style="margin-top: 48px" />
              <img :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/major/page7_041.png' : 'https://webapp-pub.ezijing.com/www/pc/services/major/page7_041.png'" />
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import tab from '../../components/services/tab'
export default {
  components: { tab },
  data() {
    const _this = this
    return {
      tabList: [
        {
          name: this.isEn ? '新文科' : '新文科',
          disabled: true
        },
        {
          name: this.isEn ? '数字金融' : '数字金融'
        },
        {
          name: this.isEn ? '数字营销' : '数字营销'
        },
        {
          name: this.isEn ? '商业数据分析' : '商业数据分析'
        },
        {
          name: this.isEn ? '数字媒体艺术' : '数字媒体艺术'
        },
        {
          name: this.isEn ? '智能运营' : '智能运营'
        },
        {
          name: this.isEn ? '新工科' : '新工科'
        },
        {
          name: this.isEn ? '智能制造' : '智能制造'
        }
      ],
      showModule: 1,
      isEn: false,
      swiperOption: {
        // observer: true,
        observeParents: true,
        speed: 400,
        autoplay: true,
        delay: 3000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 20,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      module6TabActive: 0,
      module6TabHoverIndex: -1,
      module6TabList: [
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1.png',
          active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1_on.png',
          text: '人工智能方向'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2.png',
          active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2_on.png',
          text: '数据技术方向'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3.png',
          active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3_on.png',
          text: '云计算方向'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4.png',
          active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4_on.png',
          text: '网络安全方向'
        }
      ]
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
  },
  methods: {
    tabChangeIndex(n) {
      if (n === 0) return
      this.showModule = n
    }
  },
  computed: {
    m1SetStyle() {
      return url => {
        return `background: url(${url});background-size: 100% 100%`
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.occupation-content {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 100px;
  .mian {
    display: flex;
    justify-content: space-between;
  }
  .mian-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 100%;
    color: #aa1941;
    padding: 48px 0 31px;
  }
  .module-sub-title {
    margin-top: 20px;
    span {
      display: inline-block;
      font-size: 20px;
      line-height: 36px;
      color: #424242;
      border-bottom: 1px solid #aa1941;
    }
  }
  .occupation-content-mian {
    width: 1000px;
    .module-content-box {
      background: #fff;
      .banner {
        width: 100%;
        height: 320px;
        display: block;
      }
      .content-mian {
        padding: 60px 50px 15px;
        img {
          width: 100%;
          display: block;
          margin-bottom: 48px;
        }
        .module-title {
          font-size: 22px;
          font-weight: 500;
          line-height: 34px;
          color: #424242;
          margin-bottom: 20px;
        }
        .swiper-content {
          // padding: 0 25px;
          margin-top: 37px;
          position: relative;
          // overflow: auto;
          // width: 100%;
          .swiper-slide {
            position: relative;
            width: 176px;
            height: 224px;
            // margin-top: 10px;
            p {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              text-align: center;
              background: rgba(51, 51, 51, 0.65);
              box-sizing: border-box;
              padding-top: 70px;
              font-size: 20px;
              color: #fefefe;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              img {
                width: 50px;
                height: 41px;
                display: inline-block;
                margin-bottom: 16px;
              }
              span {
                display: block;
                line-height: 40px;
                font-size: 16px;
              }
            }
            img {
              width: 100%;
            }
          }
          .swiper-slide-active {
            width: 176px;
            height: 224px;
            margin-top: 0;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .swiper-btn {
            width: 20px;
            height: 35px;
            position: absolute;
            left: -5px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            display: none;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .swiper-button-next {
            left: unset;
            right: -5px;
          }
        }
        .cart-txt {
          display: flex;
          justify-content: space-between;
          margin: 36px 0 40px;
          div {
            width: 31%;
            // border-top:8px solid #F9F8F8;
            background: #f9f8f8;
            text-align: center;
            min-height: 220px;
            box-sizing: border-box;
            padding: 20px 0;
            h5 {
              line-height: 60px;
              font-size: 18px;
              color: #aa1941;
            }
            p {
              line-height: 34px;
              color: #424242;
            }
            p.bold {
              font-weight: bold;
            }
          }
          div:hover {
            // border-color:#fff;
            background: #fff;
            box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
          }
        }
        .cart-img {
          display: flex;
          flex-wrap: wrap;
          li {
            margin-right: 5px;
            margin-bottom: 5px;
            width: 295px;
            height: 170px;
            position: relative;
            overflow: hidden;
            &:hover {
              img {
                transform: scale(1.06);
              }
            }
            img {
              transition: all 0.3s;
              width: 100%;
              height: 100%;
              display: block;
            }
            .txt {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background: rgba(0, 0, 0, 0.3);
              .name {
                position: absolute;
                bottom: 20px;
                left: 20px;
                font-size: 16px;
                font-weight: 300;
                // line-height: 170px;
                color: #ffffff;
              }
            }
          }
        }
        .cart-img.col-4 {
          li {
            width: 220px;
            height: 170px;
          }
        }
      }
    }
    .module-6 {
      .content-mian {
        .tabs {
          display: flex;
          .item {
            width: 130px;
            height: 130px;
            background: #f4f4f4;
            text-align: center;
            box-sizing: border-box;
            padding-top: 30px;
            border-top: 6px solid #f4f4f4;
            border-radius: 4px;
            margin-right: 20px;
            transition: 0.3s;
            cursor: pointer;
            img {
              width: 42px;
              height: 42px;
              display: inline-block;
              margin-bottom: 16px;
            }
          }
          .item.active,
          .item.isHover {
            border-color: #aa1941;
            background: #aa1941;
            color: #fff;
            box-shadow: 5px 5px 5px #999;
          }
          .item.isHover {
            transform: translateY(-10px);
          }
        }
        .img-text {
          position: relative;
          margin-top: 15px;
          div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(51, 51, 51, 0.6);
            color: #fff;
            display: flex;
            box-sizing: border-box;
            padding-top: 100px;
            h5 {
              width: 300px;
              text-align: center;
              font-size: 20px;
            }
            p {
              line-height: 28px;
            }
          }
        }
      }
    }
    .module-7 {
      .content-mian {
        .cart-img1 {
          margin-top: 20px;
          li {
            width: 300px;
            height: 300px;
            margin-right: 0;
            margin-bottom: 0;
          }
          li:first-child {
            width: 600px;
          }
        }
      }
    }
  }
}
</style>
