<script setup>
const mbList = [
  {
    name: '专业领跑',
    desc: '合作年限内完成4-6个骨干专业的数字化、智能化、产业化升级，建设人工智能通识课程体系，用1-3年打造国家级高水平专业群，实现基础能力+专业能力与区域主导产业、新兴产业精准对接。',
  },
  {
    name: '师资精锐',
    desc: '构建“双师双能型”师资培养体系，使合作院校“双师型”教师占比进一步提升，符合《职业教育“双师型”教师基本标准》要求，共同培育一批省级、国家级教学名师。',
  },
  {
    name: '实践硬核',
    desc: '合作共建国家级产教融合实训基地，显著提升实践教学课时占比，实现“岗课赛证”一体化培养，匹配“新双高”实践教学规范。',
  },
  {
    name: '就业优质',
    desc: '合作专业毕业生就业质量明显提升，通过就业辅导体系，成为区域产业技术技能人才供给核心基地。',
  },
  {
    name: '辐射带动',
    desc: '形成可复制、可推广的“双高”建设模式，通过资源共享、师资交流等形式，带动区域内院校协同发展，提升职业教育整体质量。',
  },
]
const tabIndex = ref(0)
const faList = [
  {
    title: '高水平专业群建设',
    subTitle: '对接产业的专业体系革新',
    items: [
      {
        title: '专业群精准布局',
        desc: '聚焦数字经济、人工智能、现代服务三大核心领域，打造特色专业群',
        items: [
          {
            title: '新商科专业群',
            desc: '商务数据分析与应用、直播电商、数智营销等；',
          },
          {
            title: '数字技术专业群',
            desc: '人工智能应用、开源技术应用、智能体技术应用等；',
          },
          {
            title: '现代服务专业群',
            desc: '低空物流技术与运营、低空文旅运营、无人机应用等；',
          },
        ],
      },
      {
        title: '动态课程与教材体系',
        desc: '依托600+企业调研形成的岗位能力模型，与合作院校共同开发模块化课程体系，覆盖专业核心技能与行业前沿技术；联合编写“岗课赛证”一体化数字教材，配套紫荆数智学堂与e-SaaS一体化教学平台，实现“理论学习-仿真实训-实战应用-技能考证”全闭环。',
      },
    ],
  },
  {
    title: '高水平师资队伍建设',
    subTitle: '“AI+产业”双轮驱动培养',
    items: [
      {
        title: '分层分类培养体系',
        items: [
          {
            title: '基础层',
            desc: '开展AI通识应用、数字教学技能等专项培训，覆盖AIGC内容生成、AI数据分析、智能教学工具使用等，考核合格颁发工信部、人社部等权威证书；',
          },
          {
            title: '进阶层',
            desc: '选派教师到合作企业挂职锻炼，深度参与真实项目研发与运营，积累实践教学案例；引领层培育教学创新团队，支持教师参与国家级、省级教学成果奖申报、职业技能大赛指导等。',
          },
        ],
      },
      {
        title: '智能教学能力赋能',
        desc: '引入搭载DeepSeek、Qwen大模型的工业级教学平台，从数字化教材、数字化教学、数字化管理和数字化资源全面赋能、助力教师实现全流程数字化教学，打造“AI+职业教育”教学新生态，提升课堂教学效率与质量。',
      },
    ],
  },
  {
    title: '高水平实训基地建设',
    subTitle: '全场景实践教学覆盖',
    items: [
      {
        title: '分级实训平台搭建',
        items: [
          {
            title: '基础实训平台',
            desc: '包括人工智能基础数据分析综合实践平台、数字技能基础实训中心（配备专业实训软件与硬件设备）',
          },
          {
            title: '进阶实训平台',
            desc: '涵盖人工智能应用实践平台、AIGC数智营销实践平台（还原企业真实工作场景）',
          },
          {
            title: '产业级实训基地',
            desc: '与区域龙头企业共建，提供“工学交替、顶岗实习”岗位，实现“实训即工作、毕业即就业”',
          },
        ],
      },
      {
        title: '实训管理与评价',
        desc: '通过SaaS平台实现实训过程全记录、全追溯，结合企业导师评价、技能证书考核、岗位实操表现，为学生生成“技术技能能力画像”，对接人社部、工信部职业技能等级标准与企业岗位要求。',
      },
    ],
  },
  {
    title: '资源联动与社会服务',
    subTitle: '拓展“双高”建设价值',
    items: [
      {
        title: '国际资源对接',
        desc: '链接美国斯蒂文斯理工学院、雪城大学、帕克大学等海外高校及职业教育机构资源，引入国际先进职业教育课程模块、研学项目，提升学生国际竞争力。',
      },
      {
        title: '社会服务能力提升',
        desc: '依托专业群与实训基地，为区域企业提供员工技能培训、技术研发与转化服务；开展退役军人、农民工等群体的职业技能培训，助力乡村振兴与产业升级，彰显职业教育社会价值。',
      },
    ],
  },
  {
    title: '“岗课赛证”一体化融合',
    subTitle: '深化人才培养改革',
    items: [
      {
        title: '课程与岗位对接',
        desc: '将企业岗位核心要求融入课程标准，按“岗位任务-技能模块-课程内容”逻辑重构课程体系；',
      },
      {
        title: '课程与赛事融合',
        desc: '把职业技能大赛赛项内容、评判标准纳入教学过程，组建大赛指导团队，提升学生参赛能力与实战技能；',
      },
      {
        title: '课程与证书衔接',
        desc: '将职业技能等级证书考核内容融入课程，支持学生“以证代考、以赛促证”，毕业时实现“学历证书+1-2个职业技能证书”双证在手。',
      },
    ],
  },
]

