适应性培训调整

src/views/AdaptiveTraining/AdaptiveTrainingIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 15:23:44
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-22 13:53:11
+ * @LastEditTime: 2022-08-22 17:55:12
  * @FilePath: \veterans_client_web\src\views\AdaptiveTraining\AdaptiveTrainingIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -26,7 +26,7 @@
           class="attc-item"
           v-for="(item, index) in tabList"
           :key="index"
-          :class="{ 'active': tabCur === item.value }"
+          :class="{ active: tabCur === item.value }"
           @click="tabClick(item.value)"
         >
           {{ item.label }}
@@ -51,6 +51,73 @@
             <el-button class="atcs-right-btn">开始学习</el-button>
           </div>
         </div>
+        <div
+          class="adaptive-training-content-list"
+          v-if="onlineObj.list.length"
+        >
+          <div
+            class="atcl-item"
+            v-for="(item, index) in onlineObj.list"
+            :key="index"
+          >
+            <div class="atcl-item-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="atcl-item-right">
+              <div class="name">{{ item.adaptName }}</div>
+              <div class="total">
+                共{{ item.amount || 0 }}节课，已学完{{
+                  item.finishCount || 0
+                }}节课，学习进度{{ item.finishPercent || 0 }}%
+              </div>
+            </div>
+          </div>
+          <div class="pagination" v-if="onlineObj.total">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="onlineObj.queryParams.pageSize"
+              :total="onlineObj.total"
+              @current-change="onlineCurrentChange"
+            />
+          </div>
+        </div>
+        <el-empty description="列表数据为空" v-else></el-empty>
+      </template>
+      <template v-else>
+        <div class="adaptive-training-content-statistics">
+          <div class="atcs-total" v-if="trainingTotal.status === 1">
+            <div class="atcs-total-item">
+              <p>未参加线下培训</p>
+              <p>（注：必须参加线下培训才能通过适应性培训）</p>
+            </div>
+          </div>
+          <div class="atcs-total" v-else>
+            <div class="atcs-total-item">
+              <p>已参加线下培训</p>
+              <p>（注：必须参加线下培训才能通过适应性培训）</p>
+            </div>
+          </div>
+        </div>
+        <div class="adaptive-training-content-list">
+          <div
+            class="atcl-item"
+            v-for="(item, index) in offlineObj.list"
+            :key="index"
+          >
+            <div class="atcl-item-offline">
+              <p class="name">{{ item.adaptName || "-" }}</p>
+              <div class="bottom">
+                <div>{{ item.adaptAddress || "-" }}</div>
+                <div>{{ parseTime(item.createTime) || "-" }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
       </template>
     </div>
   </div>
@@ -181,6 +248,7 @@ export default {
 
 <style lang="scss" scoped>
 .adaptive-training {
+  padding-bottom: 84px;
   &-banner {
     width: 100%;
     height: 424px;
@@ -260,7 +328,7 @@ export default {
           &:last-child {
             position: relative;
             &::before {
-              content: '';
+              content: "";
               display: inline-block;
               width: 2px;
               height: 22px;
@@ -278,14 +346,93 @@ export default {
       }
       .atcs-right {
         &-btn {
-          background: #FF700B;
+          background: #ff700b;
           color: #fff;
-          border: solid 1px #FF700B;
+          border: solid 1px #ff700b;
           &:hover {
             opacity: 0.8;
           }
         }
       }
+      .atcs-total {
+        text-align: center;
+        width: 100%;
+        p {
+          color: #656565;
+          font-size: 20px;
+          span {
+            color: #505050;
+            font-size: 40px;
+          }
+          &:last-child {
+            font-size: 14px;
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+    &-list {
+      padding: 32px 19px;
+      background: #fff;
+      margin-top: 17px;
+      .atcl-item {
+        padding: 18px 27px;
+        background: #ffffff;
+        box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.11);
+        border-radius: 3px;
+        margin-bottom: 17px;
+        display: flex;
+        cursor: pointer;
+        &-left {
+          margin-right: 10px;
+          .image {
+            width: 122px;
+            height: 89px;
+            border: solid 1px #e0e0e0;
+            border-radius: 5px;
+          }
+        }
+        &-right {
+          width: calc(100% - 132px);
+          .name {
+            font-size: 16px;
+            color: #424242;
+            font-weight: 500;
+            margin-bottom: 30px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-break: break-all;
+          }
+          .total {
+            font-size: 14px;
+            color: #6f6f6f;
+          }
+        }
+        .atcl-item-offline {
+          width: 100%;
+          .name {
+            font-size: 20px;
+            color: #424242;
+            margin-bottom: 20px;
+          }
+          .bottom {
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            color: #6f6f6f;
+          }
+        }
+      }
+    }
+  }
+  .pagination {
+    text-align: center;
+    :deep(.el-pager .active) {
+      background-color: #ff3939;
+    }
+    :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
+      background-color: #ff3939;
     }
   }
 }