合并

src/api/PersonalCenter/index.js

@@ -2,17 +2,12 @@
  * @Description: 个人中心
  * @Author: 空白格
  * @Date: 2022-08-15 14:26:14
-<<<<<<< HEAD
- * @LastEditors: gcz
- * @LastEditTime: 2022-08-26 15:49:48
-=======
- * @LastEditors: gcz
- * @LastEditTime: 2022-08-25 11:41:09
->>>>>>> 0c9615cb02a537af385bac65148d2842864ac07c
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-26 17:38:27
  * @FilePath: \veterans_client_web\src\api\PersonalCenter\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
-import request from "@/utils/request";
+import request from '@/utils/request'
 
 /**
  * 获取个人信息
@@ -21,10 +16,10 @@ import request from "@/utils/request";
  */
 export function getPersonInfoData(params) {
   return request({
-    url: "/app/memberinfo",
-    method: "get",
-    params,
-  });
+    url: '/app/memberinfo',
+    method: 'get',
+    params
+  })
 }
 
 /**
@@ -34,10 +29,10 @@ export function getPersonInfoData(params) {
  */
 export function getPersonIntegralData(params) {
   return request({
-    url: "/app/integral/total",
-    method: "get",
-    params,
-  });
+    url: '/app/integral/total',
+    method: 'get',
+    params
+  })
 }
 
 /**
@@ -47,10 +42,10 @@ export function getPersonIntegralData(params) {
  */
 export function getPersonStaticisData(params) {
   return request({
-    url: "/app/memberinfo/getCountResult",
-    method: "get",
-    params,
-  });
+    url: '/app/memberinfo/getCountResult',
+    method: 'get',
+    params
+  })
 }
 
 /**
@@ -61,8 +56,8 @@ export function getPersonStaticisData(params) {
 export function getIdInfo(params) {
   return request({
     url: `/app/veteEduc/idcard/${params.id}`,
-    method: "get",
-  });
+    method: 'get'
+  })
 }
 
 /**
@@ -72,10 +67,10 @@ export function getIdInfo(params) {
  */
 export function myDeliveredList(params) {
   return request({
-    url: "/app/delivery/myDeliveredList",
-    method: "get",
-    params,
-  });
+    url: '/app/delivery/myDeliveredList',
+    method: 'get',
+    params
+  })
 }
 
 /**
@@ -85,10 +80,10 @@ export function myDeliveredList(params) {
  */
 export function myInterviewList(params) {
   return request({
-    url: "/app/delivery/myInterviewList",
-    method: "get",
-    params,
-  });
+    url: '/app/delivery/myInterviewList',
+    method: 'get',
+    params
+  })
 }
 /**
  * 保存求职意向
@@ -97,10 +92,10 @@ export function myInterviewList(params) {
  */
 export function saveJobIntention(data) {
   return request({
-    url: "/app/memberinfo/saveJobIntention",
-    method: "put",
-    data,
-  });
+    url: '/app/memberinfo/saveJobIntention',
+    method: 'put',
+    data
+  })
 }
 
 /**
@@ -110,10 +105,10 @@ export function saveJobIntention(data) {
  */
 export function saveSelfAssessment(data) {
   return request({
-    url: "/app/memberinfo/saveSelfAssessment",
-    method: "put",
-    data,
-  });
+    url: '/app/memberinfo/saveSelfAssessment',
+    method: 'put',
+    data
+  })
 }
 
 /**
@@ -123,10 +118,10 @@ export function saveSelfAssessment(data) {
  */
 export function myTrainList(params) {
   return request({
-    url: "/app/learnmember/myTrainList/" + params.type,
-    method: "get",
-    params,
-  });
+    url: '/app/learnmember/myTrainList/' + params.type,
+    method: 'get',
+    params
+  })
 }
 
 /**
@@ -137,7 +132,20 @@ export function myTrainList(params) {
 export function updateJobStatus(data) {
   return request({
     url: '/app/memberinfo/updateJobStatus',
-    method: "put",
-    data,
-  });
+    method: 'put',
+    data
+  })
+}
+
+/**
+ * 获取我的技能培训视频详情
+ * @param {*} params
+ * @returns
+ */
+export function getMyTrainVideoDetails(params) {
+  return request({
+    url: '/app/learncourse/getDetail/' + params.id,
+    method: 'get',
+    params
+  })
 }

src/router/index.js

