技能培训视频

src/api/EducationPromote/index.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 14:54:05
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-12 15:01:16
+ * @LastEditTime: 2022-08-29 09:46:21
  * @FilePath: \veterans_client_web\src\api\EducationPromote\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -25,6 +25,22 @@ export function getSchoolListData(params) {
   })
 }
 
+/**
+ * 获取学院招生简章
+ * @param {*} params
+ * @returns
+ */
+export function getSchoolRecruitstudents(params) {
+  return request({
+    url: '/app/school/selectIntro/' + params.id,
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}
+
 /**
  * 获取学院活动列表
  * @param {*} params

src/api/SkillTraining/index.js

@@ -2,8 +2,8 @@
  * @Description: 技能培训
  * @Author: 空白格
  * @Date: 2022-08-12 09:31:28
- * @LastEditors: wangcc
- * @LastEditTime: 2022-08-26 17:54:48
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-29 09:31:42
  * @FilePath: \veterans_client_web\src\api\SkillTraining\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -84,10 +84,22 @@ export function getTrainDetail(params) {
  * @param {*} params
  * @returns
  */
- export function getSkillDetail(params) {
+export function getSkillDetail(params) {
   return request({
     url: `/app/learnpackage/getSkillDetail/` + params,
-    method: 'get',
+    method: 'get'
+  })
+}
+
+/**
+ * 技能包视频详情
+ * @param {*} params
+ * @returns
+ */
+export function getSkillVideoDetails(params) {
+  return request({
+    url: `/app/learncourse/getDetail/` + params.id,
+    method: 'get'
   })
 }
 
@@ -96,10 +108,10 @@ export function getTrainDetail(params) {
  * @param {*} params
  * @returns
  */
- export function listlDetail(params) {
+export function listlDetail(params) {
   return request({
     url: `/app/learncourse/list/` + params.id,
     method: 'get',
     params
   })
-}
+}

src/router/index.js

@@ -107,7 +107,7 @@ const routes = [
         }
       },
       {
-        path: 'skilltraining/skillpackage/selectedcourses',
+        path: 'skilltraining/selectedcourses',
         name: 'SelectedCoursesIndex',
         component: () => import('@/views/SkillTraining/SkillPackage/SelectedCourses/SelectedCoursesIndex.vue'),
         meta: {
@@ -115,7 +115,7 @@ const routes = [
         }
       },
       {
-        path: 'coursevideo',
+        path: 'skilltraining/coursevideo',
         name: 'CourseVideoIndex',
         component: () => import('@/views/SkillTraining/CourseVideo/CourseVideoIndex.vue'),
         meta: {
@@ -283,7 +283,7 @@ const routes = [
         }
       },
       {
-        path: 'personalcenter/skillsTrainingdetails/achievementcertificate',
+        path: 'personalcenter/achievementcertificate',
         name: 'AchievementCertificateIndex',
         component: () =>
           import('@/views/PersonalCenter/SkillTraining/SkillsTrainingDetails/AchievementCertificate/AchievementCertificateIndex.vue'),

src/views/EducationPromote/EducationPromoteIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 13:47:26
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-26 18:03:35
+ * @LastEditTime: 2022-08-29 09:41:28
  * @FilePath: \veterans_client_web\src\views\EducationPromote\EducationPromoteIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -60,7 +60,16 @@
                     </el-option>
                   </el-select>
                 </div>
-                <div class="epah-left-btn">学院详情</div>
+                <div
+                  class="epah-left-btn"
+                  @click="
+                    jumpPage('/collegesdetails', {
+                      schoolId: queryParams.schoolId,
+                    })
+                  "
+                >
+                  学院详情
+                </div>
               </div>
             </el-col>
             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">

src/views/EducationPromote/RecruitStudents/RecruitStudentsIndex.vue

@@ -3,10 +3,166 @@
  * @Author: 空白格
  * @Date: 2022-08-26 17:56:21
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-26 17:56:22
+ * @LastEditTime: 2022-08-29 09:55:11
  * @FilePath: \veterans_client_web\src\views\EducationPromote\RecruitStudents\RecruitStudentsIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>招生简章</div>
+  <div class="app-main details">
+    <BannerBreadcrumb title="招生简章" :isRouter="true" />
+    <div class="app-main-box details-box">
+      <div class="app-main-box-content details-box-content">
+        <div class="details-box-content-title">
+          {{ schoolName || "-" }}
+        </div>
+        <div class="details-box-content-subtitle">
+          <p v-if="detainsInfo.regulation_file" @click="downloadFile">
+            <span class="el-icon-paperclip"></span>
+            <span>下载附件</span>
+          </p>
+        </div>
+        <div class="details-box-content-des">
+          <div class="dbcd-content" v-html="detainsInfo.regulation"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import { getSchoolRecruitstudents } from "@/api/EducationPromote";
+export default {
+  name: "WorkGuideDetailsIndex",
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      detainsInfo: {},
+      id: undefined,
+      schoolName: "",
+    };
+  },
+  created() {
+    const { id, name } = this.$route.query;
+    if (id) {
+      this.id = id;
+      this.schoolName = name;
+      this.getDetails();
+    }
+  },
+  methods: {
+    /**
+     * 获取详情
+     * @date 2022-08-25
+     * @returns {any}
+     */
+    getDetails() {
+      getSchoolRecruitstudents({ id: this.id }).then((res) => {
+        if (res.code === 200) {
+          this.detainsInfo = res?.data;
+        }
+      });
+    },
+    /**
+     * 预览pdf
+     * @date 2022-08-25
+     * @param {any} pdfUrl
+     * @returns {any}
+     */
+    previewPdf(pdfUrl) {
+      if (pdfUrl) {
+        window.open("http://www.gjtool.cn/pdfh5/pdf.html?file=" + pdfUrl);
+      }
+    },
+    /**
+     * 下载附件
+     * @date 2022-08-29
+     * @returns {any}
+     */
+    downloadFile() {
+      if (this.detainsInfo.regulation_file) {
+        window.open(this.detainsInfo.regulation_file)
+      }
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.details {
+  &-box {
+    margin: 0 auto;
+    &-content {
+      &-title {
+        padding: 10px 0;
+        text-align: center;
+        font-size: 24px;
+        color: #1a1a1a;
+        border-bottom: 1px solid #d5d5d5;
+      }
+      &-subtitle {
+        text-align: center;
+        margin: 20px 0 40px;
+        font-size: 14px;
+        color: #999999;
+        span {
+          cursor: pointer;
+        }
+        .no-reply {
+          color: #ef6622;
+        }
+        .has-reply {
+          color: #3ca7fe;
+        }
+      }
+      &-des {
+        .dbcd-label {
+          font-size: 20px;
+          color: #1a1a1a;
+          margin-bottom: 20px;
+          font-family: SourceHanSansCN;
+        }
+        .dbcd-content {
+          color: #666666;
+          font-size: 14px;
+        }
+      }
+      &-pdf {
+        text-align: center;
+        margin: 20px auto 30px;
+        div {
+          display: inline-block;
+          padding: 0 100px;
+          max-width: 700px;
+          cursor: pointer;
+          height: 50px;
+          line-height: 50px;
+          text-align: center;
+          font-size: 14px;
+          color: #008fff;
+          border: dashed 1px #0091ff;
+          border-radius: 5px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-all;
+        }
+      }
+      &-reply {
+        .dbcr-label {
+          font-size: 20px;
+          color: #1a1a1a;
+          margin-bottom: 20px;
+          font-family: SourceHanSansCN;
+        }
+        .dbcr-content {
+          color: #666666;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/SkillTraining/CourseVideo/CourseVideoIndex.vue

@@ -3,68 +3,407 @@
  * @Author: 空白格
  * @Date: 2022-08-16 13:29:35
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-16 16:19:52
+ * @LastEditTime: 2022-08-29 09:35:02
  * @FilePath: \veterans_client_web\src\views\SkillTraining\CourseVideo\CourseVideoIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div class="app-main course-video">
-    <div class="course-video-breadcrumb">
-      <div class="app-main-box course-video-breadcrumb-box">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-          <el-breadcrumb-item :to="{ path: '/skilltraining' }">技能培训</el-breadcrumb-item>
-          <el-breadcrumb-item>课程视频</el-breadcrumb-item>
-        </el-breadcrumb>
+  <div class="course-details">
+    <div class="course-details-breadcrumb">
+      <el-breadcrumb
+        class="course-details-breadcrumb-content"
+        separator-class="el-icon-arrow-right"
+      >
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item
+          v-for="(item, index) in breadcrumbList"
+          :key="index"
+          :to="'/' + item.path"
+          >{{ item.label }}</el-breadcrumb-item
+        >
+      </el-breadcrumb>
+    </div>
+    <div class="course-details-video">
+      <div class="course-details-video-box">
+        <course-video
+          ref="courseVideo"
+          :courseDetails="detailsInfo"
+          @changeClasses="changeClasses"
+        />
       </div>
     </div>
-    <div class="course-video-header">
-      <div class="app-main-box course-video-header-box">22222</div>
+    <div class="course-details-comment" v-loading="commentObj.loading">
+      <el-row :gutter="11">
+        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+          <div class="course-details-comment-content">
+            <div class="cdcc-header">
+              <div class="cdcc-header-title">课程评论</div>
+              <div class="cdcc-header-total">
+                共{{ commentObj.total || 0 }}条评论
+              </div>
+            </div>
+            <div class="cdcc-list" v-if="commentObj.list.length">
+              <div
+                class="cdcc-list-item"
+                v-for="(item, index) in commentObj.list"
+                :key="index"
+              >
+                <div class="cdcc-list-item-left">
+                  <el-avatar
+                    shape="square"
+                    :size="77"
+                    :src="item.createByAvatar"
+                  ></el-avatar>
+                </div>
+                <div class="cdcc-list-item-right">
+                  <div class="clir-item">{{ item.createBy }}</div>
+                  <div class="clir-item">
+                    <div>
+                      <el-rate
+                        v-model="item.starLevel"
+                        :disabled="true"
+                        :colors="['#C4C4C4', '#C4C4C4', '#C4C4C4']"
+                      ></el-rate>
+                    </div>
+                    <div class="date">{{ item.createTime }}</div>
+                  </div>
+                  <div class="clir-item">{{ item.content }}</div>
+                </div>
+              </div>
+              <div class="pagination" v-if="commentObj.total">
+                <el-pagination
+                  background
+                  layout="prev, pager, next"
+                  :page-size="commentObj.queryParams.pageSize"
+                  :total="commentObj.total"
+                  @current-change="currentChange"
+                />
+              </div>
+            </div>
+            <div class="empty" v-else>
+              <el-empty description="评论数据为空"></el-empty>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+          <div class="course-details-comment-submit">
+            <div class="cdcs-title">我的评论</div>
+            <div class="cdcs-form">
+              <el-form
+                ref="form"
+                :model="commentObj.form"
+                :rules="commentObj.rules"
+              >
+                <el-form-item prop="starLevel">
+                  <el-rate v-model="commentObj.form.starLevel"></el-rate>
+                </el-form-item>
+                <el-form-item prop="content">
+                  <el-input
+                    type="textarea"
+                    :rows="6"
+                    placeholder="请输入您的评价"
+                    v-model="commentObj.form.content"
+                  >
+                  </el-input>
+                </el-form-item>
+                <el-form-item>
+                  <div class="cdcs-form-btn">
+                    <el-button
+                      class="cdcs-form-btn-sub"
+                      @click="submitComment"
+                      :loading="commentObj.subLoading"
+                      >提交</el-button
+                    >
+                  </div>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 
 <script>
+import CourseVideo from "@/components/CourseVideo";
+import { getCommentList, addComment } from "@/api/AdaptiveTraining";
+import { getSkillVideoDetails } from "@/api/SkillTraining";
 export default {
   name: "CourseVideoIndex",
+  components: {
+    CourseVideo,
+  },
   data() {
-    return {};
+    return {
+      breadcrumbList: [],
+      classesId: null,
+      detailsInfo: {},
+      currentClasses: {},
+      commentObj: {
+        total: 0,
+        list: [],
+        loading: false,
+        subLoading: false,
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          tabId: undefined,
+        },
+        form: {
+          tabId: "",
+          starLevel: 0,
+          content: "",
+        },
+        rules: {
+          starLevel: [{ required: true, message: "请评分", trigger: "change" }],
+          content: [
+            { required: true, message: "请输入您的评价", trigger: "blur" },
+          ],
+        },
+      },
+    };
   },
   created() {
-    console.log(this.$router);
-  }
+    this.handleRouter();
+    const { id } = this.$route.query;
+    if (id) {
+      this.classesId = id;
+      this.commentObj.queryParams.tabId = id;
+      this.commentObj.form.tabId = id;
+      this.getDetails();
+      this.getCommentList();
+    }
+  },
+  methods: {
+    /**
+     * 获取课程详情
+     * @date 2022-08-24
+     * @param {any} id
+     * @returns {any}
+     */
+    getDetails() {
+      getSkillVideoDetails({ id: this.classesId }).then((res) => {
+        if (res.code === 200) {
+          this.detailsInfo = res?.data;
+        }
+      });
+    },
+    /**
+     * 切换章节触发
+     * @date 2022-08-25
+     * @returns {any}
+     */
+    changeClasses() {
+      this.getDetails();
+    },
+    /**
+     * 获取课程评论
+     * @date 2022-08-25
+     * @returns {any}
+     */
+    getCommentList() {
+      this.commentObj.loading = true;
+      getCommentList(this.commentObj.queryParams)
+        .then((res) => {
+          if (res.code === 200) {
+            this.commentObj.list = res?.rows;
+            this.commentObj.total = Number(res?.total);
+          }
+          this.commentObj.loading = false;
+        })
+        .catch(() => {
+          this.commentObj.loading = false;
+        });
+    },
+    /**
+     * 分页切换触发
+     * @date 2022-08-25
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.commentObj.queryParams.pageNum = page;
+      this.getCommentList();
+    },
+    /**
+     * 提交评论
+     * @date 2022-08-25
+     * @returns {any}
+     */
+    submitComment() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.commentObj.subLoading = true;
+          addComment(this.commentObj.form)
+            .then((res) => {
+              if (res.code === 200) {
+                this.$message.success("评论成功!");
+                this.$refs["form"].resetFields();
+                this.commentObj.queryParams.pageNum = 1;
+                this.getCommentList();
+              } else {
+                this.$message.error(res.msg || "评论失败!");
+              }
+              this.commentObj.subLoading = false;
+            })
+            .catch(() => {
+              this.commentObj.subLoading = false;
+            });
+        }
+      });
+    },
+    /**
+     * 根据路由获取面包屑
+     * @date 2022-08-24
+     * @returns {any}
+     */
+    handleRouter() {
+      let path = this.$router.currentRoute.path.slice(1),
+        routerOptions = this.$router.options.routes[0].children,
+        breadcrumbList = [],
+        pathList;
+      if (path) {
+        pathList = path.split("/").filter((item) => item && item.trim());
+        pathList[pathList.length - 1] = path;
+        pathList.forEach((item) => {
+          routerOptions.forEach((jitem) => {
+            if (item === jitem.path) {
+              breadcrumbList.push({
+                path: jitem.path,
+                label: jitem.meta.title,
+              });
+            }
+          });
+        });
+        this.breadcrumbList = breadcrumbList;
+      }
+    },
+  },
+  beforeDestroy() {
+    this.$refs["courseVideo"].submitVideoDuration();
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.course-video {
+.course-details {
   &-breadcrumb {
-    background-color: #43565f;
     height: 57px;
-    &-box {
+    line-height: 57px;
+    background: #43565f;
+    &-content {
+      width: 70%;
+      height: 57px;
+      line-height: 57px;
+      min-width: 600px;
       margin: 0 auto;
-      :deep(.el-breadcrumb) {
-        height: 57px;
-        line-height: 57px;
-      }
-      :deep(.el-breadcrumb__inner) {
-        color: #fff;
-        font-size: 20px;
-      }
-      :deep(.el-breadcrumb__separator) {
-        color: #fff;
-        font-size: 20px;
-      }
       :deep(.el-breadcrumb__inner.is-link) {
-        font-weight: normal;
+        color: #fff;
+        font-size: 14px;
       }
     }
   }
-  &-header {
+  &-video {
     background: #181c1e;
     &-box {
+      width: 70%;
+      min-width: 600px;
       margin: 0 auto;
     }
   }
+  &-comment {
+    width: 70%;
+    min-width: 600px;
+    margin: 16px auto 0;
+    &-content {
+      background: #fff;
+      padding: 30px 20px;
+      .cdcc-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: solid 1px #cbcbcb;
+        padding-bottom: 10px;
+        &-title {
+          color: #1a1a1a;
+          font-size: 20px;
+          font-weight: 500;
+        }
+        &-total {
+          color: #8d8d8d;
+          font-size: 14px;
+        }
+      }
+      .cdcc-list {
+        padding: 30px 0 0;
+        &-item {
+          display: flex;
+          margin-bottom: 22px;
+          &-left {
+            margin-right: 14px;
+          }
+          &-right {
+            .clir-item {
+              display: flex;
+              font-size: 14px;
+              margin-bottom: 5px;
+              :deep(.el-rate__icon) {
+                margin-right: 2px;
+              }
+              .date {
+                color: #a5a5a5;
+                margin-left: 30px;
+                font-size: 13px;
+              }
+              &:first-child {
+                color: #3d3d3d;
+                font-size: 16px;
+              }
+              &:last-child {
+                color: #6c6c6c;
+              }
+            }
+          }
+        }
+        .pagination {
+          text-align: center;
+          margin-top: 20px;
+          :deep(.el-pager .active) {
+            background-color: #ff3939;
+          }
+          :deep(.el-pagination.is-background
+              .el-pager
+              li:not(.disabled).active) {
+            background-color: #ff3939;
+          }
+        }
+      }
+      .empty {
+        padding: 30px 0;
+      }
+    }
+    &-submit {
+      background: #fff;
+      padding: 30px 20px;
+      .cdcs-title {
+        font-size: 20px;
+        color: #1a1a1a;
+        margin-bottom: 14px;
+      }
+      .cdcs-form {
+        &-btn {
+          width: 100%;
+          text-align: center;
+          &-sub {
+            width: 80%;
+            background-color: #709078;
+            color: #fff;
+            border-radius: 30px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/views/SkillTraining/SkillPackage/SelectedCourses/SelectedCoursesIndex.vue

@@ -2,8 +2,8 @@
  * @Description: 技能培训 => 技能包 => 精选课程
  * @Author: 空白格
  * @Date: 2022-08-26 10:48:52
- * @LastEditors: wangcc
- * @LastEditTime: 2022-08-26 18:03:17
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-29 09:35:59
  * @FilePath: \veterans_client_web\src\views\SkillTraining\SkillPackage\SelectedCourses\SelectedCoursesIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -15,8 +15,10 @@
         <div class="banner-breadcrumb-breadcrumb">
           <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-            <el-breadcrumb-item :to="{ path: '/skilltraining'}">技能培训</el-breadcrumb-item>
-            <el-breadcrumb-item :to="{ path: '/skilltraining/skillpackage'}">技能包</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/skilltraining' }"
+              >技能培训</el-breadcrumb-item
+            >
+            <!-- <el-breadcrumb-item :to="{ path: '/skilltraining/skillpackage'}">技能包</el-breadcrumb-item> -->
             <el-breadcrumb-item>精选课程</el-breadcrumb-item>
           </el-breadcrumb>
         </div>
@@ -26,11 +28,16 @@
       <div class="_container">
         <div class="box-list">
           <h1>精选课程</h1>
-          <div style="display:table;width: 100%;padding: 20px;">
-            <div class="news-box" v-for="(item,index) in deliverList" :key="index" @click="skillClick(img)">
+          <div style="display: table; width: 100%; padding: 20px">
+            <div
+              class="news-box"
+              v-for="(item, index) in deliverList"
+              :key="index"
+              @click="skillClick(item)"
+            >
               <img :src="item.img" alt />
               <div class="video"></div>
-              <p class="title">{{item.name}}</p>
+              <p class="title">{{ item.name }}</p>
               <!-- <p class="state">线上课程</p> -->
             </div>
           </div>
@@ -50,21 +57,21 @@
 </template>
 
 <script>
-import banner from '@/components/BannerBreadcrumb/index.vue';
-import { listlDetail } from '@/api/SkillTraining/index';
+import banner from "@/components/BannerBreadcrumb/index.vue";
+import { listlDetail } from "@/api/SkillTraining/index";
 export default {
-  name: 'DeliverIndex',
+  name: "DeliverIndex",
   components: { banner },
   data() {
     return {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        id: this.$route.query.id
+        id: this.$route.query.id,
       },
       total: 0,
       loading: false,
-      deliverList: []
+      deliverList: [],
     };
   },
   created() {
@@ -94,11 +101,25 @@ export default {
         this.loading = false;
       });
     },
-  }
+    /**
+     * 点击视频查看详情
+     * @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>
+<style lang="scss" scoped>
 ._container {
   width: 1200px !important;
   margin-right: auto;
@@ -110,7 +131,7 @@ export default {
 ._container:after,
 ._container:before {
   display: table;
-  content: ' ';
+  content: " ";
   clear: both;
 }
 .breadcrumb {
@@ -176,7 +197,7 @@ export default {
         color: #1a1a1a;
         margin-bottom: 10px;
         font-size: 20px;
-        font-family: 'SourceHanSansCN';
+        font-family: "SourceHanSansCN";
       }
       p {
         color: #666666;
@@ -190,10 +211,10 @@ export default {
           padding: 0 1px 0 4px;
           display: inline-block;
           color: #919090;
-          content: '|';
+          content: "|";
         }
         .meta_cell:last-child:after {
-          content: '';
+          content: "";
         }
       }
     }
@@ -256,11 +277,10 @@ export default {
 .news-box img::after {
   width: 70px;
   height: 70px;
-  background-image: url('@/assets/images/shipin.png');
+  background-image: url("@/assets/images/shipin.png");
   background-size: 70px 70px;
   position: absolute;
   top: 25%;
   left: 35%;
 }
 </style>
-

src/views/SkillTraining/SkillPackage/SkillPackageIndex.vue

@@ -2,8 +2,8 @@
  * @Description: 技能培训 => 技能包
  * @Author: 空白格
  * @Date: 2022-08-26 10:41:50
- * @LastEditors: wangcc
- * @LastEditTime: 2022-08-26 17:59:48
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-29 09:29:08
  * @FilePath: \veterans_client_web\src\views\SkillTraining\SkillPackage\SkillPackageIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -18,24 +18,26 @@
           <div class="right-top">
             <div class="title-right">
               <!-- <span class="tags">检验</span> -->
-              <span class="tag-title">{{skillDetail.name}}</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>培训学校：{{ schoolName }}</p>
+              <p>培训导师：{{ skillDetail.teacherName }}</p>
+              <p>培训周期：{{ skillDetail.cycle }}个月</p>
               <p>
-                <span>报名人数：{{skillDetail.applyCount}}</span>
-                <span style="margin-left:10px">开班人数：{{skillDetail.classCount}}</span>
+                <span>报名人数：{{ skillDetail.applyCount }}</span>
+                <span style="margin-left: 10px"
+                  >开班人数：{{ skillDetail.classCount }}</span
+                >
               </p>
               <p>
-                <span style="margin-right:6px">难度</span>
+                <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>
+              <span class="tag-state">{{ skillDetail.statusStr }}</span>
             </div>
           </div>
         </div>
@@ -46,15 +48,18 @@
         <div class="selected-center">
           <div class="selected-title">
             <h3>精选课程</h3>
-              <span @click="more">更多></span>
+            <span @click="more">更多></span>
           </div>
           <div class="swpier-box">
             <swiper :options="swiperOption">
-              <swiper-slide v-for="(img,index) in skillDetail.courseList" :key="index">
+              <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="title">{{ img.name }}</p>
                   <!-- <p class="state">线上课程</p> -->
                 </div>
               </swiper-slide>
@@ -77,9 +82,9 @@
 </template>
 
 <script>
-import { getSkillDetail } from '@/api/SkillTraining/index';
+import { getSkillDetail } from "@/api/SkillTraining/index";
 export default {
-  name: 'SkillPackageIndex',
+  name: "SkillPackageIndex",
   data() {
     return {
       newsId: this.$route.query.id,
@@ -87,33 +92,33 @@ export default {
       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"),
         },
         {
-          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'
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
         },
         // 设置自动轮播
         autoplay: {
-          delay: 2000 // 5秒切换一次
-        }
+          delay: 2000, // 5秒切换一次
+        },
         // 设置轮播可循环
         // loop: true
       },
-      skillDetail: {}
+      skillDetail: {},
     };
   },
   created() {
@@ -127,22 +132,29 @@ export default {
     },
     more() {
       this.$router.push({
-        name: 'SelectedCoursesIndex',
-        query: { id: this.newsId }
+        name: "SelectedCoursesIndex",
+        query: { id: this.newsId },
       });
     },
+    /**
+     * 点击课程
+     * @date 2022-08-29
+     * @param {any} item
+     * @returns {any}
+     */
     skillClick(item) {
-      console.log(item);
-      // this.$router.push({
-      //     name: 'SkillsTrainingDetails',
-      //     query: { id:item.id }
-      //   });
-    }
-  }
+      this.$router.push({
+        path: "/skilltraining/coursevideo",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+  },
 };
 </script>
 
-<style  lang='scss' scoped>
+<style lang="scss" scoped>
 .news-box {
   width: 280px;
   height: 174px;
@@ -169,7 +181,7 @@ export default {
 .news-box img::after {
   width: 70px;
   height: 70px;
-  background-image: url('@/assets/images/shipin.png');
+  background-image: url("@/assets/images/shipin.png");
   background-size: 70px 70px;
   position: absolute;
   top: 25%;
@@ -178,12 +190,17 @@ export default {
 .video {
   width: 70px;
   height: 70px;
-  background-image: url('@/assets/images/shipin.png');
+  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;
@@ -206,6 +223,7 @@ export default {
     img {
       width: 100%;
       height: 100%;
+      object-fit: fill;
     }
   }
   .right-top {