<!-- 技能大赛 -->
<script setup>
import { ref } from 'vue'
const typeIndex = ref(0)
const dsTypes = ['国赛', '省赛', '行业赛']

const dsList = ref([
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/ds_news_1.png',
    title:
      '清控紫荆教育人工智能应用开发平台助力长春金融高等专科学校荣获2025年世界职业院校技能大赛新一代信息技术赛道高职组金奖',
    text: '本次比赛由教育部牵头、联合国家部委及行业组织主办，江苏省教育厅承办，常州市人民政府、武…',
  },
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/ds_news_2.png',
    title: '清控紫荆教育数智营销平台助力长春金融高等专科学校荣获2024年世界职业院校技能大赛智慧金融金奖（第一名）',
    text: '本次比赛由教育部牵头、联合国家部委及行业组织主办，江苏省教育厅承办，常州市人民政府、武…',
  },
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/ds_news_3.png',
    title: '2024年世界职业院校技能大赛总决赛争夺赛高职组财经商贸赛道智慧金融赛项',
    text: '2024年世界职业院校技能大赛总决赛争夺赛高职组财经商贸赛道智慧金融小组赛项在热烈的掌声中…',
  },
])

const schoolList = ref([
  '安阳师范学院',
  '北京财贸职业学院',
  '常州工业职业技术学院',
  '桂林理工大学南宁分校',
  '河南财经政法大学',
  '吉林工商学院',
  '吉林农业大学',
  '江西工商职业技术学院',
  '黎明职业大学',
  '南宁职业技术学院',
  '内蒙古警察职业学院',
  '清远职业技术学院',
  '沈阳工业大学',
  '石家庄邮电职业技术学院',
  '四川财经职业学院',
  '四川职业技术学院',
  '天津滨海汽车工程职业学院',
  '长春大学',
  '长春金融高等专科学校',
  '重庆工商大学派斯学院',
])

const xsList = ref([
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_1.png',
  },
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_2.png',
  },
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_3.png',
  },
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_4.png',
  },
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_5.png',
  },
  {
    img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_6.png',
  },
])
</script>

<template>
  <div class="ds-page">
    <div class="banner">
      <img src="https://webapp-pub.ezijing.com/www/pc/next/ds/ds_banner.png" />
      <div class="cover">
        <div class="cover-inner">
          <h1>以赛促学 以赛促教</h1>
          <div class="line"></div>
          <h6>支持服务：行业赛/省赛/国赛<span>50</span>场</h6>
          <div class="text-list">
            <div class="text-list_item">
              <div class="list_item_t">
                <div class="num">600</div>
              </div>
              <div class="list_item_b">个学校报名</div>
            </div>
            <div class="text-list_item">
              <div class="list_item_t">
                <div class="num">6000</div>
              </div>
              <div class="list_item_b">人次服务选手</div>
            </div>
            <div class="text-list_item">
              <div class="list_item_t">
                <div class="num">20</div>
              </div>
              <div class="list_item_b">个覆盖省市</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <section class="section">
      <div class="section-inner">
        <h2 class="section-title">赛事快讯</h2>
        <ul class="ds-type-list">
          <li
            v-for="(item, index) in dsTypes"
            :key="index"
            :class="{ active: typeIndex === index }"
            @click="typeIndex = index">
            {{ item }}
          </li>
        </ul>
        <div class="sx-list">
          <div class="sx-list_item" v-for="(item, index) in dsList" :key="index">
            <img :src="item.img" class="logo" />
            <div class="bg-box">
              <h5>{{ item.title }}</h5>
              <p>{{ item.text }}</p>
            </div>
            <a href="javascript:void(0)" class="btn">了解详情</a>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section-inner">
        <h2 class="section-title">最新赛项</h2>
        <div class="intr-top">
          <img src="https://webapp-pub.ezijing.com/www/pc/next/ds/ds_news.png" />
          <div class="intr-top_r">
            <h3>2025年“湖北工匠杯”技能大赛</h3>
            <p><strong>赛事时间：</strong>2025年9月12日</p>
            <p>
              <strong>赛事简介：</strong
              >赛事紧密对接国赛及世赛标准，深度融合国家数字经济发展战略与湖北省产业升级需求，全面覆盖数字技术核心岗位技能体系，既实现了“以赛促学、以赛促训、以赛促建”的良性循环，也为湖北省高技能人才队伍建设与数字经济高质量发展注入了强劲动力。
            </p>
            <p><strong>参赛规模：</strong>全国28个省、自治区、直辖市的251支队伍参赛</p>
          </div>
        </div>
        <ul class="intr-list">
          <li class="intr-l_item" v-for="(item, index) in schoolList" :key="index">{{ item }}</li>
        </ul>
      </div>
    </section>

    <section class="section">
      <div class="section-inner">
        <h2 class="section-title">选手风采</h2>
        <ul class="xs-list">
          <li v-for="(item, index) in xsList" :key="index"><img :src="item.img" /></li>
        </ul>
      </div>
    </section>
    <section>
      <div class="section-inner">
        <AppContact />
      </div>
    </section>
  </div>