@@ -256,12 +256,30 @@ const routes = [
         }
       },
       {
-        path: 'personalcenter/skillsTrainingDetails',
-        name: 'SkillsTrainingDetails',
+        path: 'personalcenter/skillsTrainingdetails',
+        name: 'SkillsTrainingDetailsIndex',
         component: () =>
-          import('@/views/PersonalCenter/SkillTraining/SkillsTrainingDetails.vue'),
+          import('@/views/PersonalCenter/SkillTraining/SkillsTrainingDetails/SkillsTrainingDetailsIndex.vue'),
         meta: {
-          title: '我的技能培训-详情'
+          title: '我的技能培训详情'
+        }
+      },
+      {
+        path: 'personalcenter/coursevideo',
+        name: 'CourseVideoIndex',
+        component: () =>
+          import('@/views/PersonalCenter/SkillTraining/SkillsTrainingDetails/CourseVideo/CourseVideoIndex.vue'),
+        meta: {
+          title: '课程视频'
+        }
+      },
+      {
+        path: 'personalcenter/skillsTrainingdetails/achievementcertificate',
+        name: 'AchievementCertificateIndex',
+        component: () =>
+          import('@/views/PersonalCenter/SkillTraining/SkillsTrainingDetails/AchievementCertificate/AchievementCertificateIndex.vue'),
+        meta: {
+          title: '成绩与证书'
         }
       },
       {

src/views/EducationPromote/EducationPromoteDetails/EducationPromoteDetailsIndex.vue

@@ -2,11 +2,124 @@
  * @Description: 学历提升 => 详情
  * @Author: 空白格
  * @Date: 2022-08-26 16:40:31
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-26 16:40:31
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-08-26 18:00:24
  * @FilePath: \veterans_client_web\src\views\EducationPromote\EducationPromoteDetails\EducationPromoteDetailsIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>详情</div>
+  <div class=''>
+    <section class="banner"></section>      
+    <section class="wrap-r usefor">
+      <div class="title">学历提升6大作用</div>
+      <div class="usefor-list u-flex u-flex-wrap u-row-between">
+        <div class="usefor-list-item item-1">
+          <div class="name">评职称证书</div>
+          <div class="con">在评定高级职称时需要学历的辅助</div>        
+        </div>
+        <div class="usefor-list-item item-2">
+          <div class="name">求职就业</div>
+          <div class="con">学历越高，就业的可能性越大</div>        
+        </div>
+        <div class="usefor-list-item item-3">
+          <div class="name">升职加薪</div>
+          <div class="con">高学历是用人单位提拔人才的重要考核标准</div>        
+        </div>
+        <div class="usefor-list-item item-4">
+          <div class="name">考资格证</div>
+          <div class="con">许多国家职业资格证都需求学历专科以上</div>        
+        </div>
+        <div class="usefor-list-item item-5">
+          <div class="name">外企求职</div>
+          <div class="con">进外企工作，学历是一项重要的考核</div>        
+        </div>
+        <div class="usefor-list-item item-6">
+          <div class="name">积分落户</div>
+          <div class="con">落户某些城市，需要一定的学历积分</div>        
+        </div>
+      </div>
+    </section>  
+    <section class="wrap-r flow">
+      <div class="title">学历提升的流程</div>
+      <div class="flow-con"></div>
+    </section>
+    <section class="wrap-r way">
+      <div class="title">学历提升的方式</div>
+      <div class="flow-con"></div>
+    </section>
+  </div>
 </template>
+
+<script>
+  export default {
+    name: '',
+    components: {},
+    data () {
+      return {
+      };
+    },
+    created(){},
+    methods: {},
+  }
+</script>
+
+<style lang='scss' scoped>
+.banner{
+  height: 447px;
+  background: url(@/assets/images/education-banner.png) no-repeat;
+  background-position: center center;
+}
+.title{
+    font-size: 20px;
+    color: #1A1A1A;
+    font-weight: 600;
+    margin-bottom: 24px;
+  }
+.wrap-r{
+  box-sizing: border-box;
+  background: #fff;
+  padding: 20px;
+  width:70%;
+  margin: 23px auto;
+}
+.usefor{
+   padding-bottom: 0;
+  .usefor-list{
+    &-item{
+      box-sizing: border-box;
+      width: 33%;
+      margin-bottom: 24px;
+      height: 130px;
+      padding: 25px 0 0 30px;
+      background-position: right bottom;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      .name{
+        font-size: 20px;
+        margin-bottom: 10px;
+      }
+      .con{
+        width: 150px;
+        font-size: 14px;
+        color: #787878;
+      }
+    }
+    @for $i from 1 through 6 {
+        .item-#{$i} {
+          background-image: url(@/assets/images/usefor-list-0#{$i}.png);
+        }
+      }
+  }
+}
+.flow{
+  margin-bottom: 0;
+  .flow-con{
+    height: 144px;
+    background: url(@/assets/images/usefor-flow.png) no-repeat;
+    background-size: 100%;
+  }
+}
+.way{
+  margin-top: 0;
+}
+</style>

src/views/PersonalCenter/PersonalCenterIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-15 10:09:03
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-25 16:19:50
+ * @LastEditTime: 2022-08-26 17:46:19
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\PersonalCenterIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -236,11 +236,11 @@ export default {
           label: "我的评价",
           path: "/personalcenter/evaluate",
         },
-        {
-          icon: require("@/assets/images/personal-center-icon/shezhi.svg"),
-          label: "设置",
-          path: "/personalcenter/setting",
-        },
+        // {
+        //   icon: require("@/assets/images/personal-center-icon/shezhi.svg"),
+        //   label: "设置",
+        //   path: "/personalcenter/setting",
+        // },
       ],
       skillTrainList: [],
     };

src/views/PersonalCenter/Resume/ResumeIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-24 09:35:03
  * @LastEditors: gcz
