<!-- 引产入校 -->
<template>
  <div>
    <div class="banner">
      <img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/banner1.png" />
      <div class="cover">
        <div class="cover-inner">
          <div class="h1">
            <h1>150</h1>
            <div class="j">＋</div>
            <span>高校咨询参赛</span>
          </div>
          <h6>2023年全国大学生商业数据分析与应用大赛</h6>
          <div class="text-list">
            <div class="text-list_item">
              <div class="list_item_t">
                <div class="num">195</div>
                <div class="d">个</div>
              </div>
              <div class="list_item_b">学校报名</div>
            </div>
            <div class="text-list_item">
              <div class="list_item_t">
                <div class="num">52</div>
                <div class="d">名</div>
              </div>
              <div class="list_item_b">指导教师</div>
            </div>
            <div class="text-list_item">
              <div class="list_item_t">
                <div class="num">41</div>
                <div class="d">支</div>
              </div>
              <div class="list_item_b">参赛队伍</div>
            </div>
            <div class="text-list_item">
              <div class="list_item_t">
                <div class="num">16</div>
                <div class="d">个</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>
        <div class="sx-list">
          <div class="sx-list_item" v-for="item in nameList">
            <img :src="item.logo" class="logo" />
            <div class="bg-box">
              <img :src="item.bg" />
              <div class="text" v-html="item.text"></div>
            </div>
          </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.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/sx-bg.png" />
          <div class="intr-top_r">
            <p>面向泛管理类和财经商贸类专业</p>
            <p>商业数据分析和数字营销两大类行业赛事群。</p>
            <p>
              赛项设计遵循《2023年全国职业院校技能大赛制度汇编》的总体指导思想及原则。
              赛项平台贯穿模拟多个真实的商业级工作平台，利用大数据、人工智能技术，采用行业真实数据和案例集。竞赛内容设计适应数字经济国家战略对人才培养的需求，覆盖数字+金融、贸易、电商、服务、零售等数十个行业。通过大赛促进大数据应用融入管理类、财经商贸等专业大类，推进专业实践教学水平，加快专业教师大数据应用水平，培养学生大数据应用与数字营销技能。
            </p>
          </div>
        </div>
        <div class="intr-list">
          <div class="intr-l_item" v-for="item in schoolList">{{ item }}</div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="section-inner">
        <h2 class="section-title">选手风采</h2>
        <div class="xs-list">
          <div class="xs-items">
            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-1.png" />
            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-2.png" />
            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-3.png" />
          </div>
          <div class="xs-items">
            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-4.png" />
            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-5.png" />
            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-6.png" />
          </div>
        </div>
      </div>
    </section>

    <!-- <section class="section">
      <div class="section-inner">
        <h2 class="section-title">交付案例</h2>
        <ul class="al-list">
          <li v-for="item in jfalList" :key="item"><img :src="item" /></li>
        </ul>
      </div>
    </section> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      nameList: [
        {
          logo: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-logo.png',
          bg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-bg1.png',
          text: '第一届<br />全国大学生商业数据分析与应用大赛'
        },
        {
          logo: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-logo.png',
          bg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-bg2.png',
          text: '第二届<br />全国大学生商业数据分析与应用大赛'
        },
        {
          logo: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-logo.png',
          bg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-bg3.png',
          text: '第一届<br />全国大学生数字营销技能大赛'
        }
      ],
      schoolList: [
        '安阳师范学院',
        '北京财贸职业学院',
        '常州工业职业技术学院',
        '桂林理工大学南宁分校',
        '河南财经政法大学',
        '吉林工商学院',
        '吉林农业大学',
        '江西工商职业技术学院',
        '黎明职业大学',
        '南宁职业技术学院',
        '内蒙古警察职业学院',
        '清远职业技术学院',
        '沈阳工业大学',
        '石家庄邮电职业技术学院',
        '四川财经职业学院',
        '四川职业技术学院',
        '天津滨海汽车工程职业学院',
        '长春大学',
        '长春金融高等专科学校',
        '重庆工商大学派斯学院'
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  img {
    width: 100%;
  }
  .cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4039);
    line-height: 1;
    color: #ffffff;
    .h1 {
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      h1 {
        font-size: 56px;
        font-weight: bold;
        color: #ffffff;
        line-height: 100%;
      }

      span {
        font-size: 22px;
        margin-left: 10px;
      }
      .j {
        font-size: 40px;
        font-weight: bold;
      }
    }
    h6 {
      font-size: 28px;
      line-height: 100%;
    }
    .text-list {
      display: flex;
      margin-top: 88px;
      margin-left: -40px;
      .text-list_item {
        width: 198px;
        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: 56px;
            font-weight: bold;
            color: #ffffff;
            line-height: 100%;
          }
          .d {
            font-size: 20px;
            color: #ffffff;
            line-height: 35px;
            margin-left: 5px;
          }
        }
      }
      .list_item_b {
        font-size: 16px;
        color: #ffffff;
        margin-top: 8px;
      }
    }
  }
  .cover-inner {
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
.section:nth-child(odd) {
  background-color: #f9f8f8;
}
.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;
}

.sx-list {
  display: flex;
  justify-content: space-between;
  .sx-list_item {
    width: 370px;
    border: 1px solid #dbdbdb;
    padding: 19px 25px 25px;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
      .bg-box {
        img {
          transform: scale(1.1);
        }
      }
    }
    .logo {
      width: 145px;
      display: block;
    }
    .bg-box {
      margin-top: 18px;
      position: relative;
      overflow: hidden;
      img {
        width: 320px;
        display: block;
        transition: all 0.2s;
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: #ffffff;
        line-height: 30px;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.4039);
      }
    }
  }
}
.intr-top {
  display: flex;
  img {
    width: 576px;
    height: fit-content;
  }
  .intr-top_r {
    margin-left: 44px;
    p {
      font-size: 16px;
      color: #333333;
      line-height: 36px;
      margin-bottom: 20px;
      position: relative;
      text-align: justify;
      &::before {
        content: '';
        position: absolute;
        top: 15px;
        left: -15px;
        width: 6px;
        height: 6px;
        background: #aa1941;
        border-radius: 50%;
      }
    }
  }
}
.intr-list {
  display: flex;
  flex-wrap: wrap;
  padding-top: 30px;
  margin-right: -20px;
  .intr-l_item {
    background-color: #fff;
    width: 224px;
    background: #ffffff;
    border-radius: 5px 5px 5px 5px;
    font-size: 16px;
    color: #333333;
    line-height: 47px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.xs-list {
  .xs-items {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    img {
      width: 380px;
    }
  }
}
</style>
