<!-- 专业共建 -->
<template>
  <div>
    <div class="banner"><img src="https://webapp-pub.ezijing.com/www/pc/services/professional/banner.jpg" /></div>
    <section class="section section-1">
      <div class="section-inner">
        <h2 class="section-title">专业共建</h2>
        <p class="section-desc">
          依托紫荆教育技术与产业资源优势，协助院校应对行业变革、政策要求和办学新挑战，为院校提供产业化、国际化、数字化专业提升建设支持，优化人才培养方案，提升师资力量，共同开发精品课程资源，促进教学发展，整体提升专业建设水平，助力院校打造专业特色和优势
        </p>
      </div>
    </section>
    <section class="section section-2">
      <div class="section-inner">
        <h2 class="section-title">培养创新数字人才 助推产业建设升级</h2>
        <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/1.png" />
      </div>
    </section>
    <section class="section section-3">
      <div class="section-inner">
        <h2 class="section-title">1+3+N 数字+全行业专业共建模式</h2>
        <p class="section-desc">
          以商业数据分析为底层技术，以数字营销、数字运营、数字会计为核心基础专业，同时，基于数字经济典型应用场景，以数字化改造和专业升级为关键，围绕数字金融、数字贸易、数字农业、数字能源等核心行业应用方向，进行“数字＋全行业”的专业建设
        </p>
        <!-- <el-tab-pane> -->
        <!-- <template #label>
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_1.png" class="icon" />
              <img
                src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_1_hover.png"
                class="active-icon"
              />
              <p>核心类专业</p>
            </template> -->
        <div class="topic">
          <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_bg.jpg" class="topic-bg" />
          <div class="topic-cover">
            <h4>核心类专业</h4>
            <p>
              在现在这个信息爆炸的时代，每分每秒都在产生大量的数据，数据分析师能够在海量的数据中使企业清晰的了解到目前的现状与竞争环境，并且充分利用数据带来的价值，为企业进行风险评判与决策支持。通过数据分析和展现，呈献给企业决策者的将是一份清晰、准确且有数据支撑的有价值的报告。商业数据分析已成为数字化企业提升竞争力必不可少的岗位。
            </p>
          </div>
        </div>
        <div class="tab-section">
          <h3 class="tab-section-title"><span>商业数据分析</span></h3>
          <p class="tab-section-desc">
            培养学生具备扎实的商业经济与运行管理知识的同时，基于大数据分析平台，通过数理统计等数学思维的培养，掌握数据收集、数据处理、数据分析、数据可视化、预测建模等数据分析核心知识和方法。
          </p>
          <div class="tab-section-img">
            <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_1.png" />
          </div>
        </div>
        <!-- </el-tab-pane> -->
        <el-tabs class="my-tabs">
          <el-tab-pane>
            <template #label>
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_2.png" class="icon" />
              <img
                src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_2_hover.png"
                class="active-icon"
              />
              <p>基础类专业</p>
            </template>
            <div class="topic">
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_2_bg.jpg" class="topic-bg" />
              <div class="topic-cover">
                <h4>基础类专业</h4>
                <p>
                  数字化直接完成了业务的在线化，使许多工作都可以交由机器自动完成，从而在最大幅度上降低失误、提升效率。数字化推动了企业运营模式的颠覆式变革。基于网络，企业可以直接与客户建立连接，建立真正以客户为中心的运营模式。基于数字化的运营模式涉及营销、运营管理以及财务三个基础方向。
                </p>
              </div>
            </div>
            <!-- <el-tabs class="my-tabs2">
              <el-tab-pane>
                <template #label>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_1.png" class="icon" />
                  <img
                    src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_1_hover.png"
                    class="active-icon"
                  />
                  <p>数字营销</p>
                </template>
                <div class="tab-section-img" style="margin:0;">
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_1_1.png" />
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <template #label>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_2.png" class="icon" />
                  <img
                    src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_2_hover.png"
                    class="active-icon"
                  />
                  <p>数字运营</p>
                </template>
                <div class="tab-section-img">
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_2_1.png" />
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <template #label>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_3.png" class="icon" />
                  <img
                    src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_3_hover.png"
                    class="active-icon"
                  />
                  <p>数字会计</p>
                </template>
                <div class="topic">
                  <img
                    src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_3_1.png"
                    class="topic-bg"
                  />
                  <div class="topic-cover">
                    <p><strong>强基础+精营用+复合型</strong></p>
                    <p>
                      本专业方向面对财务共享服务中心、大数据服务机构、大中小企业、行政事业等单位的数据处理和数据分析岗位、财务机器人应用岗位、会计核算岗位、财务管理岗位、管理会计、产品数字化运营和数字化营销、税务风险控制及商业数据分析等相关岗位，培养理想信念坚定，德、智、体、美、劳等全面发展，具有一定的科学文化水平，良好的人文素养、职业道德和创新意识；熟悉典型的数据分析工具和技巧，具备一定的财务数据分析能力，会计软件操作和维护能力，精核算、通税法、擅理财、长分析的高素质技术层数字化会计人才。
                    </p>
                    <p><strong>适应“大智移云物区”时代的信息技术挑战</strong></p>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs> -->
            <div class="tab-section">
              <h3 class="tab-section-title"><span>数字营销</span></h3>

              <div class="tab-section-img">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_1_1.png" />
              </div>
            </div>
            <div class="tab-section">
              <h3 class="tab-section-title"><span>数字运营</span></h3>

              <div class="tab-section-img">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_2_1.png" />
              </div>
            </div>
            <div class="tab-section">
              <h3 class="tab-section-title"><span>数字会计</span></h3>

              <div class="topic">
                <img
                  src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_3_1.png"
                  class="topic-bg"
                />
                <div class="topic-cover">
                  <div class="cover_tit">强基础+精营用+复合型</div>
                  <p>
                    本专业方向面对财务共享服务中心、大数据服务机构、大中小企业、行政事业等单位的数据处理和数据分析岗位、财务机器人应用岗位、会计核算岗位、财务管理岗位、管理会计、产品数字化运营和数字化营销、税务风险控制及商业数据分析等相关岗位，培养理想信念坚定，德、智、体、美、劳等全面发展，具有一定的科学文化水平，良好的人文素养、职业道德和创新意识；熟悉典型的数据分析工具和技巧，具备一定的财务数据分析能力，会计软件操作和维护能力，精核算、通税法、擅理财、长分析的高素质技术层数字化会计人才。
                  </p>
                  <h4 class="cover_tips">适应“大智移云物区”时代的信息技术挑战</h4>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_3.png" class="icon" />
              <img
                src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_3_hover.png"
                class="active-icon"
              />
              <p>应用类专业</p>
            </template>
            <!-- <div class="tab-section row">
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_1.png" />
              </div>
              <div class="tab-section-content">
                <p class="tab-section-desc">
                  数字化推动了企业商业模式的创新与重塑。越来越多传统产业从线下走向线上，数字化转型基于新一代数字科技，以连接为基础，以数据为关键要素，以价值释放为目标，以数据赋能为主线，为企业带来的是全方位的焕然一新。目前已有越来越多的数据化场景应用到各行各业。数字化场景的应用为企业注入新的活力。
                </p>
              </div>
            </div> -->
            <div class="topic">
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_1.png" class="topic-bg" />
              <div class="topic-cover1">
                <img
                  src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/services/professional/img3_1_1.png"
                  alt=""
                />
                <p>
                  数字化直接完成了业务的在线化，使许多工作都可以交由机器自动完成，从而在最大幅度上降低失误、提升效率。数字化推动了企业运营模式的颠覆式变革。基于网络，企业可以直接与客户建立连接，建立真正以客户为中心的运营模式。基于数字化的运营模式涉及营销、运营管理以及财务三个基础方向。
                </p>
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-content">
                <h3 class="tab-section-title"><span>数字金融</span></h3>
                <p class="tab-section-strong">复合+国际+创新</p>
                <p class="tab-section-desc">
                  聚焦金融科技人才复合型、创新型与国际化，通过学科交叉设置，打造全新课程体系，学生通过学习金融数字化，掌握量化金融、金融风险管理、大数据、机器学习、深度学习等领域技术核心原理方法及应用，深刻理解金融科技应用场景，具备数字化和智能化项目解决架构和实施管理能力，培养企业数字化转型、金融科技应用的中坚力量和具备国际竞争的金融科技应用创新型人才。
                </p>
                <p class="tab-section-strong">加快数字金融人才培养，打造人才培养“新样板”</p>
              </div>
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_2.png" />
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_3.png" />
              </div>
              <div class="tab-section-content">
                <h3 class="tab-section-title"><span>数字农业</span></h3>
                <p class="tab-section-strong">数字经济赋能农业</p>
                <p class="tab-section-desc">
                  培养掌握经济和管理领域的基本理论和知识，适应经济、社会发展和农林业数字化建设需要，掌握相关的农林业科学基础知识，了解学科前沿，具备生态可持续发展、农业物联网和人工智能数字化理念，掌握社会经济调查、企业经济管理、技术经济分析和经济核算等方法和技能，具有生态文明意识、“三农”情怀和创新创业精神的“知三农、擅营销、强经营、精管理”的高级应用型农林经济数字化管理人才。
                </p>
                <p class="tab-section-strong">
                  专业交叉融合，“农业物联网+农业大数据+农业信息化”思维塑造打造应用型农业数字化管理人才新范式
                </p>
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-content">
                <h3 class="tab-section-title"><span>数字贸易</span></h3>
                <p class="tab-section-strong">发展型+复合型+创新型</p>
                <p class="tab-section-desc">
                  本专业培养理想信念坚定，德、智、体、美、劳全面发展，具有良好的人文素养、职业道德和创新意识，精益求精的工匠精神，较强的就业能力和可持续发展的能力；掌握本专业基本知识和基本技能，面向批发业、零售业及互联网和相关服务等行业的销售人员、上午咨询服务人员、市场营销专业人员、国际商务专业人员等职业群，能够从事电商运营、产品销售、跨境电商运营、策划创意、外贸业务、商业分析、互联网产品设计等工作，适应产业转型升级和企业技术创新需要的发展型、复合型、创新型的高素质技术技能人才。
                </p>
                <p class="tab-section-strong">加快数字贸易人才培养，促进企业数字化营销转型</p>
              </div>
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_4.png" />
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_5.png" />
              </div>
              <div class="tab-section-content">
                <h3 class="tab-section-title"><span>数字能源</span></h3>
                <p class="tab-section-strong">发展型+复合型+创新型</p>
                <p class="tab-section-desc">
                  本专业培养理想信念坚定，德、智、体、美、劳全面发展，具有一定的科学文化水平。良好的人文素养、职业道德和创新意识，精益求精的工匠精神，较强的就业能力和可持续发展的能力，掌握本专业知识和技术技能，面向新能源、机械设备、建筑建材、家具家电、采掘冶炼、环保、人力资源、咨询、骑车零配件等等行业，能够从事工程设计、管理、管网、运营等工作的高素质技术技能人才。
                </p>
                <p class="tab-section-strong">加快数字能源人才培养，刺进企业数字化转型</p>
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-content">
                <h3 class="tab-section-title"><span>数字康养</span></h3>
                <p class="tab-section-strong">发展型+复合型+创新型</p>
                <p class="tab-section-desc">
                  本专业培养理想信念坚定，德、智、体、美、劳全面发展，具有一定的科学文化水平，良好的人文素养、职业道德和创新意识，精益求精的工匠精神，较强的就业能力和可持续发展的能力，以及适应当前数字经济的数据分析能力和数字运营能力，掌握本专业知识、技术技能，面向卫生和社会工作等行业的健康管理师、其他健康服务人员、社会工作者等职业群，能够从事身心康复保健服务、能力评估、机构技术主管等工作的高素质技术技能人才。
                </p>
                <p class="tab-section-strong">加快数字康养人才培养，促进企业数字化转型</p>
              </div>
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_6.png" />
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_7.png" />
              </div>
              <div class="tab-section-content">
                <h3 class="tab-section-title"><span>数字供应链</span></h3>
                <p class="tab-section-strong">发展型+复合型+创新型</p>
                <p class="tab-section-desc">
                  本专业培养德智体美劳全面发展，掌握扎实的科学文化基础和市场调研与需求分析、采购与库存管理、生产计划与控制、物流与供应链运营等知识，具备市场预测、数据分析、计划编制、风险控制和应急管理等能力，具有工匠精神和信息素养，能够从事市场调研与客户管理、采购与供应商管理、供应链生产与控制、供应链物流管理、供应链计划与运营等工作的高素质技术技能人才。
                </p>
                <p class="tab-section-strong">加快数字供应链人才培养，促进企业数字化转型</p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.banner {
  img {
    width: 100%;
  }
}
.section:nth-child(odd) {
  background-color: #fff;
}
.section:nth-child(even) {
  background-color: #f9f8f8;
}

