<template>
  <div>
    <tabs :list="navList" @tabChange="tabChange"></tabs>
    <template v-if="showModule === 0">
      <div class="module-1">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img1.png" alt="" />
        <img class="img2" src="https://webapp-pub.ezijing.com/www/h5/images/major-img2.png" alt="" />
      </div>
    </template>
    <template v-if="showModule === 1">
      <div class="module-2">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img2-1.png" alt="" />
        <div class="img-content">
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img2-2.png" alt="" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img2-3.png" alt="" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img2-4.png" alt="" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img2-5.png" alt="" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img2-6.png" alt="" />
        </div>
      </div>
    </template>
    <template v-if="showModule === 2">
      <div class="module-3">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img3-1.png" alt="" />
        <div class="img-content">
          <img class="img" src="https://webapp-pub.ezijing.com/www/h5/images/major-img3-2.png" alt="" />
          <ul class="item-list">
            <li>
              <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img3-i1.png" alt="" />
              <div class="content">
                <div class="title">线上课程研发</div>
                <div class="p">课程内容设置</div>
                <div class="p">课程师资匹配</div>
                <div class="p">课程制作方案</div>
              </div>
            </li>
            <li>
              <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img3-i2.png" alt="" />
              <div class="content">
                <div class="title">课程制作</div>
                <div class="p-con">
                  <span>课程录制</span>
                  <span>课程剪辑</span>
                </div>
                <div class="p-con">
                  <span>课程编辑</span>
                  <span>课程成片</span>
                </div>
                <div class="dec">（课程录制，满足各种需求，不同形式拥有专属的场地）</div>
              </div>
            </li>
            <li>
              <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img3-i3.png" alt="" />
              <div class="content">
                <div class="title">线下课程开发</div>
                <div class="p-con">
                  <span>教学设计</span>
                  <span>教务计划</span>
                </div>
                <div class="p-con">
                  <span>实施执行方案</span>
                </div>
                <div class="dec">（全国三大教学基地，10多间不同需求的教室与会议室）</div>
              </div>
            </li>
          </ul>
          <img style="margin-top: 0.2rem" src="https://webapp-pub.ezijing.com/www/h5/images/major-img3-3.png" alt="" />
        </div>
      </div>
    </template>
    <template v-if="showModule === 3">
      <div class="module-4">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img4-1.png" alt="" />
        <div class="img-con">
          <img class="img2" src="https://webapp-pub.ezijing.com/www/h5/images/major-img4-2.png" alt="" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img4-3.png" alt="" />
        </div>
        <ul class="list">
          <li
            :class="index === m4Index && 'active'"
            v-for="(item, index) in module4List"
            :key="index"
            @click="m4ListChange(index)"
          >
            <div class="num">0{{ index + 1 }}</div>
            <div class="text">{{ item }}</div>
          </li>
        </ul>
        <div class="img-con">
          <img
            style="margin: 0.27rem 0 0.12rem"
            src="https://webapp-pub.ezijing.com/www/h5/images/major-img4-4.png"
            alt=""
          />
        </div>
        <swiper ref="mySwiper" :options="swiperOptions" class="my-swiper">
          <template v-for="(item, index) in m4Swiper">
            <swiper-slide :key="index">
              <img :src="item" class="banner-img" />
            </swiper-slide>
          </template>
        </swiper>
      </div>
    </template>
    <template v-if="showModule === 4">
      <div class="module-5">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img5-1.png" alt="" />
        <div class="title">整体模式</div>
        <div class="whit-con">
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img5-2.png" alt="" />
        </div>
        <img class="img3" src="https://webapp-pub.ezijing.com/www/h5/images/major-img5-3.png" alt="" />
      </div>
    </template>
    <template v-if="showModule === 5">
      <div class="module-6">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img6-1.png" alt="" />
        <div class="img-con">
          <img
            style="margin: 0.08rem 0 0.2rem"
            src="https://webapp-pub.ezijing.com/www/h5/images/major-img6-2.png"
            alt=""
          />
          <major-tab :data="m5Data" />
        </div>
        <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img6-3.png" alt="" />
        <div class="img-con">
          <img style="margin-top: 0.3rem" src="https://webapp-pub.ezijing.com/www/h5/images/major-img6-4.png" alt="" />
        </div>
        <div class="title">实施流程</div>
        <div class="icon__all">
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img6-a1.png" alt="" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img6-a2.png" alt="" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img6-a3.png" alt="" />
          <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img6-a4.png" alt="" />
        </div>
      </div>
    </template>
    <template v-if="showModule === 6">
      <div class="module-7">
        <img src="https://webapp-pub.ezijing.com/www/h5/images/major-img7-1.png" alt="" />
        <div class="project-con">
          <div class="title">项目目标</div>
          <ul>
            <li v-for="(item, index) in m7Data" :key="index">
              <div class="num">0{{ index + 1 }}</div>
              <div class="p" v-for="(cItem, cIndex) in item" :key="'c' + cIndex">{{ cItem }}</div>
            </li>
          </ul>
        </div>
        <img class="img2" src="https://webapp-pub.ezijing.com/www/h5/images/major-img7-2.png" alt="" />
        <img class="img3" src="https://webapp-pub.ezijing.com/www/h5/images/major-img7-3.png" alt="" />
      </div>
    </template>
  </div>
