veterans_client_web/src/views/SkillTraining/SkillPackage/SkillPackageIndex.vue

<!--
 * @Description: 技能培训 => 技能包
 * @Author: 空白格
 * @Date: 2022-08-26 10:41:50
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-29 14:44:17
 * @FilePath: \veterans_client_web\src\views\SkillTraining\SkillPackage\SkillPackageIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div>
    <div class="topBox">
      <div class="_center">
        <div class="package">
          <div class="tit-img">
            <img :src="skillDetail.img" alt />
          </div>
          <div class="right-top">
            <div class="title-right">
              <!-- <span class="tags">检验</span> -->
              <span class="tag-title">{{ skillDetail.name }}</span>
            </div>
            <div class="introduce">
              <!-- <p>无人机教学班 2021.09.23</p> -->
              <p>培训学校：{{ schoolName }}</p>
              <p>培训导师：{{ skillDetail.teacherName }}</p>
              <p>培训周期：{{ skillDetail.cycle }}个月</p>
              <p>
                <span>报名人数：{{ skillDetail.applyCount }}</span>
                <span style="margin-left: 10px"
                  >开班人数：{{ skillDetail.classCount }}</span
                >
              </p>
              <p>
                <span style="margin-right: 6px">难度</span>
                <el-rate v-model="skillDetail.difficult" disabled></el-rate>
              </p>
            </div>
            <div class="tag-btn">
              <span class="tag-state">{{ skillDetail.statusStr }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="selected-box">
      <div class="_center">
        <div class="selected-center">
          <div class="selected-title">
            <h3>精选课程</h3>
            <span @click="more">更多></span>
          </div>
          <div class="swpier-box">
            <swiper :options="swiperOption">
              <swiper-slide
                v-for="(img, index) in skillDetail.courseList"
                :key="index"
              >
                <div class="news-box" @click="skillClick(img)">
                  <img :src="img.img" alt />
                  <div class="video"></div>
                  <p class="title">{{ img.name }}</p>
                  <!-- <p class="state">线上课程</p> -->
                </div>
              </swiper-slide>
            </swiper>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="skill-box">
      <div class="_center">
        <div class="skill-center">
          <h2>技能详解</h2>
          <div class="ql-editor" v-html="skillDetail.description"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSkillDetail } from "@/api/SkillTraining/index";
export default {
  name: "SkillPackageIndex",
  data() {
    return {
      newsId: this.$route.query.id,
      schoolName: this.$route.query.schoolName,
      train: 3,
      itemList: [
        {
          img: require("@/assets/images/selected.png"),
        },
        {
          img: require("@/assets/images/selected.png"),
        },
        {
          img: require("@/assets/images/selected.png"),
        },
        {
          img: require("@/assets/images/selected.png"),
        },
      ],
      swiperOption: {
        slidesPerView: 4,
        // 设置前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 设置自动轮播
        autoplay: {
          delay: 2000, // 5秒切换一次
        },
        // 设置轮播可循环
        // loop: true
      },
      skillDetail: {},
    };
  },
  created() {
    this.getSkillDetail();
  },
  methods: {
    getSkillDetail() {
      getSkillDetail(this.newsId).then((res) => {
        this.skillDetail = res.data;
      });
    },
    more() {
      this.$router.push({
        path: "/skilltraining/selectedcourses",
        query: { id: this.newsId },
      });
    },
    /**
     * 点击课程
     * @date 2022-08-29
     * @param {any} item
     * @returns {any}
     */
    skillClick(item) {
      this.$router.push({
        path: "/skilltraining/coursevideo",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.news-box {
  width: 280px;
  height: 174px;
  // overflow: hidden;
  position: relative;
  display: inline-block;
  p {
    list-style: 30px;
  }
  .news-box {
    font-size: 20px;
    color: #2e2e2e;
  }
  .state {
    font-size: 14px;
    color: #818181;
  }
}
.news-box img {
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.news-box img::after {
  width: 70px;
  height: 70px;
  background-image: url("@/assets/images/shipin.png");
  background-size: 70px 70px;
  position: absolute;
  top: 25%;
  left: 35%;
}
.video {
  width: 70px;
  height: 70px;
  background-image: url("@/assets/images/shipin.png");
  background-size: 70px 70px;
  position: absolute;
  top: 25%;
  left: 35%;
}
.title {
  color: #2e2e2e;
  margin-top: 10px;
  font-size: 14px;
}

.topBox {
  background-color: #43565f;
  width: 100%;
  padding-bottom: 40px;
}
._center {
  width: 70%;
  min-width: 70%;
  margin: 0 auto;
}
.package {
  display: flex;
  padding-top: 35px;
  justify-content: left;
  .tit-img {
    width: 266px;
    height: 266px;
    border: 1px #ccc dashed;
    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
  .right-top {
    margin-left: 30px;
    color: #fff;
    .title-right {
      margin-bottom: 14px;
      .tags {
        width: 64px;
        height: 28px;
        font-size: 18px;
        background-image: linear-gradient(153deg, #f89e42 0%, #ff7833 97%);
        border-radius: 14px;
        display: inline-block;
        text-align: center;
        line-height: 28px;
      }
      .tag-title {
        font-size: 26px;
        margin-left: 10px;
      }
    }
    .introduce {
      display: flex;
      flex-direction: column;
      p {
        line-height: 30px;
        height: 30px;
        display: flex;
        justify-content: left;
        align-items: center;
      }
    }
    .tag-btn {
      padding: 10px 0;
      .tag-state {
        width: 320px;
        height: 36px;
        border: 2px solid #ffffff;
        border-radius: 39px;
        text-align: center;
        line-height: 36px;
        display: inline-block;
      }
    }
  }
}
.selected-box,
.skill-box {
  margin-top: 20px;
}
.skill-box {
  padding-bottom: 40px;
}
.selected-center,
.skill-center {
  background-color: #ffffff;
  padding: 20px;
}
.selected-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 40px;
  margin-bottom: 20px;
  h3 {
    color: #222222;
    font-size: 26px;
  }
  span {
    color: #a3a3a3;
    font-size: 14px;
    cursor: pointer;
  }
}
::v-deep .swiper-container {
  width: 91%;
}
.swpier-box {
  position: relative;
  .swiper-button-prev {
    width: 30px;
    height: 174px;
    top: 12%;
    background: #f3f3f3;
  }
  .swiper-button-next {
    width: 30px;
    height: 174px;
    top: 12%;
    background: #f3f3f3;
  }
  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 30px;
    color: #dedede;
  }
}
</style>