<script setup>
const ysList = [
  {
    name: `专业升级`,
    desc: '1-3完成3-5个传统专业的数字化改造，打造对接数智经济背景下新商科、新工科等领域的一流专业建设，实现课程内容与产业需求的动态适配。',
    icon: 1,
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/mb_1.png',
  },
  {
    name: `师资提质`,
    desc: '通过“AI+实践”培养体系，使合作院校“双师型”教师占比提升至60%以上，符合《职业教育“双师型”教师基本标准》与《教师生成式人工智能应用指引》要求。',
    icon: 2,
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/mb_2.png',
  },
  {
    name: `实践落地`,
    desc: '共建国家级标准实践中心，确保实习实践课时占比不低于总课时的50%，匹配应用型本科专业建设规范。',
    icon: 3,
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/mb_3.png',
  },
  {
    name: `就业增效`,
    desc: '实现合作专业毕业生就业率提升15%，优质就业（对口产业岗位）占比超80%，服务区域产业人才需求。',
    icon: 4,
    bg: 'https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/mb_4.png',
  },
]
const tabIndex = ref(0)
const faList = [
  {
    title: '专业群共建',
    subTitle: '对接产业需求的课程体系革新',
    items: [
      {
        title: '特色专业方向布局',
        desc: '聚焦三大领域打造专业群',
        items: [
          {
            title: '新文科',
            desc: '数字金融、商务数据分析与应用、AIGC数智营销等；',
          },
          {
            title: '新工科',
            desc: '人工智能应用、智能体技术应用等；',
          },
          {
            title: '交叉融合',
            desc: '低空物流技术与运营、低空文旅等；',
          },
        ],
      },
      {
        title: '动态课程与教材体系',
        desc: `清控紫荆依托600+企业调研形成的岗位能力模型，与合作院校共同开设人工智能通识课程，实现全专业覆盖；
清控紫荆与合作院校共同打造数字教材，配套紫荆数智学堂与e-SaaS一体化教学平台，实现“理论学习-虚拟仿真-实战应用”闭环。`,
      },
    ],
  },
  {
    title: '双师队伍建设',
    subTitle: '“AI赋能+实践淬炼”培养计划',
    items: [
      {
        title: '分层分类培训体系',
        items: [
          {
            title: '基础层',
            desc: '开展师资培训，覆盖AIGC内容生成、AI数据分析等技能，考核合格颁发师资颁发工信部、人社部等证书；',
          },
          {
            title: '进阶层',
            desc: '选派教师参与企业挂职锻炼，对接真实项目，积累实践教学案例。',
          },
        ],
      },
      {
        title: '智能教学能力提升',
        desc: '引入搭载DeepSeek大模型的AI教学工具，赋能教师实现“秒级案例生成、全链路数据智算”，打造“AI赋能专业”新生态。',
      },
    ],
  },
  {
    title: '实践体系搭建',
    subTitle: '从虚拟仿真到产业实景全场景覆盖',
    items: [
      {
        title: '分级实践中心建设',
        items: [
          {
            title: '人工智能基础实践平台',
            desc: '数据分析综合实践教学平台（配备数据清洗、可视化工具）；',
          },
          {
            title: '进阶实验室',
            desc: '人工智能应用平台、AI大模型实践系统（智能体开发与应用项目开发）；',
          },
          {
            title: '数智经济实践基地',
            desc: '与区域龙头企业共建产教融合实践基地，提供“工学交替”岗位实践。',
          },
        ],
      },
      {
        title: '实践管理与评价',
        desc: '通过SaaS平台实现实训过程全记录，结合企业导师评价、技能证书考核形成“能力画像”，对接人社部相关职业技能等级标准。',
      },
    ],
  },
  {
    title: '国际与产业资源联动',
    subTitle: '拓宽发展维度',
    items: [
      {
        title: '国际教育合作',
        desc: '链接美国斯蒂文斯理工学院、雪城大学、石溪大学等海外高校资源，提供“国内本科+国际硕士”衔接通道，引入国际课程模块与研学项目。',
      },
    ],
  },
]

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>
        <p>
          清控紫荆教育响应国家政策，为应用型本科院校提供全链条转型方案，涵盖专业共建、双师培育、实践搭建与资源联动，助力专业升级、师资提质、就业优化，提供全周期保障，构建
          “政产学研用” 一体化生态。
        </p>
      </div>
    </div>
    <section class="section">
      <h2 class="section-title">政策引领下的应用型本科转型使命</h2>
      <div class="section-inner">
        <p class="section-desc">
          当前，《教育强国建设规划纲要（2024—2035年）》《高等教育学科专业设置调整优化行动方案（2025—2027年）》等政策明确要求应用型本科院校对接区域产业需求、深化产教融合、强化“双师双能型”师资建设。清控紫荆教育作为源自清华大学五道口金融学院在线教育中心，深耕数字人才培养十余年，已与全国200余所高校建立合作，累计输送数字人才超数万人，具有助力应用型本科院校实现政策落地的成熟经验与资源储备。
        </p>
      </div>
    </section>
    <section class="section" style="padding-bottom: 90px">
      <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">
            <div class="bg">
              <img :src="item.bg" :alt="item.name" />
            </div>
            <div class="content">
              <AppliedUndergraduateIcons :name="item.icon" />
              <h3>{{ item.name }}</h3>
              <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/applied-undergraduate/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: var(--main-color);
        line-height: 42px;
      }
      .line {
        margin: 46px 0;
        width: 60px;
        height: 6px;
        background: #fff;
      }
      p {
        max-width: 666px;
        font-size: 18px;
      }
    }
  }
  .ys-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    &-item {
      position: relative;
      height: 340px;
      gap: 13px;
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s;
      &:hover {
        box-shadow: 0px 0px 22px 1px rgba(0, 0, 0, 0.12);
        .content {
          top: 0;
          color: #333;
          background-color: #fff;
          p {
            display: block;
          }
          ::v-deep(svg) {
            color: var(--main-color);
          }
        }
      }

      .bg {
        position: relative;
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
        &::after {
          z-index: 1;
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }
      &:nth-child(1) {
        .bg::after {
          background: linear-gradient(180deg, #e3a7b8 0%, #aa1941 100%);
        }
      }
      &:nth-child(2) {
        .bg::after {
          background: linear-gradient(0deg, #802672 0%, rgba(240, 222, 239, 0.6) 100%);
        }
      }
      &:nth-child(3) {
        .bg::after {
          background: linear-gradient(180deg, #643288 0%, rgba(189, 178, 219, 0.6) 100%);
        }
      }
      &:nth-child(4) {
        .bg::after {
          background: linear-gradient(180deg, #4d3296 0%, rgba(202, 210, 237, 0.6) 100%);
        }
      }
      .content {
        position: absolute;
        z-index: 10;
        bottom: 0;
        left: 0;
        right: 0;
        top: 165px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        h3 {
          padding: 23px 0 30px;
          font-size: 18px;
          white-space: pre-wrap;
          text-align: center;
        }
        p {
          display: none;
          font-size: 14px;
          line-height: 20px;
          color: #666;
        }
      }
    }
  }
  .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>
