diff --git a/public/images/listblue011.png b/public/images/listblue011.png
new file mode 100644
index 00000000..92525c4e
Binary files /dev/null and b/public/images/listblue011.png differ
diff --git a/public/images/listblue012.png b/public/images/listblue012.png
new file mode 100644
index 00000000..3ef0bd51
Binary files /dev/null and b/public/images/listblue012.png differ
diff --git a/public/images/listblue013.png b/public/images/listblue013.png
new file mode 100644
index 00000000..f66f6597
Binary files /dev/null and b/public/images/listblue013.png differ
diff --git a/public/images/listblue014.png b/public/images/listblue014.png
new file mode 100644
index 00000000..bb1c209b
Binary files /dev/null and b/public/images/listblue014.png differ
diff --git a/public/images/listblue015.png b/public/images/listblue015.png
new file mode 100644
index 00000000..e35f1c07
Binary files /dev/null and b/public/images/listblue015.png differ
diff --git a/src/api/phase2/index.js b/src/api/phase2/index.js
index d0103c62..5fc681a1 100644
--- a/src/api/phase2/index.js
+++ b/src/api/phase2/index.js
@@ -1,4 +1,6 @@
 import ajax from '@/utils/xajax.js'
+import http from '../unionAjax'
+const baseURL = process.env.VUE_APP_MANAGER_API_PATH;
 
 
 /**
@@ -45,6 +47,12 @@ const articlelist=function (type){
 const courselist=function (data){
   return ajax.post('/xboe/portal/index/courselist',data);
 }
+/**
+ * 首页新课程推荐列表
+ */
+const getRecommendList=function (pageNum,pageSize){
+  return http.get(baseURL,`/recommend/page?pageNum=${pageNum}&pageSize=${pageSize}`);
+}
 
 export default {
   cases,
@@ -52,5 +60,6 @@ export default {
   qaAnswers,
   articlelist,
   courselist,
-  newCases
+  newCases,
+  getRecommendList
 }
diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss
index 9249734d..fe555aa0 100644
--- a/src/assets/styles/portal-index.scss
+++ b/src/assets/styles/portal-index.scss
@@ -510,10 +510,10 @@
     }
   }
   .xindex-ranking-li{
-    margin-top:15px;
+    margin-top:18px;
   }
   .xindex-ranking-course{
-    height: 465px;
+    height: 730px;
   }
 
   .xindex-ranking-case{
@@ -775,10 +775,10 @@
   }
 
   .xindex-ranking-li{
-    margin-top:20px;
+    margin-top:25px;
   }
   .xindex-ranking-course{
-    height: 509px;
+    height: 830px;
   }
 
   .xindex-ranking-case{
@@ -1057,10 +1057,10 @@
       }
   }
   .xindex-ranking-li{
-    margin-top:30px;
+    margin-top:35px;
   }
   .xindex-ranking-course{
-    height: 592px;
+    height: 975px;
   }
 
   .xindex-ranking-case{
@@ -1322,10 +1322,10 @@
   }
 
   .xindex-ranking-li{
-    margin-top:30px;
+    margin-top:35px;
   }
   .xindex-ranking-course{
-    height: 614px;
+    height: 1055px;
   }
 
   .xindex-ranking-case{
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 04fe9860..a8be4b6a 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -263,6 +263,58 @@
                 </div>
               </a>
             </div>
+            <!-- 推荐课程内容列表 -->
+            <div
+              v-for="(course, ccidx) in recommendedList.list"
+              :key="'rr' + ccidx"
+              class="xindex-course"
+              style="position: relative"
+            >
+              <div style="position: absolute; right: 25px; bottom: 72px">
+                <interactBar
+                  nodeWidth="20px"
+                  :courseExclusive="true"
+                  :type="1"
+                  :data="course"
+                  :comments="false"
+                  :praises="false"
+                  :shares="false"
+                  :views="false"
+                >
+                </interactBar>
+              </div>
+              <a @click="toCourseDetail(course)">
+                <div class="xindex-course-image">
+                  <course-image :course="course"></course-image>
+                  <span v-if="course.type == 20 || 10" class="course-type"
+                    >录播课</span
+                  >
+                </div>
+                <div
+                  style="width: 80%"
+                  :title="course.name"
+                  class="course-title portal-title-tow two-line-ellipsis"
+                >
+                  {{ course.name }}
+                </div>
+                <div class="course-author">
+                  <div class="course-author-left">
+                    {{ course.authorInfo.name }}
+                    <span class="study-num"
+                      >{{ formatNum(course.studys) }}人学习</span
+                    >
+                  </div>
+                  <div style="display: flex">
+                    <div v-if="course.score">
+                      <span class="course-score-value" style="margin-left: 10px"
+                        >{{ toScore(course.score) }}分</span
+                      >
+                    </div>
+                    <div v-else class="course-score-no">未评分</div>
+                  </div>
+                </div>
+              </a>
+            </div>
           </div>
         </div>
 
@@ -1004,6 +1056,10 @@ export default {
         orderType: 2,
         list: [],
       },
+      // 推荐课程
+      recommendedList:{
+        list: [],
+      },
       caseList: {
         num: 3,
         orderType: 2,
@@ -1027,6 +1083,7 @@ export default {
   },
   mounted() {
     this.getCourseData(1);
+    this.getRecommendList();
     this.getCaseData();
     this.getArticleData();
     this.getQaData();
@@ -1219,7 +1276,7 @@ export default {
     },
     getScoreList() {
       //课程排行榜
-      apiCourse.scorelist(10, 1).then((res) => {
+      apiCourse.scorelist(15, 1).then((res) => {
         if (res.status == 200) {
           res.result.forEach((item) => {
             if (item.publishTime != "") {
@@ -1280,6 +1337,29 @@ export default {
       if (this.isNext) {
         this.getCourseData(this.pageIndex);
       }
+    },
+        // 获取推荐课程list
+    getRecommendList(){
+      apiIndex.getRecommendList(1,3).then((res) => {
+        if(res.code === 200){
+          console.log(res.data.records);
+          let courseIds = [];
+          res.data.records.forEach((item) => {
+            item.authorInfo = {
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              code: "",
+              sex: null,
+            };
+            courseIds.push(item.id);
+          });
+          this.loadCouserTeacher(res.data.records, courseIds);
+          console.log(res.result,'lalalala');
+          this.recommendedList.list = res.data.records
+        }
+      })
     },
     getCourseData(pageIndex) {
       this.isNext = false;