veterans_client_web/src/views/EducationPromote/ProfessionalIntroduction/ProfessionalIntroductionIndex.vue

<!--
 * @Description: 专业详情
 * @Author: 空白格
 * @Date: 2022-08-29 10:13:44
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-29 14:38:54
 * @FilePath: \veterans_client_web\src\views\EducationPromote\ProfessionalIntroduction\ProfessionalIntroductionIndex.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>
                <span style="margin-right: 6px">难度</span>
                <el-rate v-model="skillDetail.difficult" disabled></el-rate>
              </p>
              <p>学习时间：{{ skillDetail.cycle }}个月</p>
            </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" v-if="skillDetail.courseList && skillDetail.courseList.length > 0">
            <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 v-else class="swpier-box">
            <el-empty description="暂无课程"></el-empty>
          </div>
        </div>
      </div>
    </div>
    <div class="skill-box">
      <div class="_center">
        <div class="skill-center">
          <h2>技能详解</h2>
          <div v-html="skillDetail.description"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetailBySchool } from '@/api/EducationPromote/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() {
      getDetailBySchool(this.newsId).then((res) => {
        this.skillDetail = res.data;
      });
    },
    more() {
      this.$router.push({
        path: '/educationpromote/courses',
        query: {
          id: this.newsId
        }
      });
    },
    /**
     * 点击课程
     * @date 2022-08-29
     * @param {any} item
     * @returns {any}
     */
    skillClick(item) {
      this.$router.push({
        path: '/educationpromote/video',
        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>