案例添加课程分类

src/components/TypeNav.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="xcontent2-minor" style="margin-right:36px;">
-    <div class="course-title-style">
-      <div class="imgTilte">
-        <div>{{ title }}</div>
-        <div>COURSE</div>
-      </div>
-    </div>
-    <div class="course-list">
-      <div class="course-one" v-for="one in treeList" :key="one.id" @click.stop="handleOptionClick(one, 1, treeList)">
-        <div class="course-one-content">{{ one.name }}</div>
-        <div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
-          @click.stop="handleOptionClick(twoList, 2, one.children)"
-          :class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
-          @mouseenter.stop="changeIndex(twoList.id)">
-          <!-- 三级分类 -->
-          <el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
-            :disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover" :visible-arrow="false"
-            @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
-            <div class="course-two-content" slot="reference">{{ twoList.name }}</div>
-            <!-- 内容 -->
-            <div class="course-three-box">
-              <div class="course-three-box-title">
-                {{ twoList.name }}
-              </div>
-              <div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
-                <div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
-                  :key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
-                  class="course-three">
-                  <span>{{ threeList.name }}</span>
-                </div>
-              </div>
-            </div>
-          </el-popover>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'TypeNav',
-  props: {
-    title: {
-      type: String,
-      default: '课程分类'
-    },
-    treeList: {
-      type: Array,
-      default: () => []
-    },
-  },
-  data() {
-    return {
-      twoId: ''
-    }
-  },
-  methods: {
-    //三级分类
-    handleOptionClick(item, level, list) {
-      this.$emit('handleOptionClick', item)
-    },
-    // 移入
-    changeIndex(twoId) {
-      this.twoId = twoId
-    },
-    // 移除
-    leaveIndex() {
-      this.twoId = ''
-    }
-  }
-};
-</script>
-<style scoped lang="scss">
-.course-title-style {
-  position: relative;
-  height: 100px;
-  background-image: url('../../public/images/courseBg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-
-  .imgTilte {
-
-    & div:first-child {
-      padding-left: 40px;
-      font-size: 30px;
-      color: #FFFFFF;
-    }
-
-    & div:last-child {
-      padding-left: 40px;
-      font-size: 20px;
-      color: #FFFFFF;
-      opacity: .5;
-      font-family: ArialMT !important;
-    }
-
-  }
-}
-
-// 三级列表
-.course-list {
-  background-color: #fff;
-
-  .course-one {
-    position: relative;
-
-    .course-one-content {
-      cursor: pointer;
-      line-height: 38px;
-      height: 38px;
-      padding-left: 40px;
-      background: linear-gradient(270deg, #F0F7FF 0%, #DDEDFF 100%);
-    }
-
-    // 二级的高亮
-    .courseTwoActive {
-      color: #387DF7;
-      border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
-    }
-
-    .course-two {
-      position: relative;
-      border-bottom: 1px solid;
-      border-image: linear-gradient(333deg, rgba(243, 243, 243, 1), rgba(227, 227, 227, 1)) 1 1;
-
-      .course-two-content {
-        cursor: pointer;
-        height: 38px;
-        line-height: 38px;
-        font-size: 16px;
-        padding-left: 40px;
-      }
-    }
-
-    .popover {
-      background: linear-gradient(180deg, rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
-    }
-
-  }
-
-}
-</style>