<!-- 数字教材 -->

<script setup>
import { ref } from 'vue'

const skList = ref([
  {
    h1: '优势一',
    h2: '多形态工具与AI大模型结合的<br />数字教材编辑器',
    p: '清控紫荆数智学堂的数字教材编辑器提供对于立体式、多元化教学资源的支持，绝大部分数字资源都支持加入数字化教材。在教材编写方面，教师只要会用Office就会编写数字化教材，同时平台还提供基于大模型、多模态的智能化辅助能力。',
  },
  {
    h1: '优势二',
    h2: '提供富媒体、交互式<br/>数字教材',
    p: '清控紫荆数智学堂打造了富媒体、交互式的一站式综合平台。全面提升了高校在数字化教材、数字化课件、数字化教案、数字化教学、数字化测评、数字化评价综合能力。同时实现了理论课程与实践教学的一站式融合。',
  },
  {
    h1: '优势三',
    h2: '高品质专业<br/>出版服务',
    p: '清控紫荆数智学堂提供从策划选题开始，涵盖内容创作、编辑校对、设计排版、数字技术实现，最终到质量控制的完整的一站式数字化教材出版流程，辅以清华大学出版社等各类型A、B类出版社共计20余家，为高校提供优质的出版服务和数字化资源定制开发服务。',
  },
  {
    h1: '优势四',
    h2: '全流程数字化教学<br/>及管理',
    p: '清控紫荆数智学堂通过数字化手段结合AI技术，实现从教学前的一键式教案生成，到教学过程的全面大数据管理，到教学之后的智能总结与推送，结合多维度教学测评和360教学评价，为高校提供了一站式、全流程的数字化教学及管理能力。',
  },
  {
    h1: '优势五',
    h2: '基于大数据、多模态的<br/>AI辅助教学',
    p: '清控紫荆数智学堂提供AIGC生成式教案系统，快速辅助教师完成教案编写。通过AI为学生提供大模型、多模态学习辅助功能，实现7*24的贴身智能辅导。',
  },
])

const ptList = ref([
  {
    h1: '特色功能一：AI能力的全场景应用',
    h2: '清控紫荆数智学堂面向教师和学生提供了全场景的AI能力，实现了针对教材文本、图片、课件、案例、题库等多维度的教师支撑，以及针对学生在学习辅助场景的全面支撑。',
    img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c1.png',
  },
  {
    h1: '特色功能二：基于大数据的教学管理',
    h2: '清控紫荆数智学堂全面实现了数据化能力，学生从购买数字教材开始，到数字教材的学习，笔记、讨论、测评、查阅等一系列动作行为及结果数据均实现国家信息安全保障基础上的全面采集和分析，为高校的教学管理提供了强力支撑。',
    img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c2.png',
  },
  {
    h1: '特色功能三："学-测-评"一站式在线教学平台',
    h2: '清控紫荆数智学堂在全面AI辅助教学的基础上，实现了从知识点级别，到教学单元、教学主题等多维度综合测评。同时结合360度教学评价，全面实现对课程、教材、教师、教学、质量等多维度的评价，形成了学习、测试、评价的业务闭环。',
    img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c3.png',
  },
  {
    h1: '特色功能四：理论教学与实践教学的无缝衔接',
    h2: '清控紫荆数智学堂将理论教学与实践教学全面打通，形成了面向教材、课程、知识点级别的无缝衔接，让学生在理论学习过程中，无缝切换进行实践训练，并形成相应的学习过程和结果数据，支撑全面的教学评价。',
    img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c4.png',
  },
])
</script>

<template>
  <div class="sz-page">
    <div class="banner">
      <img src="https://webapp-pub.ezijing.com/www/pc/next/szjc/szjc_banner.png" />
      <div class="cover">
        <div class="cover-inner">
          <h2>数字教材一站式平台</h2>
          <h1><span>清控紫荆</span>数智学堂</h1>
          <div class="line"></div>
          <h6>全链路 · 一站式 · 大模型 · 多模态 · 富媒体</h6>
          <p>
            打通”学校端—出版端-教学端-学生端“的完整流程，提供多形态工具与AI大模型结合的数字教材编辑器，支持富媒体、交互式数字教材，满足全流程数字化教学及管理要求，基于大数据、多模态的AI辅助教学，配套高品质专业出版服务。实现教育资源的优化配置与高效利用，科技赋能教育，校企共筑教育新质生产力。
          </p>
        </div>
      </div>
    </div>
    <section class="section">
      <div class="section-inner">
        <h2 class="section-title">核心优势</h2>
        <p class="section-desc">
          紫荆教育基于教学活动整体设计并推出的数字教材一站式平台-清控紫荆数智学堂，不仅有技术平台，还有和数字教材、数字教案融合一体的数字化实验室平台，更可以实现数字化教材、数字化教案、数字化教学、数字化实训，“一个界面，一个平台”的一体化体系。具体来说，有如下三个核心优势：
        </p>
        <div class="ys-list">
          <div class="ys-item" v-for="(item, index) in skList" :key="index">
            <div class="ys-item_h1">{{ item.h1 }}</div>
            <div class="ys-item_h2" v-html="item.h2"></div>
            <div class="ys-item_p">
              {{ item.p }}
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section-inner">
        <h2 class="section-title">平台功能介绍</h2>
        <div class="pt-list">
          <div class="pt-item" v-for="(item, index) in ptList" :key="index">
            <div class="pt-item_top">
              <div class="pt-item__h1">{{ item.h1 }}</div>
              <div class="pt-item__p">
                {{ item.h2 }}
              </div>
            </div>
            <img :src="item.img" />
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section-inner">
        <h2 class="section-title">服务保障介绍</h2>
        <p class="section-desc" style="text-align: center">
          清控紫荆数智学堂确保安全与可控性，拥有完全自主知识产权，并具备企业资质与安全等保认证，为用户提供稳定可靠的服务保障。我们注重数据安全和隐私保护，采取先进的安全措施和技术手段，确保用户信息的安全与保密，为用户创造安全、高效、便捷的学习环境。
        </p>
        <div class="bz-box">
          <div class="bz-t">
            <div class="bz-h1">完全自主知识产权</div>
            <img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/c5.png" />
          </div>
          <div class="bz-b">
            <div class="bz-h1">企业资质与安全等保认证</div>
            <ul class="img-box">
              <li>
                <img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z1.jpg" />
              </li>
              <li>
                <img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z2.png" />
              </li>
              <li>
                <img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z3.jpg" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style lang="scss">