</template>

<style lang="scss">
.ds-page {
  background-color: #fff;
  .banner {
    position: relative;
    margin-bottom: 90px;
    img {
      width: 100%;
      height: 650px;
      object-fit: cover;
    }
    .cover {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      line-height: 1;
      color: #ffffff;
      h1 {
        font-size: 60px;
        font-weight: bold;
        color: #ffffff;
        line-height: 1;
      }
      .line {
        margin: 40px 0 35px;
        width: 60px;
        height: 6px;
        background: #ffffff;
      }
      h6 {
        font-size: 24px;
        font-weight: normal;
        line-height: 1;
        span {
          font-size: 36px;
          font-weight: 500;
        }
      }
      .text-list {
        display: flex;
        margin-top: 48px;
        margin-left: -48px;
        .text-list_item {
          padding: 0 48px;
          text-align: center;
          border-right: 1px solid #fff;
          &:last-child {
            border: none;
          }
          .list_item_t {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            .num {
              font-size: 48px;
              font-weight: bold;
              color: #ffffff;
              line-height: 100%;
            }
          }
        }
        .list_item_b {
          font-size: 18px;
          color: #ffffff;
          margin-top: 15px;
        }
      }
    }
    .cover-inner {
      height: 100%;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }
  .section-inner {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 90px;
  }
  .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;
  }

  .sx-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    .sx-list_item {
      position: relative;
      border-radius: 12px;
      border: 1px solid #d5d5d5;
      padding-bottom: 60px;
      transition: all 0.3s;
      &:hover {
        box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
        transform: translateY(-10px);
      }
      .logo {
        width: 100%;
        display: block;
        height: 230px;
        object-fit: cover;
      }
      .bg-box {
        padding: 40px 25px;
        h5 {
          font-size: 20px;
          line-height: 30px;
        }
        p {
          margin-top: 15px;
          font-size: 16px;
          line-height: 22px;
          color: #d5d5d5;
        }
      }
      .btn {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: 40px;
        width: 270px;
        height: 42px;
        background-color: var(--main-color);
        border-radius: 33px;
        color: #fff;
        font-size: 18px;
        line-height: 42px;
        text-align: center;
        text-decoration: none;
        display: block;
        &:hover {
          background-color: #fff;
          color: var(--main-color);
          border: 1px solid var(--main-color);
        }
      }
    }
  }
  .intr-top {
    display: flex;
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    height: 360px;
    margin-bottom: 60px;
    img {
      width: 640px;
      height: fit-content;
    }
    .intr-top_r {
      padding: 40px;
      h3 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 30px;
      }
      p {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 20px;
        text-align: justify;
        color: #6c6c6c;
      }
    }
  }
  .intr-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 20px;
    .intr-l_item {
      background-color: #fff;
      font-size: 16px;
      line-height: 60px;
      text-align: center;
      border-radius: 12px;
      border: 1px solid #e2e2e2;
    }
  }
  .xs-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    img {
      width: 100%;
    }
  }
  .ds-type-list {
    display: flex;
    justify-content: center;
    gap: 100px;
    margin-bottom: 36px;

    li {
      font-size: 22px;
      cursor: pointer;
      &.active,
      :hover {
        color: var(--main-color);
        border-bottom: 5px solid var(--main-color);
      }
    }
  }
}
</style>