- * @LastEditTime: 2022-08-25 11:57:52
+ * @LastEditTime: 2022-08-26 17:52:03
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\Resume\ResumeIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -28,8 +28,8 @@
             <div class="">
               {{ memberinfo.menSex === 1 ? "女" : "男" }} ·
               <span class="position" v-if="memberinfo.jobStatus !== 0">
-                · <span class="c-yellow">入职中</span>
-                <span>(memberinfo.company)</span>
+                <span class="c-yellow">入职中</span>
+                <span v-if="memberinfo.jobStatus==1&&memberinfo.company">({{memberinfo.company}})</span>
               </span>
               <span class="c-yellow" v-else>未入职</span>
             </div>

src/views/PersonalCenter/SkillTraining/SkillTrainingIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-24 10:02:17
  * @LastEditors: wangcc
- * @LastEditTime: 2022-08-26 11:19:34
+ * @LastEditTime: 2022-08-25 16:10:36
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillTrainingIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -15,7 +15,9 @@
         <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: '/personalcenter'}">我的</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/personalcenter' }"
+              >我的</el-breadcrumb-item
+            >
             <el-breadcrumb-item>我的技能培训</el-breadcrumb-item>
           </el-breadcrumb>
         </div>
@@ -26,31 +28,43 @@
         <div class="box-list">
           <div class="tabs">
             <span
-              @click="tabsClick(index,item)"
-              :class="{activeSpan:currentClass==index}"
-              v-for="(item,index) in tabsList"
+              @click="tabsClick(index, item)"
+              :class="{ activeSpan: currentClass == index }"
+              v-for="(item, index) in tabsList"
               :key="index"
-            >{{item.name}}</span>
+              >{{ item.name }}</span
+            >
           </div>
-          <div style="display:table;width:100%">
-            <div class="deliverList-box" v-for="(train,index) in deliverList" :key="index" @click="trainDetail(train)">
+          <div style="display: table; width: 100%">
+            <div
+              class="deliverList-box"
+              v-for="(train, index) in deliverList"
+              :key="index"
+              @click="trainDetail(train)"
+            >
               <div class="line"></div>
-              <h3 class="title-h3">{{train.name}}</h3>
+              <h3 class="title-h3">{{ train.name }}</h3>
               <div class="deliver">
                 <div class="log">
                   <img :src="train.img" alt />
                 </div>
                 <div class="center">
-                  <h3>培训学校：{{train.schoolName}}</h3>
-                  <p style="display: flex;">
-                    <span style="margin-right:6px">难度</span>
-                    <el-rate v-model="train.difficult" disabled text-color="#ff9900"></el-rate>
+                  <h3>培训学校：{{ train.schoolName }}</h3>
+                  <p style="display: flex">
+                    <span style="margin-right: 6px">难度</span>
+                    <el-rate
+                      v-model="train.difficult"
+                      disabled
+                      text-color="#ff9900"
+                    ></el-rate>
                   </p>
                   <!-- <p class="comment">报名人数：16/60</p> -->
-                  <p class="comment">培训周期：{{train.cycle}}个月</p>
+                  <p class="comment">培训周期：{{ train.cycle }}个月</p>
                 </div>
                 <div class="right-box">
-                  <span class="time">开始时间：{{train.applyTime.slice(0,10)}}</span>
+                  <span class="time"
+                    >开始时间：{{ train.applyTime.slice(0, 10) }}</span
+                  >
                 </div>
               </div>
             </div>
@@ -71,10 +85,10 @@
 </template>
 
 <script>
