首页课程资源接口对接，样式调整

src/views/homePage/index.vue

@@ -2,7 +2,7 @@
   <div id="topAnchor">
     <nav-list :list="navList" />
     <HomeSearch />
-    <div class="home-content">
+    <div v-if="!loading" class="home-content">
       <div>
         <div class="suggestionCard" @click="handleToSuggestion">
           <img class="suggestionImg" :src="suggestion">
@@ -97,14 +97,21 @@
             </div>
             <div class="courseCard_bottom">
               <div class="courseName">{{ item.lessonName }}</div>
-              <div class="technologyList">
-                <div
-                  v-for="(childItem,childIndex) in item.technology"
-                  :key="childIndex"
-                  class="technologyClass"
-                >
-                  {{ childItem }}
+              <div class="technologyList" :title="item.mergeList">
+                <div v-if="item.mergeList && item.mergeList.length > 1" style="display: flex;align-items: center;justify-content: center">
+                  <div class="technologyClass">{{ item.mergeList[0] }}</div>
+                  <div class="technologyClassMore">...</div>
                 </div>
+                <div v-else>
+                  <div class="technologyClass">{{ item.mergeList }}</div>
+                </div>
+                <!--                <div-->
+                <!--                  v-for="(childItem,childIndex) in item.mergeList"-->
+                <!--                  :key="childIndex"-->
+                <!--                  class="technologyClass"-->
+                <!--                >-->
+                <!--                  {{ childItem }}-->
+                <!--                </div>-->
               </div>
             </div>
           </div>
@@ -207,6 +214,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       gradeOptions: [], // 课程等级字典
       tecOptions: [], // 技术分类字典
       jobOptions: [], // 岗位分类字典
@@ -334,7 +342,6 @@ export default {
     getDictData() {
       this.getDifficultyGrade() // 课程等级字典
       this.getTecClassifyGrade() // 技术分类字典
-      this.getJobClassify() // 岗位分类字典
     },
     /** 课程等级字典*/
     getDifficultyGrade() {
@@ -349,13 +356,38 @@ export default {
     /** 技术分类字典*/
     getTecClassifyGrade() {
       getDict('tec_classify').then(res => {
-        this.tecOptions = res.data
+        this.tecOptions = res.data // 技术分类字典
+        this.courseList.forEach(item => { // 循环课程list
+          if (item.tecClassify && item.tecClassify.split(',').length > 0) { // 技术分类字段可能没有也可能多个
+            const tecList = item.tecClassify.split(',') // 技术分类List
+            const tecNameList = tecList.map(items => this.tecOptions.find(i => i.dictValue === items).dictLabel)
+            this.$set(item, 'tecNameList', tecNameList)
+          } else {
+            this.$set(item, 'tecNameList', [])
+          }
+        })
+        this.getJobClassify() // 岗位分类字典
       })
     },
     /** 岗位分类字典*/
     getJobClassify() {
+      this.loading = true
       getDict('job_classify').then(res => {
-        this.jobOptions = res.data
+        this.jobOptions = res.data // 岗位分类字典
+        this.courseList.forEach(item => { // 循环课程list
+          if (item.jobClassify && item.jobClassify.split(',').length > 0) { // 岗位分类字段可能没有也可能多个
+            const jobList = item.jobClassify.split(',') // 岗位分类List
+            const jobNameList = jobList.map(items => this.jobOptions.find(i => i.dictValue === items).dictLabel)
+            this.$set(item, 'jobNameList', jobNameList)
+            // console.log('tecNameList', item.tecNameList)
+            // console.log('jobNameList', item.jobNameList)
+            this.$set(item, 'mergeList', item.tecNameList.concat(item.jobNameList))
+            // console.log('mergeList', item.mergeList)
+          } else {
+            this.$set(item, 'mergeList', [])
+          }
+        })
+        this.loading = false
       })
     },
     /** 获取推荐新闻*/
@@ -378,7 +410,6 @@ export default {
     },
     /** 回到顶部*/
     gotoTop() {
-      console.log('aaaaaaaaa')
       document.getElementById('topAnchor').scrollIntoView() // 跳转到顶部
     },
     /** 跳转意见反馈页面*/
@@ -766,19 +797,34 @@ export default {
             font-weight: 700;
           }
           .technologyList{
+            cursor: pointer;
+            padding-left: 18px;
             display: flex;
             align-items: center;
-            justify-content: center;
             .technologyClass{
               display: flex;
-              justify-content: center;
               align-items: center;
               margin: 0 3px;
               color: rgba(54,130,252,1);
               font-size: 14px;
               font-family: Microsoft YaHei, Microsoft YaHei-400;
               font-weight: 400;
-              width: 76px;
+              //width: 76px;
+              padding: 0 10px;
+              height: 28px;
+              background: rgba(55,135,252,0.15);
+              border-radius: 50px;
+            }
+            .technologyClassMore{
+              display: flex;
+              align-items: center;
+              margin: 0 3px;
+              color: rgba(54,130,252,1);
+              font-size: 14px;
+              font-family: Microsoft YaHei, Microsoft YaHei-400;
+              font-weight: 400;
+              //width: 76px;
+              padding: 0 10px 7px;
               height: 28px;
               background: rgba(55,135,252,0.15);
               border-radius: 50px;