const bzList = [
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_1.png',
    name: '政策与申报支持',
    desc: '协助院校对接“双高计划”建设相关政策，解读申报要求，提供国家级、省级产教融合项目、教学成果奖等申报材料筹备、方案优化服务，助力院校成功立项与验收。',
  },
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_2.png',
    name: '资源保障体系',
    desc: `师资团队：配备50+行业专家与清华背景教研人员组成的专属服务团队，提供全程指导；
技术支撑：7×24小时响应实训平台运维、教学系统升级需求，保障教学与实训顺利开展；
就业与产业资源：联动1000+合作企业，提供实习就业岗位、技术合作项目等资源支持。`,
  },
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_3.png',
    name: '政策与申报支持',
    desc: `每季度与合作院校共同编写《“新双高”项目建设进展报告》，每年开展全面成效评估，从专业建设质量、师资能力提升、学生就业质量、社会服务成效等维度动态优化建设方案，确保符合“双高计划”考核要求与院校发展需求。`,
  },
]
</script>

<template>
  <div class="page">
    <div class="banner">
      <div class="banner-inner">
        <h1>新双高建设整体解决方案</h1>
        <span class="line"></span>
        <h2>提供深度融合数字技术与教育创新的“新双高”建设全周期解决方案</h2>
        <p>
          “新双高建设项目”是指第二轮“双高计划”建设项目，即中国特色高水平高等职业学校和专业建设计划（2025—2029年）。它是对2019年启动的第一期“双高计划”的深化和拓展，以“办学能力高水平、产教融合高质量”为导向，要求新“双高”更加聚焦高职教育与国家重大战略、区域经济社会发展和新质生产力培育的紧密对接，更加强调院校对地方主导产业的作用和贡献。
        </p>
      </div>
    </div>
    <section class="section">
      <h2 class="section-title">政策导向下的“新双高”建设使命</h2>
      <div class="section-inner">
        <p class="section-desc">
          2026年1月全国教育大会提出持续优化高等教育结构布局，统筹高技能人才集群与双高建设计划。《国家职业教育改革实施方案》《职业教育专业目录（2024年）》等政策要求“双高计划”建设院校需聚焦产业需求、深化产教融合、打造技术技能人才培养高地。清控紫荆教育源自清华大学五道口金融学院在线教育中心，深耕数字人才培养十余年，已与全国200余所院校建立不同层次合作，累计培养数字化人才超万人，在专业改造升级、师资培养、实践落地等方面积累了成熟经验，具备助力高职院校推进“新双高”建设的资源储备与实施能力。
        </p>
      </div>
    </section>
    <section class="section" style="padding-bottom: 90px">
      <h2 class="section-title">核心目标</h2>
      <h3 class="section-subtitle">打造“数智经济产教融合型”双高建设标杆</h3>
      <div class="section-inner">
        <div class="mb-list">
          <div class="mb-list-item" v-for="(item, index) in mbList" :key="item.name">
            <div class="num">0{{ index + 1 }}</div>
            <div class="content">
              <h2>{{ item.name }}</h2>
              <p>{{ item.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section fa">
      <h2 class="section-title">全链条建设方案：五大维度赋能“新双高”落地</h2>
      <div class="section-inner">
        <div class="tab">
          <div class="tab-header">
            <ul>
              <li
                v-for="(item, index) in faList"
                :key="item.title"
                :class="{ 'is-active': index === tabIndex }"
                @mouseenter="tabIndex = index">
                <h2>{{ item.title }}</h2>
                <h3>{{ item.subTitle }}</h3>
              </li>
            </ul>
          </div>
          <div class="tab-body">
            <div v-for="item in faList[tabIndex].items">
              <h2>{{ item.title }}</h2>
              <p v-if="item.desc">{{ item.desc }}</p>
              <div class="tab-body-list" v-if="item.items">
                <dl v-for="item in item.items">
                  <dt>{{ item.title }}</dt>
                  <dd>{{ item.desc }}</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <h2 class="section-title">实施保障：全周期护航“新双高”建设</h2>
      <div class="section-inner">
        <div class="bz-list">
          <div class="bz-list-item" v-for="item in bzList" :key="item.name">
            <div class="bz-list-item_label"><img :src="item.icon" />{{ item.name }}</div>
            <div class="bz-list-item_content">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>
    <section class="section" style="padding: 90px 0">
      <div class="section-inner">
        <AppContact />
      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.page {
  background-color: #fff;
  .section {
    &-title {
      padding: 90px 0 60px;
      font-weight: bold;
      font-size: 30px;
      color: #333;
      line-height: 1;
      text-align: center;
    }
    &-subtitle {
      padding-bottom: 60px;
      font-size: 20px;
      line-height: 32px;
      color: #424242;
      text-align: center;
    }
    &-inner {
      max-width: 1200px;
      margin: 0 auto;
    }
    &-desc {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      line-height: 30px;
      span {
        color: var(--main-color);
      }
    }
  }
  .banner {
    height: 650px;
    background: url('https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/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: #333;
      h1 {
        font-size: 60px;
        font-weight: bold;
        line-height: 1;
      }
      h2 {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 24px;
        color: var(--main-color);
        line-height: 42px;
      }
      .line {
        margin: 46px 0;
        width: 60px;
        height: 6px;
        background: #333;
      }
      p {
        margin-top: 30px;
        max-width: 736px;
        font-size: 18px;
      }
    }
  }
  .mb-list {
    display: flex;
    gap: 13px;
    &-item {
      position: relative;
      flex: 1;
      padding: 20px;
      height: 240px;
      background: #efecea;
      border-radius: 12px 12px 12px 12px;
      transition: all 0.3s;
      &:hover {
        .content {
          top: 0;
          background: url(https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/mb_bg.png) no-repeat;
          background-size: 100% 100%;
          overflow-y: auto;
        }
        .content p {
          display: block;
          overflow: visible;
          text-overflow: initial;
          line-clamp: initial;
          -webkit-line-clamp: initial;
          -webkit-box-orient: initial;
        }
      }
      .num {
        width: 54px;
        height: 54px;
        background: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 54px;
        font-size: 24px;
        font-weight: bold;
      }
      .content {
        position: absolute;
        transition: all 0.3s;
        top: 98px;
        padding: 20px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        h2 {
          font-weight: bold;
          font-size: 18px;
          color: #333333;
          line-height: 1;
        }
        p {
          margin-top: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          line-clamp: 2;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .fa {
    height: 760px;
    background: url(https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/fa_bg.png) no-repeat;
  }
  .tab {
    height: 480px;
    background: linear-gradient(90deg, #ffffff 0%, #ececfa 100%);
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
    border-radius: 12px 12px 12px 12px;
    display: flex;
    overflow: hidden;
    &-header {
      flex: 0 0 300px;
      background: #edf2fa;
      ul {
        padding: 50px 30px 0;
      }
      li {
        padding: 14px 20px;
        border-radius: 12px;
        h2 {
          font-weight: 500;
          font-size: 18px;
        }
        h3 {
          font-weight: 400;
          font-size: 14px;
        }
        &.is-active {
          color: #fff;
          background-color: var(--main-color);
        }
      }
    }
    &-body {
      flex: 1;
      padding: 50px 160px 0 50px;
      h2 {
        font-weight: 500;
        font-size: 22px;
      }
      p {
        margin: 20px 0 50px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
      }
      &-list {
        display: flex;
        gap: 40px;
        margin: 30px 0;
        dl {
          flex: 1;
        }
        dt {
          background-color: var(--main-color);
          line-height: 34px;
          color: #fff;
          text-align: center;
          height: 34px;
          border-radius: 32px 32px 32px 32px;
        }
        dd {
          height: calc(100% - 36px);
          margin-top: 10px;
          padding: 16px 20px;
          background: #ffffff;
          border-radius: 6px 6px 6px 6px;
          font-size: 16px;
        }
      }
    }
  }
  .bz-list {
    &-item {
      margin-bottom: 20px;
      position: relative;
      &_label {
        position: absolute;
        top: 30px;
        width: 260px;
        height: 80px;
        background: var(--main-color);
        font-weight: bold;
        font-size: 20px;
        color: #ffffff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        padding: 0 30px;
        gap: 18px;
        img {
          width: 32px;
        }
      }
      &_content {
        margin-left: 130px;
        height: 140px;
        padding: 0 90px 0 180px;
        background: #dee2ea;
        border-radius: 12px;
        white-space: pre-wrap;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
