<script setup>
const tabIndex = ref(0)
const tabList = [
  {
    name: '标准',
    title: '以国标要求开发教学资源',
    desc: '清控紫荆教育以国家教学资源开发标准为基础，提出了更高的企业课程开发标准，全面涵盖了课程大纲、课程导学、教学PPT、课程活动、课后训练等完整的教学流程。清控紫荆教育还提供了项目式教材、活页式教材等多种形式的教学资源开发标准，完整的覆盖了高校教学资源的方方面面。',
  },
  {
    name: '实践教学',
    title: '配套提供基于企业真实项目转化的行业案例集',
    desc: `清控紫荆教育与行业企业合作，将行业企业真实的项目，转化为教学案例，并进行案例资源的二次开发，适配到商业数据分析实训平台，为高校提供了完整的行业真实案例支撑。
商业数据分析实训平台目前配备10个案例，10篇案例原文、13个数据集、31份辅助资源、65份案例指导书、65套教学PPT、231个教学视频。下表显示为商业数据分析实训平台的行业案例集，以及每个案例配套的资源情况。`,
  },
]
</script>

<template>
  <div class="bi-page">
    <div class="banner">
      <div class="banner-inner">
        <h1>人工智能基础：数据分析实践通识课</h1>
        <span class="line"></span>
        <h2>“一体两翼”式设计AI+数据分析能力建设</h2>
        <p>
          创新“一体两翼”设计，基于企业真实使用的国产、工业级智能数据分析平台的“核心主体”，结合大模型赋能智能数据分析和工业级产品的教育适配化改造的“两翼”，辅以丰富完整的教学资源库，实现企业真实操作与教学场景的无缝衔接。
        </p>
      </div>
    </div>
    <section class="section" style="padding-bottom: 90px">
      <h2 class="section-title">数据分析能力通识课建设</h2>
      <div class="section-inner">
        <p class="jx-desc">
          为培养数字经济时代人人必备的数据分析基础技能，清控紫荆教育依托智能数据分析平台，契合地方产业数字化转型需求，通过“理论
          +
          企业真实案例实训”模式推进学校专业数字化改造，培育地方所需数字经济人才。理论课程覆盖商业数据分析核心知识，由行业专家授课，以“全流程数字化教学”
          支撑
          16个学时教学；实训课程含案例实训（课前预习、课中实操、课后考核）与企业生产性项目实操，遵循企业项目管理流程；紫荆教育提供全程服务，保障教学高质量落地。
        </p>
        <img src="https://webapp-pub.ezijing.com/www/pc/next/bi/bi_1.png" style="width: 100%" />
      </div>
    </section>
    <section class="section" style="background: #f0f2f5; padding-bottom: 90px">
      <h2 class="section-title">平台功能</h2>
      <div class="section-inner">
        <p class="jx-desc">
          创新“一体两翼”设计，基于企业真实使用的国产、工业级智能数据分析平台的“核心主体”，结合大模型赋能智能数据分析和工业级产品的教育适配化改造的“两翼”，辅以丰富完整的教学资源库，实现企业真实操作与教学场景的无缝衔接。
        </p>
        <img src="https://webapp-pub.ezijing.com/www/pc/next/bi/bi_2.png" style="width: 100%" />
      </div>
    </section>

    <section class="section jxzy">
      <h2 class="section-title">教学资源</h2>
      <div class="section-inner">
        <div class="tab">
          <ul class="tab-header">
            <li
              v-for="(item, index) in tabList"
              :key="item.name"
              :class="{ 'is-active': tabIndex === index }"
              @mouseenter="tabIndex = index">
              {{ item.name }}
            </li>
          </ul>
          <div class="tab-body">
            <div class="tab-content">
              <h3>{{ tabList[tabIndex].title }}</h3>
              <p>{{ tabList[tabIndex].desc }}</p>
            </div>
          </div>
          <div class="box">
            <template v-if="tabIndex === 0">
              <dl>
                <dt>标准化课程研发</dt>
                <dd><img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_1-1.png" /></dd>
              </dl>
              <dl>
                <dt>对标国家级一流课程的课程资源</dt>
                <dd>
                  <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_1-2.png" /><img
                    src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_1-3.png" />
                </dd>
              </dl>
              <dl>
                <dt>标准化的建设模板</dt>
                <dd><img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_1-4.png" /></dd>
              </dl>
            </template>
            <template v-if="tabIndex === 1">
              <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_2.png" />
            </template>
          </div>
        </div>
      </div>
    </section>
    <section class="section" style="padding-bottom: 90px">
      <h2 class="section-title">“岗课赛证”全面融通</h2>
      <div class="section-inner">
        <img src="https://webapp-pub.ezijing.com/www/pc/next/bi/bi_3.png" style="width: 100%" />
      </div>
    </section>
  </div>
</template>

<style lang="scss">
.bi-page {
  background-color: #fff;
  .section {
    &-title {
      padding: 60px 0;
      font-weight: bold;
      font-size: 30px;
      color: #333;
      line-height: 1;
      text-align: center;
    }
    &-subtitle {
      display: inline-block;
      margin: 0 0 36px 0;
      font-size: 20px;
      line-height: 32px;
      color: #424242;
      border-bottom: 1px solid var(--main-color);
    }
    &-inner {
      max-width: 1200px;
      margin: 0 auto;
    }
  }
  .banner {
    height: 650px;
    background: url('https://webapp-pub.ezijing.com/www/pc/next/bi/bi_banner.jpg') no-repeat center center;
    background-size: cover;
    &-inner {
      max-width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #fff;
      h1 {
        font-size: 60px;
        font-weight: bold;
        line-height: 1;
      }
      h2 {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
        line-height: 42px;
      }
      .line {
        margin: 46px 0;
        width: 60px;
        height: 6px;
        background: #fff;
      }
      p {
        max-width: 860px;
        font-size: 18px;
      }
    }
  }

  .jx-desc {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 60px;
  }

  .jxzy {
    position: relative;
    height: 600px;
    background: var(--main-color) url('https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_bg.png') no-repeat center
      right;
    .section-title {
      color: #fff;
    }
    .box {
      padding: 20px;
      margin-left: -70px;
      position: absolute;
      left: 50%;
      top: 180px;
      right: 0;
      height: 300px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 12px 0px 0px 12px;
      display: flex;
      gap: 18px;
      dt {
        margin-bottom: 10px;
        text-align: center;
        line-height: 24px;
        background: var(--main-color);
        border-radius: 22px;
      }
      dd {
        display: flex;
        gap: 18px;
      }
    }
  }
  .bz-desc {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 24px;
  }

  .tab {
    width: 480px;
    color: #fff;
    &-header {
      display: flex;
      gap: 50px;
      border-bottom: 1px solid #ffffff;
      padding: 0 10px;
      li {
        position: relative;
        font-weight: 400;
        font-size: 22px;
        line-height: 1;
        padding-bottom: 10px;
        &.is-active {
          font-size: 22px;
          font-weight: bold;
          &::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 30px;
            height: 5px;
            background-color: #ffffff;
            left: 50%;
            transform: translate(-50%, 0);
            border-radius: 5px;
          }
        }
      }
    }
    &-content {
      h3 {
        padding: 45px 0 30px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
        line-height: 1;
      }
      p {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 30px;
        white-space: pre-wrap;
      }
    }
  }
}
</style>