.section-inner {
  width: 1200px;
  margin: 0 auto;
}
.section-title {
  margin-bottom: 36px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 32px;
  color: #333333;
  text-align: center;
}
.section-desc {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 34px;
  color: #666666;
  text-align: center;
}
.section-1 {
  padding: 90px 0 108px;
}
.section-2 {
  padding: 120px 0;
  text-align: center;
  .section-title {
    margin-bottom: 122px;
  }
  img {
    max-width: 100%;
  }
}
.section-3 {
  padding: 90px 0;
  .my-tabs {
    margin-top: 92px;
  }
}
::v-deep .my-tabs {
  .el-tabs__active-bar,
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-tabs__item {
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: center;
    // width: 220px;
    // height: 220px;
    width: 380px;
    height: 82px;
    margin: 0 30px;
    padding: 0;
    .active-icon {
      display: none;
    }
    &.is-active,
    &:hover {
      background-color: var(--main-color);
      color: #fff;
      .icon {
        display: none;
      }
      .active-icon {
        display: block;
      }
    }
    img {
      height: 55px;
    }
    p {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 1;
      margin-left: 21px;
    }
  }
}
::v-deep .my-tabs2 {
  .el-tabs__active-bar,
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-tabs__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 286px;
    height: 84px;
    margin: 0 10px;
    padding: 0;
    background-color: #fff;
    color: #777;
    border-radius: 6px;
    .active-icon {
      display: none;
    }
    &.is-active,
    &:hover {
      background-color: var(--main-color);
      color: #fff;
      .icon {
        display: none;
      }
      .active-icon {
        display: block;
      }
    }
    img {
      margin-bottom: 12px;
      height: 24px;
    }
    p {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 1;
    }
  }

  .tab-section-img {
    margin: 40px 0;
  }
  .topic {
    margin: 40px 0;
  }
  .topic-cover {
    padding: 0 100px;
    align-items: flex-start;
    background: rgba(249, 248, 248, 0.1);
    p {
      margin: 20px 0;
    }
  }
}
.topic {
  position: relative;
  margin: 90px 0;
}
.topic-bg {
  width: 100%;
  height: auto;
}
.topic-cover {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 270px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  h4 {
    margin-bottom: 30px;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 34px;
    color: #ffffff;
  }
  p {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 30px;
    color: #ffffff;
  }
}
.topic-cover1 {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 92px 0 143px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #fff;
  img {
    margin-right: 73px;
  }

  p {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 30px;
    color: #ffffff;
  }
}
.tab-section {
  &.row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    margin-top: 30px;
  }
  .topic-cover {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 64px 82px 0 98px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: #fff;
    box-sizing: border-box;
    .cover_tit {
      font-size: 18px;
      font-weight: 500;
      line-height: 26px;
      color: #ffffff;
    }
    p {
      font-size: 14px;
      font-weight: 300;
      line-height: 26px;
      color: #ffffff;
      margin-top: 24px;
    }
    .cover_tips {
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      margin-top: 20px;
    }
  }
}
.tab-section-title {
  position: relative;
  margin-bottom: 40px;
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 42px;
  color: #424242;
  span {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--main-color);
  }
}
.tab-section-desc {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 32px;
  color: #666666;
}
.tab-section-strong {
  margin: 28px 0 10px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 42px;
  color: #424242;
}
.tab-section-img {
  text-align: center;
  img {
    max-width: 100%;
  }
}
</style>
