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