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

src/views/AdaptiveTraining/AdaptiveTrainingIndex.vue

@@ -0,0 +1,317 @@
+<!--
+ * @Description: 适应性培训
+ * @Author: 空白格
+ * @Date: 2022-08-12 15:23:44
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-12 17:57:25
+ * @FilePath: \veterans_client_web\src\views\AdaptiveTraining\AdaptiveTrainingIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="app-main adaptive-training">
+    <BannerBreadcrumb title="适应性培训" />
+    <div class="app-main-box">
+      <!-- banner -->
+      <div class="adaptive-training-banner">
+        <div class="adaptive-training-banner-title">适应性培训</div>
+        <div class="adaptive-training-banner-subtitle">
+          -退役军人思想政治教育 -退役军人就业创业指导
+        </div>
+        <div class="adaptive-training-banner-describe">
+          适应性培训课程包含思想政治教育、法律法规政策介绍，就业创业指导、求职技巧指导、服务项目指引等，需看完线上课程后完成适应性培训。
+        </div>
+      </div>
+      <!-- 统计 -->
+      <div class="adaptive-training-statistics">
+        <div class="adaptive-training-statistics-box"></div>
+          <div class="atsb-tab">
+            <div
+              class="atsb-tab-item"
+              v-for="(item, index) in tabList"
+              :key="index"
+              :class="{ 'atsb-tab-active': tabCur === item.value }"
+              @click="tabClick(item)"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+          <div class="atsb-total">
+            <div class="atsb-total-item">
+              <p>已看课程</p>
+              <p><span>8</span>个</p>
+            </div>
+            <div class="atsb-total-item">
+              <p>还需观看</p>
+              <p><span>8</span>个</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 列表 -->
+      <div class="app-main-box-content adaptive-training-list" v-loading="loading" v-if="onlineClassList.length">
+        <el-row :gutter="16">
+          <el-col
+            :xs="24"
+            :sm="24"
+            :md="12"
+            :lg="12"
+            :xl="12"
+            v-for="(item, index) in onlineClassList"
+            :key="index"
+            >
+              <div class="adaptive-training-list-item">
+                <div class="left">
+                  <el-image :src="item.titleImg" class="image" fit="cover">
+                    <div slot="placeholder" class="image-slot">
+                      加载中<span class="dot">...</span>
+                    </div>
+                  </el-image>
+                </div>
+                <div class="right">
+                  <div class="name">{{ item.adaptName }}</div>
+                  <div class="total">共{{ item.amount }}节课，已学完{{ item.finishCount }}节课，学习进度{{ item.finishPercent || 0 }}%</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>
+</template>
+
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import { getTrainingList } from "@/api/AdaptiveTraining";
+export default {
+  name: "AdaptiveTrainingIndex",
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      tabCur: 1,
+      tabList: [
+        { label: "适应性培训", value: 1 },
+        { label: "线下培训", value: 2 },
+      ],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 8,
+      },
+      total: 0,
+      onlineClassList: [],
+      loading: false
+    };
+  },
+  created() {
+    this.getOnlineList();
+  },
+  methods: {
+    tabClick(item) {
+      this.tabCur = item.value;
+    },
+    /**
+     * 获取适应性培训
+     * @date 2022-08-12
+     * @returns {any}
+     */
+    getOnlineList() {
+      this.loading = true
+      getTrainingList(this.queryParams).then((res) => {
+        this.onlineClassList = 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.getOnlineList()
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.adaptive-training {
+  padding-bottom: 30px;
+  &-banner {
+    width: 100%;
+    height: 300px;
+    background: url("./../../assets/images/adaptive-training-banner.png")
+      no-repeat center center;
+    background-size: 100% 100%;
+    &-title {
+      text-align: center;
+      position: relative;
+      font-size: 40px;
+      padding-top: 20px;
+      width: 300px;
+      margin: 0 auto;
+      text-align: justify;
+      text-align-last: justify;
+      color: #fff;
+      &::before {
+        content: "";
+        display: block;
+        width: 26px;
+        height: 26px;
+        background: url("./../../assets/images/star-icon.svg") no-repeat center
+          center;
+        background-size: 100% 100%;
+        position: absolute;
+        left: -30px;
+        top: 30px;
+      }
+    }
+    &-subtitle {
+      width: 90%;
+      margin: 20px auto;
+      padding: 20px 0;
+      text-align: center;
+      color: #fff;
+      font-size: 22px;
+      font-family: SourceHanSansCN;
+      border-top: 1px solid #fff;
+      border-bottom: 1px solid #fff;
+    }
+    &-describe {
+      width: 90%;
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+      margin: 28px auto 0;
+      background: #4d3be0;
+      opacity: 0.8;
+      border: solid 1px #fff;
+      color: #fff;
+      font-size: 14px;
+    }
+  }
+  &-statistics {
+    background-color: #fff;
+    height: 270px;
+    &-box {
+      height: 270px;
+      background-image: url(./../../assets/images/adaptive-training-bg.png);
+      background-repeat: no-repeat;
+      background-position: top center;
+      background-size: 100% 196px;
+      .atsb-tab {
+        display: flex;
+        width: 400px;
+        margin: 0 auto;
+        justify-content: space-between;
+        padding-top: 20px;
+        margin-bottom: 18px;
+        &-item {
+          font-size: 30px;
+          color: #000;
+          border-bottom: 3px solid #fff;
+          padding-bottom: 10px;
+          cursor: pointer;
+          &:hover {
+            color: #335ceb;
+            border-bottom: 3px solid #335ceb;
+          }
+        }
+        &-active {
+          color: #335ceb;
+          border-bottom: 3px solid #335ceb;
+        }
+      }
+      .atsb-total {
+        width: calc(100% - 80px);
+        height: 140px;
+        background: #fff;
+        margin: 0 auto;
+        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.11);
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &-item {
+          text-align: center;
+          &:first-child {
+            margin-right: 15%;
+          }
+          p {
+            color: #656565;
+            font-size: 22px;
+            span {
+              color: #505050;
+              font-size: 40px;
+            }
+            &:last-child {
+              font-size: 20px;
+              margin-top: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+  &-list {
+    margin-top: 10px;
+    &-item {
+      height: 91px;
+      display: flex;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      padding: 18px 15px;
+      cursor: pointer;
+      .left {
+        width: 122px;
+        height: 89px;
+        margin-right: 10px;
+        .image {
+          width: 100%;
+          height: 100%;
+          border-radius: 4px;
+          border: solid 1px #e0e0e0;
+        }
+      }
+      .right {
+        display: flex;
+        flex-direction: column;
+        .name {
+          font-size: 20px;
+          color: #424242;
+          line-height: 30px;
+          margin-bottom: 20px;
+        }
+        .total {
+          font-size: 14px;
+          color: #6F6F6F;
+          padding-left: 10px;
+        }
+      }
+    }
+    .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>