技能培训/适应性培训/学历提升/创业指引

src/api/AdaptiveTraining/index.js

@@ -0,0 +1,25 @@
+/**
+ * @Description: 适应性培训
+ * @Author: 空白格
+ * @Date: 2022-08-12 17:34:57
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-12 17:36:01
+ * @FilePath: \veterans_client_web\src\api\AdaptiveTraining\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from '@/utils/request'
+/**
+ * 获取适应性培训列表
+ * @param {*} params
+ * @returns
+ */
+export function getTrainingList(params) {
+  return request({
+    url: '/app/adaptTrainOnline/queryList',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}

src/api/EducationPromote/index.js

@@ -0,0 +1,42 @@
+/**
+ * @Description: 学历提升
+ * @Author: 空白格
+ * @Date: 2022-08-12 14:54:05
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-12 15:01:16
+ * @FilePath: \veterans_client_web\src\api\EducationPromote\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from '@/utils/request'
+
+/**
+ * 获取学院列表
+ * @param {*} params
+ * @returns
+ */
+export function getSchoolListData(params) {
+  return request({
+    url: '/app/school/selectList',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}
+
+/**
+ * 获取学院活动列表
+ * @param {*} params
+ * @returns
+ */
+export function getActivityBySchool(params) {
+  return request({
+    url: '/app/learnpackage/list/' + params.schoolId,
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}

src/api/SkillTraining/index.js

@@ -0,0 +1,67 @@
+/**
+ * @Description: 技能培训
+ * @Author: 空白格
+ * @Date: 2022-08-12 09:31:28
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-12 11:32:00
+ * @FilePath: \veterans_client_web\src\api\SkillTraining\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from '@/utils/request'
+/**
+ * 获取报班通知数据
+ * @param {*} params
+ * @returns
+ */
+export function getClassNoticeData(params) {
+  return request({
+    url: '/app/learnpackage/classNoticeList',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}
+
+/**
+ * 获取技能包数据
+ * @param {*} params
+ * @returns
+ */
+export function getPackageData(params) {
+  return request({
+    url: '/app/learnpackage/skillList',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}
+
+/**
+ * 获取个人学习时长数据
+ * @param {*} params
+ * @returns
+ */
+export function getDurationCount(params) {
+  return request({
+    url: '/app/learnpackage/count',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 报名班级
+ * @param {*} params
+ * @returns
+ */
+export function signUpClass(data) {
+  return request({
+    url: '/app/learnmember',
+    method: 'post',
+    data
+  })
+}

src/api/WorkGuide/index.js

@@ -0,0 +1,22 @@
+/**
+ * @Description: 创业指导
+ * @Author: 空白格
+ * @Date: 2022-08-12 13:03:10
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-12 13:43:09
+ * @FilePath: \veterans_client_web\src\api\WorkGuide\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from '@/utils/request'
+/**
+ * 获取创业指导列表
+ * @param {*} params
+ * @returns
+ */
+export function getWorkGuideData(params) {
+  return request({
+    url: '/app/guidance',
+    method: 'get',
+    params
+  })
+}

src/assets/styles/common.scss

@@ -0,0 +1,11 @@
+.app-main {
+  &-box {
+    width: calc(70% + 40px);
+    min-width: 600px;
+    margin: 23px auto 0;
+    &-content {
+      padding: 20px;
+      background-color: #fff;
+    }
+  }
+}

src/assets/styles/index.scss

@@ -1 +1,2 @@
-@import './reset.scss';
+@import './reset.scss';
+@import './common.scss';

src/assets/styles/reset.scss

@@ -1,9 +1,8 @@
+/* 初始化样式 */
 html,
 body,
 div,
 span,
-applet,
-object,
 h1,
 h2,
 h3,
@@ -11,72 +10,30 @@ h4,
 h5,
 h6,
 p,
-blockquote,
-pre,
 a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
 em,
 img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
 sub,
 sup,
-tt,
-var,
 b,
 u,
 i,
-center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
-fieldset,
 form,
 label,
-legend,
 table,
-caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
 footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
 video {
   margin: 0;
   padding: 0;

src/router/index.js

@@ -59,11 +59,36 @@ const routes = [
       {
         path: 'skilltraining',
         name: 'SkillTrainingIndex',
-        component: () =>
-          import('@/views/SkillTraining/SkillTrainingIndex.vue'),
+        component: () => import('@/views/SkillTraining/SkillTrainingIndex.vue'),
         meta: {
           title: '技能培训'
         }
+      },
+      {
+        path: 'workguide',
+        name: 'WorkGuideIndex',
+        component: () => import('@/views/WorkGuide/WorkGuideIndex.vue'),
+        meta: {
+          title: '创业指引'
+        }
+      },
+      {
+        path: 'educationpromote',
+        name: 'EducationPromoteIndex',
+        component: () =>
+          import('@/views/EducationPromote/EducationPromoteIndex.vue'),
+        meta: {
+          title: '学历提升'
+        }
+      },
+      {
+        path: 'adaptivetraining',
+        name: 'AdaptiveTrainingIndex',
+        component: () =>
+          import('@/views/AdaptiveTraining/AdaptiveTrainingIndex.vue'),
+        meta: {
+          title: '适应性培训'
+        }
       }
     ]
   },

src/utils/request.js

@@ -49,7 +49,7 @@ service.interceptors.response.use(
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 鉴权校验
-    if (code === 400) {
+    if (code === 401) {
       MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
         confirmButtonText: '重新登录',
         cancelButtonText: '取消',

src/views/CooperativeColleges/CooperativeCollegesIndex.vue

@@ -3,15 +3,15 @@
  * @Author: 空白格
  * @Date: 2022-08-11 17:17:33
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-11 17:48:45
+ * @LastEditTime: 2022-08-12 09:13:31
  * @FilePath: \veterans_client_web\src\views\CooperativeColleges\CooperativeCollegesIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div class="cooperative-colleges">
+  <div class="app-main cooperative-colleges">
     <BannerBreadcrumb title="合作院校" />
-    <div class="cooperative-colleges-content" v-loading="loading">
-      <div class="cooperative-colleges-content-list">
+    <div class="app-main-box cooperative-colleges-content" v-loading="loading">
+      <div class="app-main-box-content cooperative-colleges-content-list">
         <el-row :gutter="16">
           <el-col
             :xs="24"
@@ -138,12 +138,8 @@ export default {
 <style lang="scss" scoped>
 .cooperative-colleges {
   &-content {
-    width: calc(70% + 40px);
-    min-width: 600px;
-    margin: 23px auto 0;
     &-list {
-      padding: 20px 20px 100px;
-      background-color: #fff;
+      padding-bottom: 100px;
       .company-list-item {
         display: flex;
         box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

src/views/CooperativeEnterprise/CooperativeEnterpriseIndex.vue

@@ -3,15 +3,15 @@
  * @Author: 空白格
  * @Date: 2022-08-11 16:00:30
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-11 17:49:37
+ * @LastEditTime: 2022-08-12 09:12:32
  * @FilePath: \veterans_client_web\src\views\CooperativeEnterprise\CooperativeEnterpriseIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div class="cooperative-enterprise">
+  <div class="app-main cooperative-enterprise">
     <BannerBreadcrumb title="合作企业" />
-    <div class="cooperative-enterprise-content">
-      <div class="cooperative-enterprise-content-list" v-loading="loading">
+    <div class="app-main-box cooperative-enterprise-content">
+      <div class="app-main-box-content cooperative-enterprise-content-list" v-loading="loading">
         <el-tabs v-model="queryParams.trade" @tab-click="handleClick">
           <el-tab-pane
             v-for="(item, index) in companyTradeList"
@@ -182,12 +182,8 @@ export default {
 <style lang="scss" scoped>
 .cooperative-enterprise {
   &-content {
-    width: calc(70% + 40px);
-    min-width: 600px;
-    margin: 23px auto 0;
     &-list {
-      padding: 20px 20px 100px;
-      background-color: #fff;
+      padding-bottom: 100px;
       :deep(.el-tabs__item) {
         font-size: 20px;
         font-weight: 500;

src/views/EducationPromote/EducationPromoteIndex.vue

@@ -0,0 +1,320 @@
+<!--
+ * @Description: 学历提升
+ * @Author: 空白格
+ * @Date: 2022-08-12 13:47:26
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-12 15:22:31
+ * @FilePath: \veterans_client_web\src\views\EducationPromote\EducationPromoteIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="app-main education-promote">
+    <BannerBreadcrumb title="学历提升" />
+    <div class="app-main-box">
+      <!-- banner图 -->
+      <div class="education-promote-banner">
+        <el-image
+          class="image"
+          :src="require('@/assets/images/education-promote-banner.png')"
+          fit="cover"
+        ></el-image>
+      </div>
+      <!-- 特点 -->
+      <div class="education-promote-effect">
+        <div class="education-promote-effect-item">
+          <p>提升作用</p>
+          <p>学历提升</p>
+        </div>
+        <div class="education-promote-effect-item">
+          <p>提升流程</p>
+          <p>学历提升</p>
+        </div>
+        <div class="education-promote-effect-item">
+          <p>提升方式</p>
+          <p>学历提升</p>
+        </div>
+      </div>
+      <!-- 热门活动 -->
+      <div class="app-main-box-content education-promote-activity">
+        <div class="education-promote-activity-header">
+          <el-row :gutter="80">
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+              <div class="epah-left">
+                <div class="epah-left-select">
+                  <el-select
+                    v-model="queryParams.schoolId"
+                    placeholder="请选择学院"
+                    style="width: 100%"
+                    filterable
+                    @change="schoolChange"
+                  >
+                    <el-option
+                      v-for="(item, index) in schoolList"
+                      :key="index"
+                      :label="item.school_name"
+                      :value="item.id"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="epah-left-btn">学院详情</div>
+              </div>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+              <div class="epah-right">
+                <div class="epah-right-text">招生简章</div>
+                <div class="epah-right-btn">立即查看</div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div
+          class="education-promote-activity-list"
+          v-if="activityList.length"
+          v-loading="loading"
+        >
+          <el-row :gutter="24">
+            <el-col
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="6"
+              :xl="6"
+              v-for="(item, index) in activityList"
+              :key="index"
+            >
+              <div class="epal-item">
+                <div class="epal-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>
+                <p>{{ item.name || "-" }}</p>
+                <p>{{ item.schoolName || "-" }}</p>
+              </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>
+        <el-empty description="列表数据为空" v-else></el-empty>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import { getSchoolListData, getActivityBySchool } from "@/api/EducationPromote";
+export default {
+  name: "EducationPromoteIndex",
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      schoolList: [],
+      queryParams: {
+        schoolId: undefined,
+        pageNum: 1,
+        pageSize: 8,
+      },
+      activityList: [],
+      total: 0,
+      loading: false
+    };
+  },
+  created() {
+    this.getSchoolList();
+  },
+  methods: {
+    /**
+     * 获取学院列表
+     * @date 2022-08-12
+     * @returns {any}
+     */
+    getSchoolList() {
+      getSchoolListData().then((res) => {
+        this.schoolList = res.data;
+        this.queryParams.schoolId = res.data[0].id;
+        this.getACtivityList();
+      });
+    },
+    /**
+     * 获取学院活动列表
+     * @date 2022-08-12
+     * @returns {any}
+     */
+    getACtivityList() {
+      this.loading = true
+      getActivityBySchool(this.queryParams).then((res) => {
+        this.activityList = res.rows;
+        this.total = Number(res.total);
+        this.loading = false
+      });
+    },
+    /**
+     * 分页切换触发
+     * @date 2022-08-12
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getACtivityList();
+    },
+    /**
+     * 学院切换
+     * @date 2022-08-12
+     * @param {any} val
+     * @returns {any}
+     */
+    schoolChange(val) {
+      this.queryParams.schoolId = val
+      this.queryParams.pageNum = 1
+      this.getACtivityList();
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.education-promote {
+  padding-bottom: 30px;
+  &-banner {
+    width: 100%;
+    height: 295px;
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &-effect {
+    width: 100%;
+    height: 160px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fff;
+    &-item {
+      width: 33%;
+      text-align: center;
+      p {
+        color: #3d5d4c;
+        font-size: 34px;
+        &:last-child {
+          background-color: #8ead9c;
+          color: #fff;
+          font-size: 24px;
+          width: 140px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          margin: 10px auto 0;
+          border-radius: 20px;
+          font-weight: normal;
+        }
+      }
+    }
+  }
+  &-activity {
+    margin-top: 10px;
+    &-header {
+      margin-bottom: 40px;
+      .epah-left {
+        display: flex;
+        &-select {
+          width: calc(100% - 171px);
+          :deep(.el-input__inner) {
+            height: 50px;
+            line-height: 50px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        }
+        &-btn {
+          width: 171px;
+          height: 50px;
+          line-height: 50px;
+          text-align: center;
+          background-color: #a4c5df;
+          color: #fff;
+          border-radius: 0 5px 5px 0;
+          cursor: pointer;
+        }
+      }
+      .epah-right {
+        background-color: #678f7a;
+        height: 50px;
+        line-height: 50px;
+        border-radius: 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 27px;
+        &-text {
+          color: #fff;
+          font-size: 20px;
+          font-weight: 700;
+        }
+        &-btn {
+          background-color: #fff;
+          border-radius: 19px;
+          width: 100px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          font-size: 14px;
+          color: #678f7a;
+          cursor: pointer;
+        }
+      }
+    }
+    &-list {
+      .epal-item {
+        margin-bottom: 20px;
+        cursor: pointer;
+        &-image {
+          height: 180px;
+          width: 100%;
+          margin-bottom: 5px;
+          .image {
+            width: 100%;
+            height: 100%;
+            border: solid 1px #e0e0e0;
+            border-radius: 2px;
+          }
+        }
+        p {
+          font-size: 20px;
+          color: #3f3f3f;
+          margin-bottom: 5px;
+          &: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>

src/views/Home/HomeIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 11:26:40
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-11 17:55:45
+ * @LastEditTime: 2022-08-12 15:25:22
  * @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -134,34 +134,37 @@ export default {
         {
           name: "招聘就业",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-2.svg"),
-          path: '/recruitmentemployment'
+          path: "/recruitmentemployment",
         },
         {
           name: "合作企业",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-3.svg"),
-          path: '/cooperativeenterprise'
+          path: "/cooperativeenterprise",
         },
         {
           name: "合作院校",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-4.svg"),
-          path: '/cooperativecolleges'
+          path: "/cooperativecolleges",
         },
         {
           name: "技能培训",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-5.svg"),
-          path: '/skilltraining'
+          path: "/skilltraining",
         },
         {
           name: "适应性培训",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-6.svg"),
+          path: '/adaptivetraining'
         },
         {
           name: "学历提升",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-7.svg"),
+          path: '/educationpromote'
         },
         {
           name: "创业指引",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-8.svg"),
+          path: '/workguide'
         },
       ],
       newsList: [],
@@ -307,7 +310,7 @@ export default {
       }
       &-name {
         text-align: center;
-        margin-top: 24px;
+        margin-top: 15px;
       }
     }
     &-news {
@@ -366,13 +369,13 @@ export default {
           color: #000000;
         }
         :deep(.el-tabs__item:hover) {
-          color: #163DA5;
+          color: #163da5;
         }
         :deep(.el-tabs__item.is-active) {
-          color: #163DA5;
+          color: #163da5;
         }
         :deep(.el-tabs__active-bar) {
-          background-color: #163DA5;
+          background-color: #163da5;
         }
         .news-infomation {
           &-item {

src/views/PolicyAdvice/PolicyAdviceIndex.vue

@@ -3,15 +3,15 @@
  * @Author: 空白格
  * @Date: 2022-08-11 09:15:53
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-11 17:08:38
+ * @LastEditTime: 2022-08-12 08:58:41
  * @FilePath: \veterans_client_web\src\views\PolicyAdvice\PolicyAdviceIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div class="policy-advice">
+  <div class="app-main policy-advice">
     <BannerBreadcrumb title="政策咨询"/>
     <!-- 内容 -->
-    <div class="policy-advice-box">
+    <div class="app-main-box policy-advice-box">
       <div class="policy-advice-box-logo">
         <el-image
           class="image"
@@ -19,7 +19,7 @@
           fit="cover"
         ></el-image>
       </div>
-      <div class="policy-advice-box-policy">
+      <div class="app-main-box-content policy-advice-box-policy">
         <el-tabs v-model="queryParams.artCategoryId" @tab-click="handleClick">
           <el-tab-pane
             v-for="(item, index) in policyTypeList"
@@ -109,10 +109,6 @@ export default {
 <style lang="scss" scoped>
 .policy-advice {
   &-box {
-    width: calc(70% + 40px);
-    min-width: 600px;
-    margin: 23px auto 0;
-    background-color: #fff;
     &-logo {
       width: 100%;
       height: 157px;
@@ -122,7 +118,6 @@ export default {
       }
     }
     &-policy {
-      padding: 20px 20px 100px;
       min-height: 400px;
       :deep(.el-tabs__item) {
         font-size: 20px;

src/views/RecruitmentEmployment/RecruitmentEmploymentIndex.vue

@@ -3,19 +3,19 @@
  * @Author: 空白格
  * @Date: 2022-08-11 13:25:43
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-11 17:12:50
+ * @LastEditTime: 2022-08-12 09:10:10
  * @FilePath: \veterans_client_web\src\views\RecruitmentEmployment\RecruitmentEmploymentIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div class="recruitment-employment">
+  <div class="app-main recruitment-employment">
     <BannerBreadcrumb title="招聘就业" />
-    <div class="recruitment-employment-content">
+    <div class="app-main-box recruitment-employment-content">
       <!-- 企业推荐 -->
-      <div class="enterprise-recommendation">
+      <div class="app-main-box-content enterprise-recommendation">
         <div class="enterprise-recommendation-title">
           <div class="title">企业推荐</div>
-          <div class="more">更多</div>
+          <div class="more" @click="jumpPage">更多</div>
         </div>
         <div class="enterprise-recommendation-list">
           <el-carousel
@@ -79,7 +79,7 @@
         </div>
       </div>
       <!-- 最新招聘 -->
-      <div class="latest-recruitment" v-loading="loading">
+      <div class="app-main-box-content latest-recruitment" v-loading="loading">
         <div class="latest-recruitment-title">
           <div class="title">最新招聘</div>
         </div>
@@ -248,6 +248,9 @@ export default {
       });
       return label;
     },
+    jumpPage() {
+      this.$router.push('/cooperativeenterprise')
+    }
   },
 };
 </script>
@@ -255,14 +258,9 @@ export default {
 <style lang="scss" scoped>
 .recruitment-employment {
   &-content {
-    width: calc(70% + 40px);
-    min-width: 600px;
-    margin: 0 auto;
     padding-bottom: 100px;
     .enterprise-recommendation {
-      background-color: #fff;
       margin-top: 22px;
-      padding: 36px 20px 20px;
       &-title {
         display: flex;
         justify-content: space-between;
@@ -339,9 +337,7 @@ export default {
       }
     }
     .latest-recruitment {
-      background-color: #fff;
       margin-top: 22px;
-      padding: 20px 20px 60px;
       &-title {
         margin-bottom: 20px;
         .title {
@@ -403,10 +399,10 @@ export default {
       .pagination {
         text-align: center;
         :deep(.el-pager .active) {
-          background-color: #FF3939;
+          background-color: #ff3939;
         }
         :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
-          background-color: #FF3939;
+          background-color: #ff3939;
         }
       }
     }

src/views/SkillTraining/SkillTrainingIndex.vue

@@ -3,38 +3,369 @@
  * @Author: 空白格
  * @Date: 2022-08-11 17:53:41
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-11 17:59:11
+ * @LastEditTime: 2022-08-12 13:34:34
  * @FilePath: \veterans_client_web\src\views\SkillTraining\SkillTrainingIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div class="skill-training">
+  <div class="app-main skill-training">
     <BannerBreadcrumb title="技能培训" />
-    <div class="skill-training-content">
-      <div class="skill-training-content-slider">技能培训</div>
+    <div class="app-main-box skill-training-content">
+      <!-- 轮播课程 -->
+      <div class="app-main-box-content skill-training-content-slider">
+        <el-row>
+          <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
+            <div class="stcs-left">
+              <el-carousel height="200px" :autoplay="false" arrow="never">
+                <el-carousel-item
+                  class="stcs-left-item"
+                  v-for="(item, index) in classNoticeList"
+                  :key="index"
+                >
+                  <div class="stcs-left-item-left">
+                    <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="stcs-left-item-right">
+                    <div class="class-name">{{ item.name }}</div>
+                    <div class="school-name">{{ item.schoolName }}</div>
+                    <div class="description" v-html="item.description"></div>
+                    <div class="sign-up">
+                      <el-button
+                        round
+                        class="sign-up-btn"
+                        @click="signUp(item.id)"
+                        >报名</el-button
+                      >
+                    </div>
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+            <div class="stcs-right">
+              <div class="stcs-right-title">我的培训</div>
+              <div class="stcs-right-duration">
+                <div class="stcs-right-duration-left">学习<br />时长</div>
+                <div class="stcs-right-duration-right">
+                  <span>{{ learnTime || 0 }}</span
+                  >小时
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <!-- 技能包 -->
+      <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">
+                <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-12
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getPackageList();
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .skill-training {
   &-content {
-    width: calc(70% + 40px);
-    min-width: 600px;
-    margin: 23px auto 0;
+    padding-bottom: 30px;
     &-slider {
-      padding: 20px 20px 100px;
-      background-color: #fff;
+      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;
+          &-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;
+          }
+        }
+      }
     }
   }
 }

src/views/WorkGuide/WorkGuideIndex.vue

@@ -0,0 +1,170 @@
+<!--
+ * @Description: 创业指引
+ * @Author: 空白格
+ * @Date: 2022-08-12 11:41:14
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-12 13:41:14
+ * @FilePath: \veterans_client_web\src\views\WorkGuide\WorkGuideIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="app-main work-guide">
+    <BannerBreadcrumb title="创业指引" />
+    <div class="app-main-box">
+      <div class="app-main-box-content">
+        <div
+          class="work-guide-list"
+          v-if="guideList.length"
+          v-loading="loading"
+        >
+          <el-row :gutter="16">
+            <el-col
+              :xs="24"
+              :sm="24"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              v-for="(item, index) in guideList"
+              :key="index"
+            >
+              <div class="work-guide-list-item">
+                <div class="wgli-title">{{ item.title }}</div>
+                <div class="wgli-description" v-html="item.description"></div>
+                <div class="wgli-footer">
+                  <div class="wgli-footer-reply">
+                    <template v-if="item.replyStatus === 0">
+                      <span class="no-reply">待专家回复</span>
+                    </template>
+                    <template v-else>
+                      <span class="replyed">专家已回复</span>
+                    </template>
+                  </div>
+                  <div class="wgli-footer-date" v-if="item.createTime">
+                    {{ parseTime(item.createTime, "{y}-{m}-{d} {h}:{i}") }} 提交
+                  </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>
+        <el-empty description="列表数据为空" v-else></el-empty>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import { getWorkGuideData } from "@/api/WorkGuide";
+import { parseTime } from "@/utils/utils";
+export default {
+  name: "WorkGuideIndex",
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      loading: false,
+      guideList: [],
+      parseTime: parseTime,
+    };
+  },
+  created() {
+    this.getWorkGuideList();
+  },
+  methods: {
+    /**
+     * 获取创业指导列表
+     * @date 2022-08-12
+     * @returns {any}
+     */
+    getWorkGuideList() {
+      this.loading = true;
+      getWorkGuideData(this.queryParams).then((res) => {
+        this.guideList = res.rows;
+        this.total = Number(res.total);
+        this.loading = false;
+      });
+    },
+    /**
+     * 分页切换
+     * @date 2022-08-12
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getWorkGuideList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.work-guide {
+  padding-bottom: 30px;
+  &-list {
+    &-item {
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      border-radius: 3px;
+      margin-bottom: 20px;
+      .wgli-title {
+        font-size: 26px;
+        color: #000;
+        margin-bottom: 5px;
+      }
+      .wgli-description {
+        width: 100%;
+        font-size: 14px;
+        margin-bottom: 15px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+      }
+      .wgli-footer {
+        display: flex;
+        justify-content: space-between;
+        &-reply {
+          font-size: 14px;
+          .no-reply {
+            color: #ef6622;
+          }
+          .replyed {
+            color: #3ca7fe;
+          }
+        }
+        &-date {
+          color: #9f9f9f;
+          font-size: 14px;
+        }
+      }
+    }
+    .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>