.sz-page {
  .banner {
    position: relative;
    img {
      width: 100%;
      height: 650px;
      object-fit: cover;
    }
    .cover {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      line-height: 1;
      h2 {
        font-size: 36px;
        font-family:
          Source Han Sans CN-Bold,
          Source Han Sans CN;
        font-weight: bold;
        line-height: 1;
      }
      h1 {
        margin-top: 20px;
        font-size: 60px;
        font-family:
          Source Han Sans CN-Bold,
          Source Han Sans CN;
        font-weight: bold;
        line-height: 1;
        span {
          color: var(--main-color);
        }
      }
      .line {
        margin: 46px 0;
        width: 60px;
        height: 6px;
        background: #333;
      }
      h6 {
        margin-bottom: 30px;
        font-size: 20px;
        font-family:
          Source Han Sans CN-Medium,
          Source Han Sans CN;
        font-weight: 500;
        line-height: 1;
      }
      p {
        max-width: 720px;
        font-size: 18px;
        font-family:
          Source Han Sans CN-Regular,
          Source Han Sans CN;
        line-height: 30px;
      }
    }
    .cover-inner {
      height: 100%;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }
  .section:nth-child(odd) {
    background: #f0f2f5;
  }
  .section:nth-child(even) {
    background-color: #fff;
  }
  .section-inner {
    width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
  }
  .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: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 34px;
    color: #666666;
  }
  .section-pic {
    text-align: center;
    img {
      max-width: 100%;
    }
  }
  .is-border {
    border: 1px solid #d5d5d5;
  }
  .gk-list {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .gk-item {
    min-height: 280px;
    text-align: center;
    background: #fff;
    transition: all 0.3s;
    &:hover {
      transform: scale(1.06);
      &.active {
        transform: scale(1);
        background-color: #aa1941;
        .p_icon {
          display: none;
        }
        .a_icon {
          display: block;
        }
        .a_color {
          h2,
          p,
          a {
            color: #fff;
          }
        }
      }
    }
    .p_icon {
      display: block;
    }
    .a_icon {
      display: none;
    }
  }
  .gk-item__pic {
    padding: 46px 0 36px;
    // .p_icon{
    //   display: block;
    // }
    // .a_icon{
    //   display: none;
    // }
  }
  .gk-item__content {
    padding: 0 12px;
    h2 {
      font-size: 19px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      line-height: 24px;
      color: #333;
    }
    p {
      margin: 12px 0;
      font-size: 14px;
      color: #666;
    }
    a {
      color: var(--main-color);
    }
  }
  .ys-list {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    .ys-item {
      background: linear-gradient(180deg, #f9f8f8 0%, #f0f2f5 100%);
      width: 230px;
      height: 390px;
      box-sizing: border-box;
      border-bottom: 3px solid #aa1941;
      .ys-item_h1 {
        font-weight: bold;
        font-size: 22px;
        color: #aa1941;
        line-height: 100%;
        text-align: center;
        padding: 51px 0 20px;
      }
      .ys-item_h2 {
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: center;
        margin-bottom: 25px;
      }
      .ys-item_p {
        width: 206px;
        font-size: 14px;
        color: #666666;
        line-height: 24px;
        margin: 0 auto;
      }
    }
  }
  .pt-list {
    width: 1200px;
    margin: 0 auto;
    .pt-item {
      margin-bottom: 90px;
      .pt-item_top {
        background: #f9f8f8;
        border-radius: 12px 12px 12px 12px;
        .pt-item__h1 {
          height: 40px;
          background: #aa1941;
          border-radius: 12px 12px 12px 12px;
          padding: 0 36px;
          line-height: 40px;
          font-weight: bold;
          font-size: 18px;
          color: #ffffff;
        }
        .pt-item__p {
          font-size: 18px;
          color: #333333;
          line-height: 30px;
          padding: 15px 36px;
        }
      }
      img {
        width: 826px;
        display: block;
        margin: 37px auto 0;
      }
    }
  }
  .bz-box {
    .bz-h1 {
      font-weight: bold;
      font-size: 18px;
      color: #666666;
      line-height: 100%;
      margin-bottom: 30px;
    }
    .bz-t {
      margin-top: 60px;
    }
    .bz-b {
      margin-top: 60px;
      .img-box {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        li {
          flex: 1;
        }
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
