案例三级添加

src/components/TypeNav.vue

@@ -0,0 +1,145 @@
+<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>

src/views/portal/case/Index.vue

@@ -4,6 +4,7 @@
       <portal-header current="case" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
     </div>
     <div class="xcontent2">
+      <TypeNav :treeList="treeList" @handleOptionClick="handleOptionClick"></TypeNav>
       <div class="xcontent2-main" style="margin-right: 30px;">
         <div class="left-div">
           <div class="search-div">
@@ -211,7 +212,7 @@
         </div>
 
       </div>
-      <div class="xcontent2-minor">
+      <!-- <div class="xcontent2-minor">
         <div id="fixd-box">
           <div class="portal-ranking ranking-bg">
             <p class="ranking-title">好评榜</p>
@@ -265,12 +266,8 @@
               </li>
             </ul>
           </div>
-          <!-- <div class="course-resources pointer"> -->
-          <!-- 资源位 -->
-          <!-- <img  @click="banJump()" :src="fileBaseUrl + resonimg.image" alt=""> -->
-          <!-- </div> -->
         </div>
-      </div>
+      </div> -->
       <div style="height: 50px;"></div>
       <el-dialog class="protocol" :close-on-click-modal="false" :visible.sync="protocolDialogVisible" width="30%"
         :show-close="false">
@@ -349,6 +346,7 @@ import apiDict from "@/api/modules/dict.js";
 import apiType from "@/api/modules/type.js";
 import { cutFullName } from "@/utils/tools.js";
 import apiPlace from "@/api/phase2/place.js"
+import TypeNav from "../../../components/TypeNav.vue";
 export default {
   name: "index",
   components: {
@@ -357,10 +355,12 @@ export default {
     portalFloatTools,
     interactBar,
     timeShow,
-    author
+    author,
+    TypeNav
   },
   data() {
     return {
+      treeList:[],
       caseType:process.env.VUE_APP_CASE_TYPE,//类型
       caseYears:[],
       refId: '',//消息跳转案例的id
@@ -626,10 +626,11 @@ export default {
     if (this.refId) {
       this.queryCondition.type = 'recommend'
     }
+    this.loadTypeData();//加载分类
     this.getAnkingData();
-    this.getPopularity();
     this.searchterm();
-    this.getPositive();
+    // this.getPopularity();
+    // this.getPositive();
     this.couresreso();
     // window.addEventListener("scroll", this.handleScroll);
     // 获取年
@@ -642,6 +643,39 @@ export default {
 
   },
   methods: {
+    handleOptionClick(treeItem){
+      console.log(treeItem);
+      this.treeList.forEach(one => {
+        one.checked = false;
+        if (one.id == treeItem.id) {
+          one.checked = true;
+        }
+        one.children && one.children.forEach(two => {
+          two.checked = false;
+          if (two.id == treeItem.id) {
+            two.checked = true
+          }
+          two.children && two.children.forEach(three => {
+            three.checked = false;
+            if (three.id == treeItem.id) {
+              three.checked = true
+            }
+          })
+        })
+      })
+    },
+        // 加载分类
+    async loadTypeData() {
+      try {
+        const { result, status } = await apiType.tree(1);
+        if (status === 200) {
+          console.log(result,'三级');
+          this.treeList = result
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
     getYears() {
       apiCase.caseYears().then(res => {
         if (res.status == 200) {