专业详情接口联调 页面渲染

src/api/EducationPromote/index.js

@@ -2,8 +2,8 @@
  * @Description: 学历提升
  * @Author: 空白格
  * @Date: 2022-08-12 14:54:05
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-29 09:46:21
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-08-29 10:56:44
  * @FilePath: \veterans_client_web\src\api\EducationPromote\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -56,3 +56,15 @@ export function getActivityBySchool(params) {
     params
   })
 }
+
+/**
+ * 获取学院活动列表
+ * @param {*} params
+ * @returns
+ */
+ export function getDetailBySchool(id) {
+  return request({
+    url: '/app/learnpackage/getDetail/' + id,
+    method: 'get',
+  })
+}

src/views/EducationPromote/ProfessionalIntroduction/ProfessionalIntroductionIndex.vue

@@ -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>