-import banner from '@/components/BannerBreadcrumb/index.vue';
-import { myTrainList } from '@/api/PersonalCenter/index';
+import banner from "@/components/BannerBreadcrumb/index.vue";
+import { myTrainList } from "@/api/PersonalCenter/index";
 export default {
-  name: 'EvaluateIndex',
+  name: "EvaluateIndex",
   components: { banner },
   data() {
     return {
@@ -82,7 +96,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        type: '1'
+        type: "1",
       },
       total: 0,
       loading: false,
@@ -91,17 +105,17 @@ export default {
       tabsList: [
         {
           id: 1,
-          name: '培训中'
+          name: "培训中",
         },
         {
           id: 0,
-          name: '已报名'
-        }
-      ]
+          name: "已报名",
+        },
+      ],
     };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     /**
@@ -127,22 +141,22 @@ export default {
         this.loading = false;
       });
     },
-    tabsClick(index,item) {
+    tabsClick(index, item) {
       this.currentClass = index;
-      this.queryParams.type = item.id
-      this.getList()
+      this.queryParams.type = item.id;
+      this.getList();
     },
     trainDetail(item) {
-        this.$router.push({
-          name: 'SkillsTrainingDetails',
-          query: { id:item.id }
-        });
-    }
-  }
+      this.$router.push({
+        path: "/personalcenter/skillsTrainingdetails",
+        query: { id: item.id },
+      });
+    },
+  },
 };
 </script>
 
-<style  lang='scss' scoped>
+<style lang="scss" scoped>
 ._container {
   width: 1200px !important;
   margin-right: auto;
@@ -154,7 +168,7 @@ export default {
 ._container:after,
 ._container:before {
   display: table;
-  content: ' ';
+  content: " ";
   clear: both;
 }
 .breadcrumb {
@@ -228,7 +242,7 @@ export default {
         color: #1a1a1a;
         margin-bottom: 10px;
         font-size: 18px;
-        font-family: 'SourceHanSansCN';
+        font-family: "SourceHanSansCN";
         font-weight: 400;
       }
       p {
@@ -243,10 +257,10 @@ export default {
           padding: 0 1px 0 4px;
           display: inline-block;
           color: #919090;
-          content: '|';
+          content: "|";
         }
         .meta_cell:last-child:after {
-          content: '';
+          content: "";
         }
       }
       .comment {
@@ -343,4 +357,4 @@ export default {
 .video {
   width: 200px;
 }
-</style>
+</style>

src/views/PersonalCenter/SkillTraining/SkillsTrainingDetails.vue

@@ -1,276 +0,0 @@
-<!--
- * @Description: 
- * @Author: gcz
- * @Date: 2022-08-25 15:01:55
- * @LastEditors: gcz
- * @LastEditTime: 2022-08-26 14:46:10
- * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails.vue
- * @Copyright: Copyright (c) 2016~2022 by gcz, All Rights Reserved. 
--->
-<template>
-  <div class="app-main">
-    <section class="base-info-wrap">
-      <div class="app-main-box u-flex u-col-top u-row-between">
-        <div class="base-info-left u-flex u-col-top">
-          <el-image
-            style="width: 260px; height: 260px"
-            :src="details.img"
-            fit="cover"
-          ></el-image>
-          <div class="text">
-            <div class="text-item name">{{ details.name }}</div>
-            <div class="text-item u-flex">
-              <span>难度：</span>
-              <el-rate v-model="details.difficult" disabled></el-rate>
-            </div>
-            <div class="text-item">培训学校：{{ details.schoolName }}</div>
-            <div class="text-item">培训导师：{{ details.teacherName }}</div>
-            <div class="text-item">培训周期：{{ details.cycle }}</div>
-            <div class="text-item">报名人数：{{ details.applyCount }}</div>
-            <div class="text-item">开班时间：{{ details.openingTime }}</div>
-            <div class="text-item progress">
-              <div>学习进度</div>
-              <el-progress
-                :percentage="details.finishPercent || 0"
-              ></el-progress>
-            </div>
-          </div>
-        </div>
-        <div class="base-info-right">
-          <div class="certificate" @click="jumpPage('/achievementCertificate')">
-            <div class="img-wrap u-flex u-row-center">
-              <el-image
-                :src="require('@/assets/images/certificate-icon.svg')"
-                style="width: 48px; height: 58px"
-              ></el-image>
-            </div>
-            <span class="certificate-text">成绩与证书</span>
-          </div>
-        </div>
-      </div>
-    </section>
-    <div class="app-main-box">
-      <div class="app-main-box-content">
-        <el-tabs
-          v-model="classTypeActive"
-          @tab-click="classTypeClick"
-        >
-          <el-tab-pane
-            v-for="(item, index) in classTypeList"
-            :key="index"
-            :label="item.label"
-            :name="item.name"
-          >
-            <div class="" v-if="classTypeActive==0">
-            <el-row :gutter="16" v-if="onLineCourselist && onLineCourselist.length">
-              <el-col
-                class="course-item"
-                :xs="24"
-                :sm="24"
-                :md="24"
-                :lg="24"
-                :xl="12"
-                v-for="(item, index) in onLineCourselist"
-                :key="index"
-              >
-                <div @click="jumpPage('/coursevideo',{id:item.id})" class="course u-flex u-row-between" >
-                  <div class="left u-flex">
-                    <el-image
-                        style="width: 87px; height: 65px"
-                        :src="item.img"
-                        fit="cover"
-                    ></el-image>
-                    <div class="text">
-                        <div class="name">{{item.name}}</div>
-                        <div class="info">{{` 共${item.amount || 0}课,已学完${item.finishCount || 0},学习进度${item.finishPercent || 0}% `}}</div>
-                    </div>
-                  </div>
-                  <div class="right">
-                    
-                  </div>
-                </div>
-              </el-col>
-            </el-row>
-            <el-empty v-else description="暂无线上课程"></el-empty>
-            </div>
-            
-            <div class="" v-if="classTypeActive==1">
-             <el-row :gutter="16" v-if="offLineCourselist && offLineCourselist.length">
-              <el-col
-                class="course-item"
-                :xs="24"
-                :sm="24"
-                :md="24"
-                :lg="24"
-                :xl="12"
-                v-for="(item, index) in onLineCourselist"
-                :key="index"
-              >
-                <div @click="goDetails(item.id)" class="course u-flex u-row-between" >
-                  <div class="left u-flex">
-                    <el-image
-                        style="width: 87px; height: 65px"
-                        :src="item.img"
-                        fit="cover"
-                    ></el-image>
-                    <div class="text">
-                        <div class="name">{{item.name}}</div>
-                        <div class="info">{{` 共${item.amount || 0}课,已学完${item.finishCount || 0},学习进度${item.finishPercent || 0}% `}}</div>
-                    </div>
-                  </div>
-                  <div class="right">
-                  </div>
-                </div>
-              </el-col>
-            </el-row>
-            <el-empty v-else description="暂无线下课程"></el-empty>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getTrainDetail } from "@/api/SkillTraining";
-export default {
-  name: "",
-  components: {},
-  data() {
-    return {
-        classTypeActive:0,
-        details: {},
-        classTypeList:[
-            {label:'线上课程',name:'0'},
-            {label:'线下实训',name:'1'},
-        ],
-        onLineCourselist:[],
-        offLineCourselist :[]
-    };
-  },
-  created() {
-    this.handleGetTrainDetail();
-  },
-  methods: {
-    handleGetTrainDetail() {
-      getTrainDetail({ id: this.$route.query.id }).then((res) => {
-        this.details = res?.data;
-        this.onLineCourselist = this.details.onLineCourselist;
-        console.log("getTrainDetail", res);
-      });
-    },
-    classTypeClick(){
-
-    },
-    /**
-     * 跳转到指定页面
-     * @date 2022-08-11
-     * @param {any} path
-     * @returns {any}
-     */
-    jumpPage(path, param) {
-      if (path) {
-        this.$router.push({ path: path, query: param });
-      }
-    },
-  },
-};
-</script>
-
-<style lang='scss' scoped>
-.base-info-wrap .app-main-box {
-  margin-top: 0;
-}
-.app-main > .app-main-box{
-    min-height: calc( 100vh - 73px - 400px - 100px - 23px);
-}
-.base-info-wrap {
-  background: #43565f;
-  padding: 35px 0 100px;
-  .base-info-left {
-    // width: 60%;
-    .text {
-      // width: 80%;
-      margin-left: 30px;
-      .text-item {
-        color: #fff;
-        font-size: 16px;
-        margin-bottom: 5px;
-      }
-      .name {
-        font-size: 20px;
-        margin-bottom: 25px;
-      }
-      .progress {
-        width: 25vw;
-        margin-top: 20px;
-      }
-    }
-  }
-
-  .base-info-right {
-    .certificate {
-      background: #6a767d;
-      width: 88px;
-      overflow: hidden;
-      border-radius: 4px;
-      text-align: center;
-      .img-wrap {
-        text-align: center;
-        height: 80px;
-        background: #fff;
-      }
-      .certificate-text {
-        color: #fff;
-        font-size: 14px;
-        line-height: 35px;
-      }
-    }
-  }
-}
-.course{
-    cursor: pointer;
-    padding: 20px;
-    margin-bottom: 20px;
-    background: #FFFFFF;
-    border-radius: 3px;
-    border: 1px solid rgba(0, 0, 0, 0.11);
-    transition: all 0.3s;
-    &:hover{
-        box-shadow: 0 1px 10px 0 rgba(0,0,0,0.11);
-    }
-    .text{
-        color: #666;
-        margin-left: 15px;
-        font-size: 14px;
-        .name{
-            font-size: 20px;
-            margin-bottom: 10px;
-            color: #222;
-        }
-    }
-}
-:deep(.el-tabs){
-    &::after{
-        background-color: transparent;
-    }
-    .el-tabs__nav-wrap{
-        &::after{
-            background-color: transparent;
-        }
-    }
-    .el-tabs__header{
-        margin-bottom: 48px;
-    }
-    .el-tabs__item{
-        font-size: 20px;
-        &.is-active,&:hover{
-            color: #416050;
-        }
-    }
-    .el-tabs__active-bar{
-        background-color: #416050;
-    }
-}
-</style>

