<script setup>
const ysList = [
  {
    name: `从AI工具应用者
成为问题的解决者`,
    desc: '我们不只教您工具，更注重培养AI应用思维的系统性，通过真实的企业业务场景行业案例，让您在AI用用中掌握PSP系统解决问题的流程，包括问题界定、根本原因分析以及寻找潜在解决方案等六步骤流程，真正做到灵活运用AI工具。',
    icon: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_icon_1.png',
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_bg_1.png?v=1',
  },
  {
    name: `内置海量行业
真实数据集和案例集`,
    desc: '平台内置海量高质量真实行业数据集，配套教学课程及10个行业真实案例，实现教学与行业的无缝对接。',
    icon: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_icon_2.png',
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_bg_2.png?v=1',
  },
  {
    name: `工业级人工智能应用
实践教学平台`,
    desc: '以 “无缝对接真实工作场景” 为核心：依托教育适配改造，平台剔除工业场景中冗余的复杂操作，保留核心实战模块，让学生能以更简便的方式上手实操，在贴近产业实际的环境中完成实战训练，实现从校园学习到职场应用的顺畅过渡。',
    icon: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_icon_3.png',
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_bg_3.png?v=1',
  },
  {
    name: `从零基础到
AI应用专家`,
    desc: '平台构建了“三阶段”、“六篇章”循序渐进的学习路径，无论您是AI小白还是资深从业者，每一步都将是能力的飞跃。',
    icon: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_icon_4.png',
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_bg_4.png?v=1',
  },
  {
    name: `平台具备多种特色功能
且部署灵活`,
    desc: '平台一站式融合了40余种AI应用工具，助您掌握40余个效率起飞神器，实现高质量、高效产出。平台支持公有云、私有云、混合云等多种灵活部署方式，完美适配高校自身AI算力现状。',
    icon: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_icon_5.png',
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/ai/ys_bg_5.png?v=1',
  },
]

const jxList = [
  {
    name: '第一阶段：入门',
    subTitle: '基础起步阶段',
    items: [
      {
        num: '01',
        name: '准备篇',
        desc: '帮助学员理解学习AI应用技能的必要性，掌握常见应用场景，并建立正确的学习心态。',
      },
      {
        num: '02',
        name: '基础对话篇',
        desc: '手把手教会AI时代的人机对话“关键钥匙”，掌握提示词的重要性，学习基础提示语结构、CO-STAR和RTGO等黄金对话技巧。',
      },
    ],
  },
  {
    name: '第二阶段：熟练',
    subTitle: '掌握40余个AI工具集',
    items: [
      {
        num: '03',
        name: '效率飞跃篇',
        desc: '深入掌握40余个效率起飞神器，通过微博文章生成、文生图、文生视频、数字人视频、PPT制作等真实案例，实现高质量高效产出。',
      },
      {
        num: '04',
        name: '场景实战篇',
        desc: '直达企业典型业务场景，通过场景化实操，灵活运用AI工具，掌握问题分析、问题界定和解决问题的方法。',
      },
    ],
  },
  {
    name: '第三阶段：精通',
    subTitle: 'AI专业生产力提升',
    items: [
      {
        num: '05',
        name: '综合案例实战篇',
        desc: '真实参与不同行业的项目案例，基于真实项目夯实AI工具应用能力和解决问题的综合能力，支持多岗位、多角色协同工作。',
      },
      {
        num: '06',
        name: '专业生产力提升篇',
        desc: '覆盖6大类18个常见企业岗位，将AI赋能融入岗位能力，帮助学生快速进入角色、上手AI应用。',
      },
    ],
  },
]

