12.2样式

src/pages/person-center/learn-center/ListBox.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="8" v-for="(item, index) in list" :key="index">
+      <div class="goods-item">
+        <div class="goods-item-top">
+          <img src="@/assets/tag-video.png" alt="" />
+          <p>未学习</p>
+          <p>上次观看：节名称节名称节名称</p>
+        </div>
+        <div class="goods-item-main">
+          <h2>{{ item.goodsName }}</h2>
+        </div>
+        <div class="goods-item-bom">
+          <el-button type="text" disabled>已过期</el-button>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.goods-item {
+  border: 1px solid #ebebeb;
+  border-radius: 4px;
+  margin-bottom: 18px;
+  .goods-item-top {
+    background: #f7f9fa;
+    height: 40px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    padding-left: 16px;
+    font-size: 12px;
+    p {
+      line-height: 12px;
+      color: #999999;
+      &:nth-of-type(1) {
+        color: #3f8dfd;
+        margin: 0 10px 0 4px;
+      }
+    }
+  }
+  .goods-item-main {
+    padding: 0 16px;
+    margin: 10px 0;
+    h2 {
+      font-size: 16px;
+      font-weight: 500;
+      color: #222222;
+    }
+  }
+  .goods-item-bom {
+    height: 44px;
+    border-top: 1px solid #ebebeb;
+    .el-button {
+      width: 100%;
+      &:not([disabled="disabled"]) {
+        color: #666666;
+      }
+    }
+  }
+}
+</style>

src/pages/person-center/learn-center/index.vue

@@ -35,19 +35,51 @@
         </div>
       </div>
     </div>
+    <el-tabs v-model="params.type" @tab-click="handleClick">
+      <el-tab-pane
+        v-for="tab in tabList"
+        :key="tab.lable"
+        :label="tab.lable"
+        :name="tab.name"
+      >
+        <template v-if="tab.name == '888'">
+          <div
+            class="goods-box"
+            v-for="tab in tabList.slice(1)"
+            :key="tab.lable"
+          >
+            <h3>{{ tab.lable }}</h3>
+            <List-box :list="courseList"></List-box>
+          </div>
+        </template>
+        <List-box v-else></List-box>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
+import ListBox from "./ListBox.vue";
 export default {
   data() {
     return {
       typeList: [],
       businessList: [],
-      params: { businessId: "", educationTypeId: "" },
+      params: { businessId: "", educationTypeId: "", type: "888" },
+      tabList: [
+        { lable: "全部", name: "888" },
+        { lable: "视频", name: "1" },
+        { lable: "直播", name: "2" },
+        { lable: "题库", name: "6" },
+      ],
+      dataList: [],
+      courseList: [],
     };
   },
   methods: {
+    handleClick() {
+      console.log(this.params.type);
+    },
     changeType(item) {
       if (this.params.educationTypeId == item.id) {
         return;
@@ -78,9 +110,20 @@ export default {
       }
       this.params.businessId = item.id;
     },
+    courseGoodsList() {
+      this.$request
+        .courseGoodsList({ pageNum: 1, pageSize: 10 })
+        .then((res) => {
+          this.courseList = res.rows;
+        });
+    },
   },
   created() {
     this.getEducationTypeList();
+    this.courseGoodsList()
+  },
+  components: {
+    ListBox,
   },
 };
 </script>
@@ -88,7 +131,7 @@ export default {
 <style scoped lang="scss">
 .learn-main {
   .course-classify {
-    margin: 20px 0 18px;
+    margin: 20px 0 16px;
     padding: 20px 20px 0;
     overflow: hidden;
     background: #f8f8fc;
@@ -126,5 +169,12 @@ export default {
       }
     }
   }
+  .goods-box {
+    h3 {
+      font-size: 14px;
+      color: #222222;
+      margin-bottom: 18px;
+    }
+  }
 }
 </style>