src/views/PersonalCenter/SkillTraining/SkillsTrainingDetails/AchievementCertificate/AchievementCertificateIndex.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 我的技能培训 => 技能培训详情 => 成绩和证书
+ * @Author: 空白格
+ * @Date: 2022-08-26 16:50:09
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-26 16:52:11
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails\AchievementCertificate\AchievementCertificateIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div>成绩和证书</div>
+</template>

src/views/PersonalCenter/SkillTraining/SkillsTrainingDetails/CourseVideo/CourseVideoIndex.vue

@@ -0,0 +1,417 @@
+<!--
+ * @Description: 我的技能培训 => 技能培训详情 => 视频详情
+ * @Author: 空白格
+ * @Date: 2022-08-26 17:28:28
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-26 17:39:22
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails\CourseVideo\CourseVideoIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <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-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 {
+  getOnlineCourseDetails,
+  getCommentList,
+  addComment,
+} from "@/api/AdaptiveTraining";
+import { getMyTrainVideoDetails } from '@/api/PersonalCenter'
+export default {
+  name: "CourseVideoIndex",
+  components: {
+    CourseVideo,
+  },
+  data() {
+    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() {
+    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() {
+      getMyTrainVideoDetails({ 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,
+        newPathList = [];
+      if (path) {
+        pathList = path.split("/").filter((item) => item && item.trim());
+        newPathList.push(pathList[0]);
+        for (let i = 1; i < pathList.length; i++) {
+          newPathList.push(newPathList[i - 1] + "/" + pathList[i]);
+        }
+        newPathList.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-details {
+  &-breadcrumb {
+    height: 57px;
+    line-height: 57px;
+    background: #43565f;
+    &-content {
+      width: 70%;
+      height: 57px;
+      line-height: 57px;
+      min-width: 600px;
+      margin: 0 auto;
+      :deep(.el-breadcrumb__inner.is-link) {
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+  }
+  &-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/PersonalCenter/SkillTraining/SkillsTrainingDetails/SkillsTrainingDetailsIndex.vue

@@ -0,0 +1,293 @@
+<!--
+ * @Description: 我的技能培训 => 详情
+ * @Author: 空白格
+ * @Date: 2022-08-26 08:43:06
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-26 17:42:13
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails\SkillsTrainingDetailsIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="app-main">
+    <section class="base-info-wrap">
+      <div class="app-main-box u-flex u-col-top u-row-between">
+        <div class="base-info-left u-flex u-col-top">
+          <el-image
+            style="width: 260px; height: 260px"
+            :src="details.img"
+            fit="cover"
+          ></el-image>
+          <div class="text">
+            <div class="text-item name">{{ details.name }}</div>
+            <div class="text-item u-flex">
+              <span>难度：</span>
+              <el-rate v-model="details.difficult" disabled></el-rate>
+            </div>
+            <div class="text-item">培训学校：{{ details.schoolName }}</div>
+            <div class="text-item">培训导师：{{ details.teacherName }}</div>
+            <div class="text-item">培训周期：{{ details.cycle }}</div>
+            <div class="text-item">报名人数：{{ details.applyCount }}</div>
+            <div class="text-item">开班时间：{{ details.openingTime }}</div>
+            <div class="text-item progress">
+              <div>学习进度</div>
+              <el-progress
+                :percentage="details.finishPercent || 0"
+              ></el-progress>
+            </div>
+          </div>
+        </div>
+        <div class="base-info-right">
+          <div class="certificate" @click="jumpPage('/achievementCertificate')">
+            <div class="img-wrap u-flex u-row-center">
+              <el-image
+                :src="require('@/assets/images/certificate-icon.svg')"
+                style="width: 48px; height: 58px"
+              ></el-image>
+            </div>
+            <span class="certificate-text">成绩与证书</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="app-main-box">
+      <div class="app-main-box-content">
+        <el-tabs v-model="classTypeActive" @tab-click="classTypeClick">
+          <el-tab-pane
+            v-for="(item, index) in classTypeList"
+            :key="index"
+            :label="item.label"
+            :name="item.name"
+          >
+            <div class="" v-if="classTypeActive == 0">
+              <el-row
+                :gutter="16"
+                v-if="onLineCourselist && onLineCourselist.length"
+              >
+                <el-col
+                  class="course-item"
+                  :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="24"
+                  :xl="12"
+                  v-for="(item, index) in onLineCourselist"
+                  :key="index"
+                >
+                  <div
+                    @click="jumpPage('/personalcenter/coursevideo', { id: item.id })"
+                    class="course u-flex u-row-between"
+                  >
+                    <div class="left u-flex">
+                      <el-image
+                        style="width: 87px; height: 65px"
+                        :src="item.img"
+                        fit="cover"
+                      ></el-image>
+                      <div class="text">
+                        <div class="name">{{ item.name }}</div>
+                        <div class="info">
+                          {{
+                            ` 共${item.amount || 0}课,已学完${
+                              item.finishCount || 0
+                            },学习进度${item.finishPercent || 0}% `
+                          }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="right"></div>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-empty v-else description="暂无线上课程"></el-empty>
+            </div>
+
+            <div class="" v-if="classTypeActive == 1">
+              <el-row
+                :gutter="16"
+                v-if="offLineCourselist && offLineCourselist.length"
+              >
+                <el-col
+                  class="course-item"
+                  :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="24"
+                  :xl="12"
+                  v-for="(item, index) in onLineCourselist"
+                  :key="index"
+                >
+                  <div
+                    @click="goDetails(item.id)"
+                    class="course u-flex u-row-between"
+                  >
+                    <div class="left u-flex">
+                      <el-image
+                        style="width: 87px; height: 65px"
+                        :src="item.img"
+                        fit="cover"
+                      ></el-image>
+                      <div class="text">
+                        <div class="name">{{ item.name }}</div>
+                        <div class="info">
+                          {{
+                            ` 共${item.amount || 0}课,已学完${
+                              item.finishCount || 0
+                            },学习进度${item.finishPercent || 0}% `
+                          }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="right"></div>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-empty v-else description="暂无线下课程"></el-empty>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTrainDetail } from "@/api/SkillTraining";
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      classTypeActive: 0,
+      details: {},
+      classTypeList: [
+        { label: "线上课程", name: "0" },
+        { label: "线下实训", name: "1" },
+      ],
+      onLineCourselist: [],
+      offLineCourselist: [],
+    };
+  },
+  created() {
+    this.handleGetTrainDetail();
+  },
+  methods: {
+    handleGetTrainDetail() {
+      getTrainDetail({ id: this.$route.query.id }).then((res) => {
+        this.details = res?.data;
+        this.onLineCourselist = this.details.onLineCourselist;
+        console.log("getTrainDetail", res);
+      });
+    },
+    classTypeClick() {},
+    /**
+     * 跳转到指定页面
+     * @date 2022-08-11
+     * @param {any} path
+     * @returns {any}
+     */
+    jumpPage(path, param) {
+      if (path) {
+        this.$router.push({ path: path, query: param });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.base-info-wrap .app-main-box {
+  margin-top: 0;
+}
+.app-main > .app-main-box {
+  min-height: calc(100vh - 73px - 400px - 100px - 23px);
+}
+.base-info-wrap {
+  background: #43565f;
+  padding: 35px 0 100px;
+  .base-info-left {
+    // width: 60%;
+    .text {
+      // width: 80%;
+      margin-left: 30px;
+      .text-item {
+        color: #fff;
+        font-size: 16px;
+        margin-bottom: 5px;
+      }
+      .name {
+        font-size: 20px;
+        margin-bottom: 25px;
+      }
+      .progress {
+        width: 25vw;
+        margin-top: 20px;
+      }
+    }
+  }
+
+  .base-info-right {
+    .certificate {
+      background: #6a767d;
+      width: 88px;
+      overflow: hidden;
+      border-radius: 4px;
+      text-align: center;
+      .img-wrap {
+        text-align: center;
+        height: 80px;
+        background: #fff;
+      }
+      .certificate-text {
+        color: #fff;
+        font-size: 14px;
+        line-height: 35px;
+      }
+    }
+  }
+}
+.course {
+  cursor: pointer;
+  padding: 20px;
+  margin-bottom: 20px;
+  background: #ffffff;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.11);
+  transition: all 0.3s;
+  &:hover {
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.11);
+  }
+  .text {
+    color: #666;
+    margin-left: 15px;
+    font-size: 14px;
+    .name {
+      font-size: 20px;
+      margin-bottom: 10px;
+      color: #222;
+    }
+  }
+}
+:deep(.el-tabs) {
+  &::after {
+    background-color: transparent;
+  }
+  .el-tabs__nav-wrap {
+    &::after {
+      background-color: transparent;
+    }
+  }
+  .el-tabs__header {
+    margin-bottom: 48px;
+  }
+  .el-tabs__item {
+    font-size: 20px;
+    &.is-active,
+    &:hover {
+      color: #416050;
+    }
+  }
+  .el-tabs__active-bar {
+    background-color: #416050;
+  }
+}
+</style>

src/views/SkillTraining/SkillTrainingIndex.vue

@@ -1,340 +0,0 @@
-<!--
- * @Description: 技能培训
- * @Author: 空白格
- * @Date: 2022-08-11 17:53:41
- * @LastEditors: wangcc
- * @LastEditTime: 2022-08-26 17:20:03
- * @FilePath: \veterans_client_web\src\views\SkillTraining\SkillTrainingIndex.vue
- * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
--->
-<template>
-  <div class="app-main skill-training">
-    <BannerBreadcrumb title="技能培训" />
-    <div class="app-main-box skill-training-content">
-      <!-- 技能包 -->
-      <div
-        class="app-main-box-content skill-training-content-package"
-        v-loading="loading"
-      >
-        <div class="stcp-title">技能包</div>
-        <div class="stcp-list">
-          <el-row :gutter="27">
-            <el-col
-              :xs="24"
-              :sm="12"
-              :md="12"
-              :lg="6"
-              :xl="6"
-              v-for="(item, index) in packageList"
-              :key="index"
-            >
-              <div
-                class="stcp-list-item"
-                @click="jumpPage('/skilltraining/skillpackage', { id: item.id,schoolName:item.schoolName })"
-              >
-                <div class="stcp-list-item-image">
-                  <el-image :src="item.img" class="image" fit="cover">
-                    <div slot="placeholder" class="image-slot">
-                      加载中<span class="dot">...</span>
-                    </div>
-                  </el-image>
-                </div>
-                <div class="stcp-list-item-content">
-                  <div>{{ item.name || "-" }}</div>
-                  <div>{{ item.schoolName || "-" }}</div>
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-          <div class="pagination" v-if="total">
-            <el-pagination
-              background
-              layout="prev, pager, next"
-              :page-size="queryParams.pageSize"
-              :total="total"
-              @current-change="currentChange"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-import BannerBreadcrumb from "@/components/BannerBreadcrumb";
-import {
-  getClassNoticeData,
-  signUpClass,
-  getPackageData,
-  getDurationCount,
-} from "@/api/SkillTraining";
-export default {
-  name: "SkillTrainingIndex",
-  components: {
-    BannerBreadcrumb,
-  },
-  data() {
-    return {
-      classNoticeList: [],
-      queryParams: {
-        pageNum: 1,
-        pageSize: 8,
-      },
-      packageList: [],
-      total: 0,
-      loading: false,
-      learnTime: 0,
-    };
-  },
-  computed: {
-    ...mapState({
-      isLogin: (state) => state.user.isLogin,
-    }),
-  },
-  created() {
-    this.getClassNotice();
-    this.getPackageList();
-    if (this.isLogin) {
-      this.getDuration();
-    }
-  },
-  methods: {
-    /**
-     * 获取报班通知
-     * @date 2022-08-12
-     * @returns {any}
-     */
-    getClassNotice() {
-      getClassNoticeData({ pageNum: 1, pageSize: 5 }).then((res) => {
-        this.classNoticeList = res.rows;
-      });
-    },
-    /**
-     * 获取技能包
-     * @date 2022-08-12
-     * @returns {any}
-     */
-    getPackageList() {
-      this.loading = true;
-      getPackageData(this.queryParams).then((res) => {
-        this.packageList = res.rows;
-        this.total = Number(res.total);
-        this.loading = false;
-      });
-    },
-    /**
-     * 报名操作
-     * @date 2022-08-12
-     * @param {any} packageId
-     * @returns {any}
-     */
-    signUp(packageId) {
-      signUpClass({ packageId }).then((res) => {
-        console.log(res);
-      });
-    },
-    /**
-     * 获取学习时长
-     * @date 2022-08-12
-     * @returns {any}
-     */
-    getDuration() {
-      getDurationCount().then((res) => {
-        this.learnTime = (Number(res.data.learnTime) / 3600).toFixed(2);
-      });
-    },
-    /**
-     * 跳转指定页面
-     * @date 2022-08-16
-     * @param {any} path
-     * @param {any} query
-     * @returns {any}
-     */
-    jumpPage(path, query) {
-      this.$router.push({
-        path,
-        query
-      })
-    },
-    /**
-     * 分页切换
-     * @date 2022-08-12
-     * @param {any} page
-     * @returns {any}
-     */
-    currentChange(page) {
-      this.queryParams.pageNum = page;
-      this.getPackageList();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.skill-training {
-  &-content {
-    padding-bottom: 30px;
-    &-slider {
-      margin-bottom: 20px;
-      padding: 0;
-      .stcs-left {
-        padding: 40px;
-        :deep(.el-carousel__indicators) {
-          // 指示器
-          right: -40px;
-          left: auto;
-        }
-        :deep(.el-carousel__button) {
-          // 指示器按钮
-          width: 10px;
-          height: 10px;
-          border: none;
-          border-radius: 50%;
-          background-color: #d8d8d8;
-        }
-        :deep(.is-active .el-carousel__button) {
-          // 指示器激活按钮
-          width: 25px;
-          border-radius: 10px;
-        }
-        &-item {
-          display: flex;
-          &-left {
-            margin-right: 20px;
-            border: solid 1px #e0e0e0;
-            border-radius: 5px;
-            margin-left: 10px;
-            .image {
-              height: 100%;
-              width: 180px;
-            }
-          }
-          &-right {
-            width: calc(100% - 222px);
-            .class-name {
-              color: #101010;
-              font-size: 30px;
-              font-weight: 500;
-              margin-bottom: 8px;
-            }
-            .school-name {
-              color: #525252;
-              font-size: 20px;
-              margin-bottom: 8px;
-            }
-            .description {
-              color: #9a9a9a;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              word-break: break-all;
-              margin-bottom: 30px;
-            }
-            .sign-up {
-              &-btn {
-                background-color: #709078;
-                color: #fff;
-              }
-            }
-          }
-        }
-      }
-      .stcs-right {
-        height: 240px;
-        padding-top: 40px;
-        background-image: linear-gradient(157deg, #287b4f 0%, #3d5d4c 100%);
-        &-title {
-          text-align: right;
-          color: #fff;
-          font-size: 30px;
-          font-weight: 500;
-          position: relative;
-          width: 160px;
-          margin: 0 auto 60px;
-          &::before {
-            content: "";
-            display: block;
-            width: 40px;
-            height: 38px;
-            background: url("./../../assets/images/my-training-icon.svg")
-              no-repeat center center;
-            position: absolute;
-            left: -10px;
-          }
-        }
-        &-duration {
-          width: 155px;
-          height: 60px;
-          padding: 0 20px;
-          margin: 0 auto;
-          background: #fe7401;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 30px;
-          color: #fff;
-          &-left {
-            border-right: solid 1px #fff;
-            padding-right: 10px;
-            font-size: 16px;
-          }
-          &-right {
-            padding-left: 10px;
-            font-size: 14px;
-            span {
-              font-size: 30px;
-            }
-          }
-        }
-      }
-    }
-    &-package {
-      .stcp-title {
-        color: #1a1a1a;
-        font-size: 26px;
-        padding-top: 10px;
-        margin-bottom: 10px;
-      }
-      .stcp-list {
-        &-item {
-          cursor: pointer;
-          margin-bottom: 20px;
-          &-image {
-            height: 160px;
-            padding: 10px 5;
-            .image {
-              width: 100%;
-              height: 100%;
-            }
-          }
-          &-content {
-            font-size: 22px;
-            color: #3f3f3f;
-            div {
-              margin: 5px 0;
-            }
-            div:last-child {
-              color: #a2a2a2;
-              font-size: 16px;
-            }
-          }
-        }
-        .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;
-          }
-        }
-      }
-    }
-  }
-}
-</style>