veterans_client_web/src/views/AdaptiveTraining/AdaptiveTrainingIndex.vue

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