我的技能培训视频详情

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

@@ -261,7 +261,16 @@ const routes = [
         component: () =>
           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: '课程视频'
         }
       },
       {

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

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-26 08:43:06
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-26 16:51:39
+ * @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.
 -->
@@ -51,79 +51,97 @@
     </section>
     <div class="app-main-box">
       <div class="app-main-box-content">
-        <el-tabs
-          v-model="classTypeActive"
-          @tab-click="classTypeClick"
-        >
+        <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 class="" v-if="classTypeActive == 0">
+              <el-row
+                :gutter="16"
+                v-if="onLineCourselist && onLineCourselist.length"
               >
-                <div @click="jumpPage('/coursevideo',{id:item.id})" class="course u-flex u-row-between" >
-                  <div class="left u-flex">
-                    <el-image
+                <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>
+                      ></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>
-                  <div class="right">
-
-                  </div>
-                </div>
-              </el-col>
-            </el-row>
-            <el-empty v-else description="暂无线上课程"></el-empty>
+                </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 class="" v-if="classTypeActive == 1">
+              <el-row
+                :gutter="16"
+                v-if="offLineCourselist && offLineCourselist.length"
               >
-                <div @click="goDetails(item.id)" class="course u-flex u-row-between" >
-                  <div class="left u-flex">
-                    <el-image
+                <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>
+                      ></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>
-                  <div class="right">
-                  </div>
-                </div>
-              </el-col>
-            </el-row>
-            <el-empty v-else description="暂无线下课程"></el-empty>
+                </el-col>
+              </el-row>
+              <el-empty v-else description="暂无线下课程"></el-empty>
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -139,14 +157,14 @@ export default {
   components: {},
   data() {
     return {
-        classTypeActive:0,
-        details: {},
-        classTypeList:[
-            {label:'线上课程',name:'0'},
-            {label:'线下实训',name:'1'},
-        ],
-        onLineCourselist:[],
-        offLineCourselist :[]
+      classTypeActive: 0,
+      details: {},
+      classTypeList: [
+        { label: "线上课程", name: "0" },
+        { label: "线下实训", name: "1" },
+      ],
+      onLineCourselist: [],
+      offLineCourselist: [],
     };
   },
   created() {
@@ -160,9 +178,7 @@ export default {
         console.log("getTrainDetail", res);
       });
     },
-    classTypeClick(){
-
-    },
+    classTypeClick() {},
     /**
      * 跳转到指定页面
      * @date 2022-08-11
@@ -178,12 +194,12 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
+<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);
+.app-main > .app-main-box {
+  min-height: calc(100vh - 73px - 400px - 100px - 23px);
 }
 .base-info-wrap {
   background: #43565f;
@@ -229,48 +245,49 @@ export default {
     }
   }
 }
-.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;
-        }
+.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;
-        }
+:deep(.el-tabs) {
+  &::after {
+    background-color: transparent;
+  }
+  .el-tabs__nav-wrap {
+    &::after {
+      background-color: transparent;
     }
-    .el-tabs__active-bar{
-        background-color: #416050;
+  }
+  .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

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-11 17:53:41
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-26 10:46:20
+ * @LastEditTime: 2022-08-26 17:25:03
  * @FilePath: \veterans_client_web\src\views\SkillTraining\SkillTrainingIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -30,7 +30,9 @@
             >
               <div
                 class="stcp-list-item"
-                @click="jumpPage('/skilltraining/skillpackage', { id: item.id })"
+                @click="
+                  jumpPage('/skilltraining/skillpackage', { id: item.id })
+                "
               >
                 <div class="stcp-list-item-image">
                   <el-image :src="item.img" class="image" fit="cover">
@@ -155,8 +157,8 @@ export default {
     jumpPage(path, query) {
       this.$router.push({
         path,
-        query
-      })
+        query,
+      });
     },
     /**
      * 分页切换
@@ -293,7 +295,7 @@ export default {
     &-package {
       .stcp-title {
         color: #1a1a1a;
-        font-size: 26px;
+        font-size: 22px;
         padding-top: 10px;
         margin-bottom: 10px;
       }
@@ -303,21 +305,23 @@ export default {
           margin-bottom: 20px;
           &-image {
             height: 160px;
-            padding: 10px 5;
+            padding: 10px 5px;
             .image {
               width: 100%;
               height: 100%;
+              border-radius: 5px;
+              border: solid 1px #d0d0d0;
             }
           }
           &-content {
-            font-size: 22px;
+            font-size: 18px;
             color: #3f3f3f;
             div {
               margin: 5px 0;
             }
             div:last-child {
               color: #a2a2a2;
-              font-size: 16px;
+              font-size: 14px;
             }
           }
         }