|
|
@@ -2,11 +2,312 @@
|
|
|
* @Description: 专业详情
|
|
|
* @Author: 空白格
|
|
|
* @Date: 2022-08-29 10:13:44
|
|
|
- * @LastEditors: 空白格
|
|
|
- * @LastEditTime: 2022-08-29 10:13:44
|
|
|
+ * @LastEditors: wangcc
|
|
|
+ * @LastEditTime: 2022-08-29 12:05:02
|
|
|
* @FilePath: \veterans_client_web\src\views\EducationPromote\ProfessionalIntroduction\ProfessionalIntroductionIndex.vue
|
|
|
* @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
-->
|
|
|
<template>
|
|
|
- <div>专业详情</div>
|
|
|
+ <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.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({
|
|
|
+ name: 'SelectedCoursesIndex',
|
|
|
+ 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>
|