const bzList = [
  {
    name: '产品服务',
    desc: `产品安装服务
产品配置调试服务
产品免费升级服务
……`,
  },
  {
    name: '资源服务',
    desc: `配套课程资源
课程资源免费更新服务
行业案例免费升级服务
……`,
  },
  {
    name: '产品技术支持',
    desc: `产品功能与性能巡检
产品使用分析与建议
产品在线技术支持
产品电话技术支持
……`,
  },
  {
    name: '培训服务',
    desc: `产品使用培训
产品维护培训
……
`,
  },
]

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="ai-page">
    <div class="banner">
      <div class="banner-inner">
        <h1>人工智能应用实践通识课</h1>
        <span class="line"></span>
        <h2>“三阶段-六篇章”的AI应用通识能力渐进式学习路线</h2>
        <p>
          课程从零基础到AI应用专家，通过”三阶段”、”六篇章”构建循序渐进的学习路径，系统讲解40余个核心AI工具与方法，并独创“方法论引领+场景化实战”教学模式，通过贯穿全程的企业真实业务场景，引导学生在实践中掌握知识、熟练工具，最终培养其运用AI技术分析与解决企业实际问题的综合应用能力。
        </p>
      </div>
    </div>
    <section class="section">
      <h2 class="section-title">产品核心优势</h2>
      <div class="section-inner">
        <div class="ys-list">
          <div class="ys-list-item" v-for="item in ysList" :key="item.name">
            <img :src="item.bg" :alt="item.name" class="bg" />
            <div class="content">
              <img :src="item.icon" :alt="item.name" />
              <h3>{{ item.name }}</h3>
              <p>{{ item.desc }}</p>
            </div>
          </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/ai/feature.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">
          为打破传统AI教育中理论与实践脱节、知识更新滞后的困境，平台创新性地构建“授人以渔+场景化训练”教学模式，依托“三阶段六篇章”渐进式教学路径，将10个覆盖多领域的行业案例与学校专业课程深度融合，搭配全程贯穿的场景化实战训练，全方位提升学习者的学习效果与AI应用能力。平台将教学过程科学划分为入门、熟练、精通三个阶段，每个阶段分别包含两个核心篇章：“三阶段-六篇章”渐进式学习路线
        </p>
        <div class="jx-list">
          <div class="jx-list-item" v-for="item in jxList" :key="item.name">
            <h2>{{ item.name }}</h2>
            <h3>{{ item.subTitle }}</h3>
            <dl v-for="item in item.items" :key="item.name">
              <dt>{{ item.num }}</dt>
              <dd>
                <h4>{{ item.name }}</h4>
                <p>{{ item.desc }}</p>
              </dd>
            </dl>
          </div>
        </div>
      </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">
      <h2 class="section-title">服务保障介绍</h2>
      <div class="section-inner">
        <p class="bz-desc">
          “五步走”实施路径与服务保障：从课程设计到师资培训、理论教学、实践教学再到项目实战，我们与高校紧密配合，提供标准服务（产品安装、技术支持、资源更新等）和增值服务（顶层设计、师资培训、行业讲座、科研服务、教学服务），构建教育数字化转型闭环。
        </p>
        <div class="bz-list">
          <div class="bz-list-item" v-for="item in bzList" :key="item.name">
            <h3>{{ item.name }}</h3>
            <p>{{ item.desc }}</p>
          </div>
        </div>
        <p class="bz-desc">
          产品自研，技术实力雄厚：清控紫荆教育坚持产品自研，技术实力十分雄厚。公司拥有一支30余人的技术研发团队，经过近10年持续自主研发沉淀，技术愈发精湛。团队成员由30余位来自哈佛、哥伦比亚、清华、北大等国际一流大学的人才组成，是国际化的专业团队，且40%以上员工具有研究生及研究生以上学历，高学历人才占比高，为技术研发提供了坚实的人才支撑。此外，公司还持有多项由中华人民共和国国家版权局颁发的计算机软件著作权登记证书，彰显出强大的自主创新与技术成果转化能力。
        </p>
        <div class="bz-pics">
          <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/fwbz_1.png" width="278" />
          <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/fwbz_2.png" width="962" />
        </div>
      </div>
    </section>
  </div>
</template>

<style lang="scss">
.ai-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/ai/ai_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;
      }
    }
  }
  .ys-list {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    .ys-list-item {
      position: relative;
      height: 340px;
      gap: 13px;
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s;
      box-shadow: 0px 0px 22px 1px rgba(0, 0, 0, 0.12);
      &:hover {
        transform: translateY(-10px);
        .content {
          top: 0;
          background-color: #fff;
          p {
            display: block;
          }
        }
      }
      .bg {
        width: 100%;
        height: 100%;
      }
      .content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 165px;
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        img {
          width: 53px;
        }
        h3 {
          padding: 20px 0 20px;
          font-size: 18px;
          white-space: pre-wrap;
          text-align: center;
        }
        p {
          display: none;
          font-size: 14px;
          line-height: 20px;
          color: #666;
        }
      }
    }
  }
  .jx-desc {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
  }
  .jx-list {
    margin-top: 60px;
    display: flex;
    gap: 35px;
    &-item {
      padding: 0 25px;
      height: 480px;
      background: linear-gradient(180deg, #e5cfd5 0%, #ffffff 40%);
      border-radius: 12px;
      h2 {
        padding: 50px 0 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 22px;
        text-align: center;
      }
      h3 {
        padding-bottom: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        text-align: center;
      }
      dl {
        height: 130px;
        padding: 14px 14px 0 10px;
        margin: 20px 0;
        display: flex;
        border: 1px solid #e2e2e2;
        border-radius: 12px;
        gap: 10px;
      }
      dt {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 30px;
        color: #e3a7b8;
        line-height: 24px;
      }
      dd {
        h4 {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 16px;
          line-height: 1;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
          line-height: 22px;
        }
      }
    }
  }
  .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;
  }
  .bz-list {
    padding: 80px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    &-item {
      padding: 30px 40px;
      height: 200px;
      background: url('https://webapp-pub.ezijing.com/www/pc/next/ai/fwbz_bg.png') no-repeat;
      background-size: 100% 100%;
      &:hover {
        background: url('https://webapp-pub.ezijing.com/www/pc/next/ai/fwbz_hover.png') no-repeat;
        background-size: 100% 100%;
        h3 {
          color: var(--main-color);
        }
      }
      h3 {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 22px;
        margin-bottom: 22px;
      }
      p {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        white-space: pre-wrap;
      }
    }
  }
  .bz-pics {
    padding: 60px 0 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .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;
      }
    }
  }
}
</style>
