我的技能培训页面实现

src/views/PersonalCenter/SkillTraining/SkillTrainingIndex.vue

@@ -2,11 +2,324 @@
  * @Description: 我的技能培训
  * @Author: 空白格
  * @Date: 2022-08-24 10:02:17
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-24 10:02:17
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-08-25 15:35:51
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillTrainingIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>我的技能培训</div>
+  <div>
+    <banner title="我的技能培训" :breadcrumb="false"></banner>
+    <div class="breadcrumb">
+      <div class="_container">
+        <div class="banner-breadcrumb-breadcrumb">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/personalcenter'}">我的</el-breadcrumb-item>
+            <el-breadcrumb-item>我的技能培训</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+      </div>
+    </div>
+    <div class="deliverBox">
+      <div class="_container">
+        <div class="box-list">
+          <div class="tabs">
+            <span  @click="tabsClick(index)" :class="{activeSpan:currentClass==index}" v-for="(item,index) in tabsList" :key="index">{{item.name}}</span>
+          </div>
+          <div style="display:table;width:100%">
+            <div class="deliverList-box">
+              <div class="line"></div>
+              <h3 class="title-h3">检验分析培训</h3>
+              <div class="deliver">
+                <div class="log">
+                  <img src="@/assets/images/log.png" alt />
+                </div>
+                <div class="center">
+                  <h3>培训学校：贵州工业职业技术学院</h3>
+                  <p style="display: flex;"><span style="margin-right:6px">难度</span><el-rate v-model="value" disabled text-color="#ff9900"></el-rate></p>
+                  <p class="comment">报名人数：16/60</p>
+                  <p class="comment">培训周期：2个月</p>
+                </div>
+                <div class="right-box">
+                  <span class="time">开始时间：2020-08-24</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <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 banner from '@/components/BannerBreadcrumb/index.vue';
+export default {
+  name: 'EvaluateIndex',
+  components: { banner },
+  data() {
+    return {
+      value: 3,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        schoolName: undefined
+      },
+      total: 0,
+      loading: false,
+      currentClass: 0,
+      tabsList:[
+        {
+          id: 1,
+          name: '培训中'
+        },
+        {
+          id: 2,
+          name: '已报名'
+        }
+      ]
+    };
+  },
+  methods: {
+    /**
+     * 分页切换触发
+     * @date 2022-08-16
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getList();
+    },
+    /**
+     * 获取列表
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getList() {
+      this.loading = true;
+      // myInterviewList(this.queryParams).then((res) => {
+      //   this.deliverList = res.rows;
+      //   this.total = Number(res.total);
+      //   this.loading = false;
+      // });
+    },
+    tabsClick(index) {
+      this.currentClass = index
+    }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+._container {
+  width: 1200px !important;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 15px;
+  padding-left: 15px;
+  max-width: none !important;
+}
+._container:after,
+._container:before {
+  display: table;
+  content: ' ';
+  clear: both;
+}
+.breadcrumb {
+  background-color: #f5f7fa;
+  height: 70px;
+  display: flex;
+  align-items: center;
+}
+.banner-breadcrumb-breadcrumb {
+  .el-breadcrumb {
+    font-size: 18px;
+  }
+  :deep(.el-breadcrumb__inner.is-link) {
+    color: #7e7e7e;
+    font-weight: normal;
+  }
+  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
+    color: #ff0000;
+  }
+}
+.box-list {
+  background-color: #fff;
+  padding: 10px 0 80px 0;
+  display: table;
+  width: 100%;
+  .tabs {
+    padding: 10px 20px;
+    span {
+      color: #1a1a1a;
+      display: inline-block;
+      height: 35px;
+      font-size: 22px;
+      cursor: pointer;
+      margin-right: 36px;
+    }
+
+    .activeSpan {
+      color: #416050;
+      border-bottom: 4px solid #416050;
+    }
+  }
+  h1 {
+    color: #222222;
+    font-size: 26px;
+    margin: 19px 20px;
+  }
+  .deliver {
+    cursor: pointer;
+    width: 100%;
+    background: #ffffff;
+    display: flex;
+    align-items: self-start;
+    justify-content: space-between;
+    float: left;
+    margin-top: 20px;
+    .log {
+      width: 60px;
+      height: 60px;
+      background: #ffffff;
+      border: 1px solid #e2e2e2;
+      border-radius: 4px;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .center {
+      width: 300px;
+      h3 {
+        color: #1a1a1a;
+        margin-bottom: 10px;
+        font-size: 18px;
+        font-family: 'SourceHanSansCN';
+        font-weight: 400;
+      }
+      p {
+        color: #666666;
+        font-size: 14px;
+        line-height: 20px;
+        .meta_cell {
+          display: inline-block;
+          margin-right: 5px;
+        }
+        .meta_cell:after {
+          padding: 0 1px 0 4px;
+          display: inline-block;
+          color: #919090;
+          content: '|';
+        }
+        .meta_cell:last-child:after {
+          content: '';
+        }
+      }
+      .comment {
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+    .right-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: right;
+      span {
+        text-align: right;
+      }
+      .pir {
+        color: #ef651f;
+        font-size: 20px;
+      }
+      .time {
+        color: #999999;
+        font-size: 14px;
+        margin-top: 75px;
+      }
+      .postStatus {
+        line-height: 40px;
+        color: #0f0f0f;
+      }
+    }
+  }
+}
+.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;
+  }
+}
+.deliverList-box {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(0, 0, 0, 0.11);
+  padding: 10px 20px;
+  margin: 10px 20px;
+  transition: 0.5s;
+  border-radius: 3px;
+  width: 518px;
+  position: relative;
+  float: left;
+  .title-h3 {
+    color: #222222;
+    line-height: 40px;
+    font-size: 20px;
+  }
+  .line {
+    width: 4px;
+    height: 30px;
+    position: absolute;
+    background-color: #ef651f;
+    left: 0;
+    top: 16px;
+  }
+}
+.deliverList-box:hover {
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.11);
+}
+.interview-state {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dashed #ccc;
+  line-height: 50px;
+  font-size: 22px;
+  color: #3ca7fe;
+  .grey {
+    color: #999999;
+  }
+  .green {
+    color: #709078;
+  }
+  .red {
+    color: #ff3939;
+  }
+}
+.button-btn {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+}
+.video {
+  width: 200px;
+}
+</style>