</template>
<script>
import majorTab from './components/majorTab'
import tabs from './components/tab'
export default {
  components: { tabs, majorTab },
  data() {
    return {
      swiperOptions: {
        autoplay: true,
        delay: 5000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 10
      },
      m4Index: 0,
      module4List: [
        '课程教学需要的教学实训实习基地',
        '专业教学需要的生产实训实习基地',
        '引产入校实训实习基地',
        '其他短期、分散的实训实习单位（点）'
      ],
      showModule: 0,
      navList: [
        '专业顶层设计',
        '师资培训',
        '课程资源建设',
        '实训基地建设',
        '实训平台建设',
        '引产入校',
        '专业+创新创业'
      ],
      m4Swiper: [
        'https://webapp-pub.ezijing.com/www/h5/images/major-img4-i1.png',
        'https://webapp-pub.ezijing.com/www/h5/images/major-img4-i2.png',
        'https://webapp-pub.ezijing.com/www/h5/images/major-img4-i3.png',
        'https://webapp-pub.ezijing.com/www/h5/images/major-img4-i4.png',
        'https://webapp-pub.ezijing.com/www/h5/images/major-img4-i5.png'
      ],
      m5Data: {
        tab: ['就业导向的理论学习', '项目驱动职业技能提升', '硬核就业竞争力'],
        content: [
          '通过集中式强化培训和练习，让学生掌握扎实的专业理论基础。',
          '让学生通过真实的企业项目实战，锻炼实践技能，提升技术应用转化能力。',
          '通过在真实企业环境工作，融入企业文化，培养学生的综合职业素养。'
        ]
      },
      m7Data: [
        ['学习创业基础', '激发创业意识和兴趣', '创新创业精神'],
        ['模拟创新创业实训和实践', '掌握基本创业技能', '培养创新创业思维'],
        ['实施执行方案', '项目孵化', '路演辅导', '模拟点评'],
        ['毕业实习', '引产入校', '创业运营', '产业资源对接']
      ]
    }
  },
  methods: {
    tabChange(index) {
      this.showModule = index
    },
    m4ListChange(index) {
      this.m4Index = index
    }
  }
}
</script>
<style lang="scss" scoped>
img {
  width: 100%;
  display: block;
}
.module-1 {
  .img2 {
    width: 3.43rem;
    display: block;
    margin: 0 auto;
  }
}
.module-2 {
  .img-content {
    width: 3.43rem;
    display: block;
    margin: 0 auto;
    img {
      margin-bottom: 0.1rem;
    }
  }
}
.module-3 {
  .img-content {
    padding: 0.2rem 0.16rem;
  }
  .item-list {
    overflow: scroll;
    display: flex;
    &::-webkit-scrollbar {
      display: none;
    }
    li {
      width: 1.97rem;
      margin-right: 0.1rem;
      img {
        width: 1.97rem;
        height: 2.03rem;
      }
      .content {
        width: 1.97rem;
        height: 1.35rem;
        background: #fff;
        .title {
          padding-top: 0.15rem;
          text-align: center;
          font-size: 0.14rem;
          line-height: 100%;
          color: #333333;
          margin-bottom: 0.12rem;
        }
        .p {
          font-size: 0.13rem;
          line-height: 100%;
          color: #666666;
          margin-bottom: 0.1rem;
          text-align: center;
        }
        .p-con {
          display: flex;
          width: 1.26rem;
          margin: 0 auto;
          padding-bottom: 0.1rem;
          justify-content: space-between;
          span {
            font-size: 0.13rem;
            line-height: 100%;
            color: #666666;
          }
        }
        .dec {
          font-size: 0.12rem;
          line-height: 100%;
          color: #666666;
          width: 1.7rem;
          margin: 0 auto;
        }
      }
    }
  }
}
.module-4 {
  .my-swiper {
    margin-bottom: 0.2rem;
    ::v-deep .swiper-wrapper {
      align-items: center;
    }
    .swiper-slide {
      position: relative;
      width: 2.1rem;
      height: 1.22rem;
    }
    .swiper-slide-active {
      width: 2.1rem;
      height: 1.34rem;
    }
  }
  .img-con {
    padding: 0 0.17rem;
  }
  .img2 {
    width: 2.3rem;
    margin: 0.3rem 0;
  }
  .list {
    width: 3.08rem;
    margin-left: 0.28rem;
    li {
      height: 0.55rem;
      background: #fbfbfb;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin-bottom: 0.1rem;
      &.active {
        background: #ffffff;
        box-shadow: 0px 0.05rem 0.12rem rgba(0, 0, 0, 0.06);
      }
      .num {
        width: 0.35rem;
        height: 0.35rem;
        background: #aa1941;
        text-align: center;
        line-height: 0.35rem;
        font-size: 0.17rem;
        color: #ffffff;
        margin-left: 0.1rem;
        margin-right: 0.13rem;
      }
      .text {
        font-size: 0.12rem;
        color: #424242;
      }
    }
  }
}
.module-5 {
  .title {
    font-size: 0.14rem;
    line-height: 100%;
    color: #424242;
    margin: 0.3rem 0 0.12rem 0.16rem;
  }
  .whit-con {
    padding: 0.14rem;
    background: #fff;
  }
  .img3 {
    width: 2.56rem;
    margin: 0.3rem 0 0.25rem 0.17rem;
  }
}
.module-6 {
  .img-con {
    padding: 0.17rem;
  }
  .title {
    padding: 0 0.17rem;
    margin: 0.3rem 0 0.2rem;
    font-size: 0.14rem;
    line-height: 100%;
    color: #424242;
  }
  .icon__all {
    display: flex;
    justify-content: center;
    padding-bottom: 0.2rem;
    img {
      width: 0.85rem;
    }
  }
}
.module-7 {
  .project-con {
    padding: 0 0.17rem;
    .title {
      margin: 0.08rem 0 0.16rem;
      font-size: 0.14rem;
      line-height: 100%;
      color: #424242;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 1.65rem;
        height: 1.37rem;
        box-sizing: border-box;
        padding: 0.17rem;
        background: #fbfbfb;
        margin: 0 0.1rem 0.1rem 0;
        &:nth-child(even) {
          margin-right: 0;
        }
        .num {
          font-size: 0.2rem;
          line-height: 100%;
          color: #aa1941;
          margin-bottom: 0.12rem;
        }
        .p {
          line-height: 100%;
          font-size: 0.11rem;
          line-height: 100%;
          color: #424242;
          margin-bottom: 0.08rem;
        }
      }
    }
  }
  .img2 {
    width: 2.82rem;
    margin: 0.13rem auto 0.25rem auto;
  }
  .img3 {
    width: 3.42rem;
    margin: 0 auto 0.3rem auto;
  }
}
</style>
